littlejsengine 1.13.4 → 1.14.2

package/examples/platformer/gameEffects.js

@@ -82,7 +82,7 @@ export function explosion(pos, radius=3)
             GameLevel.decorateTile(pos.add(vec2(x,y)).floor());
     }
 
-    // update webgl texture
+    // update WebGL texture
     GameLevel.updateWebGL(GameLevel.foregroundTileLayer);
 
     // kill/push objects
@@ -153,7 +153,7 @@ export function destroyTile(pos, makeSound = 1, cleanup = 1)
     layer.setData(pos, new LJS.TileLayerData, true);
     layer.setCollisionData(pos, GameLevel.tileType_empty);
 
-    // cleanup neighbors and rebuild webgl
+    // cleanup neighbors and rebuild WebGL
     if (cleanup)
     {
         for (let i=-1;i<=1;++i)
@@ -216,21 +216,20 @@ export class Sky extends LJS.EngineObject
 
 export class ParallaxLayer extends LJS.CanvasLayer
 {
-    constructor(depth) 
+    constructor(pos, topColor, bottomColor, depth) 
     {
         const renderOrder = depth - 3e3;
         const canvasSize = vec2(512, 256);
-        super(vec2(), vec2(), 0, renderOrder, canvasSize);
-        this.canvasSize = canvasSize;
+        super(pos, vec2(), 0, renderOrder, canvasSize);
+        this.centerPos = pos;
         this.depth = depth;
 
         // create a gradient for the mountains
-        const topColor = GameLevel.levelColor.mutate(.2).lerp(GameLevel.sky.skyColor, .8 - depth*.15);
-        const bottomColor = GameLevel.levelColor.subtract(LJS.CLEAR_WHITE).mutate(.2);
-        for (let i = canvasSize.y; i--;)
+        const w = canvasSize.x, h = canvasSize.y;
+        for (let i = h; i--;)
         {
             // draw a 1 pixel gradient line on the left side of the canvas
-            const p = i/canvasSize.y;
+            const p = i/h;
             this.context.fillStyle = topColor.lerp(bottomColor, p);
             this.context.fillRect(0, i, 1, 1);
         }
@@ -239,40 +238,42 @@ export class ParallaxLayer extends LJS.CanvasLayer
         const pointiness = .2;  // how pointy the mountains are
         const levelness = .005; // how much the mountains level out
         const slopeRange = 1;   // max slope of the mountains
-        const startGroundLevel = canvasSize.y/2;
+        const startGroundLevel = h/2;
         let y = startGroundLevel, groundSlope = LJS.rand(-slopeRange, slopeRange);
-        for (let x=canvasSize.x; x--;)
+        for (let x=w; x--;)
         {
             // pull slope towards start ground level
             y += groundSlope -= (y-startGroundLevel)*levelness;
 
-            // random change slope
+            // randomly change slope
             if (LJS.rand() < pointiness)
                 groundSlope = LJS.rand(-slopeRange, slopeRange);
 
             // draw 1 pixel wide vertical slice of mountain
-            this.context.drawImage(this.canvas, 0, 0, 1, canvasSize.y, x, y, 1, canvasSize.y - y);
+            this.context.drawImage(this.canvas, 0, 0, 1, h, x, y, 1, h - y);
         }
 
         // remove gradient sliver from left side
-        this.context.clearRect(0,0,1,canvasSize.y);
+        this.context.clearRect(0,0,1,h);
     
-        // make webgl texture
+        // make WebGL texture
         this.useWebGL(LJS.glEnable);
     }
 
     render()
     {
+        const canvasSize = vec2(this.canvas.width, this.canvas.height);
         const depth = this.depth
         const distance = 4 + depth;
         const parallax = vec2(150, 30).scale(depth**2+1);
-        const levelCenter = GameLevel.levelSize.scale(.5);
-        const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter).divide(levelCenter.scale(-1).divide(parallax));
+        const levelCenter = this.centerPos;
+        const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter)
+            .divide(levelCenter.scale(-1).divide(parallax));
         const scale = distance/LJS.cameraScale;
         const positonOffset = vec2(0, 2-depth);
         const cameraOffset = cameraDeltaFromCenter.scale(1/LJS.cameraScale);
         this.pos = LJS.cameraPos.add(positonOffset).add(cameraOffset);
-        this.size = this.canvasSize.scale(scale);
+        this.size = canvasSize.scale(scale);
         super.render();
     }
 }

package/examples/platformer/gameLevel.js

