littlejsengine 1.14.11 → 1.14.16

package/examples/shorts/sequencer.js

@@ -0,0 +1,122 @@
+const stepCount = 8, trackCount = 12, sequencer = [];
+let currentStep = 0, stepTime = 0, tempo = 240;
+let isPlaying = false, eraseMode = false;
+
+// sound sequencer instruments
+const sound_piano = new Sound([.4,0,220,,.1]);
+const sound_drumKick = new Sound([,,99,,,.02,,,,,,,,2]);
+const sound_drumHat = new Sound([,,1e3,,,.01,4,,,,,,,,,,,,,,4e3]);
+
+// musical note scales
+const majorScale = [0,2,4,5,7,9,11];
+const minorScale = [0,2,3,5,7,8,10];
+const pentatonicScale = [0,3,5,7,10];
+const scale = majorScale;
+
+class UISequencerButton extends UIButton
+{
+    constructor(step, track)
+    {
+        const size = vec2(68, 35);
+        let pos = vec2(step, trackCount-1-track);
+        pos = pos.multiply(size);
+        pos = pos.add(vec2(240, 40));
+        super(pos, size);
+
+        this.step = step;
+        this.track = track;
+        this.cornerRadius = 0;
+        this.dragActivate = true;
+        this.isOn = false;
+
+        // set instrument and color based on track
+        const pianoStart = 2;
+        this.hue = track*.15;
+        if (track >= pianoStart)
+        {
+            const octave = Math.floor((track-pianoStart) / scale.length);
+            const scaleNote = (track-pianoStart) % scale.length;
+            this.semitone = scale[scaleNote] + 12*octave;
+            this.sound = sound_piano;
+            this.hue = .6 - scaleNote/40 + octave*.2;
+        }
+        else
+            this.sound = [sound_drumKick, sound_drumHat][track];
+    }
+    onPress()
+    {
+        // set the button on/off and update sequencer table
+        if (mouseWasPressed(0))
+            eraseMode = this.isOn;
+        this.isOn = !eraseMode;
+        eraseMode || this.playSound();
+        const index = this.step + this.track*stepCount;
+        sequencer[index] = eraseMode ? 0 : this;
+    }
+    render()
+    {
+        this.activeColor = eraseMode ? RED : WHITE;
+        this.color = this.isActiveObject() ? BLACK : 
+            hsl(this.hue, this.isOn ? 1 : .5, this.isOn ? .5 : .1); 
+        if (isPlaying && this.step == currentStep)
+            this.color = this.color.lerp(WHITE, .5);
+        super.render();
+    }
+    playSound() { this.sound.playNote(this.semitone); }
+}
+
+function gameInit()
+{
+    // initialize UI system
+    new UISystemPlugin;
+    uiSystem.defaultCornerRadius = 8;
+    canvasClearColor = hsl(0,0,.3);
+
+    // create sequencer buttons
+    for (let step=stepCount; step--;)
+    for (let track=trackCount; track--;)
+        new UISequencerButton(step, track);
+
+    // create play/stop button
+    const playButton = new UIButton(vec2(660,500), vec2(180,60), 'PLAY');
+    playButton.onClick = ()=>
+    {
+        isPlaying = !isPlaying;
+        currentStep = stepTime = 0;
+        playButton.text = isPlaying ? 'STOP' : 'PLAY';
+    };
+
+    // create tempo slider
+    const minTempo = 120, maxTempo = 480;
+    const tempoPercent = percent(tempo, minTempo, maxTempo);
+    const tempoSlider = new UIScrollbar(vec2(380,500), vec2(340,40), tempoPercent);
+    tempoSlider.onChange = ()=>
+    {
+        tempo = lerp(minTempo, maxTempo, tempoSlider.value);
+        tempo = Math.floor(tempo/10) * 10; // round to nearest 10th
+        tempoSlider.text = `${tempo} BPM`;
+    };
+    tempoSlider.onChange();
+}
+
+function gameUpdate()
+{
+    if (!isPlaying)
+        return;
+
+    // update step time based on tempo
+    const lastStepTime = stepTime;
+    const lastStep = currentStep;
+    stepTime += timeDelta*tempo/60;
+    currentStep = Math.floor(stepTime) % stepCount;
+    if (currentStep == lastStep && lastStepTime)
+        return;
+
+    // play sounds when step changes
+    for (let i=trackCount; i--;)
+    {
+        const index = currentStep + i*stepCount;
+        const noteButton = sequencer[index];
+        noteButton && noteButton.playSound();
+    }
+}

