littlejsengine 1.10.2 → 1.10.7

package/examples/platformer/gameLevel.js

@@ -12,16 +12,14 @@ const tileType_empty     = 0;
 const tileType_solid     = 1;
 const tileType_breakable = 2;
 
-let player, playerStartPos, tileData, tileLayers, foregroundLayerIndex, sky;
-let levelSize, levelColor, levelBackgroundColor, levelOutlineColor, warmup;
-
-const setTileData = (pos, layer, data)=>
-    pos.arrayCheck(tileCollisionSize) && (tileData[layer][(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
-const getTileData = (pos, layer)=>
-    pos.arrayCheck(tileCollisionSize) ? tileData[layer][(pos.y|0)*tileCollisionSize.x+pos.x|0]: 0;
+let player, playerStartPos, tileLayers, foregroundLayerIndex, sky;
+let levelSize, levelColor, levelBackgroundColor, levelOutlineColor;
 
 function buildLevel()
 {
+    // destroy all objects
+    engineObjectsDestroy();
+
     // create the level
     levelColor = randColor(hsl(0,0,.2), hsl(0,0,.8));
     levelBackgroundColor = levelColor.mutate().scale(.4,1);
@@ -34,33 +32,18 @@ function buildLevel()
     // create parallax layers
     for (let i=3; i--;)
         new ParallaxLayer(i);
-    
-    // apply decoration to all level tiles
-    const pos = vec2();
-    const layerCount = tileLayers.length;
-    for (let layer=layerCount; layer--;)
-    for (pos.x=levelSize.x; pos.x--;)
-    for (pos.y=levelSize.y; pos.y--;)
-        decorateTile(pos, layer);
-
-    // warm up level
-    warmup = 1;
-    for (let i = 500; i--;)
-        engineObjectsUpdate();
-    warmup = 0;
 
     // spawn player
     player = new Player(playerStartPos);
+    cameraPos = getCameraTarget();
 }
 
 function loadLevel(level=0)
 {
     // load level data from an exported Tiled js file
-    const dataName = Object.keys(TileMaps)[level];
-    const tileMapData = TileMaps[dataName];
+    const tileMapData = TileMaps['gameLevelData'];
     levelSize = vec2(tileMapData.width, tileMapData.height);
     initTileCollision(levelSize);
-    engineObjectsDestroy();
 
     // create table for tiles in the level tilemap
     const tileLookup =
@@ -76,7 +59,6 @@ function loadLevel(level=0)
     }
 
     // set all level data tiles
-    tileData = [];
     tileLayers = [];
     playerStartPos = vec2(1, levelSize.y);
     const layerCount = tileMapData.layers.length;
@@ -87,7 +69,6 @@ function loadLevel(level=0)
         const tileLayer = new TileLayer(vec2(), levelSize, tile(0,16,1));
         tileLayer.renderOrder = -1e3+layer;
         tileLayers[layer] = tileLayer;
-        tileData[layer] = [];
 
         for (let x=levelSize.x; x--;) 
         for (let y=levelSize.y; y--;)
@@ -109,10 +90,7 @@ function loadLevel(level=0)
                     new Coin(objectPos);
                 continue;
             }
-
-            // set the tile data
-            setTileData(pos, layer, tile);
-
+            
             // get tile type for special tiles
             let tileType = tileType_empty;
             if (tile > 0)
@@ -144,6 +122,13 @@ function loadLevel(level=0)
         }
         tileLayer.redraw();
     }
+    
+    // apply decoration to all level tiles
+    const pos = vec2();
+    for (let layer=layerCount; layer--;)
+    for (pos.x=levelSize.x; pos.x--;)
+    for (pos.y=levelSize.y; pos.y--;)
+        decorateTile(pos, layer);
 }
 
 function decorateTile(pos, layer=1)