@@ -39,7 +39,12 @@ export function buildLevel()
 
     // create parallax layers
     for (let i=3; i--;)
-        new GameEffects.ParallaxLayer(i);
+    {
+        const pos = levelSize.scale(.5);
+        const topColor = levelColor.mutate(.2).lerp(sky.skyColor, .8 - i*.15);
+        const bottomColor = levelColor.subtract(LJS.CLEAR_WHITE).mutate(.2);
+        new GameEffects.ParallaxLayer(pos, topColor, bottomColor, i );
+    }
 }
 
 function loadLevelData()

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1133></script>
+<script src=../../dist/littlejs.js?1134></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/shorts/flappyGame.js

@@ -28,6 +28,7 @@ class Player extends EngineObject
         if (mouseWasPressed(0) || keyWasPressed('Space'))
             this.velocity = vec2(0,.2);
         this.angle = -this.velocity.y*2;
+        this.pos.y = max(-50, this.pos.y);
     }
 
     collideWithObject(object)
@@ -44,7 +45,7 @@ function gameInit()
     gravity.y = -.01;
     for (let i=100; i--;)
     {
-        const h=50, y=-h/2-6+rand(9), spacing=15, gap=5;
+        const h=100, y=-h/2-6+rand(9), spacing=15, gap=5;
         new Wall(vec2(14 + i*spacing,y+h + gap), vec2(3,h));
         new Wall(vec2(14 + i*spacing,y), vec2(3,h));
     }

package/examples/shorts/helloWorld.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // draw background rect
-    drawRect(cameraPos, vec2(30), hsl(0,0,.2));
+    drawRect(cameraPos, vec2(50), hsl(0,0,.2));
 
     // draw text to the overlay canvas
     drawTextOverlay('Hello World', vec2(0,3), 3);

package/examples/shorts/music.js

@@ -0,0 +1,106 @@
+// Music player variables
+let musicSound = new SoundWave('song.mp3');
+let musicVolume = .8;
+let musicInstance;
+
+// UI elements
+let playButton, stopButton, progressBar;
+
+function gameInit()
+{
+    // load ui system plugin
+    new UISystemPlugin;
+    uiSystem.defaultSoundPress = new Sound([.3,0,220]);
+    uiSystem.defaultSoundClick = new Sound([.3,0,440]);
+    uiSystem.defaultCornerRadius = 20;
+
+    // setup music player UI
+    const musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+
+    // title
+    const title = new UIText(vec2(0, -100), vec2(500, 40), 'LittleJS Music Player');
+    musicPlayer.addChild(title);
+
+    // volume slider
+    const volumeSlider = new UIScrollbar(vec2(0, -40), vec2(400, 30), musicVolume, 'Music Volume');
+    musicPlayer.addChild(volumeSlider);
+    volumeSlider.onChange = () => 
+    {
+        musicVolume = volumeSlider.value;
+        if (musicInstance) 
+            musicInstance.setVolume(musicVolume);
+    };
+
+    // play button
+    playButton = new UIButton(vec2(-90, 30), vec2(140, 50), 'Play');
+    musicPlayer.addChild(playButton);
+    playButton.onClick = ()=>
+    {
+        if (!musicSound.isLoaded())
+            return;
+        
+        // handle play/pause toggle
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume);
+        else if (musicInstance.isPaused())
+            musicInstance.resume();
+        else
+            musicInstance.pause();
+    };
+
+    // stop button
+    stopButton = new UIButton(vec2(90, 30), vec2(140, 50), 'Stop');
+    musicPlayer.addChild(stopButton);
+    stopButton.onClick = ()=>
+    {
+        if (!musicInstance)
+            return;
+
+        // stop sound
+        musicInstance.stop();
+    };
+
+    // progress bar and scrollbar for seeking
+    progressBar = new UIScrollbar(vec2(0, 100), vec2(400, 30), 0, 'Progress');
+    musicPlayer.addChild(progressBar);
+    progressBar.onChange = ()=> 
+    {
+        // control music seek position
+        const wasPlaying = musicInstance && musicInstance.isPlaying();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume, true, true);
+        progressBar.value = min(progressBar.value, .999); // prevent looping around
+        const seekTime = progressBar.value * musicSound.getDuration();
+        musicInstance.start(seekTime);
+        if (!wasPlaying)
+            musicInstance.pause();
+    };
+}
+
+function gameUpdate()
+{
+    // disable buttons while loading or waiting for interaction
+    const isDisabled = !musicSound.isLoaded() || !audioIsRunning();
+    playButton.disabled  = isDisabled
+    stopButton.disabled  = isDisabled
+    progressBar.disabled = isDisabled
+
+    // update ui
+    if (!musicSound.isLoaded())
+    {
+        // update loading progress
+        const loadingPercent = musicSound.loadedPercent * 100;
+        progressBar.text = `Loading: ${(loadingPercent).toFixed(2)}%`;
+    }
+    else
+    {
+        // update ui text
+        playButton.text = !musicInstance || !musicInstance.isPlaying() ? 'Play' : 'Pause';
+        const currentTime = musicInstance ? musicInstance.getCurrentTime() : 0;
+        const duration = musicSound.getDuration();
+        if (!progressBar.mouseIsHeld)
+            progressBar.value = currentTime / duration;
+        const timeText = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+        progressBar.text = audioIsRunning() ? timeText : 'Click to Enable Audio';
+    }
+}

