littlejsengine 1.7.13 → 1.8.1

package/src/engineAudio.js

@@ -45,8 +45,9 @@ class Sound
         if (zzfxSound)
         {
             // generate zzfx sound now for fast playback
-            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0); 
-            this.cachedSamples = zzfxSound && zzfxG(...zzfxSound);
+            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0);
+            this.sampleChannels = [zzfxG(...zzfxSound)];
+            this.sampleRate = zzfxR;
         }
     }
 
@@ -55,11 +56,12 @@ class Sound
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
      *  @param {Number}  [pitch=1] - How much to scale pitch by (also adjusted by this.randomness)
      *  @param {Number}  [randomnessScale=1] - How much to scale randomness
-     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     *  @param {Boolean} [loop=0] - Should the sound loop
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
-    play(pos, volume=1, pitch=1, randomnessScale=1)
+    play(pos, volume=1, pitch=1, randomnessScale=1, loop=0)
     {
-        if (!soundEnable || !this.cachedSamples) return;
+        if (!soundEnable || !this.sampleChannels) return;
 
         let pan;
         if (pos)
@@ -82,43 +84,80 @@ class Sound
 
         // play the sound
         const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        return playSamples([this.cachedSamples], volume, playbackRate, pan);
+        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate);
+    }
+
+    /** Stop the last instance of this sound that was played */
+    stop()
+    {
+        if (this.source)
+            this.source.stop();
+        this.source = 0;
     }
 
     /** Play the sound as a note with a semitone offset
      *  @param {Number}  semitoneOffset - How many semitones to offset pitch
      *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
-     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
     playNote(semitoneOffset, pos, volume)
     { return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
+
+    /** Get how long this sound is in seconds
+     *  @return {Number} - How long the sound is in seconds (undefined if loading)
+     */
+    getDuration() 
+    { return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
+
+    /** Check if the last instance of this sound is playing
+     *  @return {Boolean} - True if the sound is playing
+     */
+    isPlaying() { return this.source && !this.source.ended; }
+
+    /** Check if sound is loading, for sounds fetched from a url
+     *  @return {Boolean} - True if sound is loading and not ready to play
+     */
+    isLoading() { return !this.sampleChannels; }
 }
 
 /** 
  * Sound Wave Object - Stores a wave sound for later use and can be played positionally
+ * - this can be used to play wave, mp3, and ogg files
+ * @example
+ * // create a sound
+ * const sound_example = new SoundWave('sound.mp3');
+ * 
+ * // play the sound
+ * sound_example.play();
  */
 class SoundWave extends Sound
 {
     /** Create a sound object and cache the wave file for later use
-     *  @param {String} waveFilename - Filename of wave file to load
-     *  @param {Number} [randomness=.05] - How much to randomize frequency each time sound plays
+     *  @param {String} filename - Filename of audio file to load
+     *  @param {Number} [randomness=0] - How much to randomize frequency each time sound plays
      *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
      *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
      */
-    constructor(waveFilename, randomness=.05, range, taper)
+    constructor(filename, randomness=0, range, taper)
     {
         super(0, range, taper);
         this.randomness = randomness;
 
         if (!soundEnable) return;
-        if (!soundWaveDecoderContext)
+        if (!soundDecoderContext)
             soundDecoderContext = new AudioContext;
 
-        fetch(waveFilename)
+        fetch(filename)
         .then(response => response.arrayBuffer())
-        .then(arrayBuffer => soundWaveDecoderContext.decodeAudioData(arrayBuffer))
-        .then(audioBuffer => this.cachedSamples = audioBuffer.getChannelData(0));
+        .then(arrayBuffer => soundDecoderContext.decodeAudioData(arrayBuffer))
+        .then(audioBuffer => 
+        {
+            this.sampleChannels = [];
+            for (let i = audioBuffer.numberOfChannels; i--;)
+                this.sampleChannels[i] = audioBuffer.getChannelData(i);
+            this.sampleRate = audioBuffer.sampleRate;
+        });
     }
 }
 let soundDecoderContext; // audio context used only to decode audio files
@@ -153,48 +192,34 @@ let soundDecoderContext; // audio context used only to decode audio files
  * // play the music
  * music_example.play();
  */