@@ -181,11 +166,11 @@ function decorateTile(pos, layer=1)
     else
     {
         // make round corners
-        for (let i=4;i--;)
+        for (let i=4; i--;)
         {
             // check corner neighbors
-            const neighborTileDataA = getTileData(pos.add(vec2().setDirection(i)), layer);
-            const neighborTileDataB = getTileData(pos.add(vec2().setAngle((i+1)%4*PI/2)), layer);
+            const neighborTileDataA = tileLayer.getData(pos.add(vec2().setDirection(i))).tile;
+            const neighborTileDataB = tileLayer.getData(pos.add(vec2().setDirection((i+1)%4))).tile;
             if (neighborTileDataA > 0 || neighborTileDataB > 0)
                 continue;
 

package/examples/platformer/gameObjects.js

@@ -23,17 +23,14 @@ class GameObject extends EngineObject
         super.update();
 
         // flash white when damaged
+        let brightness = 0;
         if (!this.isDead() && this.damageTimer.isSet())
-        {
-            const a = .5*percent(this.damageTimer, .15, 0);
-            this.additiveColor = hsl(0,0,a,0);
-        }
-        else
-            this.additiveColor = hsl(0,0,0,0);
+            brightness = .5*percent(this.damageTimer, .15, 0);
+        this.additiveColor = hsl(0,0,brightness,0);
 
         // kill if below level
         if (!this.isDead() && this.pos.y < -9)
-            warmup ? this.destroy() : this.kill();
+            this.kill();
     }
 
     damage(damage, damagingObject)
@@ -104,10 +101,10 @@ class Coin extends EngineObject
         drawTile(this.pos, vec2(.5+.5*Math.sin(t*2*PI), 1), this.tileInfo, this.color);
     }
 
-    update(o)
+    update()
     {
         if (!player)
-                return;
+            return;
 
         // check if player in range
         const d = this.pos.distanceSquared(player.pos);
@@ -145,9 +142,7 @@ class Enemy extends GameObject
 
         // jump around randomly
         if (this.groundObject && rand() < .01 && this.pos.distance(player.pos) < 20)
-        {
             this.velocity = vec2(rand(.1,-.1), rand(.4,.2));
-        }
 
         // damage player if touching
         if (isOverlapping(this.pos, this.size, player.pos, player.size))
@@ -344,17 +339,17 @@ class Bullet extends EngineObject
         }
     
         this.kill();
-        return 1; 
+        return true; 
     }
 
     collideWithTile(data, pos)
     {
         if (data <= 0)
-            return 0;
+            return false;
             
         destroyTile(pos);
         this.kill();
-        return 1; 
+        return true; 
     }
 
     kill()

package/examples/platformer/index.html

@@ -7,11 +7,11 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?1100></script>
-<script src=gameObjects.js?1100></script>
-<script src=gameCharacter.js?1100></script>
-<script src=gamePlayer.js?1100></script>
-<script src=gameEffects.js?1100></script>
-<script src=gameLevel.js?1100></script>
-<script src=gameLevelData.js?1100></script>
-<script src=game.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
+<script src=gameObjects.js?1105></script>
+<script src=gameCharacter.js?1105></script>
+<script src=gamePlayer.js?1105></script>
+<script src=gameEffects.js?1105></script>
+<script src=gameLevel.js?1105></script>
+<script src=gameLevelData.js?1105></script>
+<script src=game.js?1105></script>

package/examples/puzzle/index.html

@@ -6,5 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?1100></script>
-<script src=game.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
+<script src=game.js?1105></script>

package/examples/starter/game.js

@@ -10,6 +10,9 @@
 // show the LittleJS splash screen
 setShowSplashScreen(true);
 
+// fix texture bleeding by shrinking tile slightly
+tileFixBleedScale = .5;
+
 // sound effects
 const sound_click = new Sound([1,.5]);
 

package/examples/starter/index.html

@@ -7,18 +7,18 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?1100></script>
-<script src=../../src/engineUtilities.js?1100></script>
-<script src=../../src/engineSettings.js?1100></script>
-<script src=../../src/engineObject.js?1100></script>
-<script src=../../src/engineDraw.js?1100></script>
-<script src=../../src/engineInput.js?1100></script>
-<script src=../../src/engineAudio.js?1100></script>
-<script src=../../src/engineTileLayer.js?1100></script>
-<script src=../../src/engineParticles.js?1100></script>
-<script src=../../src/engineMedals.js?1100></script>
-<script src=../../src/engineWebGL.js?1100></script>
-<script src=../../src/engine.js?1100></script>
+<script src=../../src/engineDebug.js?1105></script>
+<script src=../../src/engineUtilities.js?1105></script>
+<script src=../../src/engineSettings.js?1105></script>
+<script src=../../src/engineObject.js?1105></script>
+<script src=../../src/engineDraw.js?1105></script>
+<script src=../../src/engineInput.js?1105></script>
+<script src=../../src/engineAudio.js?1105></script>
+<script src=../../src/engineTileLayer.js?1105></script>
+<script src=../../src/engineParticles.js?1105></script>
+<script src=../../src/engineMedals.js?1105></script>
+<script src=../../src/engineWebGL.js?1105></script>
+<script src=../../src/engine.js?1105></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1100></script>
+<script src=game.js?1105></script>

