littlejsengine 1.13.4 → 1.14.4

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

@@ -1,24 +1,18 @@
 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
-    }
-
     // circles and ellipses
-    drawCircle(vec2(0,5), 1+wave(.5), hsl(.15,1,.5));
-    drawEllipse(vec2(-5,5), vec2(2,1), hsl(0,1,.5));
-    drawEllipse(vec2(5,5), vec2(.5,2), hsl(.55,1,.5), .5);
+    drawCircle(vec2(0,5), 1+wave(.5), RED);
+    drawEllipse(vec2(-6,5), vec2(1,1), YELLOW, .5);
+    drawEllipse(vec2(6,5), vec2(1,2), CLEAR_BLACK, .3, .5, CYAN)
+
+    // polygon shapes
+    drawRectGradient(vec2(-6,0), vec2(5,4), RED, BLUE)
+    drawRegularPoly(vec2(0,0), vec2(2), 3, PURPLE, .2, WHITE, time);
+    const starPath = [vec2(0,2), vec2(2,-2), vec2(-3,.5), vec2(3,.5), vec2(-2,-2), vec2(0,2)];
+    drawLineList(starPath, .2, MAGENTA, true, vec2(6, 0));
 
     // rects and lines
-    drawRect(vec2(0,-5), vec2(4,3), hsl(.6,1,.5), time);
-    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1, .5));
-    drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));
+    drawRect(vec2(0,-5), vec2(4,3), ORANGE, time);
+    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1,.5));
+    drawLineList([vec2(5,-3), vec2(-5,-3), vec2(5,-7), vec2(-5,-7)], .2, GREEN);
 }

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, hasClicked;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -59,16 +59,14 @@ function gameInit()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (LJS.mouseWasPressed(0) && !music.getSource())
-        music.play();
-
     // mouse click = change color
     if (LJS.mouseWasPressed(0) || LJS.mouseIsDown(2))
     {
+        hasClicked = true;
         spriteColor = LJS.randColor();
         spriteAdditiveColor = LJS.randColor(rgb(.5,.5,.5, 0), rgb(0,0,0,0));
     }
-
+    
     // right click = drop test object
     if (LJS.mouseIsDown(2))
         new TestObject(LJS.mousePos);
@@ -87,9 +85,18 @@ function gameUpdate()
                 additiveColor:spriteAdditiveColor.rgbaInt()
             });
     }
-
+    
     // mouse wheel = zoom
     LJS.setCameraScale(LJS.clamp(LJS.cameraScale*(1-LJS.mouseWheel/10), 1, 1e3));
+    
+    // mouse click = play music
+    if (hasClicked)
+    {
+        if (!musicInstance)
+            musicInstance = music.play();
+        else if (!musicInstance.isPlaying())
+            musicInstance.start();
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -162,5 +169,5 @@ LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost,
 
 ///////////////////////////////////////////////////////////////////////////////
 // music - Depp Loop
-const music = new LJS.ZzFXMusic([[[.6,0,43,,,1,1,.5,,,,,.1,,,.05,,.5,.4,.2],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
+const music = new LJS.ZzFXMusic([[[.6,0,77,,,1,1,.5,,,,,.1,,,.05,,.5,.4,.2],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
 </script>

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/typescript/build.js

@@ -23,7 +23,7 @@ fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
 console.log(`Compiling TypeScript...`);
 // Compile all TypeScript files at once
 const tsFiles = tsSourceFiles.join(' ');
-child_process.execSync(`npx tsc ${tsFiles} --outDir "./${BUILD_FOLDER}" --target es2020 --module es2020`, {stdio: 'inherit'});
+child_process.execSync(`npx tsc ${tsFiles} --outDir './${BUILD_FOLDER}' --target es2020 --module es2020`, {stdio: 'inherit'});
 console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
 
 console.log(`Moving js files back to root...`);

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.4",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/box2d.js

@@ -88,14 +88,14 @@ class Box2dObject extends EngineObject
         if (this.tileInfo)
             super.render();
         else
-            this.drawFixtures(this.color, this.lineColor, this.lineWidth, mainContext);
+            this.drawFixtures(this.color, this.lineColor, this.lineWidth);
     }
 
     /** Render debug info */
     renderDebugInfo()
     {
         const isAsleep = !this.getIsAwake();
-        const isStatic = this.getBodyType() == box2d.bodyTypeStatic;
+        const isStatic = this.getBodyType() === box2d.bodyTypeStatic;
         const color = rgb(isAsleep?1:0, isAsleep?1:0, isStatic?1:0, .5);
         this.drawFixtures(color);
     }
@@ -1563,7 +1563,7 @@ class Box2dPlugin
         queryCallback.ReportFixture = function(fixturePointer)
         {
             const fixture = box2d.instance.wrapPointer(fixturePointer, box2d.instance.b2Fixture);
-            if (dynamicOnly && fixture.GetBody().GetType() != box2d.instance.b2_dynamicBody)
+            if (dynamicOnly && fixture.GetBody().GetType() !== box2d.instance.b2_dynamicBody)
                 return true; // continue getting results
             if (!fixture.TestPoint(box2d.vec2dTo(pos)))
                 return true; // continue getting results
@@ -1592,7 +1592,7 @@ class Box2dPlugin
      *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context=drawContext)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -1602,20 +1602,20 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                drawPoly(points, color, lineWidth, lineColor, pos, angle, false, false, context);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius, color, lineWidth, lineColor, false, false, context);
+                drawCircle(pos, radius*2, color, lineWidth, lineColor);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                drawLine(v1, v2, lineWidth, lineColor, pos, angle, false, false, context);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
                 break;
             }
         }
@@ -1694,7 +1694,9 @@ class Box2dPlugin
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** Box2d Init - Call with await before starting LittleJS to init box2d
+/** Box2d Init - Call with await to init box2d
+ *  @example
+ *  await box2dInit();
  *  @return {Promise<Box2dPlugin>}
  *  @memberof Box2D */
 async function box2dInit()
@@ -1757,14 +1759,14 @@ async function box2dInit()
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
         };
         debugDraw.DrawSolidCircle = function(center, radius, axis, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
             axis = box2d.vec2FromPointer(axis).scale(radius);
-            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, color, debugLineWidth, color, false, false, overlayContext);
             drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)