littlejsengine 1.11.2 → 1.11.5

package/shortExamples/code/helloWorld.js

@@ -0,0 +1,7 @@
+function gameRender()
+{
+    // draw to overlay canvas
+    drawTextScreen('Hello World', 
+        mainCanvasSize.scale(.5), 80,   // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));     // color, outline size and color
+}

package/shortExamples/code/particles.js

@@ -0,0 +1,28 @@
+function gameInit()
+{
+    gravity = -.01; // set default gravity
+
+    // fire
+    new ParticleEmitter(
+        vec2(-5,-2), 0,                 // pos, angle
+        2, 0, 200, PI,                  // emitSize, emitTime, emitRate, emitCone
+        tile(0),                        // tileInfo
+        rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
+        rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
+        .7, 2, 0, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -1, PI, .05,  // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 1, 0, 1e9     // randomness, collide, additive, colorLinear, renderOrder
+    );
+    
+    // smoke
+    new ParticleEmitter(
+        vec2(5,-2), 0,                    // pos, angle
+        3, 0, 100, PI,                    // emitSize, emitTime, emitRate, emitCone
+        tile(0),                          // tileInfo
+        hsl(0,0,0,.5), hsl(0,0,1,.5),     // colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(0,0,1,0), // colorEndA, colorEndB
+        1, 1, 5, .2, .01,    // time, sizeStart, sizeEnd, speed, angleSpeed
+        .85, 1, -1, PI, .3,  // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 0, 1, 1e8     // randomness, collide, additive, colorLinear, renderOrder
+    );
+}

package/shortExamples/code/playSound.js

@@ -0,0 +1,36 @@
+class SoundButton extends EngineObject
+{
+    constructor(pos, icon, sound)
+    {
+        super(pos, vec2(5,4));
+        this.icon = icon;
+        this.sound = sound;
+    }
+
+    update()
+    {
+        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
+            this.sound.play(this.pos);
+    }
+
+    render()
+    {
+        drawRect(this.pos, this.size, hsl(0,0,.8));
+        drawTextOverlay(this.icon, this.pos, 3);
+    }
+}
+
+function gameInit()
+{
+    new SoundButton(vec2(-6, 5),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
+    new SoundButton(vec2( 0, 5),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
+    new SoundButton(vec2( 6, 5),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
+
+    new SoundButton(vec2(-6, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
+    new SoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
+    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3]));
+    
+    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]));
+}

package/shortExamples/code/pong.js

@@ -0,0 +1,40 @@
+// globals objects
+let paddle, ball;
+
+class PhysicsObject extends EngineObject
+{
+    constructor(pos, size)
+    {
+        super(pos, size); // set object position and size
+        this.setCollision(); // make object collide
+        this.mass = 0; // make object have static physics
+    }
+}
+
+function gameInit()
+{
+    // setup level
+    const levelSize = vec2(38, 21);    // size of play area
+    cameraPos = levelSize.scale(.5);   // center camera in level
+    canvasFixedSize = vec2(1280, 720); // use a 720p fixed size canvas
+
+    // create objects
+    paddle = new PhysicsObject(vec2(0,1), vec2(6,1)); // create player's paddle
+    new PhysicsObject(vec2(-.5,levelSize.y/2),            vec2(1,100)) // top wall
+    new PhysicsObject(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)) // left wall
+    new PhysicsObject(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)) // right wall
+}
+
+function gameUpdate()
+{
+    if (!ball || ball.pos.y < -1) // spawn ball
+    {
+        ball && ball.destroy(); // destroy old ball
+        ball = new PhysicsObject(cameraPos); // create a ball
+        ball.velocity = vec2(.2); // give ball some movement
+        ball.elasticity = 1; // make ball bounce
+        ball.mass = 1; // make ball have dynamic physics
+    }
+
+    paddle.pos.x = mousePos.x; // move paddle to mouse
+}

package/shortExamples/code/shapes.js