package/examples/stress/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.min.js?1100></script>
+<script src=../../dist/littlejs.min.js?1105></script>
 <script>
 
 /*

package/examples/typescript/game.js

@@ -9,6 +9,8 @@ import * as LittleJS from '../../dist/littlejs.esm.js';
 const { tile, vec2, hsl } = LittleJS;
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
+// fix texture bleeding by shrinking tile slightly
+LittleJS.setTileFixBleedScale(.5);
 // sound effects
 const sound_click = new LittleJS.Sound([1, .5]);
 // medals

package/examples/typescript/game.ts

@@ -13,6 +13,9 @@ const {tile, vec2, hsl} = LittleJS;
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
 
+// fix texture bleeding by shrinking tile slightly
+LittleJS.setTileFixBleedScale(.5);
+
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);
 
@@ -128,4 +131,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/typescript/index.html

@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1100 type=module></script>
+<script src=game.js?1105 type=module></script>

package/examples/uiSystem/game.js

@@ -10,7 +10,7 @@
 setShowSplashScreen(true);
 
 // sound effects
-const sound_click = new Sound([1,0]);
+const sound_ui = new Sound([1,0]);
 
 // UI system
 let uiRoot, uiMenu;
@@ -20,7 +20,7 @@ const setMenuVisible =(visible)=> uiMenu.visible = visible;
 function createUI()
 {
     // setup root to attach all ui elements to
-    uiRoot = new UIObject(vec2(mainCanvasSize.x/2,0));
+    uiRoot = new UIObject();
     const uiInfo = new UIText(vec2(0,50), vec2(1e3, 70), 
         'LittleJS UI System Example\nM = Toggle menu');
     uiInfo.textColor = WHITE;
@@ -30,54 +30,61 @@ function createUI()
     // setup example menu
     uiMenu = new UIObject(vec2(0,450));
     uiRoot.addChild(uiMenu);
-    const uiBackground = new UIObject(vec2(0,0), vec2(450,550));
+    const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
     uiMenu.addChild(uiBackground);
 
     // example large text
-    const textTitle = new UIText(vec2(0,-200), vec2(500, 90), 'Test Title');
+    const textTitle = new UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
     uiMenu.addChild(textTitle);
     textTitle.textColor = RED;
     textTitle.lineWidth = 4;
     textTitle.lineColor = BLUE;
 
     // example multiline text
-    const textTest = new UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
+    const textTest = new UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
 
     // example tile image
-    const tileTest = new UITile(vec2(150,-110), vec2(110), tile(3,128))
+    const tileTest = new UITile(vec2(150,-130), vec2(110), tile(3,128))
     uiMenu.addChild(tileTest);
 
     // example checkbox
-    const checkbox = new UICheckbox(vec2(-160,0), vec2(50));
+    const checkbox = new UICheckbox(vec2(-140,-20), vec2(40));
     uiMenu.addChild(checkbox);
-    checkbox.onClick = ()=>
+    checkbox.onPress = ()=>
     {
         checkbox.checked = !checkbox.checked;
         console.log('Checkbox clicked');
-        sound_click.play(0,.5,checkbox.checked?4:1);
+        sound_ui.play(0,.5,checkbox.checked?4:1);
     }
 
     // text attached to checkbox
-    const checkboxText = new UIText(vec2(200,0), vec2(300, 50), 'Test Checkbox');
+    const checkboxText = new UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
     checkbox.addChild(checkboxText);
 
+    // example scrollbar
+    const scrollbar = new UIScrollbar(vec2(0,60), vec2(350, 50));
+    uiMenu.addChild(scrollbar);
+    scrollbar.onChange  = ()=> console.log('New scrollbar value:', scrollbar.value);
+    scrollbar.onPress   = ()=> sound_ui.play(0,.3,2);
+    scrollbar.onRelease = ()=> sound_ui.play(0,.3,4);
+
     // example button
-    const button1 = new UIButton(vec2(0,90), vec2(350, 70), 'Test Button', RED, 6, CYAN);
+    const button1 = new UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onClick = ()=>
+    button1.onPress = ()=>
     {
         console.log('Button 1 clicked');
-        sound_click.play();
+        sound_ui.play();
     }
 
     // exit button
-    const button2 = new UIButton(vec2(0,190), vec2(350, 70), 'Exit Menu', RED, 6, CYAN);
+    const button2 = new UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
     uiMenu.addChild(button2);
-    button2.onClick = ()=>
+    button2.onPress = ()=>
     {
         console.log('Button 2 clicked');
-        sound_click.play(0,.5,2);
+        sound_ui.play(0,.5,2);
         setMenuVisible(false);
     }
 }

package/examples/uiSystem/index.html

@@ -7,19 +7,8 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?1100></script>
-<script src=../../src/engineUtilities.js?1100></script>
-<script src=../../src/engineSettings.js?1100></script>
-<script src=../../src/engineObject.js?1100></script>
-<script src=../../src/engineDraw.js?1100></script>
-<script src=../../src/engineInput.js?1100></script>
-<script src=../../src/engineAudio.js?1100></script>
-<script src=../../src/engineTileLayer.js?1100></script>
-<script src=../../src/engineParticles.js?1100></script>
-<script src=../../src/engineMedals.js?1100></script>
-<script src=../../src/engineWebGL.js?1100></script>
-<script src=../../src/engine.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
 
 <!-- Add your game scripts here -->
-<script src=../../plugins/uiSystem.js?1100></script>
-<script src=game.js?1100></script>
+<script src=../../plugins/uiSystem.js?1105></script>
+<script src=game.js?1105></script>

package/package.json

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

package/plugins/postProcess.js

@@ -1,7 +1,7 @@
 /**
  * LittleJS Post Processing Plugin
  * - Supports shadertoy style post processing shaders
- * - call glInitPostProcess
+ * - call initPostProcess to set it up
  */
 
 'use strict';