package/examples/shorts/parallax.js

@@ -0,0 +1,71 @@
+function gameInit()
+{
+    // create parallax layers
+    const levelColor = hsl(rand(), .5, .5);
+    for (let i=3; i--;)
+    {
+        const topColor = levelColor.mutate(.3);
+        const bottomColor = levelColor.subtract(CLEAR_WHITE).mutate(.3);
+        new ParallaxLayer(topColor, bottomColor, i);
+    }
+}
+
+class ParallaxLayer extends CanvasLayer
+{
+    constructor(topColor, bottomColor, depth) 
+    {
+        const renderOrder = depth;
+        const canvasSize = vec2(512, 256);
+        super(vec2(), vec2(), 0, renderOrder, canvasSize);
+        this.depth = depth;
+
+        // create a gradient for the mountains
+        const w = canvasSize.x, h = canvasSize.y;
+        for (let i = h; i--;)
+        {
+            // draw a 1 pixel gradient line on the left side of the canvas
+            const p = i/h;
+            this.context.fillStyle = topColor.lerp(bottomColor, p);
+            this.context.fillRect(0, i, 1, 1);
+        }
+
+        // draw random mountains
+        const pointiness = .2;  // how pointy the mountains are
+        const levelness = .005; // how much the mountains level out
+        const slopeRange = 1;   // max slope of the mountains
+        const startGroundLevel = h/2;
+        let y = startGroundLevel, groundSlope = rand(-slopeRange, slopeRange);
+        for (let x=w; x--;)
+        {
+            // pull slope towards start ground level
+            y += groundSlope -= (y-startGroundLevel)*levelness;
+
+            // randomly change slope
+            if (rand() < pointiness)
+                groundSlope = rand(-slopeRange, slopeRange);
+
+            // draw 1 pixel wide vertical slice of mountain
+            this.context.drawImage(this.canvas, 0, 0, 1, h, x, y, 1, h - y);
+        }
+
+        // remove gradient sliver from left side
+        this.context.clearRect(0,0,1,h);
+    
+        // make WebGL texture
+        this.useWebGL(glEnable);
+    }
+
+    render()
+    {
+        const canvasSize = vec2(this.canvas.width, this.canvas.height);
+        const viewerPos = mousePos;
+        const depth = this.depth
+        const distance = 3 + depth;
+        const parallax = vec2(.2, .05).scale(depth**2+1);
+        const cameraDeltaFromCenter = viewerPos.multiply(parallax);
+        const positonOffset = vec2(0, 4-depth*3);
+        this.pos = cameraDeltaFromCenter.add(positonOffset)
+        this.size = canvasSize.scale(distance/cameraScale);
+        super.render();
+    }
+}

package/examples/shorts/piano.js

@@ -13,19 +13,18 @@ class PianoKey extends EngineObject
     }
     press()
     {
-        if (!this.isDown)
-            pianoSound.playNote(this.semitone);
-        this.isDown = true;
+        if (!this.soundInstance)
+            this.soundInstance = pianoSound.playNote(this.semitone);
     }
     release()
     {
-        if (this.isDown)
-            pianoSound.stop(.2);
-        this.isDown = false;
+        if (this.soundInstance)
+            this.soundInstance.stop(.2);
+        this.soundInstance = 0;
     }
     render()
     {
-        const color = this.isDown ? RED : this.color;
+        const color = this.soundInstance ? RED : this.color;
         drawRect(this.pos, this.drawSize, color);
     }
 }