@@ -0,0 +1,24 @@
+function gameRender()
+{
+    // polygon shapes
+    for(let j=3; j<7; ++j)
+    {
+        let points = [];
+        for(let i=0; i<j; ++i)
+        {
+            let angle = i * Math.PI * 2 / j;
+            points.push(vec2(j*4-18,0).add(vec2(Math.sin(angle), Math.cos(angle))));
+        }
+        drawPoly(points, hsl(j/4,1,.5)); // draw a star
+    }
+
+    // circles and ellipses
+    drawCircle(vec2(0,5), 1, 0,  hsl(.15,1,.5));
+    drawEllipse(vec2(-5,5), 2, 1, 0, hsl(0,1,.5));
+    drawEllipse(vec2(5,5), 1, .5, 0, hsl(.55,1,.5));
+
+    // lines and rects
+    drawRect(vec2(0,-5), vec2(13,2), hsl(.6,1,.5));
+    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1));
+    drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));
+}

package/shortExamples/code/spriteAtlas.js

@@ -0,0 +1,27 @@
+let spriteAtlas;
+
+function gameInit()
+{
+    // create a table of all sprites
+    const gameTile = (i, size=16)=>  tile(i, size);
+    spriteAtlas =
+    {
+        circle:    gameTile(0),
+        crate:     gameTile(1),
+        icon:      gameTile(2),
+        largeIcon: gameTile(vec2(1,1),128),
+    };
+}
+
+function gameRender()
+{
+    drawRect(vec2(0,0), vec2(100), GRAY); // draw background
+
+    // draw a sprite from the atlas
+    let pos = vec2(0,0);             // world position to draw
+    let angle = 0;                   // world space angle to draw the tile
+    let size = vec2(15);              // world size of the tile
+    let mirror = 0;                  // should tile be mirrored?
+    let color = hsl(0,0,1);          // color to multiply the tile by
+    drawTile(pos, size, spriteAtlas.largeIcon, color, angle, mirror);
+}

package/shortExamples/code/systemFont.js

@@ -0,0 +1,14 @@
+function gameRender()
+{
+    const font = new FontImage;
+    font.drawText('System Font Test ', cameraPos.add(vec2(0,3)), .2, true);
+
+    for(let j=1; j<4; j++)
+    {
+        let s = '';
+        for(let i=0; i<32; ++i)
+            s += String.fromCharCode(32*j + i);
+        font.drawText(s, cameraPos.add(vec2(0,1-j)), .1, true);
+    }
+}
+

package/shortExamples/code/texture.js

@@ -0,0 +1,12 @@
+function gameRender()
+{
+    // show the full texture
+    let pos = vec2(0,0);             // world position to draw
+    let size = vec2(15);             // world size of the tile
+    let color = hsl(0,0,1);          // color to multiply the tile by
+    let tilePos  = vec2(0,0);        // top left corner of tile in pixels
+    let tileSize = vec2(256);        // size of tile in pixels
+    let tileInfo = new TileInfo(tilePos, tileSize); // tile info
+    drawRect(pos, size, GRAY);       // draw background
+    drawTile(pos, size, tileInfo, color);
+}

package/shortExamples/code/tileLayer.js

@@ -0,0 +1,50 @@
+function gameInit()
+{
+    cameraPos = vec2(16); // setup camera
+    gravity = -.01; // enable gravity
+
+    // create tile collision and visible tile layer
+    initTileCollision(vec2(32));
+    const pos = vec2();
+    const tileLayer = new TileLayer(pos, tileCollisionSize);
+
+    // init the tile layer
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+    for (pos.y = tileCollisionSize.y; pos.y--;)
+    {
+        // check if tile should be solid
+        if (rand() < .7)
+            continue;
+        
+        // set tile data
+        const tileIndex = 1;
+        const direction = randInt(4)
+        const mirror = !randInt(2);
+        const color = randColor(WHITE, hsl(0,0,.2));
+        const data = new TileLayerData(tileIndex, direction, mirror, color);
+        tileLayer.setData(pos, data);
+        setTileCollisionData(pos, 1);
+    }
+    tileLayer.redraw(); // redraw tile layer with new data
+}
+
+function gameUpdate()
+{
+    if (mouseWasPressed(0))
+    {
+        // create particle emitter
+        const hue = rand();
+        let particleEmitter = new ParticleEmitter(
+            mousePos, 0,                // emitPos, emitAngle
+            0, 0.1, 500, PI,            // emitSize, emitTime, emitRate, emitCone
+            tile(0, 16),                // tileIndex, tileSize
+            hsl(hue,1,.5),   hsl(hue,1,1),   // colorStartA, colorStartB
+            hsl(hue,1,.5,0), hsl(hue,1,1,0), // colorEndA, colorEndB
+            2, .2, .2, .2, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
+            .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
+            .05, .8, true, false        // fadeRate, randomness, collide, additive
+        );
+        particleEmitter.elasticity = .5; // bounce when it collides
+        particleEmitter.trailScale = 2;  // stretch in direction of motion
+    }
+}