package/plugins/uiSystem.js

@@ -40,7 +40,7 @@ function initUISystem(context=overlayContext)
                 o.pos = o.localPos.add(o.parent.pos);
             o.update();
             for(const c of o.children)
-                updateObject(c)
+                updateObject(c);
         }
         uiObjects.forEach(o=> o.parent || updateObject(o));
     }
@@ -50,9 +50,11 @@ function initUISystem(context=overlayContext)
         {
             if (!o.visible)
                 return;
+            if (o.parent)
+                o.pos = o.localPos.add(o.parent.pos);
             o.render();
             for(const c of o.children)
-                renderObject(c)
+                renderObject(c);
         }
         uiObjects.forEach(o=> o.parent || renderObject(o));
     }
@@ -82,9 +84,9 @@ function drawUILine(posA, posB, thickness=uiDefaultLineWidth, color=uiDefaultLin
     uiContext.stroke();
 }
 
-function drawUITile(pos, size, tileInfo, color=uiDefaultColor, angle=0, mirror=false, additiveColor=BLACK)
+function drawUITile(pos, size, tileInfo, color=uiDefaultColor, angle=0, mirror=false)
 {
-    drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, false, true, uiContext);
+    drawTile(pos, size, tileInfo, color, angle, mirror, BLACK, false, true, uiContext);
 }
 
 function drawUIText(text, pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor, align='center', font=uiDefaultFont)
