littlejsengine 1.14.5 → 1.14.8

package/examples/box2d/game.js

@@ -56,6 +56,7 @@ async function gameInit()
     // start up LittleJS Box2D plugin
     await LJS.box2dInit();
     //LJS.box2dSetDebug(true); // enable box2d debug draw
+    LJS.setCanvasClearColor(hsl(0,0,.8));
 
     // create a table of all sprites
     const gameTile = (i)=> LJS.tile(i, 496, 0, 8);
@@ -136,9 +137,6 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square in the background
-    LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8));
-
     if (Scenes.scene == 5)
     {
         // raycast test

package/examples/box2d/gameObjects.js

@@ -18,7 +18,7 @@ const density = 1;
 const friction = .5;
 const restitution = .2;
 
-export function spawnBox(pos, size=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, applyTexture=true, angle=0)
+export function spawnBox(pos, size=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, applyTexture=false, angle=0)
 {
     size = typeof size === 'number' ? vec2(size) : size; // square
     const o = new LJS.Box2dObject(pos, size, applyTexture && Game.spriteAtlas.squareOutline, angle, color, type);
@@ -27,7 +27,7 @@ export function spawnBox(pos, size=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDy
     return o;
 }
 
-export function spawnCircle(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, applyTexture=true, angle=0)
+export function spawnCircle(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, applyTexture=false, angle=0)
 {
     const size = vec2(diameter);
     const o = new LJS.Box2dObject(pos, size, applyTexture && Game.spriteAtlas.circleOutline, angle, color, type);

package/examples/htmlMenu/game.js

@@ -32,6 +32,7 @@ function gameInit()
     button_exitMenu.onclick = function() { setMenuVisible(false); }
     input_test.onchange = function() { alert('New text: ' + this.value); }
     input_rangeTest.onchange = function() { alert('New value: ' + this.value); }
+    LJS.setCanvasClearColor(hsl(0,0,.2));
 
     // show menu for demo
     setMenuVisible(true);
@@ -60,7 +61,6 @@ function gameUpdatePost()
 function gameRender()
 {
     // test game rendering
-    LJS.drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
     for (let i=0; i<1e3; ++i)
     {
         const time = LJS.time;

package/examples/index.html

@@ -61,58 +61,62 @@ class ExampleInfo
         this.filename = filename;
         this.description = description;
         this.largeExample = largeExample;
+        this.isHeading = !filename;
+        this.text = this.name;
+        if (this.description)
+            this.text += ' - ' + this.description;
     }
 }
 
 const exampleList = 
 [
     new ExampleInfo('--- SHORT EXAMPLES ---'),
-    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example - [basic, beginner]'),
-    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes - [graphics, primitives, basic]'),
-    new ExampleInfo('Colors', 'colors.js', 'Color object and HSL usage - [graphics, color, basic]'),
-    new ExampleInfo('Blending', 'blending.js', 'Blending modes and transparency - [graphics, effects]'),
-    new ExampleInfo('Timers', 'timers.js', 'Timer object and timing functions - [utilities, time]'),
-    new ExampleInfo('Texture', 'texture.js', 'Display and manipulate textures - [graphics, sprites]'),
-    new ExampleInfo('Particles', 'particles.js', 'Particle system basics - [effects, particles]'),
-    new ExampleInfo('Sound Effects', 'sound.js', 'Example sound effects with ZzFX - [audio, sound]'),
-    new ExampleInfo('Music', 'music.js', 'Example sound loading, play, pause, seek, and stop - [audio, music]'),
-    new ExampleInfo('System Font', 'systemFont.js', 'Built-in bitmap font rendering - [text, font]'),
-    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering - [graphics, sprites]'),
-    new ExampleInfo('Animation', 'animation.js', 'Sprite animation techniques - [animation, sprites]'),
-    new ExampleInfo('Clock', 'clock.js', 'Real-time clock display - [time, ui, utilities]'),
-    new ExampleInfo('Medals', 'medals.js', 'Achievement system demo - [ui, achievements]'),
-    new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system - [tiles, levels]'),
-    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard - [audio, input, ui]'),
-    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation - [algorithm, generation]'),
-    new ExampleInfo('Starfield', 'starfield.js', 'Animated starfield - [effects, space]'),
-    new ExampleInfo('Parallax', 'parallax.js', 'Parallax mountains - [graphics, effects]'),
+    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example'),
+    new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation'),
+    new ExampleInfo('Animation', 'animation.js', 'Sprite animation system'),
+    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives'),
+    new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield'),
+    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering'),
+    new ExampleInfo('Blending', 'blending.js', 'Additive blending and transparency'),
+    new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system'),
+    new ExampleInfo('Particles', 'particles.js', 'Particle system'),
+    new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI'),
+    new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator'),
+    new ExampleInfo('Music', 'music.js', 'Music playback and controls'),
+    new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font'),
+    new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains'),
+    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation'),
+    new ExampleInfo('Medals', 'medals.js', 'Achievement system'),
+    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard'),
+    new ExampleInfo('Clock', 'clock.js', 'Animated analog clock'),
     new ExampleInfo('--- MINI GAMES ---'),
-    new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run platformer - [game, platformer, physics]'),
-    new ExampleInfo('Top Down Game', 'topDown.js', 'Adventure with collision - [game, topdown, rpg]'),
-    new ExampleInfo('Tilted View', 'tiltedView.js', 'Pseudo 3D tilted perspective - [3d, camera, perspective]'),
-    new ExampleInfo('Space Game', 'spaceGame.js', 'Spaceship with parallax starfield - [game, space, shooter]'),
-    new ExampleInfo('Lander Game', 'landerGame.js', 'Lunar lander physics game - [game, physics, thrust]'),
-    new ExampleInfo('Flappy Game', 'flappyGame.js', 'Flappy bird clone - [game, arcade, flying]'),
-    new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style glider - [game, physics, flying]'),
-    new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball game - [game, classic, arcade]'),
-    new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', 'Tile sliding puzzle game - [game, puzzle, logic]'),
-    new ExampleInfo('Raycasting Game', 'raycasting.js', 'Pseudo 3D raycasting demo - [3d, raycasting, wolfenstein]'),
+    new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing'),
+    new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run side view'),
+    new ExampleInfo('Top Down Game', 'topDown.js', 'Top-down style camera'),
+    new ExampleInfo('Tilted View Game', 'tiltedView.js', 'Pseudo-3D oblique view'),
+    new ExampleInfo('Flappy Game', 'flappyGame.js', 'Flappy bird style game'),
+    new ExampleInfo('Lander Game', 'landerGame.js', 'Lunar lander style game'),
+    new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style sliding game'),
+    new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', '15 tile sliding puzzle'),
+    new ExampleInfo('Space Game', 'spaceGame.js', 'Spaceship shooter with parallax'),
+    new ExampleInfo('Raycasting 3D Game', 'raycasting.js', 'Wolfenstein-style raycasting'),
     new ExampleInfo('--- PLUGINS ---'),
-    new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin demo - [physics, box2d, plugin]'),
-    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D - [physics, box2d, vehicle]'),
-    new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters - [graphics, shaders, effects]'),
-    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'UI elements and widgets - [ui, plugin, interface]'),
-    new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panel rendering - [ui, graphics, scaling]'),
+    new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin'),
+    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D physics'),
+    new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters'),
+    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Buttons, sliders, and checkboxes'),
+    new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panels'),
     new ExampleInfo('--- FULL EXAMPLES ---'),
-    new ExampleInfo('Starter', 'starter', 'Clean project template - [template, beginner]', true),
-    new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Step-by-step breakout guide - [tutorial, breakout]', true),
-    new ExampleInfo('Breakout Game', 'breakout', 'Complete breakout with effects - [game, breakout, complete]', true),
-    new ExampleInfo('Platforming Game', 'platformer', 'Full platformer with levels - [game, platformer, complete]', true),
-    new ExampleInfo('Puzzle Game', 'puzzle', 'Match-3 puzzle with HD graphics - [game, puzzle, match3]', true),
-    new ExampleInfo('Stress Test', 'stress', 'Performance test with music - [performance, test, music]', true),
-    new ExampleInfo('Box2D Plugin', 'box2d', 'Complete Box2D physics demo - [physics, box2d, complete]', true),
-    new ExampleInfo('HTML Menus', 'htmlMenu', 'HTML integration example - [html, ui, integration]', true),
-    new ExampleInfo('UI System Plugin', 'uiSystem', 'Complete UI system demo - [ui, plugin, complete]', true),
+    new ExampleInfo('Starter', 'starter', 'Clean project template', true),
+    new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Step-by-step breakout tutorial', true),
+    new ExampleInfo('Breakout Game', 'breakout', 'Complete breakout game', true),
+    new ExampleInfo('Platforming Game', 'platformer', 'Full platformer with levels', true),
+    new ExampleInfo('Puzzle Game', 'puzzle', 'Match-3 puzzle game', true),
+    new ExampleInfo('Stress Test', 'stress', 'Performance and music test', true),
+    new ExampleInfo('Box2D Plugin', 'box2d', 'Full Box2D physics demo', true),
+    new ExampleInfo('HTML Menus', 'htmlMenu', 'HTML UI integration', true),
+    new ExampleInfo('UI System Plugin', 'uiSystem', 'Complete UI system demo', true),
 ];
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -222,7 +226,7 @@ function setExample()
     
     // load the example
     const example = exampleList[exampleIndex];
-    exampleInfo.innerText = example.name + (example.description ? ' - ' + example.description : '');
+    exampleInfo.innerText = example.text;
     const filename = 'examples/' + example.filename;
     exampleLink.href = 'https://github.com/KilledByAPixel/LittleJS/tree/main/' + filename;
     exampleLink.innerText = 'View code on GitHub';
@@ -300,16 +304,48 @@ function filterExamples(reset=0)
     
     // filter and add matching examples
     const searchTerm = inputSearch.value.toLowerCase().trim();
+    
+    // first pass: find which examples match
+    const matchingIndices = [];
     for (let i = 0; i < exampleList.length; i++)
     {
-        // check if search term matches name or description
         const example = exampleList[i];
-        const text = example.name + (example.description ? ` - ${example.description}` : '');
+        if (!example.filename)
+            continue;
+            
+        // Check if search term matches name or description
         if (example.name.toLowerCase().includes(searchTerm) || 
             example.description.toLowerCase().includes(searchTerm))
+            matchingIndices.push(i);
+    }
+    
+    // second pass: add headings and matching examples
+    let lastHeadingIndex = -1;
+    for (let i = 0; i < exampleList.length; i++)
+    {
+        const example = exampleList[i];
+        if (example.isHeading)
+        {
+            // check if there are any matches between this and the next
+            for (let j = i + 1; j < exampleList.length; j++)
+            {
+                if (exampleList[j].isHeading)
+                    break; // hit next heading
+                if (matchingIndices.includes(j))
+                {
+                    // only add heading if there are matches under it
+                    lastHeadingIndex = i;
+                    const o = new Option(example.text);
+                    o.disabled = true;
+                    selectExample.add(o);
+                    break;
+                }
+            }
+        }
+        else if (matchingIndices.includes(i))
         {
-            const o = new Option(text);
-            o.disabled = !example.filename;
+            // add matching example
+            const o = new Option(example.text);
             o.originalIndex = i;
             selectExample.add(o);
         }
@@ -317,7 +353,7 @@ function filterExamples(reset=0)
     
     if (!selectExample.options.length)
     {
-        // show a message if no matches
+        // show a message if no matches were found
         const o = new Option(`No examples found matching '${searchTerm}'`);
         o.disabled = true;
         selectExample.add(o);
@@ -387,7 +423,7 @@ function setCode(code, filename)
         {
             // try to extract line number from stack trace
             // look for <anonymous> or injectedScript to find user code
-            const anonymousMatch = stack.match(/(<anonymous>|injectedScript):(\d+)/);
+            const anonymousMatch = stack?.match(/(<anonymous>|injectedScript):(\d+)/);
             return anonymousMatch ? parseInt(anonymousMatch[2]) : -1;            
         }
         iframeContent.onerror = (message, source, lineno, colno, error) =>
@@ -484,7 +520,12 @@ function setCode(code, filename)
             const errorLine = getErrorLine(error.stack);
             if (errorLine >= 0)
                 setErrorLine(errorLine);
-            setErrorMessage(error.message + '\n' + error.stack);
+            let message = error;
+            if (error.message)
+                message = error.message;
+            if (error.stack)
+                message += '\n' + error.stack;
+            setErrorMessage(message);
             throw error;
         })
         .then(()=>

package/examples/puzzle/game.js

@@ -69,8 +69,7 @@ function gameInit()
 {
     // setup canvas
     LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
-    LJS.mainCanvas.style.background = backgroundColor;
-
+    LJS.setCanvasClearColor(backgroundColor);
     // load high score
     bestScore = localStorage[highScoreKey] || 0;
 

package/examples/shorts/animation.js

@@ -1,7 +1,7 @@
+canvasClearColor = GRAY;
+
 function gameRender()
 {
-    drawRect(vec2(0,0), vec2(100), GRAY); // draw background
-
     {
         // animate using multiple frames
         const pos = vec2(-5, 2*abs(Math.sin(time*2*PI)));

package/examples/shorts/box2d.js

@@ -4,6 +4,7 @@ async function gameInit()
     await box2dInit();
     mouseJoint = 0;
     gravity.y = -50;
+    canvasClearColor = hsl(0,0,.9);
     
     // create ground object
     groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);

package/examples/shorts/box2dCar.js

@@ -6,6 +6,7 @@ async function gameInit()
     groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
     groundObject.addBox(vec2(100,6));
     new CarObject(vec2(0,-2));
+    canvasClearColor = hsl(0,0,.9);
 }
 
 class CarObject extends Box2dObject

package/examples/shorts/flappyGame.js

@@ -2,7 +2,7 @@ class Wall extends EngineObject
 {
     constructor(pos, size)
     {
-        super(pos, size, 0, 0, hsl(.4,.5,.4));
+        super(pos, size, 0, 0, hsl(.3,.5,.3));
         this.setCollision(); // make object collide
     }
     update()
@@ -50,4 +50,5 @@ function gameInit()
         new Wall(vec2(14 + i*spacing,y), vec2(3,h));
     }
     new Player(vec2(-7,6));
+    canvasClearColor = hsl(.55,1,.8);
 }

package/examples/shorts/helloWorld.js

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

package/examples/shorts/hillGlideGame.js

@@ -40,17 +40,20 @@ function gameInit()
 {
     gravity.y = -.01;
     new Player(vec2(0,5));
+    canvasClearColor = hsl(.7,1,.8);
 }
 
 function gameRender()
 {
     const h = 100, w = 20;
-    const pos = vec2(), size = vec2(.2,h), color = WHITE;
+    const pos = vec2(), sizeTop = vec2(.4), size = vec2(.2,h), color = WHITE;
     for (let x=cameraPos.x-w; x<cameraPos.x+w; x+=.1)
     {
         pos.x = x;
-        pos.y = getGroundHeight(x)-h/2;
-        color.setHSLA(.2+.2*wave(.2,1,x), .5, .5);
+        pos.y = getGroundHeight(x);
+        drawRect(pos, sizeTop, BLACK);
+        pos.y -= h/2;
+        color.setHSLA(.2+.2*wave(.2,1,x), .7, .5);
         drawRect(pos, size, color);
     }
 }

package/examples/shorts/maze.js

@@ -44,4 +44,5 @@ function gameInit()
     }
     tileLayer.redraw(); // redraw tile layer with new data
     cameraPos = mazeSize.scale(.5); // center camera
+    canvasClearColor = hsl(rand(),.3,.2); // random background color
 }

package/examples/shorts/medals.js

@@ -12,6 +12,9 @@ medalsInit(saveName);
 medalsForEach(medal=> medal.unlocked = false);
 medal_openedExample.unlock();
 
+// set background color
+canvasClearColor = hsl(.5,.3,.2);
+
 function gameUpdate()
 {
     if (mouseWasPressed(0))

package/examples/shorts/music.js

@@ -1,18 +1,16 @@
-// Music player variables
+let playButton, stopButton, progressBar;
 let musicSound = new SoundWave('song.mp3');
 let musicVolume = 1;
 let musicInstance;
 
-// UI elements
-let playButton, stopButton, progressBar;
-
 function gameInit()
 {
-    // load ui system plugin
+    // setup ui system plugin
     new UISystemPlugin;
     uiSystem.defaultSoundPress = new Sound([.5,0,220]);
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 20;
+    canvasClearColor = hsl(.9,.3,.2); // background color
 
     // setup music player UI
     const musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));

package/examples/shorts/piano.js

@@ -1,51 +1,50 @@
-const pianoSound = new Sound([,0,220,,9]), keys = [];
+const pianoSound = new Sound([,0,220,,9]);
 
-class PianoKey extends EngineObject
+class PianoKey extends UIButton
 {
     constructor(pos, size, semitone, isWhite)
     {
-        const keySize = 2;
+        const keySize = 65;
         size = size.scale(keySize);
-        pos = pos.scale(keySize).add(vec2(0,4-size.y/2));
-        super(pos, size, 0, 0, hsl(0,0,isWhite ? 1 : .3));
-        this.drawSize = size.subtract(vec2(.1,0));
+        pos = pos.scale(keySize).add(vec2(0,size.y/2-keySize*2));
+        pos = pos.add(mainCanvasSize.scale(.5));
+        super(pos, size, '', hsl(0,0,isWhite ? 1 : .3));
         this.semitone = semitone;
+        this.dragActivate = true;
+        this.hoverColor = hsl(0,1,isWhite ? .9 : .3);
+        this.activeColor = RED;
     }
-    press()
+    onPress()
     {
         if (!this.soundInstance)
             this.soundInstance = pianoSound.playNote(this.semitone);
     }
-    release()
+    onRelease()
     {
         if (this.soundInstance)
             this.soundInstance.stop(.2);
         this.soundInstance = 0;
     }
-    render()
-    {
-        const color = this.soundInstance ? RED : this.color;
-        drawRect(this.pos, this.drawSize, color);
-    }
 }
 
 function gameInit()
 {
+    // initialize UI system
+    new UISystemPlugin;
+
     // create piano keyboard
     for (let i=15; i--;)
-        keys.unshift(new PianoKey(vec2(i-7,0), vec2(1,4), [0,2,4,5,7,9,11][i%7]+(i/7|0)*12, 1));
+    {
+        const pos = vec2(i-7,0);
+        const size = vec2(1,4);
+        const semitone = [0,2,4,5,7,9,11][i%7]+(i/7|0)*12;
+        new PianoKey(pos, size, semitone, true);
+    }
     for (let i=10; i--;)
-        keys.unshift(new PianoKey(vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0), vec2(1,2), [1,3,6,8,10][i%5]+(i/5|0)*12));
-}
-
-function gameUpdate()
-{
-    // update state of piano keys
-    const pressedKey = keys.find(k=>k.soundInstance);
-    const newPressedKey = mouseIsDown(0) && keys.find(k=>isOverlapping(k.pos, k.size, mousePos));
-    if (newPressedKey != pressedKey)
     {
-        pressedKey && pressedKey.release();
-        newPressedKey && newPressedKey.press();
+        const pos = vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0)
+        const size = vec2(1,2);
+        const semitone = [1,3,6,8,10][i%5]+(i/5|0)*12;
+        new PianoKey(pos, size, semitone);
     }
 }

