littlejsengine 1.14.23 → 1.15.2

package/examples/box2d/gameObjects.js

@@ -38,7 +38,7 @@ export function spawnCircle(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bod
 export function spawnRandomPoly(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, angle=0)
 {
     const o = new LJS.Box2dObject(pos, vec2(), 0, angle, color, type);
-    o.addRandomPoly(diameter, vec2(), 0, density, friction, restitution);
+    o.addRandomPoly(diameter, density, friction, restitution);
     return o;
 }
 
@@ -77,7 +77,7 @@ export function spawnRandomEdges()
     for (let i=40, y=0; i--;)
         edgePoints.push(vec2(i, y=LJS.clamp(y+LJS.rand(-2,2),0,5)));
     edgePoints.push(vec2(0,0));
-    const o = new LJS.Box2dObject(vec2(), vec2(), 0, 0, LJS.BLACK, LJS.box2d.bodyTypeStatic);
+    const o = new LJS.Box2dStaticObject;
     o.addEdgeList(edgePoints);
 }
 
@@ -147,8 +147,6 @@ export class CarObject extends LJS.Box2dObject
     }
     update()
     {
-        super.update();
-
         // car controls
         const maxSpeed = 40;
         const input = LJS.keyDirection().x;
@@ -166,11 +164,11 @@ export class CarObject extends LJS.Box2dObject
 ///////////////////////////////////////////////////////////////////////////////
 
 // changes objects color when touched
-export class ContactTester extends LJS.Box2dObject
+export class ContactTester extends LJS.Box2dStaticObject
 {
     constructor(pos, size, color, contactColor, isCircle=true, isSensor=true)
     {
-        super(pos, size, 0, 0, color, LJS.box2d.bodyTypeStatic);
+        super(pos, size, 0, 0, color);
         isCircle ? this.addCircle(size.x) : this.addBox(size);
         this.setSensor(isSensor);
         this.contactColor = contactColor;
@@ -325,11 +323,11 @@ export class SoftBodyObject extends LJS.Box2dObject
 ///////////////////////////////////////////////////////////////////////////////
 
 // cloth sim using grid of rope joints
-export class ClothObject extends LJS.Box2dObject
+export class ClothObject extends LJS.Box2dStaticObject
 {
     constructor(pos, scale, sizeCount, color, maxJointStress=10)
     {
-        super(pos, vec2(), 0, 0, color, LJS.box2d.bodyTypeStatic);
+        super(pos, vec2(), 0, 0, color);
         const nodeSize = sizeCount.subtract(vec2(1));
         const spacing = scale.divide(nodeSize);
         const objectDiameter = LJS.min(spacing.x, spacing.y);
@@ -393,8 +391,6 @@ export class ClothObject extends LJS.Box2dObject
     }
     update()
     {
-        super.update();
-        
         for (let y=this.sizeCount.y; y--;)
         for (let x=this.sizeCount.x; x--;)
         {

package/examples/box2d/scenes.js

@@ -137,14 +137,14 @@ export function loadScene(_scene)
         }
         {
             // distance joint
-            const o1 = new LJS.Box2dObject(vec2(30,11), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor(), LJS.box2d.bodyTypeStatic);
+            const o1 = new LJS.Box2dStaticObject(vec2(30,11), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor());
             o1.renderOrder = -2;
             const o2 = GameObjects.spawnCircle(vec2(30,8), 2, LJS.randColor());
             new LJS.Box2dDistanceJoint(o1, o2);
         }
         {
             // motor joint
-            const o = new LJS.Box2dObject(vec2(10,8), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor(), LJS.box2d.bodyTypeStatic);
+            const o = new LJS.Box2dStaticObject(vec2(10,8), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor());
             o.renderOrder = -2;
             new GameObjects.MotorJointObject(vec2(10,8), vec2(2), LJS.randColor(), o);
         }

package/examples/breakout/gameObjects.js

@@ -137,7 +137,7 @@ export class Ball extends PhysicsObject
         this.velocity.y = LJS.max(-this.velocity.y, .2);
 
         // speed up
-        const speed = LJS.min(1.04*this.velocity.length(), .5);
+        const speed = LJS.min(1.04*this.getSpeed(), .5);
         this.velocity = this.velocity.normalize(speed);
         sound_bounce.play(this.pos, 1, speed*2);
 

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.14.24></script>
+<script src=../../dist/littlejs.js?1.15.2></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.14.24></script>
+<script src=game.js?1.15.2></script>

package/examples/index.html

@@ -84,32 +84,35 @@ class ExampleInfo
 
 const exampleList = 
 [
-    new ExampleInfo('--- SHORT EXAMPLES ---'),
+    new ExampleInfo('--- BASIC ---'),
     new ExampleInfo('Hello World', 'helloWorld.js', 'Simple starter example', false, 'beginner, gradient, text, tiles'),
     new ExampleInfo('Empty', 'empty.js', 'Empty example template', false, 'beginner, text'),
     new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation', false, 'sprites, loading, tiles'),
     new ExampleInfo('Animation', 'animation.js', 'Sprite animation system', false, 'frames, loop, tiles, sprites'),
     new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives', false, 'circle, ellipse, rectangle, polygon, lines'),
     new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL', false, 'hue, saturation, blending, rectangle'),
-    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield', false, 'space, movement, depth, rectangle'),
     new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering', false, 'sheet, frames, tiles'),
     new ExampleInfo('Blending', 'blending.js', 'Additive blending and transparency', false, 'alpha, color, tiles, smooth'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system', false, 'level, map, grid, particles'),
     new ExampleInfo('Particles', 'particles.js', 'Particle system', false, 'effects, emitter, physics, fire, smoke'),
+    new ExampleInfo('Input', 'input.js', 'Input system demo for keyboard, mouse, touch, and gamepad.', false, 'input, control'),
     new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI', false, 'delay, interval, slider'),
     new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator', false, 'audio, volume, ui'),
-    new ExampleInfo('Music', 'music.js', 'Basic music load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('Music', 'music.js', 'Basic load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('Video', 'videoPlayer.js', 'Basic video play, pause, and stop', false, 'movie, sound, audio, streaming, volume, ui'),
     new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
-    new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains', false, 'generative, canvas, background'),
-    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation', false, 'generative, level, tiles, map, grid'),
     new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
     new ExampleInfo('Tile Raycast', 'tileRaycast.js', 'Example of the tile layer raycast collision', false, 'level, map, grid'),
-    new ExampleInfo('Debug Drawing', 'debugDraw.js', 'Debug drawing system', false, 'debug, circle, line, rectangle'),
     new ExampleInfo('Camera Mouse Drag', 'cameraDrag.js', 'Example of how to control camera with mose', false, 'ui, input, control'),
+    new ExampleInfo('Debug Drawing', 'debugDraw.js', 'Debug drawing system', false, 'debug, circle, line, rectangle'),
+    new ExampleInfo('--- ADVANCED ---'),
     new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangle'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield', false, 'space, movement, depth, rectangle'),
+    new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains', false, 'generative, canvas, background'),
+    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation', false, 'generative, level, tiles, map, grid'),
     new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Step Sequencer', 'sequencer.js', 'Simple music loop creation tool', false, 'music, sound, audio, notes, ui, instrument'),
-    new ExampleInfo('Music Player', 'musicPlayer.js', 'Advanced music player with audio seeking and drag and drop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('Music Player', 'musicPlayer.js', 'Music player with audio seeking and drag and drop', false, 'sound, loading, audio, ui'),
     new ExampleInfo('WebGL Shader', 'shader.js', 'Full canvas webgl shader', false, 'webgl, visual, effect'),
     new ExampleInfo('--- MINI GAMES ---'),
     new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing', false, 'objects, collision'),
@@ -125,6 +128,7 @@ const exampleList =
     new ExampleInfo('--- PLUGINS ---'),
     new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin', false, 'objects, mouse'),
     new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D physics', false, 'objects, vehicle, suspension, wheels'),
+    new ExampleInfo('Box2d Pool', 'box2dPool.js', 'Billiard table pool game with physics', false, 'objects, game'),
     new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters', false, 'webgl, visual, effect'),
     new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Buttons, sliders, and checkboxes', false, 'objects, widgets, interactive'),
     new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panels', false, 'three slice, stretch, corners, text, tiles'),

package/examples/platformer/gameCharacter.js

@@ -34,6 +34,7 @@ export class Character extends GameObjects.GameObject
         this.deadTimer          = new Timer;
         this.grenadeThrowTimer   = new Timer;
         this.drawSize = vec2(1);
+        this.moveInput = vec2();
         this.color = hsl(LJS.rand(),1,.7);
         this.renderOrder = 10;
         this.walkCyclePercent = 0;
@@ -195,11 +196,11 @@ export class Character extends GameObjects.GameObject
         // track last pos for ladder collision code
         this.lastPos = this.pos.copy();
 
-        // call parent and update physics
+        // call parent
         super.update();
 
         // update walk cycle
-        const speed = this.velocity.length();
+        const speed = this.getSpeed();
         if (this.climbingLadder || this.groundTimer.active() && !this.dodgeTimer.active())
         {
             this.walkCyclePercent += speed * .5;

package/examples/platformer/gameObjects.js

@@ -26,8 +26,6 @@ export class GameObject extends LJS.EngineObject
 
     update()
     {
-        super.update();
-
         // flash white when damaged
         let brightness = 0;
         if (!this.isDead() && this.damageTimer.isSet())
@@ -97,6 +95,7 @@ export class Coin extends LJS.EngineObject
     { 
         super(pos, vec2(1), Game.spriteAtlas.coin);
         this.color = hsl(.15,1,.5);
+        this.mass = 0;
     }
 
     render()
@@ -155,7 +154,7 @@ export class Enemy extends GameObject
             this.velocity = vec2(LJS.rand(.1,-.1), LJS.rand(.4,.2));
 
         // damage player if touching
-        if (LJS.isOverlapping(this.pos, this.size, Game.player.pos, Game.player.size))
+        if (this.isOverlappingObject(Game.player))
             Game.player.damage(1, this);
     }
 
@@ -261,8 +260,6 @@ export class Weapon extends LJS.EngineObject
 
     update()
     {
-        super.update();
-
         // update recoil
         if (this.recoilTimer.active())
             this.localAngle = LJS.lerp(this.localAngle, 0, this.recoilTimer.getPercent());
@@ -318,11 +315,9 @@ export class Bullet extends LJS.EngineObject
             if (o.isGameObject)
                 this.collideWithObject(o)
         });
-            
-        super.update();
 
         this.angle = this.velocity.angle();
-        this.range -= this.velocity.length();
+        this.range -= this.getSpeed();
         if (this.range < 0)
         {
             new LJS.ParticleEmitter(

package/examples/shorts/base.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.14.24></script>
+<script src=../../dist/littlejs.js?1.15.2></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source
+<script src=../../src/engine.js></script>
 <script src=../../src/engineDebug.js></script>
 <script src=../../src/engineUtilities.js></script>
 <script src=../../src/engineSettings.js></script>
@@ -14,7 +15,6 @@
 <script src=../../src/engineParticles.js></script>
 <script src=../../src/engineMedals.js></script>
 <script src=../../src/engineWebGL.js></script>
-<script src=../../src/engine.js></script>
 <script src=../../plugins/box2d.js></script>
 <script src=../../plugins/box2d.wasm.js></script>
 <script src=../../plugins/drawUtilities.js></script>

package/examples/shorts/box2d.js

@@ -7,8 +7,8 @@ async function gameInit()
     canvasClearColor = hsl(0,0,.9);
     
     // create ground object
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
-        GRAY, box2d.bodyTypeStatic);
+    groundObject = new Box2dStaticObject(vec2(-8));
+    groundObject.color = GRAY;
     groundObject.addBox(vec2(100,2));
 
     // add some random objects

package/examples/shorts/box2dCar.js

@@ -3,9 +3,19 @@ async function gameInit()
     // setup box2d and create the objects
     await box2dInit();
     gravity.y = -20;
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
-        GRAY, box2d.bodyTypeStatic);
-    groundObject.addBox(vec2(100,6));
+
+    // create edge list for ground
+    const edgePoints = [];
+    for (let i=0, y=0, s=0; i<1e3; ++i)
+    {   
+        y = clamp(y+rand(-1,1),0,5);
+        edgePoints.push(vec2(i*5-15, y-8));
+    }
+    const ground = new Box2dStaticObject;
+    ground.lineWidth = 1;
+    ground.addEdgeList(edgePoints);
+
+    // make a car
     new CarObject(vec2(0,-2));
     canvasClearColor = hsl(0,0,.9);
 }
@@ -14,9 +24,10 @@ class CarObject extends Box2dObject
 {
     constructor(pos)
     {
-        super(pos, vec2(), 0, 0, RED);
+        super(pos);
 
         // create car with wheels
+        this.color = RED;
         this.addBox(vec2(7,2));
         const frequency = 4, maxTorque = 250;
         this.wheels = [];
@@ -28,15 +39,14 @@ class CarObject extends Box2dObject
             joint.setSpringFrequencyHz(frequency);
             joint.setMaxMotorTorque(maxTorque);
             joint.enableMotor(!i);
-            wheel.addCircle(2, vec2(), 1, 1);
+            const friction = 1;
+            wheel.addCircle(2, vec2(), 1, friction);
             wheel.motorJoint = joint;
             this.wheels[i] = wheel;
         }
     }
     update()
     {
-        super.update();
-        
         // car controls - use mouse, arrow keys, or A/D to drive
         const maxSpeed = 40;
         const input = mouseIsDown(0) ? 1 : 
@@ -44,5 +54,6 @@ class CarObject extends Box2dObject
         let s = this.wheels[0].motorJoint.getMotorSpeed();
         s = input ? clamp(s - input, -maxSpeed, maxSpeed) : 0;
         this.wheels[0].motorJoint.setMotorSpeed(s);
+        cameraPos.x = this.pos.x;
     }
 }

package/examples/shorts/box2dPool.js

@@ -0,0 +1,108 @@
+const hitSound = new Sound([,,2e3,,,.01]);
+const maxHitDistance = 6;
+
+class Ball extends Box2dObject
+{
+    constructor(position, number=0)
+    {
+        const color = hsl(number/9, 1, number? .5 : 1);
+        super(position, vec2(), 0, 0, color);
+        this.number = number;
+
+        // setup pool ball physics
+        const friction = 0, restitution = .95;
+        this.addCircle(1, vec2(), 1, friction, restitution);
+        this.setLinearDamping(.4);
+        this.setBullet(true);
+        this.setFixedRotation(true);
+    }
+    beginContact()
+    {
+        const volume = clamp(this.getSpeed()/20);
+        hitSound.play(this.pos, clamp(this.getSpeed()/20));
+    }
+    canHit() { return this == cueBall && this.getSpeed() < 1; }
+    getHitOffset()
+    {
+        // hit from cue ball to mouse position
+        const deltaPos = mousePos.subtract(this.pos);
+        const length = min(deltaPos.length(), maxHitDistance);
+        return deltaPos.normalize(length); 
+    }
+    update()
+    {
+        if (this.canHit() && mouseWasPressed(0))
+        {
+            // hit the cue ball
+            const accel = this.getHitOffset().scale(8);
+            this.applyAcceleration(accel);
+            hitSound.play(cueBall.pos);
+        }
+        if (this.pocketed)
+            this.destroy();
+    }
+    render()
+    {
+        super.render();
+
+        // draw white circle and ball number
+        drawCircle(this.pos, .6, WHITE);
+        const textPos = this.pos.add(vec2(0,-.06));
+       	if (this.number)
+            drawTextOverlay(this.number, textPos, .5, BLACK);
+        if (this.canHit())
+        {
+            // draw the aim line
+            const offset = this.getHitOffset();
+            const endPos = this.pos.add(offset);
+            const width = offset.length()/maxHitDistance;
+            drawLine(this.pos, endPos, width, hsl(0,1,.5,.5), 
+                vec2(), 0, false, false, overlayContext);
+        }
+    }
+}
+
+class Pocket extends Box2dStaticObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size, 0, 0, BLACK);
+
+        // create a sensor circle for pocket
+        this.addCircle(size.x);
+        this.setSensor(true);
+    }
+    render()
+    {
+        // add ball size to pocket size for drawing
+        drawCircle(this.pos, this.size.x + 1, BLACK);
+    }
+    beginContact(other) { other.pocketed = 1; }
+}
+
+async function gameInit()
+{
+    // setup box2d
+    await box2dInit();
+    canvasClearColor = hsl(.4,.5,.5);
+
+    // create table walls
+    const groundObject = new Box2dStaticObject;
+    groundObject.color = hsl(.1,1,.2);
+    groundObject.addBox(vec2(100,3), vec2( 0, 8.5));
+    groundObject.addBox(vec2(100,3), vec2( 0,-8.5));
+    groundObject.addBox(vec2(3,100), vec2( 15,0));
+    groundObject.addBox(vec2(3,100), vec2(-15,0));
+
+    // create pockets
+    for (let j=0; j<2; ++j)
+    for (let i=0; i<3; ++i)
+        new Pocket(vec2(i-1, j-.5).scale(13), vec2(.5));
+   
+    // create balls
+    let number = 1;
+    for (let i=5;   i--;)
+    for (let j=i+1; j--;)
+        new Ball(vec2(6+i*.9, j-i/2), number++);
+    cueBall = new Ball(vec2(-6, 0));
+}

package/examples/shorts/debugDraw.js

@@ -8,12 +8,11 @@ class BounceObject extends EngineObject
 
     update()
     {
-        super.update();
-
         // show debug info
         debugText('Debug Text', this.pos.add(vec2(0,3)), 1, WHITE);
         debugRect(this.pos, this.size, RED);
-        debugPoly(mousePos, [vec2(-2,-1), vec2(0,2), vec2(2,-1)], YELLOW);
+        const trianglePoints = [vec2(-2,-1), vec2(0,2), vec2(2,-1)];
+        debugPoly(mousePos, trianglePoints, YELLOW);
         debugLine(this.pos, mousePos, BLUE);
 
         // bounce off screen edges

package/examples/shorts/flappyGame.js

@@ -4,6 +4,7 @@ class Wall extends EngineObject
     {
         super(pos, size, 0, 0, hsl(.3,.5,.3));
         this.setCollision(); // make object collide
+        this.mass = 0;
     }
     update()
     {

package/examples/shorts/fps.js

@@ -12,7 +12,7 @@ function gameUpdate()
     if (keyWasPressed('Escape'))
         pointerLockExit()
     if (pointerLockIsActive() || isTouchDevice)
-        playerAngle += mouseDelta.x * .003;
+        playerAngle += mouseDelta.x * .03;
 
     // update player movement, prevent walking through walls
     const velocity = keyDirection().rotate(playerAngle).scale(.05);

package/examples/shorts/hillGlideGame.js

@@ -9,8 +9,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // check ground height
         const h = getGroundHeight(this.pos.x);
         if (this.pos.y < h + this.size.y/2)

package/examples/shorts/input.js

@@ -0,0 +1,59 @@
+function gameUpdate()
+{
+    if (isUsingGamepad)
+    {
+        debugText('Gamepad Mode', vec2(0,4));
+
+        // analog sticks
+        for (let i=2; i--;)
+        {
+            const stick = gamepadStick(i);
+            const pos = vec2(i?2:-2, 1);
+            debugCircle(pos, 2, WHITE);
+            debugLine(pos, pos.add(stick), GREEN);
+        }
+
+        // buttons
+        for (let i=16; i--;)
+        {
+            const pos = vec2(-1.5 + i%4, -2 - (i/4|0));
+            if (gamepadIsDown(i))
+                debugCircle(pos, 1, RED, 0, 1);
+            debugCircle(pos, 1, WHITE);
+        }
+    }
+    else if (isTouchDevice)
+    {
+        debugText('Touch Mode', vec2(0,4));
+
+        // touch input routed to mouse
+        if (mouseIsDown(0))
+            debugCircle(mousePos, 4, RED, 0, 1);
+        debugCircle(mousePos, 4, WHITE);
+    }
+    else
+    {
+        debugText('Mouse and Keyboard Mode', vec2(0,4));
+
+        // keyboard key (space bar)
+        debugRect(vec2(), vec2(2), WHITE);
+        if (keyIsDown('Space'))
+            debugRect(vec2(), vec2(2), RED, 0, 0, 1);
+
+        // keyboard direction (arrow keys or WASD)
+        const inputDirection = keyDirection();
+        debugLine(vec2(), inputDirection, GREEN);
+
+        // mouse pos
+        debugPoint(mousePos, mouseIsDown(0) ? RED : YELLOW);
+
+        // mouse buttons
+        for (let i=3; i--;)
+        {
+            const pos = vec2(-1 + i, -3);
+            if (mouseIsDown(i))
+                debugCircle(pos, 1, RED, 0, 1);
+            debugCircle(pos, 1, WHITE);
+        }
+    }
+}

package/examples/shorts/landerGame.js

@@ -9,12 +9,10 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-        
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .002);
-        const accel = this.getRight(moveInput.y*.002);
+        const accel = this.getUp(moveInput.y*.002);
         this.applyAcceleration(accel);
     }
 

package/examples/shorts/medals.js

@@ -4,19 +4,25 @@ const medal_leftClick = new Medal(1, 'Lefty', 'Left clicked!', '🐁');
 const medal_rightClick = new Medal(2, 'Righty', 'Right clicked!', '🐭');
 const medal_spacePressed = new Medal(3, 'Space', 'Pressed spacebar!', '🚀');
 
-// setup medals
-const saveName = 'Medals Example';
-medalsInit(saveName);
+function gameInit()
+{
+    // setup medals
+    const saveName = 'Medals Example';
+    medalsInit(saveName);
+
+    // clear unlocked medals for testing
+    medalsForEach(medal=> medal.unlocked = false);
 
-// clear medals for testing
-medalsForEach(medal=> medal.unlocked = false);
-medal_openedExample.unlock();
+    // unlock the example medal
+    medal_openedExample.unlock();
 
-// set background color
-canvasClearColor = hsl(.5,.3,.2);
+    // set background color
+    canvasClearColor = hsl(.5,.3,.2);
+}
 
 function gameUpdate()
 {
+    // unlock example medals based on input
     if (mouseWasPressed(0))
         medal_leftClick.unlock();
     if (mouseWasPressed(2))
@@ -25,7 +31,7 @@ function gameUpdate()
         medal_spacePressed.unlock();
 }
 
-function gameRender()
+function gameRenderPost()
 {
     const size = 80;
     let pos = mainCanvasSize.scale(.5).subtract(vec2(0,40));

package/examples/shorts/music.js

@@ -1,7 +1,5 @@
-let musicPlayer, playButton, stopButton, infoText;
-let musicSound = new SoundWave('song.mp3');
-let musicVolume = 1;
-let music;
+const musicSound = new SoundWave('song.mp3');
+let musicVolume = 1, musicInstance;
 
 function gameInit()
 {
@@ -13,7 +11,8 @@ function gameInit()
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 220));
+    const center = mainCanvasSize.scale(.5);
+    musicPlayer = new UIObject(center, vec2(500, 220));
 
     // infomation text
     infoText = new UIText(vec2(0, -70), vec2(400, 50));
@@ -26,8 +25,7 @@ function gameInit()
     volumeSlider.onChange = () => 
     {
         musicVolume = volumeSlider.value;
-        if (music) 
-            music.setVolume(musicVolume);
+        musicInstance?.setVolume(musicVolume);
     };
 
     // play button
@@ -39,17 +37,17 @@ function gameInit()
             return;
         
         // handle play/pause toggle
-        if (!music)
-            music = musicSound.playMusic(musicVolume);
-        else if (music.isPaused())
-            music.resume();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume);
+        else if (musicInstance.isPaused())
+            musicInstance.resume();
         else
-            music.pause();
+            musicInstance.pause();
     };
 
     // stop button
     stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>  music && music.stop();
+    stopButton.onClick = ()=>  musicInstance?.stop();
     musicPlayer.addChild(stopButton);
 }
 
@@ -69,10 +67,10 @@ function gameUpdate()
     else
     {
         // update ui text
-        const isPlaying = music && music.isPlaying();
+        const isPlaying = musicInstance?.isPlaying();
         playButton.text = isPlaying ? 'Pause' : 'Play';
-        const current = music ? music.getCurrentTime() : 0;
-        const duration = musicSound.getDuration();
-        infoText.text = formatTime(current) +' / '+ formatTime(duration);
+        const current = formatTime(musicInstance?.getCurrentTime());
+        const duration = formatTime(musicSound.getDuration());
+        infoText.text = current + ' / ' + duration;
     }
 }