littlejsengine 1.11.13 → 1.12.4

package/examples/typescript/game.ts

@@ -6,22 +6,22 @@
 
 'use strict';
 
-// import module
-import * as LittleJS from '../../dist/littlejs.esm.js';
-const {tile, vec2, hsl} = LittleJS;
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {tile, vec2, hsl} = LJS;
 
 // show the LittleJS splash screen
-LittleJS.setShowSplashScreen(true);
+LJS.setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
-LittleJS.setTileFixBleedScale(.5);
+LJS.setTileFixBleedScale(.5);
 
 // sound effects
-const sound_click = new LittleJS.Sound([1,.5]);
+const sound_click = new LJS.Sound([1,.5]);
 
 // medals
-const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LittleJS.medalsInit('Hello World');
+const medal_example = new LJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LJS.medalsInit('Hello World');
 
 // game variables
 let particleEmitter;
@@ -30,46 +30,44 @@ let particleEmitter;
 function gameInit()
 {
     // create tile collision and visible tile layer
-    const tileCollisionSize = vec2(32, 16);
-    LittleJS.initTileCollision(tileCollisionSize);
     const pos = vec2();
-    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
+    const tileLayer = new LJS.TileCollisionLayer(pos, vec2(32,16));
 
     // get level data from the tiles image
-    const mainContext = LittleJS.mainContext;
-    const tileImage = LittleJS.textureInfos[0].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 = tileCollisionSize.x; pos.x--;)
-    for (pos.y = tileCollisionSize.y; pos.y--;)
+    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 + tileCollisionSize.y - pos.y);
+        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 = LittleJS.randInt(4)
-        const mirror = !LittleJS.randInt(2);
-        const color = LittleJS.randColor();
-        const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+        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);
-        LittleJS.setTileCollisionData(pos, 1);
+        tileLayer.setCollisionData(pos);
     }
 
     // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
-    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
-    LittleJS.setCameraScale(32);
+    LJS.setCameraPos(tileLayer.size.scale(.5));
+    LJS.setCameraScale(32);
 
     // enable gravity
-    LittleJS.setGravity(-.01);
+    LJS.setGravity(vec2(0,-.01));
 
     // create particle emitter
-    particleEmitter = new LittleJS.ParticleEmitter(
+    particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
         1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
         tile(0, 16),                // tileIndex, tileSize
@@ -86,14 +84,14 @@ function gameInit()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (LittleJS.mouseWasPressed(0))
+    if (LJS.mouseWasPressed(0))
     {
         // play sound when mouse is pressed
-        sound_click.play(LittleJS.mousePos);
+        sound_click.play(LJS.mousePos);
 
         // change particle color and set to fade out
         particleEmitter.colorStartA = hsl();
-        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
@@ -102,8 +100,8 @@ function gameUpdate()
     }
 
     // move particles to mouse location if on screen
-    if (LittleJS.mousePosScreen.x)
-        particleEmitter.pos = LittleJS.mousePos;
+    if (LJS.mousePosScreen.x)
+        particleEmitter.pos = LJS.mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -116,19 +114,19 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    LittleJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
     
     // draw the logo as a tile
-    LittleJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
+    LJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x/2, 80), 80);
+    LJS.drawTextScreen('LittleJS with TypeScript', vec2(LJS.mainCanvasSize.x/2, 80), 80);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.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 type=module></script>
+<script src=game.js type=module></script>

package/examples/uiSystem/game.js

@@ -6,11 +6,12 @@
 
 'use strict';
 
-// show the LittleJS splash screen
-setShowSplashScreen(true);
+// import LittleJS module
+import * as LJS from '../../dist/littlejs.esm.js';
+const {vec2, hsl, tile} = LJS;
 
 // sound effects
-const sound_ui = new Sound([1,0]);
+const sound_ui = new LJS.Sound([1,0]);
 
 // UI system
 let uiRoot, uiMenu;
@@ -18,43 +19,43 @@ const getMenuVisible =()=> uiMenu.visible;
 const setMenuVisible =(visible)=> uiMenu.visible = visible;
 
 // use a fixed size canvas