-class Music
+class Music extends Sound
 {
     /** Create a music object and cache the zzfx music samples for later use
      *  @param {Array} zzfxMusic - Array of zzfx music parameters
      */
     constructor(zzfxMusic)
     {
-        if (!soundEnable) return;
+        super();
 
-        this.cachedSamples = zzfxM(...zzfxMusic);
+        if (!soundEnable) return;
+        this.randomness = 0;
+        this.sampleChannels = zzfxM(...zzfxMusic);
+        this.sampleRate = zzfxR;
     }
 
     /** Play the music
      *  @param {Number}  [volume=1] - How much to scale volume by
-     *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
-     *  @return {AudioBufferSourceNode} - The audio node, can be used to stop sound later
+     *  @param {Boolean} [loop=1] - True if the music should loop
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
     play(volume, loop = 1)
-    {
-        if (!soundEnable) return;
-
-        return this.source = playSamples(this.cachedSamples, volume, 1, 0, loop);
-    }
-
-    /** Stop the music */
-    stop()
-    {
-        if (this.source)
-            this.source.stop();
-        this.source = 0;
-    }
-
-    /** Check if music is playing
-     *  @return {Boolean}
-     */
-    isPlaying() { return this.source; }
+    { return super.play(0, volume, 1, 1, loop); }
 }
 
-/** Play an mp3 or wav audio from a local file or url
+/** Play an mp3, ogg, or wav audio from a local file or url
  *  @param {String}  url - Location of sound file to play
  *  @param {Number}  [volume=1] - How much to scale volume by
- *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
+ *  @param {Boolean} [loop=1] - True if the music should loop
  *  @return {HTMLAudioElement} - The audio element for this sound
  *  @memberof Audio */
 function playAudioFile(url, volume=1, loop=1)
@@ -258,9 +283,10 @@ let audioContext;
  *  @param {Number}  [rate=1] - The playback rate to use
  *  @param {Number}  [pan=0] - How much to apply stereo panning
  *  @param {Boolean} [loop=0] - True if the sound should loop when it reaches the end
+ *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0, sampleRate=zzfxR) 
 {
     if (!soundEnable) return;
 
@@ -277,7 +303,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     }
 
     // create buffer and source
-    const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
+    const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, sampleRate), 
         source = audioContext.createBufferSource();
 
     // copy samples to buffer and setup source

package/src/engineBuild.js

@@ -6,9 +6,10 @@
  * - Run custom build steps
  * - Check for errors
  * - Output to build folder
- * @namespace Build
  */
 
+'use strict';
+
 const ENGINE_NAME = 'littlejs';
 const BUILD_FOLDER = 'build';
 const SOURCE_FOLDER = 'src';
@@ -54,7 +55,7 @@ Build
     'Build Engine -- all',
     `${BUILD_FOLDER}/${ENGINE_NAME}.js`,
     [`${SOURCE_FOLDER}/engineDebug.js`, ...engineSourceFiles],
-    [], license
+    [], true
 );
 
 Build
@@ -62,7 +63,7 @@ Build
     'Build Engine -- release',
     `${BUILD_FOLDER}/${ENGINE_NAME}.release.js`,
     [`${SOURCE_FOLDER}/engineRelease.js`, ...engineSourceFiles],
-    [], license
+    [], true
 );
 
 Build
