littlejsengine 1.14.4 → 1.14.7

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('Starfield', 'starfield.js', 'Animated parallax starfield'),
+    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives'),
+    new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL'),
+    new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation'),
+    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering'),
+    new ExampleInfo('Animation', 'animation.js', 'Sprite animation system'),
+    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);

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 = .8;
+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([.3,0,220]);
-    uiSystem.defaultSoundClick = new Sound([.3,0,440]);
+    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/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

@@ -34,4 +34,5 @@ function gameInit()
     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]));
+    canvasClearColor = hsl(.6,.3,.2); // background color
 }

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)

package/examples/shorts/timers.js

@@ -1,40 +1,43 @@
-class TimerButton extends EngineObject
-{
-    constructor(pos, time)
-    {
-        super(pos, vec2(5.5));
-        this.time = time;
-        this.timer = new Timer;
-    }
+let timerButton, timerSlider;
 
-    update()
-    {
-        // start or stop the timer when clicked
-        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
-            this.timer.isSet() ? this.timer.unset() : this.timer.set(this.time);
-    }
+function gameInit()
+{
+    // setup ui system plugin
+    new UISystemPlugin();
+    uiSystem.defaultCornerRadius = 10;
+    canvasClearColor = hsl(.3,.3,.2);
 
-    render()
+    // create timer button
+    const pos = mainCanvasSize.scale(.5).add(vec2(0, -40));
+    timerButton = new UIButton(pos, vec2(200, 90), 'Start');
+    timerButton.timer = new Timer;
+    timerButton.onClick = ()=>
     {
-        // get color based on timer state
-        this.color = this.timer.isSet() ? this.timer.active() ? BLUE : RED : GRAY;
-
-        // draw the button and timer text
-        drawRect(this.pos, this.size, this.color);
-        if (this.timer.isSet())
+        if (timerButton.timer.isSet())
         {
-            drawTextOverlay(this.timer.get().toFixed(1), this.pos.add(vec2(0,1)), 2);
-            const percent = this.timer.getPercent()*100|0;
-            drawTextOverlay(percent+'%', this.pos.add(vec2(0,-1)), 2);
+            timerButton.timer.unset();
+            timerButton.text = 'Start';
         }
         else
-            drawTextOverlay('Click\nto set', this.pos, 2);
+        {
+            timerButton.timer.set(3);
+            timerButton.text = 'Stop';
+        }
     }
-}
 
-function gameInit()
-{
-    // create some timer buttons
-    new TimerButton(vec2(-5, 0), 3);
-    new TimerButton(vec2( 5, 0), 0);
+    // create non-interactive slider to display timer
+    timerSlider = new UIScrollbar(vec2(0, 100), vec2(400, 50));
+    timerSlider.interactive = false;
+    timerSlider.update = ()=>
+    {
+        // update the timer display
+        const t = timerButton.timer.get();
+        const timeText = t.toFixed(2) + 's';
+        const isSet = timerButton.timer.isSet();
+        const setTime = timerButton.timer.getSetTime();
+        timerSlider.text = timeText;
+        timerSlider.value = setTime ? 1+t/setTime : 1;
+        timerSlider.color = isSet ? t < 0 ? CYAN : RED : GRAY;
+    }
+    timerButton.addChild(timerSlider);
 }

package/examples/shorts/topDown.js

@@ -23,13 +23,14 @@ class Player extends EngineObject
 function gameInit()
 {
     // setup level
+    canvasClearColor = hsl(.3,.2,.6);
     objectDefaultDamping = .7;
     new Player;
 
     // 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(.8,1)));
+        const o = new EngineObject(randInCircle(15+i,7), vec2(rand(4,9),rand(4,9)), 0, 0, hsl(0,0,rand(.1,.3)));
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics
     }

package/examples/shorts/uiSystem.js

@@ -4,17 +4,15 @@ let uiMenu;
 
 function gameInit()
 {
-    // load ui system plugin
+    // setup ui system plugin
     new UISystemPlugin;
     uiSystem.defaultSoundPress = new Sound([1,0,220]);
     uiSystem.defaultSoundClick = new Sound([1,0,440]);
     uiSystem.defaultCornerRadius = 8;
 
     // setup example menu
-    uiBackground = new UIObject(mainCanvasSize.scale(.5), vec2(1e5));
-    uiBackground.color = hsl(0,0,.8);
-    const uiMenu = new UIObject(vec2(), vec2(450));
-    uiBackground.addChild(uiMenu);
+    const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(450));
+    canvasClearColor = hsl(0,0,.8);
 
     // example text
     const textTitle = new UIText(vec2(0,-120), vec2(400, 60), 'LittleJS UI\nSystem Demo');

package/examples/stress/index.html

@@ -47,7 +47,7 @@ function gameInit()
     LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
     LJS.setCameraScale(20);
     LJS.setCameraPos(tileLayer.size.scale(.5));
-    LJS.mainCanvas.style.background = '#555';
+    LJS.setCanvasClearColor(rgb(.4,.4,.4));
     LJS.setGravity(vec2(0,-.005));
     sprites = [];
 

package/examples/uiSystem/game.js

@@ -85,6 +85,7 @@ function gameInit()
 {
     new LJS.UISystemPlugin;
     createUI();
+    LJS.setCanvasClearColor(hsl(0,0,.2));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -110,7 +111,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 pos = vec2(30*Math.sin(i+LJS.time/9),20*Math.sin(i*i+LJS.time/9));

package/package.json

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