@@ -42,7 +41,7 @@ function gameInit()
 function gameUpdate()
 {
     // update state of piano keys
-    const pressedKey = keys.find(k=>k.isDown);
+    const pressedKey = keys.find(k=>k.soundInstance);
     const newPressedKey = mouseIsDown(0) && keys.find(k=>isOverlapping(k.pos, k.size, mousePos));
     if (newPressedKey != pressedKey)
     {

package/examples/shorts/postProcess.js

@@ -6,7 +6,7 @@ function gameInit()
 function gameRender()
 {
     drawRect(vec2(), vec2(99), GRAY);
-    drawTile(vec2(), vec2(12), tile(3,128));
+    drawTile(vec2(Math.sin(time)*3, 0), vec2(12), tile(3,128));
 }
 
 const tvShader = `
@@ -16,27 +16,44 @@ float hash(vec2 p)
     p=fract(p*.3197);
     return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
 }
-float noise(vec2 p)
-{
-    vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
-    return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);
-}
+
 void mainImage(out vec4 c, vec2 p)
 {
     // setup the shader
+    vec2 uv = p;
     p /= iResolution.xy;
     c = texture(iChannel0, p);
 
     // static noise
     const float staticAlpha = .1;
-    const float staticScale = .005;
+    const float staticScale = .002;
     c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
 
     // scan lines
     const float scanlineScale = 2.;
-    const float scanlineAlpha = .3;
+    const float scanlineAlpha = .5;
     c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
 
+    {
+        // bloom effect
+        const float blurSize = .002;
+        const float bloomIntensity = .2;
+
+        // 5-tap Gaussian blur
+        vec4 bloom = vec4(0);
+        bloom += texture(iChannel0, p + vec2(-2.*blurSize, 0)) * .12;
+        bloom += texture(iChannel0, p + vec2(   -blurSize, 0)) * .24;
+        bloom += texture(iChannel0, p)                         * .28;
+        bloom += texture(iChannel0, p + vec2(    blurSize, 0)) * .24;
+        bloom += texture(iChannel0, p + vec2( 2.*blurSize, 0)) * .12;
+        bloom += texture(iChannel0, p + vec2(0, -2.*blurSize)) * .12;
+        bloom += texture(iChannel0, p + vec2(0,    -blurSize)) * .24;
+        bloom += texture(iChannel0, p)                         * .28;
+        bloom += texture(iChannel0, p + vec2(0,     blurSize)) * .24;
+        bloom += texture(iChannel0, p + vec2(0,  2.*blurSize)) * .12;
+        c += bloom * bloomIntensity;
+    }
+
     // black vignette around edges
     const float vignette = 2.;
     const float vignettePow = 6.;

package/examples/shorts/shapes.js

@@ -2,15 +2,7 @@ function gameRender()
 {
     // polygon shapes
     for (let j=3; j<7; ++j)
-    {
-        let points = [];
-        for (let i=0; i<j; ++i)
-        {
-            let angle = i * Math.PI * 2 / j;
-            points.push(vec2(j*4-18,0).add(vec2(0,1).rotate(angle)));
-        }
-        drawPoly(points, hsl(j/4+time/9,1,.5)); // draw a regular polygon
-    }
+        drawRegularPoly(vec2(j*4-18,0), vec2(1), j, hsl(j/4+time/9,1,.5), .2, WHITE, time);
 
     // circles and ellipses
     drawCircle(vec2(0,5), 1+wave(.5), hsl(.15,1,.5));

package/examples/shorts/uiSystem.js

@@ -11,26 +11,33 @@ function gameInit()
     uiSystem.defaultCornerRadius = 8;
 
     // setup example menu
-    uiMenu = new UIObject(mainCanvasSize.scale(.5));
-    const uiBackground = new UIObject(vec2(), vec2(400));
-    uiMenu.addChild(uiBackground);
+    uiBackground = new UIObject(mainCanvasSize.scale(.5), vec2(1e5));
+    uiBackground.color = hsl(0,0,.8);
+    const uiMenu = new UIObject(vec2(), vec2(450));
+    uiBackground.addChild(uiMenu);
 
     // example text
-    const textTitle = new UIText(vec2(0,-100), vec2(400, 60), 'LittleJS UI\nSystem Demo');
+    const textTitle = new UIText(vec2(0,-120), vec2(400, 60), 'LittleJS UI\nSystem Demo');
     uiMenu.addChild(textTitle);
 
     // example button
-    const button1 = new UIButton(vec2(70,40), vec2(100), 'Test');
-    button1.textHeight = 40;
+    const button1 = new UIButton(vec2(70,0), vec2(140, 80), 'Test');
+    button1.textHeight = 60;
     uiMenu.addChild(button1);
     button1.onClick = ()=> uiBackground.color = randColor();
 
     // example checkbox
-    const checkbox = new UICheckbox(vec2(-70,40), vec2(50));
+    const checkbox = new UICheckbox(vec2(-70,0), vec2(50));
+    checkbox.onChange = ()=> button1.disabled = checkbox.checked;
     uiMenu.addChild(checkbox);
 
+    // example scrollbar
+    const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), soundVolume, 'Volume');
+    uiMenu.addChild(scrollbar);
+    scrollbar.onChange = ()=> setSoundVolume(scrollbar.value);
+
     // exit button
-    const button2 = new UIButton(vec2(0,140), vec2(300, 50), 'Exit Menu');
+    const button2 = new UIButton(vec2(0,170), vec2(300, 50), 'Exit Menu');
     button2.textHeight = 40;
     uiMenu.addChild(button2);
     button2.onClick = ()=> uiMenu.visible = false;

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1133></script>
+<script src=../../dist/littlejs.js?1136></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engineDebug.js></script>
@@ -31,4 +31,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1133></script>
+<script src=game.js?1136></script>

package/examples/stress/index.html

@@ -21,7 +21,7 @@ import * as LJS from '../../dist/littlejs.esm.min.js';
 const {vec2, rgb} = LJS;
 
 // keep our own list of simple sprites and track fps
-let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor;
+let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor, musicInstance;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -59,8 +59,13 @@ function gameInit()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (LJS.mouseWasPressed(0) && !music.getSource())
-        music.play();
+    if (LJS.mouseWasPressed(0))
+    {
+        if (!musicInstance)
+            musicInstance = music.play();
+        else if (!musicInstance.isPlaying())
+            musicInstance.start();
+    }
 
     // mouse click = change color
     if (LJS.mouseWasPressed(0) || LJS.mouseIsDown(2))

package/examples/style.css

@@ -30,22 +30,27 @@ iframe
 #selectExample
 {
     flex-grow: 1;
+    min-height: 100px;
+}
+#divTextareas
+{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 300px;
 }
 .CodeMirror,
 #textareaCode
 {
     flex-grow: 1;
-    padding: 5px;
     resize: none;
     color: #fff;
     background: #000;
-    font-size: 20px;
 }
 #textareaConsole,
 #textareaError
 {
     flex-grow: .3;
-    padding: 5px;
     resize: none;
     display: none;
     color:#f22;
@@ -79,9 +84,10 @@ iframe
 {
     margin: 0px;
     text-align: center;
-    font-size: 20px;
+    font-size: 15px;
     display: inline-block;
     align-self: center;
+    font-style: italic;
 }
 select
 {
@@ -117,6 +123,10 @@ input[type='checkbox']:disabled
 {
     background-color: #f004 !important;
 }
+.nowrap
+{
+    white-space:nowrap;
+}
 
 /*  LittleJS CodeMirror Theme */
 .cm-s-littlejs.CodeMirror { background: #080808; color: #aef; }

package/examples/uiSystem/game.js

@@ -54,26 +54,26 @@ function createUI()
     // example tile image
     const tileTest = new LJS.UITile(vec2(150,-130), vec2(110), tile(3,128))
     uiMenu.addChild(tileTest);
-
-    // example checkbox
-    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
-    uiMenu.addChild(checkbox);
-    checkbox.onChange = ()=> console.log('Checkbox clicked');
-
-    // text attached to checkbox
-    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
-    checkbox.addChild(checkboxText);
-
     // example scrollbar
     const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));
     uiMenu.addChild(scrollbar);
-    scrollbar.onChange  = ()=> console.log('New scrollbar value:', scrollbar.value);
+    scrollbar.onChange = ()=> scrollbar.text = scrollbar.value.toFixed(2)
+    scrollbar.onChange();
 
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
     button1.onClick = ()=> console.log('Button 1 clicked');
 
+    // example checkbox
+    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
+    uiMenu.addChild(checkbox);
+    checkbox.onChange = ()=> button1.disabled = checkbox.checked;
+
+    // text attached to checkbox
+    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
+    checkbox.addChild(checkboxText);
+
     // exit button
     const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
     uiMenu.addChild(button2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.13.4",
+  "version": "1.14.2",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",