littlejsengine 1.7.21 → 1.8.3

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
@@ -92,13 +188,18 @@ function worldToScreen(worldPos)
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
  *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
+ *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color,
-    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
+function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
+    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
 {
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+    ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
+    // to fix old calls, replace with tile(tileIndex, tileSize)
+
     showWatermark && ++drawCount;
-    
-    if (glEnable && useWebGL)
+    const textureInfo = tileInfo && tileInfo.getTextureInfo();
+    if (useWebGL)
     {
         if (screenSpace)
         {
@@ -106,48 +207,50 @@ 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);
+        }, screenSpace, context);
     }
 }
 
@@ -158,28 +261,36 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle, useWebGL, screenSpace)
-{ drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, undefined, useWebGL, screenSpace); }
+function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
+{ 
+    drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context); 
+}
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
+function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
 {
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+
     if (useWebGL)
         glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
     else
     {
         // draw using canvas
-        mainContext.fillStyle = color;
-        mainContext.beginPath();
+        if (!context)
+            context = mainContext;
+        context.fillStyle = color;
+        context.beginPath();
         for (const point of screenSpace ? points : points.map(worldToScreen))
-            mainContext.lineTo(point.x, point.y);
-        mainContext.fill();
+            context.lineTo(point.x, point.y);
+        context.fill();
     }
 }
 
@@ -190,12 +301,13 @@ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
+function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -204,10 +316,10 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
+function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
 {
     if (!screenSpace)
     {
@@ -226,13 +338,19 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
 /** Enable normal or additive blend mode
  *  @param {Boolean} [additive=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable)
+function setBlendMode(additive, useWebGL=glEnable, context)
 {
-    if (glEnable && useWebGL)
-        glSetBlendMode(additive);
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+    if (useWebGL)
+        glAdditive = additive;
     else
-        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    {
+        if (!context)
+            context = mainContext;
+        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    }
 }
 
 /** Draw text on overlay canvas in world space
@@ -305,10 +423,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 +434,6 @@ class FontImage
         this.image = image || engineFontImage;
         this.tileSize = tileSize;
         this.paddingSize = paddingSize;
-        this.startTileIndex = startTileIndex;
         this.context = context;
     }
 
@@ -358,7 +474,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 +506,4 @@ function toggleFullscreen()
     }
     else if (document.body.requestFullscreen)
             document.body.requestFullscreen();
-}
+}