package/shortExamples/index.html

@@ -0,0 +1,242 @@
+<!DOCTYPE html><head>
+<title>LittleJS Short Examples</title>
+<link rel=icon href=../examples/favicon.png>
+<meta charset=utf-8>
+<style>
+html, body
+{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+#container1
+{
+    height: 100%;
+    display: flex;
+}
+#container2
+{
+    display: flex;
+    flex-direction: column;
+}
+#iframeContainer
+{
+    border: 2px solid;
+    background: #000;
+}
+iframe
+{
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+#selectExample
+{
+    flex-grow: 1;
+}
+#textareaCode
+{
+    flex-grow: 1;
+    padding: 5px;
+    resize: none;
+    color: #fff;
+    background: #000;
+}
+#textareaError
+{
+    flex-grow: 1;
+    padding: 5px;
+    resize: none;
+    display: none;
+    color:#f22;
+    background: #111;
+}
+#container3
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+#titleInfo
+{
+    margin: 5px;
+    text-align: center;
+    font-size: 50px;
+}
+#exampleName
+{
+    margin: 0px;
+    text-align: center;
+    font-size: 30px;
+}
+select
+{
+    color:#fff;
+    background-color: #111;
+    width:100%;
+}
+</style>
+</head><body>
+<div id=container1>
+<div id=container3>
+<p id=titleInfo>LittleJS Short Examples</p>
+<p id=exampleName></p>
+<textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
+<textarea id=textareaError readonly spellcheck=false></textarea>
+<div><input type=checkbox id=checkboxLiveEdit checked>Live Edit</div> 
+</div>
+<div id=container2>
+<div id=iframeContainer></div>
+<select id=selectExample autofocus onchange=setExample() size=2></select>
+</div>
+</div>
+<script>
+'use strict';
+
+class ExampleInfo
+{
+    constructor(name, filename, description)
+    {
+        this.name = name;
+        this.filename = filename;
+        this.description = description;
+    }
+}
+
+const exampleList = 
+[
+    new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
+    new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
+    new ExampleInfo('Blending', 'blending.js', 'Shows different blending modes'),
+    new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
+    new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
+    new ExampleInfo('Play Sound', 'playSound.js', 'How to play sounds with zzfx'),
+    new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
+    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
+    new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use a tile layer for collision and rendering'),
+    new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game using LittleJS physics'),
+    
+    // add more examples here!
+];
+
+///////////////////////////////////////////////////////////////////////////////
+
+let iframeExample, inputTimeout;
+
+// load the examples into the list
+for (const example of exampleList)
+{
+    const text = example.name + (example.description?' - ' + example.description : '');
+    selectExample.add(new Option(text));
+}
+
+// select first option
+selectExample.selectedIndex = 0;
+setExample();
+
+onresize = () =>
+{
+    // resize iframe to fit half the window
+    const aspect = 1920 / 1080;
+    let w = innerWidth / 2 | 0;
+    let h = w / aspect | 0;
+    iframeContainer.style.width = w + 'px';
+    iframeContainer.style.height = h + 'px';
+}
+onresize();
+
+///////////////////////////////////////////////////////////////////////////////
+
+function setExample()
+{
+    const example = exampleList[selectExample.selectedIndex];
+    exampleName.innerText = example.name + ' - ' + example.filename +
+        (example.description ? '\n' + example.description : '');
+    loadFile(example.filename);
+}
+
+function codeInput()
+{
+    if (!checkboxLiveEdit.checked)
+        return;
+
+    // debounce input
+    clearTimeout(inputTimeout);
+    inputTimeout = setTimeout(() => setCode(textareaCode.value), 500);
+}
+
+function loadFile(filename)
+{
+    fetch('code/' + filename)
+        .then(response => {
+            if (!response.ok)
+                throw new Error('Could not load file: '+filename);
+            return response.text();
+        })
+        .then(text => setCode(textareaCode.value = text))
+        .catch(error => setErrorMessage(error.message));
+}
+
+function setCode(code)
+{
+    clearTimeout(inputTimeout);
+    if (iframeExample)
+        iframeContainer.removeChild(iframeExample);
+
+    setErrorMessage('');
+    iframeExample = document.createElement('iframe');
+    iframeContainer.appendChild(iframeExample);
+    iframeExample.onload = () =>
+    {
+        const iframeContent = iframeExample.contentWindow;
+        const iframeDocument = iframeContent.document;
+
+        // create error event listeners
+        iframeContent.onerror = (message, source, lineno, colno, error) =>
+        {
+            let text = message;
+            if (lineno)  
+                text += ` (Line:${lineno}, Column:${colno})`
+            if (error && error.stack)
+                text += `\n\n` + error.stack;
+            setErrorMessage(text);
+        }
+        iframeContent.onunhandledrejection = (event) => 
+        {
+            let text = event.reason;
+            if (event.reason.stack)
+                text += `\n\n` + event.reason.stack;
+            setErrorMessage(text);
+        };
+        const originalAssert = iframeContent.console.assert;
+        iframeContent.console.assert = function (condition, output)
+        {
+            if (!condition)
+                setErrorMessage('Assertion failed: ' + (output || ''));
+            originalAssert.apply(this, arguments);
+        };
+
+        // create a script element that overrides the default functions
+        const overrideScript = iframeDocument.createElement('script');
+        iframeDocument.body.appendChild(overrideScript);
+        overrideScript.text = code;
+        
+        if (textareaError.style.display == 'block')
+            return; // stop if script error
+        
+        // start LittleJS engine
+        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png']);
+    }
+    iframeExample.src = 'base.html';
+}
+
+function setErrorMessage(message)
+{
+    textareaError.value = message
+    textareaError.style.display = message ? 'block' : 'none';
+}
+
+</script>
+</body>
+</html>

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.11.2';
+const engineVersion = '1.11.5';
 
 /** Frames per second to update
  *  @type {Number}
@@ -113,8 +113,21 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
+    ASSERT(!mainContext, 'engine already initialized');
     ASSERT(Array.isArray(imageSources), 'pass in images as array');
 
+    // allow passing in empty functions
+    if (!gameInit)
+        gameInit = ()=>{};
+    if (!gameUpdate)
+        gameUpdate = ()=>{};
+    if (!gameUpdatePost)
+        gameUpdatePost = ()=>{};
+    if (!gameRender)
+        gameRender = ()=>{};
+    if (!gameRenderPost)
+        gameRenderPost = ()=>{};
+
     // Called automatically by engine to setup render system
     function enginePreRender()
     {
@@ -279,7 +292,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
-        (!touchInputEnable ? '' :     // no touch css setttings
+        (!touchInputEnable ? '' :     // no touch css settings
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none');// compatibility for ios
     rootElement.style.cssText = styleRoot;
@@ -308,6 +321,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         new Promise(resolve => 
         {
             const image = new Image;
+            image.crossOrigin = 'anonymous';
             image.onerror = image.onload = ()=> 
             {
                 textureInfos[textureIndex] = new TextureInfo(image);
@@ -352,7 +366,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
  *  @memberof Engine */
 function engineObjectsUpdate()
 {
-    // get list of solid objects for physics optimzation
+    // get list of solid objects for physics optimization
     engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
 
     // recursive object update

package/src/engineAudio.js

@@ -25,7 +25,7 @@ function audioInit()
 {
     if (!soundEnable || headlessMode) return;
     
-    // (createGain is more widely spported then GainNode construtor)
+    // (createGain is more widely supported then GainNode constructor)
     audioGainNode = audioContext.createGain();
     audioGainNode.connect(audioContext.destination);
     audioGainNode.gain.value = soundVolume; // set starting value
@@ -375,7 +375,7 @@ const zzfxR = 44100;
  *  @param {Number}  [sustain] - Sustain time, how long sound holds (seconds)
  *  @param {Number}  [release] - Release time, how fast sound fades out (seconds)
  *  @param {Number}  [shape] - Shape of the sound wave
- *  @param {Number}  [shapeCurve] - Squarenes of wave (0=square, 1=normal, 2=pointy)
+ *  @param {Number}  [shapeCurve] - Squareness of wave (0=square, 1=normal, 2=pointy)
  *  @param {Number}  [slide] - How much to slide frequency (kHz/s)
  *  @param {Number}  [deltaSlide] - How much to change slide (kHz/s/s)
  *  @param {Number}  [pitchJump] - Frequency of pitch jump (Hz)
@@ -387,7 +387,7 @@ const zzfxR = 44100;
  *  @param {Number}  [delay] - Overlap sound with itself for reverb and flanger effects (seconds)
  *  @param {Number}  [sustainVolume] - Volume level for sustain (percent)
  *  @param {Number}  [decay] - Decay time, how long to reach sustain after attack (seconds)
- *  @param {Number}  [tremolo] - Trembling effect, rate controlled by repeat time (precent)
+ *  @param {Number}  [tremolo] - Trembling effect, rate controlled by repeat time (percent)
  *  @param {Number}  [filter] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
  *  @return {Array} - Array of audio samples
  *  @memberof Audio
@@ -491,7 +491,7 @@ function zzfxG
 // ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
 
 /** Generate samples for a ZzFM song with given parameters
- *  @param {Array} instruments - Array of ZzFX sound paramaters
+ *  @param {Array} instruments - Array of ZzFX sound parameters
  *  @param {Array} patterns - Array of pattern data
  *  @param {Array} sequence - Array of pattern indexes
  *  @param {Number} [BPM] - Playback speed of the song in BPM

package/src/engineBuild.js

@@ -34,7 +34,8 @@ const asciiArt =`
 .|________|_._|______|_._|__|_|_|}
   OOO  OOO     OO  OO     OO=OO-oo\\
 `;
-const license = '// LittleJS - MIT License - Copyright 2021 Frank Force\n'
+const license = '// LittleJS Engine - MIT License - Copyright 2021 Frank Force\n'+
+                '// https://github.com/KilledByAPixel/LittleJS\n';
 
 console.log(asciiArt);
 console.log('Choo Choo... Building LittleJS Engine!\n');

package/src/engineDebug.js

@@ -16,7 +16,7 @@
  *  @memberof Debug */
 const debug = true;
 
-/** True if asserts are enaled
+/** True if asserts are enabled
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
@@ -200,6 +200,7 @@ function debugShowErrors()
     const showError = (message)=>
     {
         // replace entire page with error message
+        document.body.style.display = '';
         document.body.style.backgroundColor = '#111';
         document.body.innerHTML = `<pre style=color:#f00;font-size:50px>` + message;
     }
@@ -244,12 +245,8 @@ function debugRender()
 
     if (debugTakeScreenshot)
     {
-        // composite canvas
-        glCopyToContext(mainContext, true);
-        mainContext.drawImage(overlayCanvas, 0, 0);
-        overlayCanvas.width |= 0;
-
-        // remove alpha and save
+        // combine canvases, remove alpha and save
+        combineCanvases();
         const w = mainCanvas.width, h = mainCanvas.height;
         overlayContext.fillRect(0,0,w,h);
         overlayContext.drawImage(mainCanvas, 0, 0);