@@ -95,16 +96,31 @@ console.log(`Engine built in ${((Date.now() - startTime)/1e3).toFixed(2)} second
 
 // 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(message, outputFile, files=[], buildSteps=[], topOfFileText)
+function Build(message, outputFile, files=[], buildSteps=[], isPrimaryBuild)
 {
     console.log(message);
 
     // copy files into a buffer
     let buffer = '';
-    if (topOfFileText)
-        buffer +=  topOfFileText + '\n';
+    if (isPrimaryBuild)
+    {
+        // add license and strict mode to top
+        buffer += license + '\n';
+        buffer += "'use strict';\n\n";
+    }
+
     for (const file of files)
-        buffer += fs.readFileSync(file) + '\n';
+    {
+        // get file content
+        let fileContent = fs.readFileSync(file) + '\n';
+
+        // remove first 'use strict' from each file
+        if (isPrimaryBuild)
+            fileContent = fileContent.replace("'use strict';", '');
+
+        // add it to the buffer
+        buffer += fileContent;
+    }
 
     // output file
     fs.writeFileSync(outputFile, buffer, {flag: 'w+'});

package/src/engineDraw.js

@@ -47,13 +47,109 @@ let overlayContext;
  *  @memberof Draw */
 let mainCanvasSize = vec2();
 
-/** Tile sheet for batch rendering system
- *  @type {CanvasImageSource}
+/** Array containing texture info for batch rendering system
+ *  @type {Array}
  *  @memberof Draw */
-const tileImage = new Image;
+let textureInfos = [];
 
 // Engine internal variables not exposed to documentation
-let tileImageSize, tileImageFixBleed, drawCount;
+let drawCount;
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Create a tile info object
+ * - This can take vecs or floats for easier use and conversion
+ * - If an index is passed in, the tile size and index will determine the position
+ * @param {(Number|Vector2)} [pos=Vector2()]         - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [size=tileSizeDefault]  - Size of tile in pixels
+ * @param {Number} [textureIndex=0]                  - Texture index to use
+ * @return {TileInfo}
+ * @example
+ * tile(2)                       // a tile at index 2 using the default tile size of 16
+ * tile(5, 8)                    // a tile at index 5 using a tile size of 8
+ * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
+ * tile(vec2(4,8), vec2(30,10))  // a tile at pixel location (4,8) with a size of (30,10)
+ * @memberof Draw
+ */
+function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+{
+    // if size is a number, make it a vector
+    if (size.x == undefined)
+    {
+        ASSERT(size > 0);
+        size = vec2(size);
+    }
+
+    // if pos is a number, use it as a tile index
+    if (pos.x == undefined)
+    {
+        const textureInfo = textureInfos[textureIndex];
+        if (textureInfo)
+        {
+            const cols = textureInfo.size.x / size.x |0;
+            pos = vec2((pos%cols)*size.x, (pos/cols|0)*size.y);
+        }
+        else
+            pos = vec2();
+    }
+
+    // return a tile info object
+    return new TileInfo(pos, size, textureIndex); 
+}
+
+/** 
+ * Tile Info - Stores info about how to draw a tile
+ */
+class TileInfo
+{
+    /** Create a tile info object
+     *  @param {Vector2} [pos=Vector2()]        - Top left corner of tile in pixels
+     *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
+     *  @param {Number}  [textureIndex=0]       - Texture index to use
+     */
+    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+    {
+        /** @property {Vector2} - Top left corner of tile in pixels */
+        this.pos = pos;
+        /** @property {Vector2} - Size of tile in pixels */
+        this.size = size;
+        /** @property {Number} - Texture index to use */
+        this.textureIndex = textureIndex;
+    }
+
+    /** Returns an offset copy of this tile, useful for animation
+    *  @param {Vector2} offset - Offset to apply in pixels
+    *  @return {TileInfo}
+    */
+    offset(offset)
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex); }
+
+    /** Returns the texture info for this tile
+    *  @return {TextureInfo}
+    */
+    getTextureInfo()
+    { return textureInfos[this.textureIndex]; }
+}
+
+/** Texture Info - Stores info about each texture */
+class TextureInfo
+{
+    // create a TextureInfo, called automatically by the engine
+    constructor(image)
+    {
+        /** @property {CanvasImageSource} - image source */
+        this.image = image;
+        /** @property {Vector2} - size of the image */
+        this.size = vec2(image.width, image.height);
+        /** @property {WebGLTexture} - webgl texture */
+        this.glTexture = glEnable && glCreateTexture(image);
+        /** @property {Vector2} - size to adjust tile to fix bleeding */
+        this.fixBleedSize = vec2(tileFixBleedScale).divide(this.size);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
 
 /** Convert from screen to world space coordinates
  *  @param {Vector2} screenPos
@@ -84,7 +180,7 @@ function worldToScreen(worldPos)
 /** Draw textured tile centered in world space, with color applied if using WebGL
  *  @param {Vector2} pos                            - Center of the tile in world space
  *  @param {Vector2} [size=Vector2(1,1)]            - Size of the tile in world space
- *  @param {Number}  [tileIndex=-1]                 - Tile index to use, negative is untextured
+ *  @param {TileInfo}[tileInfo]                     - Tile info to use, untextured if undefined
  *  @param {Vector2} [tileSize=tileSizeDefault]     - Tile size in source pixels
  *  @param {Color}   [color=Color()]                - Color to modulate with
  *  @param {Number}  [angle=0]                      - Angle to rotate by
@@ -93,11 +189,14 @@ function worldToScreen(worldPos)
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
  *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color,
+function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
 {
+    ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
+    // to fix old calls, replace with tile(tileIndex, tileSize)
+
     showWatermark && ++drawCount;
-    
+    const textureInfo = tileInfo && tileInfo.getTextureInfo();
     if (glEnable && useWebGL)
     {
         if (screenSpace)
@@ -106,46 +205,48 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
             pos = screenToWorld(pos);
             size = size.scale(1/cameraScale);
         }
-        if (tileIndex < 0 || !tileImage.width)
-        {
-            // if negative tile index or image not found, force untextured
-            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
-        }
-        else
+        
+        if (textureInfo)
         {
             // calculate uvs and render
-            const cols = tileImageSize.x / tileSize.x |0;
-            const uvSizeX = tileSize.x / tileImageSize.x;
-            const uvSizeY = tileSize.y / tileImageSize.y;
-            const uvX = (tileIndex%cols)*uvSizeX, uvY = (tileIndex/cols|0)*uvSizeY;
-            
+            const x = tileInfo.pos.x / textureInfo.size.x;
+            const y = tileInfo.pos.y / textureInfo.size.y;
+            const w = tileInfo.size.x / textureInfo.size.x;
+            const h = tileInfo.size.y / textureInfo.size.y;
+            const tileImageFixBleed = textureInfo.fixBleedSize;
+            glSetTexture(textureInfo.glTexture);
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                uvX + tileImageFixBleed.x, uvY + tileImageFixBleed.y, 
-                uvX - tileImageFixBleed.x + uvSizeX, uvY - tileImageFixBleed.y + uvSizeY, 
+                x + tileImageFixBleed.x,     y + tileImageFixBleed.y, 
+                x - tileImageFixBleed.x + w, y - tileImageFixBleed.y + h, 
                 color.rgbaInt(), additiveColor.rgbaInt()); 
         }
+        else
+        {
+            // if no tile info, force untextured
+            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
+        }
     }
     else
     {
         // normal canvas 2D rendering method (slower)
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
-            if (tileIndex < 0)
+            if (textureInfo)
             {
-                // if negative tile index, force untextured
-                context.fillStyle = color;
-                context.fillRect(-.5, -.5, 1, 1);
+                // calculate uvs and render
+                const x = tileInfo.pos.x + tileFixBleedScale;
+                const y = tileInfo.pos.y + tileFixBleedScale;
+                const w = tileInfo.size.x - 2*tileFixBleedScale;
+                const h = tileInfo.size.y - 2*tileFixBleedScale;
+                context.globalAlpha = color.a; // only alpha is supported
+                context.drawImage(textureInfo.image, x, y, w, h, -.5, -.5, 1, 1);
+                context.globalAlpha = 1; // set back to full alpha
             }
             else
             {
-                // calculate uvs and render
-                const cols = tileImageSize.x / tileSize.x |0;
-                const sX = (tileIndex%cols)*tileSize.x   + tileFixBleedScale;
-                const sY = (tileIndex/cols|0)*tileSize.y + tileFixBleedScale;
-                const sWidth  = tileSize.x - 2*tileFixBleedScale;
-                const sHeight = tileSize.y - 2*tileFixBleedScale;
-                context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
+                // if no tile info, force untextured
+                context.fillStyle = color;
+                context.fillRect(-.5, -.5, 1, 1);
             }
         }, undefined, screenSpace);
     }
@@ -160,7 +261,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
  *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace)
-{ drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, undefined, useWebGL, screenSpace); }
+{ drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace); }
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
@@ -211,12 +312,12 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
 {
     if (!screenSpace)
     {
-        // create canvas transform from world space to screen space
+        // transform from world space to screen space
         pos = worldToScreen(pos);
         size = size.scale(cameraScale);
     }
     context.save();
-    context.translate(pos.x+.5|0, pos.y+.5|0);
+    context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
     context.scale(mirror ? -size.x : size.x, size.y);
     drawFunction(context);
@@ -305,10 +406,9 @@ class FontImage
      *  @param {HTMLImageElement} [image] - Image for the font, if undefined default font is used
      *  @param {Vector2} [tileSize=vec2(8)] - Size of the font source tiles
      *  @param {Vector2} [paddingSize=vec2(0,1)] - How much extra space to add between characters
-     *  @param {Number}  [startTileIndex=0] - Tile index in image where font starts
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
-    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), startTileIndex=0, context=overlayContext)
+    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
     {
         // load default font image
         if (!engineFontImage)
@@ -317,7 +417,6 @@ class FontImage
         this.image = image || engineFontImage;
         this.tileSize = tileSize;
         this.paddingSize = paddingSize;
-        this.startTileIndex = startTileIndex;
         this.context = context;
     }
 
@@ -358,7 +457,7 @@ class FontImage
                     charCode = 127; // unknown character
 
                 // get the character source location and draw it
-                const tile = this.startTileIndex + charCode - 32;
+                const tile = charCode - 32;
                 const x = tile % cols;
                 const y = tile / cols |0;
                 const drawPos = pos.add(vec2(j,i).multiply(drawSize));
@@ -390,4 +489,4 @@ function toggleFullscreen()
     }
     else if (document.body.requestFullscreen)
             document.body.requestFullscreen();
-}
+}