package/examples/shorts/shapes.js

@@ -7,12 +7,15 @@ function gameRender()
 
     // polygon shapes
     drawRectGradient(vec2(-6,0), vec2(5,4), RED, BLUE)
-    drawRegularPoly(vec2(0,0), vec2(4), 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, GREEN, true, vec2(6, 0));
+    drawRegularPoly(vec2(0,0), vec2(4), 3, PURPLE, .3, WHITE, time);
+    let starPath = []
+    for (let i=10; i--;)
+        starPath.push(vec2(0,2*(i%2?.4:1)).rotate(i/10*PI*2));
+    drawPoly(starPath, BLUE, .1, GREEN, vec2(6, 0));
 
     // rects and lines
     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, MAGENTA);
+    const zPath = [vec2(5,-3), vec2(-5,-3), vec2(5,-7), vec2(-5,-7)];
+    drawLineList(zPath, .4, MAGENTA);
 }

package/examples/shorts/slidingPuzzle.js

@@ -19,7 +19,8 @@ class PuzzlePiece extends EngineObject
     {
         const deltaX = emptyGridPos.x - this.gridPos.x;
         const deltaY = emptyGridPos.y - this.gridPos.y;
-        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
+        if (mouseWasPressed(0))
+        if (isOverlapping(this.pos, this.size, mousePos))
         if (abs(deltaX) + abs(deltaY) === 1)
         {
             // swap with empty space when clicked on
@@ -32,7 +33,8 @@ class PuzzlePiece extends EngineObject
 
     render()
     {
-        const pos = this.lastPos.lerp(this.pos, this.moveTimer.getPercent());
+        const movePercent = this.moveTimer.getPercent();
+        const pos = this.lastPos.lerp(this.pos, movePercent);
         drawRect(pos, this.size, this.color);
         drawTextOverlay(this.text, pos, 2.5, BLACK);
     }

package/examples/shorts/sound.js

@@ -14,13 +14,22 @@ function gameInit()
         button.textHeight = 100;
         button.onClick = ()=> sound.play();
     }
-    makeSoundButton(vec2(-1, 1),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
-    makeSoundButton(vec2( 0, 1),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
-    makeSoundButton(vec2( 1, 1),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
-    makeSoundButton(vec2(-1, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
-    makeSoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
-    makeSoundButton(vec2( 1, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
-    makeSoundButton(vec2(-1,-1),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
-    makeSoundButton(vec2( 0,-1),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
-    makeSoundButton(vec2( 1,-1),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
+    makeSoundButton(vec2(-1, 1),'💰', 
+        new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
+    makeSoundButton(vec2( 0, 1),'🥊', 
+        new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
+    makeSoundButton(vec2( 1, 1),'✨', 
+        new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
+    makeSoundButton(vec2(-1, 0),'🐁', 
+        new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
+    makeSoundButton(vec2( 0, 0),'🎹', 
+        new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
+    makeSoundButton(vec2( 1, 0),'🏌️', 
+        new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
+    makeSoundButton(vec2(-1,-1),'🌊', 
+        new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
+    makeSoundButton(vec2( 0,-1),'🛰️', 
+        new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
+    makeSoundButton(vec2( 1,-1),'⚡', 
+        new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
 }

package/examples/shorts/spaceGame.js

@@ -15,13 +15,16 @@ class Player extends EngineObject
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .005);
-        this.applyAcceleration(vec2().setAngle(this.angle, moveInput.y*.02));
-        if (!this.shootTimer.active() && (keyIsDown('Space') || mouseIsDown(0)))
+        const accel = vec2().setAngle(this.angle, moveInput.y*.02);
+        this.applyAcceleration(accel);
+        if (!this.shootTimer.active())
+        if (keyIsDown('Space') || mouseIsDown(0))
         {
             // shoot bullet
             const pos = this.pos.add(vec2(0,1).rotate(cameraAngle));
-            const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle, YELLOW);
-            bullet.velocity = this.velocity.add(vec2(0,.5).rotate(this.angle));
+            const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle);
+            bullet.velocity = vec2(0,.5).rotate(this.angle);
+            bullet.velocity = bullet.velocity.add(this.velocity);
             this.shootTimer.set(.1);
         }
 
@@ -42,14 +45,15 @@ function gameRender()
     const range = 32, halfRange = range/2;
 
     // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = WHITE;
+    const pos = vec2(), size = vec2(), color = rgb();
+    const x = cameraPos.x, y = cameraPos.y;
     for (let i=1e3; i--;)
     {
         // use math to generate random star positions
         const parallax = i%.13-1;
-        pos.x = mod(i**2.1 + cameraPos.x*parallax, range) + cameraPos.x - halfRange;
-        pos.y = mod(i**3.1 + cameraPos.y*parallax, range) + cameraPos.y - halfRange;
-        size.x = size.y = i%.07+.03;
+        pos.x = mod(i**2.1 + x*parallax, range) + x - halfRange;
+        pos.y = mod(i**3.1 + y*parallax, range) + y - halfRange;
+        size.x = size.y = i%.07 + .03;
         color.a = .1+i%.9;
         drawRect(pos, size, color);
     }

package/examples/shorts/spriteAtlas.js

@@ -1,5 +1,4 @@
 let spriteAtlas;
-canvasClearColor = GRAY;
 
 function gameInit()
 {
@@ -13,18 +12,19 @@ function gameInit()
         circleBig: gameTile(2, 128),
         iconBig:   gameTile(3, 128),
     };
+    canvasClearColor = GRAY;
 }
 
 function gameRender()
 {
     // draw a sprite from the atlas
-    let pos = vec2(Math.sin(time)*5,-3);// world position to draw
-    let angle = 0;                      // world space angle to draw the tile
-    let size = vec2(9);                 // world size of the tile
+    let pos = vec2(Math.sin(time)*5,-3);// world position
+    let angle = 0;                      // world space angle
+    let size = vec2(9);                 // world space size
     let mirror = 0;                     // should tile be mirrored?
-    let color = hsl(0,0,1);             // color to multiply the tile by
-    let additiveColor = hsl(0,0,0,0);   // color to add to
-    drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additiveColor);
+    let color = hsl(0,0,1);             // color to multiply by
+    let additive = hsl(0,0,0,0);        // color to add to
+    drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additive);
 
     // draw more sprites from the atlas
     drawTile(vec2(-7,4), vec2(5), spriteAtlas.crate);

package/examples/shorts/starfield.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = new Color;
+    const pos = vec2(), size = vec2(), color = rgb();
     for (let i=2e3; i--;)
     {
         // use math to generate random star positions

package/examples/shorts/systemFont.js

@@ -2,7 +2,7 @@ function gameRender()
 {
     // draw text with built in font image system font
     const font = new FontImage;
-    font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2, true);
+    font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2);
 
     // show every character in the system font
     let s = '';
@@ -12,5 +12,5 @@ function gameRender()
             s += '\n';
         s += String.fromCharCode(i);
     }
-    font.drawText(s, cameraPos, .1, true);
+    font.drawText(s, cameraPos, .1);
 }

package/examples/shorts/texture.js

@@ -4,8 +4,8 @@ function gameRender()
     let pos = vec2(0,0);             // world position to draw
     let size = vec2(15);             // world size of the tile
     let color = hsl(0,0,1);          // color to multiply the tile by
-    let tilePos  = vec2(0,0);        // top left corner of tile in pixels
-    let tileSize = vec2(256);        // size of tile in pixels
+    let tilePos  = vec2(0,0);        // top left corner in pixels
+    let tileSize = vec2(256);        // source size in pixels
     let tileInfo = new TileInfo(tilePos, tileSize); // tile info
     drawRect(pos, size, GRAY);       // draw background
     drawTile(pos, size, tileInfo, color);

package/examples/shorts/tileLayer.js

@@ -30,19 +30,19 @@ function gameUpdate()
 {
     if (mouseWasPressed(0))
     {
-        // create particle emitter
+        // create particle emitter to test the collision
         const hue = rand();
         const particleEmitter = new ParticleEmitter(
-            mousePos, 0,                // emitPos, emitAngle
-            0, 0.1, 500, PI,            // emitSize, emitTime, emitRate, emitCone
-            tile(0, 16),                // tileIndex, tileSize
-            hsl(hue,1,.5),   hsl(hue,1,1),   // colorStartA, colorStartB
-            hsl(hue,1,.5,0), hsl(hue,1,1,0), // colorEndA, colorEndB
-            2, .2, .2, .2, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
-            .05, .8, true, false        // fadeRate, randomness, collide, additive
+            mousePos, 0,
+            0, 0.1, 500, PI,
+            tile(0, 16),
+            hsl(hue,1,.5),   hsl(hue,1,1),
+            hsl(hue,1,.5,0), hsl(hue,1,1,0),
+            2, .2, .2, .2, .05,
+            .99, 1, 1, PI,
+            .05, .8, true
         );
         particleEmitter.restitution = .5; // bounce when it collides
-        particleEmitter.trailScale = 2;  // stretch in direction of motion
+        particleEmitter.trailScale = 2;  // stretch as it moves
     }
 }

package/examples/shorts/tiltedView.js

@@ -9,7 +9,8 @@ class GameObject extends EngineObject
     render()
     {
         // adjust draw postion to be at the bottom of the object
-        const pos = this.pos.add(vec2(0,this.size.y/2).rotate(this.angle));
+        const offset = vec2(0,this.size.y/2).rotate(this.angle);
+        const pos = this.pos.add(offset);
         drawTile(pos, this.size, this.tileInfo, this.color, this.angle);
     }
 }
@@ -37,9 +38,19 @@ function gameInit()
 
     // create background objects
     for (let i=1; i<300; ++i)
-        new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, 0, hsl(.4,.2,rand(.4,.5),.8), -1e5);
+    {
+        const pos = randInCircle(90);
+        const size = vec2(rand(59), rand(59));
+        const color = hsl(.4,.2,rand(.4,.5),.8);
+        new EngineObject(pos, size, 0, 0, color, -1e5);
+    }
 
     // create world objects
     for (let i=1; i<1e3; ++i)
-        new GameObject(randInCircle(7+i,7), vec2(rand(1,2),rand(4,9)), 0, 0, hsl(.1,.5,rand(.2,.3)));
+    {
+        const pos = randInCircle(7+i,7);
+        const size = vec2(rand(1,2),rand(4,9));
+        const color = hsl(.1,.5,rand(.2,.3));
+        new GameObject(pos, size, 0, 0, color);
+    }
 }

package/examples/shorts/timers.js

@@ -1,4 +1,5 @@
 let timerButton, timerSlider;
+let timerSound = new Sound([2,0,999,,,,,1.5,,.3,-99,.1,1.63,,,.11]);
 
 function gameInit()
 {
@@ -13,13 +14,16 @@ function gameInit()
     timerButton.timer = new Timer;
     timerButton.onClick = ()=>
     {
+        timerButton.isSet = true;
         if (timerButton.timer.isSet())
         {
+            timerSound.play(0, .5, 2);
             timerButton.timer.unset();
             timerButton.text = 'Start';
         }
         else
         {
+            timerSound.play(0, .5, .5);
             timerButton.timer.set(3);
             timerButton.text = 'Stop';
         }
@@ -30,6 +34,12 @@ function gameInit()
     timerSlider.interactive = false;
     timerSlider.update = ()=>
     {
+        if (timerButton.isSet && timerButton.timer.elapsed())
+        {
+            timerSound.play();
+            timerButton.isSet = 0;
+        }
+
         // update the timer display
         const t = timerButton.timer.get();
         const timeText = t.toFixed(2) + 's';

package/examples/shorts/topDown.js

@@ -30,7 +30,10 @@ function gameInit()
     // create collision objects
     for (let i=300; i--;)
     {
-        const o = new EngineObject(randInCircle(15+i,7), vec2(rand(4,9),rand(4,9)), 0, 0, hsl(0,0,rand(.1,.3)));
+        const pos = randInCircle(15+i,7);
+        const size = vec2(rand(4,9),rand(4,9));
+        const color = hsl(.1,.5,rand(.2,.3));
+        const o = new EngineObject(pos, size, 0, 0, color);
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics
     }

package/examples/shorts/uiSystem.js

@@ -2,12 +2,13 @@ function gameInit()
 {
     // setup ui system plugin
     new UISystemPlugin;
-    uiSystem.defaultSoundPress = new Sound([1,0,220]);
-    uiSystem.defaultSoundClick = new Sound([1,0,440]);
+    uiSystem.defaultSoundPress = new Sound([.5,0,220]);
+    uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 8;
 
     // example button that returns to menu
-    const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200), 'Back\nto\nMenu');
+    const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200),
+        'Back\nto\nMenu');
     buttonBack.textHeight = 60;
     buttonBack.onClick = ()=> uiMenu.visible = true;
 
@@ -16,7 +17,8 @@ function gameInit()
     canvasClearColor = hsl(0,0,.8);
 
     // example text
-    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80), 'LittleJS UI\nSystem Demo'));
+    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80),
+        'LittleJS UI\nSystem Demo'));
 
     // example image
     uiMenu.addChild(new UITile(vec2(200,-140), vec2(128), tile(3, 128)));
@@ -33,7 +35,8 @@ function gameInit()
     uiMenu.addChild(checkbox);
 
     // example scrollbar
-    const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), soundVolume, 'Volume');
+    const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), soundVolume,
+        'Volume');
     uiMenu.addChild(scrollbar);
     scrollbar.onChange = ()=> setSoundVolume(scrollbar.value);
 