-canvasFixedSize = vec2(1920, 1080); // 1080p
-canvasPixelated = false;
+LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
+LJS.setCanvasPixelated(false);
 
 function createUI()
 {
     // setup root to attach all ui elements to
-    uiRoot = new UIObject();
-    const uiInfo = new UIText(vec2(0,90), vec2(1e3, 70), 
+    uiRoot = new LJS.UIObject();
+    const uiInfo = new LJS.UIText(vec2(0,90), vec2(1e3, 70), 
         'LittleJS UI System Example\nM = Toggle menu');
-    uiInfo.textColor = WHITE;
+    uiInfo.textColor = LJS.WHITE;
     uiInfo.lineWidth = 8;
     uiRoot.addChild(uiInfo);
 
     // setup example menu
-    uiMenu = new UIObject(vec2(0,450));
+    uiMenu = new LJS.UIObject(vec2(0,450));
     uiRoot.addChild(uiMenu);
-    const uiBackground = new UIObject(vec2(0,0), vec2(450,580));
+    const uiBackground = new LJS.UIObject(vec2(0,0), vec2(450,580));
     uiBackground.lineWidth = 8;
     uiMenu.addChild(uiBackground);
 
     // example large text
-    const textTitle = new UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
+    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
     uiMenu.addChild(textTitle);
-    textTitle.textColor = RED;
+    textTitle.textColor = LJS.RED;
     textTitle.lineWidth = 4;
-    textTitle.lineColor = BLUE;
+    textTitle.lineColor = LJS.BLUE;
 
     // example multiline text
-    const textTest = new UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
+    const textTest = new LJS.UIText(vec2(-60,-140), vec2(300, 50), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
 
     // example tile image
-    const tileTest = new UITile(vec2(150,-130), vec2(110), tile(3,128))
+    const tileTest = new LJS.UITile(vec2(150,-130), vec2(110), tile(3,128))
     uiMenu.addChild(tileTest);
 
     // example checkbox
-    const checkbox = new UICheckbox(vec2(-140,-20), vec2(40));
+    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
     uiMenu.addChild(checkbox);
     checkbox.onPress = ()=>
     {
@@ -64,18 +65,18 @@ function createUI()
     }
 
     // text attached to checkbox
-    const checkboxText = new UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
+    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
     checkbox.addChild(checkboxText);
 
     // example scrollbar
-    const scrollbar = new UIScrollbar(vec2(0,60), vec2(350, 50));
+    const scrollbar = new LJS.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,140), vec2(350, 50), 'Test Button');
+    const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
     button1.onPress = ()=>
     {
@@ -84,7 +85,7 @@ function createUI()
     }
 
     // exit button
-    const button2 = new UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
+    const button2 = new LJS.UIButton(vec2(0,220), vec2(350, 50), 'Exit Menu');
     uiMenu.addChild(button2);
     button2.onPress = ()=>
     {
@@ -97,7 +98,7 @@ function createUI()
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
-    initUISystem();
+    new LJS.UISystemPlugin;
     createUI();
 }
 
@@ -109,30 +110,26 @@ function gameUpdate()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdatePost()
 {
-    // center ui
-    uiRoot.pos.x = mainCanvasSize.x/2;
+    // toggle menu visibility
+    if (LJS.keyWasPressed('KeyM'))
+        setMenuVisible(!getMenuVisible());
 
-    // menu system
-    const menuVisible = getMenuVisible();
-    paused = menuVisible;
+    // center ui
+    uiRoot.pos.x = LJS.mainCanvasSize.x/2;
 
-    // toggle menu visibility
-    if (keyWasPressed('KeyM'))
-        setMenuVisible(!menuVisible);
+    // pause when menu is visible
+    LJS.setPaused(getMenuVisible())
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
     // test game rendering
-    drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
-
-    // test game rendering
-    drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
+    LJS.drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
     for(let i=0; i<1e3; ++i)
     {
-        const pos = vec2(30*Math.sin(i+time/9),20*Math.sin(i*i+time/9));
-        drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
+        const pos = vec2(30*Math.sin(i+LJS.time/9),20*Math.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));
     }
 }
 
@@ -143,4 +140,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);
+LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/uiSystem/index.html

@@ -6,9 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1117></script>
-
 <!-- Add your game scripts here -->
-<script src=../../plugins/uiSystem.js?1117></script>
-<script src=game.js?1117></script>
+<script src=game.js type=module></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.11.13",
+  "version": "1.12.4",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",
@@ -33,10 +33,10 @@
     "build": "node src/engineBuild.js"
   },
   "devDependencies": {
+    "bestzip": "^2.2.1",
     "google-closure-compiler": "~20230502.0.0",
     "roadroller": "~2.1.0",
-    "uglify-js": "~3.17.4",
     "typescript": "~5.1.6",
-    "ect-bin": "~1.4.1"
+    "uglify-js": "~3.17.4"
   }
 }