@@ -96,7 +98,7 @@ function drawUIText(text, pos, size, color=uiDefaultColor, lineWidth=uiDefaultLi
 
 class UIObject
 {
-    constructor(localPos, size=vec2())
+    constructor(localPos=vec2(), size=vec2())
     {
         this.localPos = localPos.copy();
         this.pos = localPos.copy();
@@ -131,21 +133,28 @@ class UIObject
     {
         // track mouse input
         const mouseWasOver = this.mouseIsOver;
-        this.mouseIsOver = isOverlapping(this.pos, this.size, mousePosScreen);
-        if (this.mouseIsOver && !mouseWasOver)
-            this.onEnter();
-        if (!this.mouseIsOver && mouseWasOver)
-            this.onLeave();
+        const mouseDown = mouseIsDown(0);
+        if (!mouseDown || isTouchDevice)
+        {
+            this.mouseIsOver = isOverlapping(this.pos, this.size, mousePosScreen);
+            if (!mouseDown && isTouchDevice)
+                this.mouseIsOver = false;
+            if (this.mouseIsOver && !mouseWasOver)
+                this.onEnter();
+            if (!this.mouseIsOver && mouseWasOver)
+                this.onLeave();
+        }
         if (mouseWasPressed(0) && this.mouseIsOver)
         {
             this.mouseIsHeld = true;
             this.onPress();
+            if (isTouchDevice)
+                this.mouseIsOver = false;
         }
-        else if (this.mouseIsHeld && !mouseIsDown(0))
+        else if (this.mouseIsHeld && !mouseDown)
         {
             this.mouseIsHeld = false;
-            if (this.mouseIsOver)
-                this.onClick();
+            this.onRelease();
         }
     }
     render()
@@ -155,17 +164,18 @@ class UIObject
     }
 
     // callback functions
-    onEnter() {}
-    onLeave() {}
-    onPress() {}
-    onClick() {}
+    onEnter()   {}
+    onLeave()   {}
+    onPress()   {}
+    onRelease() {}
+    onChange()  {}
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
 class UIText extends UIObject
 {
-    constructor(pos, size, text, align='center', font=fontDefault)
+    constructor(pos, size, text='', align='center', font=fontDefault)
     {
         super(pos, size);
 
@@ -184,7 +194,7 @@ class UIText extends UIObject
 
 class UITile extends UIObject
 {
-    constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false, additiveColor=BLACK)
+    constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false)
     {
         super(pos, size);
 
@@ -192,11 +202,10 @@ class UITile extends UIObject
         this.color = color;
         this.angle = angle;
         this.mirror = mirror;
-        this.additiveColor = additiveColor;
     }
     render()
     {
-        drawUITile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
+        drawUITile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror);
     }
 }
 
@@ -215,8 +224,9 @@ class UIButton extends UIObject
         const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
         const color = this.mouseIsOver? this.hoverColor : this.color;
         drawUIRect(this.pos, this.size, color, this.lineWidth, lineColor);
-        drawTextScreen(this.text, this.pos, this.size.y*.8, 
-            this.textColor, undefined, undefined, this.align, this.font, uiContext);
+        const textSize = vec2(this.size.x, this.size.y*.8);
+        drawUIText(this.text, this.pos, textSize, 
+            this.textColor, 0, undefined, this.align, this.font);
     }
 }
 
@@ -229,7 +239,11 @@ class UICheckbox extends UIObject
         super(pos, size);
         this.checked = checked;
     }
-    onClick() { this.checked = !this.checked; }
+    onPress()
+    {
+        this.checked = !this.checked;
+        this.onChange();
+    }
     render()
     {
         drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
@@ -241,3 +255,49 @@ class UICheckbox extends UIObject
         }
     }
 }
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIScrollbar extends UIObject
+{
+    constructor(pos, size, value=.5, text='')
+    {
+        super(pos, size);
+        this.value = value;
+        this.text = text;
+        this.color = uiDefaultButtonColor;
+        this.handleColor = WHITE;
+    }
+    update()
+    {
+        super.update();
+        if (this.mouseIsHeld)
+        {
+            const handleSize = vec2(this.size.y);
+            const handleWidth = this.size.x - handleSize.x;
+            const p1 = this.pos.x - handleWidth/2;
+            const p2 = this.pos.x + handleWidth/2;
+            const oldValue = this.value;
+            this.value = percent(mousePosScreen.x, p1, p2);
+            this.value == oldValue || this.onChange();
+        }
+    }
+    render()
+    {
+        const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
+        const color = this.mouseIsOver? this.hoverColor : this.color;
+        drawUIRect(this.pos, this.size, color, this.lineWidth, lineColor);
+    
+        const handleSize = vec2(this.size.y);
+        const handleWidth = this.size.x - handleSize.x;
+        const p1 = this.pos.x - handleWidth/2;
+        const p2 = this.pos.x + handleWidth/2;
+        const handlePos = vec2(lerp(this.value, p1, p2), this.pos.y);
+        const barColor = this.mouseIsHeld ? this.color : this.handleColor;
+        drawUIRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor);
+
+        const textSize = vec2(this.size.x, this.size.y*.8);
+        drawUIText(this.text, this.pos, textSize, 
+            this.textColor, 0, undefined, this.align, this.font);
+    }
+}