littlejsengine 1.9.11 → 1.10.4

package/examples/typescript/build/examples/typescript/test/examples/typescript/build.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * LittleJS Build System
+ * - Combine input files
+ * - Run custom build steps
+ * - Check for errors
+ * - Output to build folder
+ * @namespace Build
+ */
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const sourceFiles = [
+    '../../build/littlejs.release.js',
+    'game.js',
+    // add your game's files here
+];
+const dataFiles = [
+    'tiles.png',
+    // add your game's data files here
+];
+console.log(`Building ${PROGRAM_NAME}...`);
+const startTime = Date.now();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+// rebuild engine
+child_process.execSync(`npm run build`, { stdio: 'inherit' });
+console.log('');
+// remove old files and setup build folder
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.mkdirSync(BUILD_FOLDER);
+// copy data files
+for (const file of dataFiles)
+    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+Build(`${BUILD_FOLDER}/index.js`, sourceFiles, [closureCompilerStep, uglifyBuildStep, roadrollerBuildStep, htmlBuildStep, zipBuildStep]);
+console.log(`Build Completed in ${((Date.now() - startTime) / 1e3).toFixed(2)} seconds!`);
+///////////////////////////////////////////////////////////////////////////////
+// A single build with its own source files, build steps, and output file
+// - each build step is a callback that accepts a single filename
+function Build(outputFile, files = [], buildSteps = []) {
+    // copy files into a buffer
+    let buffer = '';
+    for (const file of files)
+        buffer += fs.readFileSync(file) + '\n';
+    // output file
+    fs.writeFileSync(outputFile, buffer, { flag: 'w+' });
+    // execute build steps in order
+    for (const buildStep of buildSteps)
+        buildStep(outputFile);
+}
+function closureCompilerStep(filename) {
+    console.log(`Running closure compiler...`);
+    const filenameTemp = filename + '.tmp';
+    fs.copyFileSync(filename, filenameTemp);
+    child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --compilation_level=ADVANCED --language_out=ECMASCRIPT_2021 --warning_level=VERBOSE --jscomp_off=* --assume_function_wrapper`, { stdio: 'inherit' });
+    fs.rmSync(filenameTemp);
+}
+;
+function uglifyBuildStep(filename) {
+    console.log(`Running uglify...`);
+    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, { stdio: 'inherit' });
+}
+;
+function roadrollerBuildStep(filename) {
+    console.log(`Running roadroller...`);
+    child_process.execSync(`npx roadroller ${filename} -o ${filename}`, { stdio: 'inherit' });
+}
+;
+function htmlBuildStep(filename) {
+    console.log(`Building html...`);
+    // copy files into a buffer
+    let buffer = '';
+    buffer += '<script>';
+    buffer += fs.readFileSync(filename) + '\n';
+    buffer += '</script>';
+    // output html file
+    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, { flag: 'w+' });
+}
+;
+function zipBuildStep(filename) {
+    console.log(`Zipping...`);
+    const ect = '../../../node_modules/ect-bin/vendor/win32/ect.exe';
+    const args = ['-9', '-strip', '-zip', `../${PROGRAM_NAME}.zip`, 'index.html', ...dataFiles];
+    child_process.spawnSync(ect, args, { stdio: 'inherit', cwd: BUILD_FOLDER });
+}
+;

package/examples/typescript/build/examples/typescript/test/examples/typescript/game.js

@@ -0,0 +1,92 @@
+/*
+    LittleJS Hello World Starter Game
+*/
+'use strict';
+// import module
+import * as LittleJS from '../../build/littlejs.esm.js';
+const { Vector2, Color, Timer, vec2 } = LittleJS;
+// sound effects
+const sound_click = new LittleJS.Sound([1, .5]);
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+// game variables
+let particleEmitter;
+let gameTimer = new Timer;
+///////////////////////////////////////////////////////////////////////////////
+function gameInit() {
+    // create tile collision and visible tile layer
+    LittleJS.initTileCollision(vec2(32, 16));
+    const pos = new Vector2;
+    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    // get level data from the tiles image
+    const imageLevelDataRow = 1;
+    const mainContext = LittleJS.mainContext;
+    mainContext.drawImage(LittleJS.tileImage, 0, 0);
+    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
+        for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;) {
+            const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
+            if (imageData[0]) {
+                const tileIndex = 1;
+                const direction = LittleJS.randInt(4);
+                const mirror = LittleJS.randInt(2) ? true : false;
+                const color = LittleJS.randColor();
+                const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+                tileLayer.setData(pos, data);
+                LittleJS.setTileCollisionData(pos, 1);
+            }
+        }
+    tileLayer.redraw();
+    // move camera to center of collision
+    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    // enable gravity
+    LittleJS.setGravity(-.01);
+    // create particle emitter
+    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
+    particleEmitter = new LittleJS.ParticleEmitter(center, 0, // emitPos, emitAngle
+    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
+    0, vec2(16), // tileIndex, tileSize
+    new Color(1, 1, 1), new Color(0, 0, 0), // colorStartA, colorStartB
+    new Color(1, 1, 1, 0), new Color(0, 0, 0, 0), // colorEndA, colorEndB
+    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
+    .05, .5, true, true // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2; // stretch in direction of motion
+    // start the game timer
+    gameTimer.set();
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate() {
+    if (LittleJS.mouseWasPressed(0)) {
+        // play sound when mouse is pressed
+        sound_click.play(LittleJS.mousePos);
+        // change particle color and set to fade out
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = LittleJS.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 (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost() {
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRender() {
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2, .2, .2), 0, false);
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost() {
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+}
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

package/examples/typescript/game.js

@@ -97,4 +97,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/game.ts

@@ -128,4 +128,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

@@ -1,9 +1,10 @@
 <!DOCTYPE html><head>
-<title>Little TypeScript Demo</title>
+<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?198 type=module></script>
+<script src=game.js?1100 type=module></script>

package/examples/uiSystem/game.js

@@ -0,0 +1,134 @@
+/*
+    Little JS UI System Example
+    - Shows how to use the LittleJS UI plugin
+    - Modal windows, buttons, text, checkboxes, and more
+*/
+
+'use strict';
+
+// show the LittleJS splash screen
+setShowSplashScreen(true);
+
+// sound effects
+const sound_click = new Sound([1,0]);
+
+// UI system
+let uiRoot, uiMenu;
+const getMenuVisible =()=> uiMenu.visible;
+const setMenuVisible =(visible)=> uiMenu.visible = visible;
+
+function createUI()
+{
+    // setup root to attach all ui elements to
+    uiRoot = new UIObject(vec2(mainCanvasSize.x/2,0));
+    const uiInfo = new UIText(vec2(0,50), vec2(1e3, 70), 
+        'LittleJS UI System Example\nM = Toggle menu');
+    uiInfo.textColor = WHITE;
+    uiInfo.lineWidth = 8;
+    uiRoot.addChild(uiInfo);
+
+    // setup example menu
+    uiMenu = new UIObject(vec2(0,450));
+    uiRoot.addChild(uiMenu);
+    const uiBackground = new UIObject(vec2(0,0), vec2(450,550));
+    uiMenu.addChild(uiBackground);
+
+    // example large text
+    const textTitle = new UIText(vec2(0,-200), 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.')
+    uiMenu.addChild(textTest);
+
+    // example tile image
+    const tileTest = new UITile(vec2(150,-110), vec2(110), tile(3,128))
+    uiMenu.addChild(tileTest);
+
+    // example checkbox
+    const checkbox = new UICheckbox(vec2(-160,0), vec2(50));
+    uiMenu.addChild(checkbox);
+    checkbox.onClick = ()=>
+    {
+        checkbox.checked = !checkbox.checked;
+        console.log('Checkbox clicked');
+        sound_click.play(0,.5,checkbox.checked?4:1);
+    }
+
+    // text attached to checkbox
+    const checkboxText = new UIText(vec2(200,0), vec2(300, 50), 'Test Checkbox');
+    checkbox.addChild(checkboxText);
+
+    // example button
+    const button1 = new UIButton(vec2(0,90), vec2(350, 70), 'Test Button', RED, 6, CYAN);
+    uiMenu.addChild(button1);
+    button1.onClick = ()=>
+    {
+        console.log('Button 1 clicked');
+        sound_click.play();
+    }
+
+    // exit button
+    const button2 = new UIButton(vec2(0,190), vec2(350, 70), 'Exit Menu', RED, 6, CYAN);
+    uiMenu.addChild(button2);
+    button2.onClick = ()=>
+    {
+        console.log('Button 2 clicked');
+        sound_click.play(0,.5,2);
+        setMenuVisible(false);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameInit()
+{
+    initUISystem();
+    createUI();
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+    // center ui
+    uiRoot.pos.x = mainCanvasSize.x/2;
+
+    // menu system
+    const menuVisible = getMenuVisible();
+    paused = menuVisible;
+
+    // toggle menu visibility
+    if (keyWasPressed('KeyM'))
+        setMenuVisible(!menuVisible);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRender()
+{
+    // test game rendering
+    drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
+
+    // test game rendering
+    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));
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost()
+{
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/uiSystem/index.html

@@ -0,0 +1,25 @@
+<!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>
+
+<!-- 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>
+
+<!-- Add your game scripts here -->
+<script src=../../plugins/uiSystem.js?1100></script>
+<script src=game.js?1100></script>

package/jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+  },
+  "include": [
+    "./src/*.js",
+    "./plugins/*.js",
+    "./examples/**/*.js",
+  ],
+  "exclude": [
+  ]
+}

package/package.json

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

package/plugins/box2d.js

@@ -875,7 +875,8 @@ function box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameR
         engineAddPlugin(box2dUpdate, box2dRender);
         function box2dUpdate()
         {
-            box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
+            if (!paused)
+                box2dWorld.Step(timeDelta, box2dStepIterations, box2dStepIterations);
         }
         function box2dRender()
         {

package/plugins/postProcess.js

@@ -49,11 +49,6 @@ function initPostProcess(shaderCode, includeOverlay=false)
     glPostTexture = glCreateTexture(undefined);
     glPostIncludeOverlay = includeOverlay;
 
-    // hide the original 2d canvas
-    mainCanvas.style.visibility = 'hidden';
-    if (glPostIncludeOverlay)
-        overlayCanvas.style.visibility = 'hidden';
-
     // Render the post processing shader, called automatically by the engine
     engineAddPlugin(undefined, postProcessRender);
     function postProcessRender()
@@ -72,8 +67,12 @@ function initPostProcess(shaderCode, includeOverlay=false)
             glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
         }
 
-        // copy overlay canvas so it will be included in post processing
-        glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
+        if (glPostIncludeOverlay)
+        {
+            // copy overlay canvas so it will be included in post processing
+            mainContext.drawImage(overlayCanvas, 0, 0);
+            overlayCanvas.width |= 0;
+        }
 
         // setup shader program to draw one triangle
         glContext.useProgram(glPostShader);
@@ -99,4 +98,11 @@ function initPostProcess(shaderCode, includeOverlay=false)
         glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
         glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
     }
-}
+}
+
+export {
+	initPostProcess,
+    glPostShader, 
+    glPostTexture, 
+    glPostIncludeOverlay
+};