package/examples/starter/game.js

@@ -65,7 +65,7 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 500, PI,              // emitSize, emitTime, emitRate, emitCone
+        0, 0, 500, PI,              // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -74,7 +74,7 @@ function gameInit()
         .05, .5, true, true         // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.trailScale = 2;  // stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -86,7 +86,7 @@ function gameUpdate()
         sound_click.play(mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = randColor();
         particleEmitter.colorStartB = randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);

package/examples/starter/index.html

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

package/examples/typescript/game.js

@@ -52,7 +52,7 @@ function gameInit() {
     LJS.setGravity(vec2(0, -.01));
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
-    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emitCone
+    1, 0, 500, Math.PI, // emitSize, emitTime, rate, cone
     tile(0, 16), // tileIndex, tileSize
     hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
     hsl(0, 0, 0, 0), hsl(0, 0, 0, 0), // colorEndA, colorEndB
@@ -61,7 +61,7 @@ function gameInit() {
     .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2; // stretch in direction of motion
+    particleEmitter.trailScale = 2; // stretch as it moves
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate() {
@@ -69,7 +69,7 @@ function gameUpdate() {
         // play sound when mouse is pressed
         sound_click.play(LJS.mousePos);
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = LJS.randColor();
         particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);

package/examples/typescript/game.ts

@@ -69,7 +69,7 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
+        1, 0, 500, Math.PI,         // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -78,7 +78,7 @@ function gameInit()
         .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.trailScale = 2;  // stretch stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -90,7 +90,7 @@ function gameUpdate()
         sound_click.play(LJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = LJS.randColor();
         particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);

package/examples/uiSystem/game.js

@@ -21,8 +21,8 @@ LJS.setCanvasPixelated(false);
 
 function createUI()
 {
-    LJS.uiSystem.defaultSoundPress = new LJS.Sound([1,0,220]);
-    LJS.uiSystem.defaultSoundClick = new LJS.Sound([1,0,440]);
+    LJS.uiSystem.defaultSoundPress = new LJS.Sound([.5,0,220]);
+    LJS.uiSystem.defaultSoundClick = new LJS.Sound([.5,0,440]);
     LJS.uiSystem.defaultCornerRadius = 8;
 
     // setup root to attach all ui elements to
@@ -63,7 +63,7 @@ function createUI()
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onClick = ()=> LOG('Button 1 clicked');
+    button1.onClick = ()=> uiBackground.color = hsl(Math.random(),1,.7);
 
     // example checkbox
     const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.14.11",
+  "version": "1.14.16",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",
@@ -37,6 +37,8 @@
     "google-closure-compiler": "~20230502.0.0",
     "roadroller": "~2.1.0",
     "typescript": "~5.1.6",
-    "uglify-js": "~3.17.4"
+    "uglify-js": "~3.17.4",
+    "electron": "^38.2.0",
+    "electron-packager": "^17.1.2"
   }
 }