littlejsengine 1.18.4 → 1.18.8

package/examples/tweenSystem/game.js

@@ -1,171 +0,0 @@
-/*
-    LittleJS Tween System Example
-    - Demonstrates every public feature of the tween plugin
-    - 1) Property tween, 2) Callback tween, 3) Chaining, 4) Loop+PingPong,
-      5) Easing showcase, 6) Real-time tween that survives pause
-*/
-
-'use strict';
-
-import * as LJS from '../../dist/littlejs.esm.js';
-const { vec2, hsl, drawRect, drawText } = LJS;
-const { Tween, tweenProperty, Ease } = LJS;
-
-LJS.setCanvasFixedSize(vec2(1920, 1080));
-LJS.setCanvasPixelated(false);
-
-///////////////////////////////////////////////////////////////////////////////
-// Layout — world-space row positions
-
-const ROW_PROPERTY  =  9;
-const ROW_COUNTDOWN =  7.2;
-const ROW_CHAIN     =  5.4;
-const ROW_LOOP      =  3.6;
-const ROW_PINGPONG  =  1.8;
-const ROW_EASE_TOP  =  0;
-const EASE_SPACING  =  1.2;
-const ROW_REALTIME  = -10.0;
-const ROW_VECTOR2   = -11.7;
-const ROW_COLOR     = -13.2;
-const LABEL_X       = -9;
-
-///////////////////////////////////////////////////////////////////////////////
-// State
-
-const moverObj    = { pos: vec2(-5, ROW_PROPERTY) };
-const chainObj    = { pos: vec2(-5, ROW_CHAIN), size: 1 };
-const loopObj     = { pos: vec2(-5, ROW_LOOP) };
-const pingPongObj = { pos: vec2(-5, ROW_PINGPONG) };
-const realObj     = { pos: vec2(-5, ROW_REALTIME) };
-const vec2Obj     = { pos: vec2(-5, ROW_VECTOR2 + 0.4) };
-const colorObj    = { pos: vec2(0, ROW_COLOR), color: hsl(0, 0.8, 0.6) };
-let   countdownValue = 10;
-
-const easingDemos =
-[
-    ['LINEAR',         Ease.LINEAR],
-    ['OUT(SINE)',      Ease.OUT(Ease.SINE)],
-    ['OUT(POWER(2))',  Ease.OUT(Ease.POWER(2))],
-    ['OUT(BACK)',      Ease.OUT(Ease.BACK)],
-    ['OUT(ELASTIC)',   Ease.OUT(Ease.ELASTIC)],
-    ['OUT(BOUNCE)',    Ease.OUT(Ease.BOUNCE)],
-    ['IN_OUT(POW(3))', Ease.IN_OUT(Ease.POWER(3))],
-    ['BEZIER',         Ease.BEZIER(0.25, 0.1, 0.25, 1)],
-];
-const easingObjs = easingDemos.map((_, i) => ({
-    pos: vec2(-5, ROW_EASE_TOP - i * EASE_SPACING)
-}));
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    LJS.setCanvasClearColor(hsl(0, 0, 0.1));
-
-    // 1) Basic property tween, ping-pong forever
-    tweenProperty(moverObj.pos, 'x', -5, 5, 2).pingPong();
-
-    // 2) Callback tween — countdown 10 → 0 looping forever
-    new Tween((v) => { countdownValue = v; }, 10, 0, 5).loop();
-
-    // 3) Chaining: slide right, then shrink, then restart the chain
-    startChain();
-
-    // 4) Loop forever and PingPong forever on adjacent rows
-    tweenProperty(loopObj.pos, 'x', -5, 5, 1.5).loop();
-    tweenProperty(pingPongObj.pos, 'x', -5, 5, 1.5).pingPong();
-
-    // 5) Easing showcase — each row uses a different curve, all ping-pong
-    for (let i = 0; i < easingDemos.length; i++)
-    {
-        const [, easeFn] = easingDemos[i];
-        tweenProperty(easingObjs[i].pos, 'x', -5, 5, 2)
-            .setEase(easeFn)
-            .pingPong();
-    }
-
-    // 6) Real-time tween — keeps moving while game is paused
-    tweenProperty(realObj.pos, 'x', -5, 5, 2, { useRealTime: true }).pingPong();
-
-    // 7) Vector2 tween — moves diagonally (interpolates both x and y)
-    tweenProperty(vec2Obj, 'pos',
-        vec2(-5, ROW_VECTOR2 + 0.4),
-        vec2( 5, ROW_VECTOR2 - 0.4),
-        2).pingPong();
-
-    // 8) Color tween — pulses between two colors using Color.lerp()
-    tweenProperty(colorObj, 'color', hsl(0, 0.8, 0.6), hsl(0.6, 0.8, 0.6), 2).pingPong();
-}
-
-function startChain()
-{
-    chainObj.pos.x = -5;
-    chainObj.size = 1;
-    new Tween((v) => { chainObj.pos.x = v; }, -5, 5, 1.5)
-        .then(() =>
-        {
-            new Tween((v) => { chainObj.size = v; }, 1, 0.2, 0.8)
-                .then(startChain);
-        });
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate() { }
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-    // Press P to toggle pause; the real-time row keeps moving regardless.
-    if (LJS.keyWasPressed('KeyP')) LJS.setPaused(!LJS.getPaused());
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    drawRect(moverObj.pos,    vec2(0.8), hsl(0.60, 0.8, 0.6));
-    drawRect(chainObj.pos,    vec2(chainObj.size), hsl(0.05, 0.8, 0.6));
-    drawRect(loopObj.pos,     vec2(0.8), hsl(0.30, 0.8, 0.6));
-    drawRect(pingPongObj.pos, vec2(0.8), hsl(0.50, 0.8, 0.6));
-    for (let i = 0; i < easingObjs.length; i++)
-        drawRect(easingObjs[i].pos, vec2(0.6), hsl(i / easingObjs.length, 0.8, 0.6));
-    drawRect(realObj.pos,     vec2(0.8), hsl(0.85, 0.8, 0.6));
-    drawRect(vec2Obj.pos,     vec2(0.8), hsl(0.15, 0.8, 0.6));
-    drawRect(colorObj.pos,    vec2(0.8), colorObj.color);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    const labelColor = hsl(0, 0, 1);
-    const subColor   = hsl(0, 0, 0.75);
-
-    // Title and subtitle (world space, centered)
-    drawText('LittleJS Tween System Example', vec2(0, 13), 1.4, labelColor);
-    drawText('Press P to pause — the bottom row uses useRealTime and keeps moving',
-        vec2(0, 11.5), 0.5, subColor);
-
-    // Row labels (centered at LABEL_X, sitting just left of the animating objects)
-    drawText('property',   vec2(LABEL_X, ROW_PROPERTY),  0.6, labelColor);
-    drawText('callback',   vec2(LABEL_X, ROW_COUNTDOWN), 0.6, labelColor);
-    drawText('chain',      vec2(LABEL_X, ROW_CHAIN),     0.6, labelColor);
-    drawText('loop()',     vec2(LABEL_X, ROW_LOOP),      0.6, labelColor);
-    drawText('pingPong()', vec2(LABEL_X, ROW_PINGPONG),  0.6, labelColor);
-    for (let i = 0; i < easingDemos.length; i++)
-    {
-        const [label] = easingDemos[i];
-        drawText(label, vec2(LABEL_X, ROW_EASE_TOP - i * EASE_SPACING), 0.5, labelColor);
-    }
-    drawText('useRealTime', vec2(LABEL_X, ROW_REALTIME), 0.6, labelColor);
-    drawText('Vector2',     vec2(LABEL_X, ROW_VECTOR2),  0.6, labelColor);
-    drawText('Color',       vec2(LABEL_X, ROW_COLOR),    0.6, labelColor);
-
-    // Live countdown value sitting on the callback row, between label and the easing rows
-    const countdownText = Math.ceil(countdownValue).toString();
-    drawText(countdownText, vec2(0, ROW_COUNTDOWN), 1.2, hsl(0, 0.8, 0.6));
-
-    // Pause indicator
-    if (LJS.getPaused())
-        drawText('PAUSED', vec2(0, -5), 2.5, hsl(0, 1, 0.7));
-}
-
-///////////////////////////////////////////////////////////////////////////////
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/tweenSystem/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Tween System Example</title>
-<meta charset=utf-8>
-<meta name=apple-mobile-web-app-capable content=yes>
-<meta name=mobile-web-app-capable content=yes>
-<link rel=icon type=image/png href=../favicon.png>
-</head><body>
-
-<!-- Add your game scripts here -->
-<script src=game.js type=module></script>