package/examples/shorts/platformer.js

@@ -26,6 +26,7 @@ function gameInit()
     // setup level
     gravity.y = -.05;
     new Player(vec2(5,6));
+    canvasClearColor = hsl(.6,.3,.5);
 
     // create tile layer
     const pos = vec2();

package/examples/shorts/shapes.js

@@ -1,18 +1,18 @@
 function gameRender()
 {
     // circles and ellipses
-    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)
+    drawEllipse(vec2(-6,5), vec2(3,2), YELLOW, .5);
+    drawCircle(vec2(0,5), 2+wave(.5), RED);
+    drawEllipse(vec2(6,5), vec2(2,4), 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);
+    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, MAGENTA, true, vec2(6, 0));
+    drawLineList(starPath, .2, GREEN, true, 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, GREEN);
+    drawLineList([vec2(5,-3), vec2(-5,-3), vec2(5,-7), vec2(-5,-7)], .2, MAGENTA);
 }

package/examples/shorts/sound.js

@@ -1,37 +1,26 @@
-class SoundButton extends EngineObject
+function gameInit()
 {
-    constructor(pos, icon, sound)
-    {
-        super(pos, vec2(5,4));
-        this.icon = icon;
-        this.sound = sound;
-    }
-
-    update()
-    {
-        // play sound when clicked
-        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
-            this.sound.play(this.pos);
-    }
+    // initialize UI system
+    new UISystemPlugin;
+    canvasClearColor = hsl(.6,.3,.2);
 
-    render()
+    // create a grid of buttons with different sounds
+    const w = 200, h = 150, gap = 20;
+    function makeSoundButton(pos, icon, sound)
     {
-        // draw the button and icon
-        drawRect(this.pos, this.size, hsl(0,0,.8));
-        drawTextOverlay(this.icon, this.pos, 3);
+        pos = pos.multiply(vec2(w+gap, h+gap));
+        pos = pos.add(mainCanvasSize.scale(.5));
+        const button = new UIButton(pos, vec2(w, h), icon);
+        button.textHeight = 100;
+        button.onClick = ()=> sound.play();
     }
-}
-
-function gameInit()
-{
-    // create a grid of buttons with different sounds
-    new SoundButton(vec2(-6, 5),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
-    new SoundButton(vec2( 0, 5),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
-    new SoundButton(vec2( 6, 5),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
-    new SoundButton(vec2(-6, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
-    new SoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
-    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
-    new SoundButton(vec2(-6,-5),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
-    new SoundButton(vec2( 0,-5),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
-    new SoundButton(vec2( 6,-5),'⚡', 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/spriteAtlas.js

@@ -1,4 +1,5 @@
 let spriteAtlas;
+canvasClearColor = GRAY;
 
 function gameInit()
 {
@@ -16,8 +17,6 @@ function gameInit()
 
 function gameRender()
 {
-    drawRect(vec2(0,0), vec2(100), GRAY); // draw background
-
     // 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

package/examples/shorts/tileLayer.js

@@ -2,6 +2,7 @@ function gameInit()
 {
     cameraPos = vec2(16); // setup camera
     gravity.y = -.01; // enable gravity
+    canvasClearColor = hsl(0,0,.2); // background color
 
     // create tile layer
     const pos = vec2();

package/examples/shorts/tiltedView.js

@@ -37,7 +37,7 @@ 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,.3,rand(.1,.2),.8), -1e5);
+        new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, 0, hsl(.4,.2,rand(.4,.5),.8), -1e5);
 
     // create world objects
     for (let i=1; i<1e3; ++i)