package/examples/typescript/build.mjs

@@ -1,60 +0,0 @@
-/**
- * LittleJS TypeScript Example Build System
- */
-
-'use strict';
-
-import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
-import fs from 'node:fs';
-import { execSync } from 'node:child_process';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const PROGRAM_NAME = 'game';
-const BUILD_FOLDER = join(__dirname, 'build');
-
-// Define TypeScript source files
-const tsSourceFiles = [
-    'game.ts',
-    // add your TypeScript files here
-];
-
-// Corresponding JS output files
-const jsSourceFiles = tsSourceFiles.map(file => file.replace('.ts', '.js'));
-
-console.log(`Building TypeScript for ${PROGRAM_NAME}...`);
-const startTime = Date.now();
-
-console.log(`Removing old build folder...`);
-fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
-
-console.log(`Compiling TypeScript...`);
-
-// Use tsconfig.json for compilation settings
-try
-{
-    const result = execSync(`npx -p typescript tsc`, {cwd: __dirname, encoding: 'utf8', stdio: 'pipe'});
-    console.log(result);
-} catch (error)
-{
-    console.error('TypeScript compilation errors:');
-    if (error.stdout) console.log(error.stdout);
-    if (error.stderr) console.error(error.stderr);
-    console.error('TypeScript compilation failed!');
-    process.exit(1);
-}
-
-console.log(`Copying js files back to root...`);
-for (const file of jsSourceFiles)
-{
-    // TypeScript outputs to build/examples/typescript/ because of relative paths
-    const buildFile = join(BUILD_FOLDER, 'examples', 'typescript', file);
-    const targetFile = join(__dirname, file);
-    console.log(`Copying ${file}...`);
-    if (fs.existsSync(buildFile))
-        fs.copyFileSync(buildFile, targetFile);
-    else
-        console.error(`✗ Build file not found: ${buildFile}`);
-}
-
-console.log(`TypeScript built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);

package/examples/typescript/game.js

@@ -1,100 +0,0 @@
-/*
-    Little JS TypeScript Demo
-    - A simple starter project
-    - Shows how to use LittleJS with modules
-*/
-'use strict';
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const { tile, vec2, hsl } = LJS;
-// show the LittleJS splash screen
-LJS.setShowSplashScreen(true);
-// fix texture bleeding by shrinking tile slightly
-LJS.setTileDefaultBleed(.5);
-// sound effects
-const sound_click = new LJS.Sound([1, .5]);
-// medals
-const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LJS.medalsInit('Hello World');
-// game variables
-let particleEmitter;
-///////////////////////////////////////////////////////////////////////////////
-function gameInit() {
-    // create tile collision and visible tile layer
-    const pos = vec2();
-    const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32, 16));
-    // get level data from the tiles image
-    const mainContext = LJS.mainContext;
-    const tileImage = LJS.textureInfos[0].image;
-    mainContext.drawImage(tileImage, 0, 0);
-    const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
-    for (pos.x = tileLayer.size.x; pos.x--;)
-        for (pos.y = tileLayer.size.y; pos.y--;) {
-            // check if this pixel is set
-            const i = pos.x + tileImage.width * (15 + tileLayer.size.y - pos.y);
-            if (!imageData[4 * i])
-                continue;
-            // set tile data
-            const tileIndex = 1;
-            const direction = LJS.randInt(4);
-            const mirror = !LJS.randInt(2);
-            const color = LJS.randColor();
-            const data = new LJS.TileLayerData(tileIndex, direction, mirror, color);
-            tileLayer.setData(pos, data);
-            tileLayer.setCollisionData(pos);
-        }
-    // draw tile layer with new data
-    tileLayer.redraw();
-    // move camera to center of collision
-    LJS.setCameraPos(tileLayer.size.scale(.5));
-    LJS.setCameraScale(32);
-    // enable gravity
-    LJS.setGravity(vec2(0, -.01));
-    // create particle emitter
-    particleEmitter = new LJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
-    0, 0, 500, 3.14, // 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
-    1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
-    .99, 1, 1, 3.14, // damping, angleDamping, gravityScale, cone
-    .05, .5, true, true // fadeRate, randomness, collide, additive
-    );
-    particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2; // stretch stretch as it moves
-    particleEmitter.velocityInheritance = .3; // inherit emitter velocity
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate() {
-    if (LJS.mouseWasPressed(0)) {
-        // play sound when mouse is pressed
-        sound_click.play(LJS.mousePos);
-        // change particle color and set to fade out
-        particleEmitter.colorStartA = LJS.randColor();
-        particleEmitter.colorStartB = LJS.randColor();
-        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
-        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
-        // unlock medals
-        medal_example.unlock();
-    }
-    // move particles to mouse location if on screen
-    if (LJS.mousePosScreen.x)
-        particleEmitter.pos = LJS.mousePos;
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost() {
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameRender() {
-    // draw a grey square in the background
-    LJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6));
-    // draw the logo as a tile
-    LJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost() {
-    LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x / 2, 80), 80);
-}
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/game.ts

@@ -1,132 +0,0 @@
-/*
-    Little JS TypeScript Demo
-    - A simple starter project
-    - Shows how to use LittleJS with modules
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const {tile, vec2, hsl} = LJS;
-
-// show the LittleJS splash screen
-LJS.setShowSplashScreen(true);
-
-// fix texture bleeding by shrinking tile slightly
-LJS.setTileDefaultBleed(.5);
-
-// sound effects
-const sound_click = new LJS.Sound([1,.5]);
-
-// medals
-const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LJS.medalsInit('Hello World');
-
-// game variables
-let particleEmitter;
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    // create tile collision and visible tile layer
-    const pos = vec2();
-    const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32,16));
-
-    // get level data from the tiles image
-    const mainContext = LJS.mainContext;
-    const tileImage = LJS.textureInfos[0].image;
-    mainContext.drawImage(tileImage, 0, 0);
-    const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
-    for (pos.x = tileLayer.size.x; pos.x--;)
-    for (pos.y = tileLayer.size.y; pos.y--;)
-    {
-        // check if this pixel is set
-        const i = pos.x + tileImage.width*(15 + tileLayer.size.y - pos.y);
-        if (!imageData[4*i])
-            continue;
-        
-        // set tile data
-        const tileIndex = 1;
-        const direction = LJS.randInt(4)
-        const mirror = !LJS.randInt(2);
-        const color = LJS.randColor();
-        const data = new LJS.TileLayerData(tileIndex, direction, mirror, color);
-        tileLayer.setData(pos, data);
-        tileLayer.setCollisionData(pos);
-    }
-
-    // draw tile layer with new data
-    tileLayer.redraw();
-
-    // move camera to center of collision
-    LJS.setCameraPos(tileLayer.size.scale(.5));
-    LJS.setCameraScale(32);
-
-    // enable gravity
-    LJS.setGravity(vec2(0,-.01));
-
-    // create particle emitter
-    particleEmitter = new LJS.ParticleEmitter(
-        vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 500, 3.14,            // 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
-        1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
-        .99, 1, 1, 3.14,    // damping, angleDamping, gravityScale, cone
-        .05, .5, true, true // fadeRate, randomness, collide, additive
-    );
-    particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch stretch as it moves
-    particleEmitter.velocityInheritance = .3; // inherit emitter velocity
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate()
-{
-    if (LJS.mouseWasPressed(0))
-    {
-        // play sound when mouse is pressed
-        sound_click.play(LJS.mousePos);
-
-        // change particle color and set to fade out
-        particleEmitter.colorStartA = LJS.randColor();
-        particleEmitter.colorStartB = LJS.randColor();
-        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
-        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
-
-        // unlock medals
-        medal_example.unlock();
-    }
-
-    // move particles to mouse location if on screen
-    if (LJS.mousePosScreen.x)
-        particleEmitter.pos = LJS.mousePos;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    // draw a grey square in the background
-    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6));
-    
-    // draw the logo as a tile
-    LJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-    LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x/2, 80), 80);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS TypeScript Demo</title>
-<meta charset=utf-8>
-<meta name=apple-mobile-web-app-capable content=yes>
-<meta name=mobile-web-app-capable content=yes>
-<link rel=icon type=image/png href=../favicon.png>
-</head><body>
-
-<!-- Add your game scripts here -->
-<script src=game.js type=module></script>

package/examples/typescript/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "module": "es2020",
-    "target": "es2020",
-    "outDir": "build",
-    "moduleResolution": "bundler",
-    "skipLibCheck": true
-  },
-  "include": [
-    "*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "build"
-  ]
-}

package/examples/uiSystem/game.js

@@ -1,139 +0,0 @@
-/*
-    Little JS UI System Example
-    - Shows how to use the LittleJS UI plugin
-    - Modal windows, buttons, text, checkboxes, and more
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-const {vec2, hsl, tile} = LJS;
-
-// UI system
-let uiRoot, uiMenu;
-const getMenuVisible =()=> uiMenu.visible;
-const setMenuVisible =(visible)=> uiMenu.visible = visible;
-
-// use a fixed size canvas
-LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
-LJS.setCanvasPixelated(false);
-
-function createUI()
-{
-    LJS.uiSystem.defaultSoundPress = new LJS.Sound([.5,0,220]);
-    LJS.uiSystem.defaultSoundClick = new LJS.Sound([.5,0,440]);
-    LJS.uiSystem.defaultCornerRadius = 8;
-    LJS.uiSystem.defaultGradientColor = LJS.WHITE;
-    LJS.uiSystem.defaultShadowColor = LJS.BLACK;
-
-    // setup root to attach all ui elements to
-    uiRoot = new LJS.UIObject;
-    const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70), 
-        'LittleJS UI System Example\nM = Toggle menu');
-    uiInfo.textColor = LJS.WHITE;
-    uiInfo.textLineWidth = 8;
-    uiRoot.addChild(uiInfo);
-
-    // setup example menu
-    uiMenu = new LJS.UIObject(vec2(0,500));
-    uiRoot.addChild(uiMenu);
-    const uiBackground = new LJS.UIObject(vec2(), vec2(450,580));
-    uiBackground.lineWidth = 8;
-    uiMenu.addChild(uiBackground);
-
-    // example large text
-    const textTitle = new LJS.UIText(vec2(0,-220), vec2(400, 120), 'Test Title');
-    uiMenu.addChild(textTitle);
-    textTitle.textColor = LJS.RED;
-    textTitle.textLineColor = LJS.BLUE;
-    textTitle.textLineWidth = 4;
-
-    // example multiline text
-    const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 60), 'Test Text\nSecond text line.')
-    uiMenu.addChild(textTest);
-
-    // example tile image
-    const tileTest = new LJS.UITile(vec2(150,-130), vec2(110), tile(3,128))
-    uiMenu.addChild(tileTest);
-
-    // setup navigation index for gamepad and keyboard navigation
-    let navigationIndex = 0;
-    
-    // example checkbox
-    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(50));
-    uiMenu.addChild(checkbox);
-    checkbox.onChange = ()=> button1.disabled = checkbox.checked;
-    checkbox.navigationIndex = ++navigationIndex;
-    checkbox.text = 'Test Checkbox';
-
-    // example slider
-    const slider = new LJS.UISlider(vec2(0,60), vec2(350, 50));
-    uiMenu.addChild(slider);
-    slider.onChange = ()=> slider.text = slider.value.toFixed(2)
-    slider.onChange();
-    slider.navigationIndex = ++navigationIndex;
-
-    // example button
-    const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
-    uiMenu.addChild(button1);
-    button1.onClick = ()=> uiBackground.color = hsl(LJS.rand(),1,.7);
-    button1.navigationIndex = ++navigationIndex;
-
-    // exit button
-    const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
-    uiMenu.addChild(button2);
-    button2.onClick = ()=> LJS.uiSystem.showConfirmDialog('Exit menu?',
-        ()=> setMenuVisible(false));
-    button2.navigationIndex = ++navigationIndex;
-    button2.navigationAutoSelect = true;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameInit()
-{
-    new LJS.UISystemPlugin;
-    createUI();
-    LJS.setCanvasClearColor(hsl(0,0,.2));
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate()
-{
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
-{
-    if (LJS.keyWasPressed('KeyM') && !LJS.uiSystem.confirmDialog)
-    {
-        // toggle menu visibility
-        setMenuVisible(!getMenuVisible());
-    }
-
-    // center ui
-    uiRoot.pos.x = LJS.mainCanvasSize.x/2;
-
-    // pause when menu is visible
-    LJS.setPaused(getMenuVisible())
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRender()
-{
-    // test game rendering
-    for (let i=0; i<1e3; ++i)
-    {
-        const pos = vec2(30*LJS.sin(i+LJS.time/9),20*LJS.sin(i*i+LJS.time/9));
-        LJS.drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), LJS.time+i, !(i%2), hsl(i/9,1,.1,0));
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost()
-{
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/uiSystem/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html><head>
-<title>LittleJS Starter Project</title>
-<meta charset=utf-8>
-<meta name=apple-mobile-web-app-capable content=yes>
-<meta name=mobile-web-app-capable content=yes>
-<link rel=icon type=image/png href=../favicon.png>
-</head><body>
-
-<!-- Add your game scripts here -->
-<script src=game.js type=module></script>