littlejsengine 1.12.4 → 1.13.1

package/src/engineDraw.js

@@ -42,6 +42,16 @@ let overlayCanvas;
  *  @memberof Draw */
 let overlayContext;
 
+/** The default canvas to use for drawing, usually mainCanvas
+ *  @type {HTMLCanvasElement|OffscreenCanvas}
+ *  @memberof Draw */
+let drawCanvas;
+
+/** The default 2d context to use for drawing, usually mainContext
+ *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
+ *  @memberof Draw */
+let drawContext;
+
 /** The size of the main canvas (and other secondary canvases) 
  *  @type {Vector2}
  *  @memberof Draw */
@@ -73,31 +83,36 @@ let drawCount;
  * tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)
  * @memberof Draw
  */
-function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
+function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
 {
     if (headlessMode)
         return new TileInfo;
 
     // if size is a number, make it a vector
-    if (typeof size === 'number')
+    if (typeof size == 'number')
     {
         ASSERT(size > 0);
-        size = vec2(size);
+        size = new Vector2(size, size);
     }
 
-    // use pos as a tile index
+    // create tile info object
+    const tileInfo = new TileInfo(new Vector2, size, textureIndex, padding);
+
+    // use get the pos of the tile
     const textureInfo = textureInfos[textureIndex];
     ASSERT(!!textureInfo, 'Texture not loaded');
-    const sizePadded = size.add(vec2(padding*2));
-    if (typeof pos === 'number')
+    const sizePaddedX = size.x + padding*2;
+    const sizePaddedY = size.y + padding*2;
+    if (typeof pos == 'number')
     {
-        const cols = textureInfo.size.x / sizePadded.x |0;
-        pos = cols>0 ? vec2(pos%cols, pos/cols|0) : vec2();
+        const cols = textureInfo.size.x / sizePaddedX |0;
+        ASSERT(cols>0, 'Tile size is too big for texture');
+        const posX = pos % cols, posY = (pos / cols) |0;
+        tileInfo.pos.set(posX*sizePaddedX+padding, posY*sizePaddedY+padding);
     }
-    pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
-
-    // return a tile info object
-    return new TileInfo(pos, size, textureIndex, padding); 
+    else
+        tileInfo.pos.set(pos.x*sizePaddedX+padding, pos.y*sizePaddedY+padding);
+    return tileInfo; 
 }
 
 /** 
@@ -121,6 +136,8 @@ class TileInfo
         this.textureIndex = textureIndex;
         /** @property {number} - How many pixels padding around tiles */
         this.padding = padding;
+        /** @property {TextureInfo} - The texture info for this tile */
+        this.textureInfo = textureInfos[this.textureIndex];
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -137,14 +154,22 @@ class TileInfo
     frame(frame)
     {
         ASSERT(typeof frame == 'number');
-        return this.offset(vec2(frame*(this.size.x+this.padding*2), 0));
+        return this.offset(new Vector2(frame*(this.size.x+this.padding*2), 0));
     }
 
-    /** Returns the texture info for this tile
-    *  @return {TextureInfo}
-    */
-    getTextureInfo()
-    { return textureInfos[this.textureIndex]; }
+    /**
+     * Set this tile to use a full image
+     * @param {HTMLImageElement|OffscreenCanvas} image
+     * @param {WebGLTexture} [glTexture] - webgl texture
+     * @return {TileInfo}
+     */
+    setFullImage(image, glTexture)
+    {
+        this.pos = new Vector2;
+        this.size = new Vector2(image.width, image.height);
+        this.textureInfo = new TextureInfo(image, glTexture);
+        return this;
+    }
 }
 
 /** Texture Info - Stores info about each texture */
@@ -152,9 +177,10 @@ class TextureInfo
 {
     /**
      * Create a TextureInfo, called automatically by the engine
-     * @param {HTMLImageElement} image
+     * @param {HTMLImageElement|OffscreenCanvas} image
+     * @param {WebGLTexture} [glTexture] - webgl texture 
      */
-    constructor(image)
+    constructor(image, glTexture)
     {
         /** @property {HTMLImageElement} - image source */
         this.image = image;
@@ -163,7 +189,14 @@ class TextureInfo
         /** @property {Vector2} - inverse of the size, cached for rendering */
         this.sizeInverse = vec2(1/image.width, 1/image.height);
         /** @property {WebGLTexture} - webgl texture */
-        this.glTexture = glEnable && glCreateTexture(image);
+        this.glTexture = glTexture;
+    }
+
+    createWebGLTexture()
+    {
+        ASSERT(!this.glTexture);
+        if (glEnable)
+            this.glTexture = glCreateTexture(this.image);
     }
 }
 
@@ -175,11 +208,18 @@ class TextureInfo
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
-    return new Vector2
-    (
-        (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale + cameraPos.x,
-        (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale + cameraPos.y
-    );
+    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
+    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
+    if (cameraAngle) 
+    {
+        // apply camera rotation
+        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
+        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
+        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
+        cameraPosRelativeX = rotatedX;
+        cameraPosRelativeY = rotatedY;
+    }
+    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
 }
 
 /** Convert from world to screen space coordinates
@@ -188,10 +228,21 @@ function screenToWorld(screenPos)
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
+    let cameraPosRelativeX = worldPos.x - cameraPos.x;
+    let cameraPosRelativeY = worldPos.y - cameraPos.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
+        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
+        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
+        cameraPosRelativeX = rotatedX;
+        cameraPosRelativeY = rotatedY;
+    }
     return new Vector2
     (
-        (worldPos.x - cameraPos.x) *  cameraScale + mainCanvasSize.x/2 - .5,
-        (worldPos.y - cameraPos.y) * -cameraScale + mainCanvasSize.y/2 - .5
+        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
+        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
     );
 }
 
@@ -212,16 +263,16 @@ function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
  *  @param {boolean} [screenSpace=false]        - If true the pos and size are in screen space
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
+function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
-    ASSERT(typeof tileInfo !== 'number' || !tileInfo, 
-        'this is an old style calls, to fix replace it with tile(tileIndex, tileSize)');
-    ASSERT(isVector2(pos) && isVector2(size));
-    ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)));
+    ASSERT(isVector2(pos) && pos.isValid(), 'drawTile pos should be a vec2');
+    ASSERT(isVector2(size) && size.isValid(), 'drawTile size should be a vec2');
+    ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)), 'drawTile color is invalid');
+    ASSERT(isNumber(angle), 'drawTile angle should be a number');
 
-    const textureInfo = tileInfo && tileInfo.getTextureInfo();
+    const textureInfo = tileInfo && tileInfo.textureInfo;
     if (useWebGL)
     {
         if (screenSpace)
@@ -265,7 +316,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     {
         // normal canvas 2D rendering method (slower)
         showWatermark && ++drawCount;
-        size = vec2(size.x, -size.y); // fix upside down sprites
+        size = new Vector2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -325,9 +376,9 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
 {
     ASSERT(isColor(color) && isColor(lineColor));
     context.fillStyle = color.toString();
@@ -353,9 +404,9 @@ function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
 {
     ASSERT(isColor(color) && isColor(lineColor));
     if (!screenSpace)
@@ -384,21 +435,21 @@ function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
 { drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
 
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
  *  @param {Vector2}  size
  *  @param {number}   angle
- *  @param {boolean}  mirror
- *  @param {Function} drawFunction
+ *  @param {boolean}  [mirror]
+ *  @param {Function} [drawFunction]
  *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
+function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpace=false, context=drawContext)
 {
     if (!screenSpace)
     {
@@ -408,7 +459,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
     }
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
-    context.rotate(angle);
+    context.rotate(angle-cameraAngle);
     context.scale(mirror ? -size.x : size.x, -size.y);
     drawFunction(context);
     context.restore();
@@ -425,9 +476,9 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {string}  [font=fontDefault]
  *  @param {number}  [maxWidth]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=mainContext)
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=drawContext)
 {
     drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, maxWidth, context);
 }
@@ -473,22 +524,22 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     context.lineJoin = 'round';
 
     const lines = (text+'').split('\n');
-    pos = pos.copy();
-    pos.y -= (lines.length-1) * size/2; // center text vertically
+    let posY = pos.y;
+    posY -= (lines.length-1) * size/2; // center text vertically
     lines.forEach(line=>
     {
-        lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
-        context.fillText(line, pos.x, pos.y, maxWidth);
-        pos.y += size;
+        lineWidth && context.strokeText(line, pos.x, posY, maxWidth);
+        context.fillText(line, pos.x, posY, maxWidth);
+        posY += size;
     });
 }
 
 /** Enable normal or additive blend mode
  *  @param {boolean} [additive]
  *  @param {boolean} [useWebGL=glEnable]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable, context)
+function setBlendMode(additive=false, useWebGL=glEnable, context)
 {
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
@@ -496,7 +547,7 @@ function setBlendMode(additive, useWebGL=glEnable, context)
     else
     {
         if (!context)
-            context = mainContext;
+            context = drawContext;
         context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
     }
 }
@@ -507,7 +558,7 @@ function setBlendMode(additive, useWebGL=glEnable, context)
 function combineCanvases()
 {
     // combine canvases
-    glCopyToContext(mainContext, true);
+    glCopyToContext(mainContext);
     mainContext.drawImage(overlayCanvas, 0, 0);
 
     // clear canvases

package/src/engineExport.js

@@ -14,6 +14,7 @@ export
 	time,
 	timeReal,
 	paused,
+	getPaused,
 	setPaused,
 	engineInit,
 	engineObjectsUpdate,
@@ -49,6 +50,7 @@ export
 
 	// Settings
 	cameraPos,
+	cameraAngle,
 	cameraScale,
 	canvasMaxSize,
 	canvasFixedSize,
@@ -63,13 +65,12 @@ export
 	objectDefaultMass,
 	objectDefaultDamping,
 	objectDefaultAngleDamping,
-	objectDefaultElasticity,
+	objectDefaultRestitution,
 	objectDefaultFriction,
 	objectMaxSpeed,
 	gravity,
 	particleEmitRateScale,
 	glEnable,
-	glOverlay,
 	gamepadsEnable,
 	gamepadDirectionEmulateStick,
 	inputWASDEmulateDirection,
@@ -88,6 +89,7 @@ export
 
 	// Setters for globals
 	setCameraPos,
+	setCameraAngle,
 	setCameraScale,
 	setCanvasMaxSize,
 	setCanvasFixedSize,
@@ -96,15 +98,14 @@ export
 	setFontDefault,
 	setShowSplashScreen,
 	setHeadlessMode,
-	setGlEnable,
-	setGlOverlay,
+	setGLEnable,
 	setTileSizeDefault,
 	setTileFixBleedScale,
 	setEnablePhysicsSolver,
 	setObjectDefaultMass,
 	setObjectDefaultDamping,
 	setObjectDefaultAngleDamping,
-	setObjectDefaultElasticity,
+	setObjectDefaultRestitution,
 	setObjectDefaultFriction,
 	setObjectMaxSpeed,
 	setGravity,
@@ -149,13 +150,14 @@ export
 	isIntersecting,
 	wave,
 	formatTime,
+	fetchJSON,
 
 	// Random
 	rand,
 	randInt,
 	randSign,
 	randInCircle,
-	randVector,
+	randVec2,
 	randColor,
 
 	// Utility Classes
@@ -170,7 +172,9 @@ export
 
 	// Default Colors
 	WHITE,
+	CLEAR_WHITE,
 	BLACK,
+	CLEAR_BLACK,
 	GRAY,
 	RED,
 	ORANGE,
@@ -219,6 +223,7 @@ export
 	glCopyToContext,
 	glCreateProgram,
 	glCreateTexture,
+	glDeleteTexture,
 	glSetTextureData,
 	glDraw,
 	glFlush,
@@ -241,12 +246,15 @@ export
 	keyWasPressed,
 	keyWasReleased,
 	keyDirection,
-	clearInput,
+	inputClear,
+	inputClearKey,
 	mouseIsDown,
 	mouseWasPressed,
 	mouseWasReleased,
 	mousePos,
 	mousePosScreen,
+	mouseDelta,
+	mouseDeltaScreen,
 	mouseWheel,
 	isUsingGamepad,
 	inputPreventDefault,
@@ -259,6 +267,9 @@ export
 	vibrate,
 	vibrateStop,
 	isTouchDevice,
+	pointerLockRequest,
+	pointerLockExit,
+	pointerLockIsActive,
 
 	// Audio
 	Sound,
@@ -278,10 +289,12 @@ export
 
 	// Tiles
 	tileCollisionLayers,
-	getTileCollisionData,
+	tileCollisionGetData,
 	tileCollisionTest,
 	tileCollisionRaycast,
+	tileCollisionLoad,
 	TileLayerData,
+	CanvasLayer,
 	TileLayer,
 	TileCollisionLayer,
 
@@ -294,4 +307,4 @@ export
 	medalsPreventUnlock,
 	medalsInit,
 	Medal,
-};
+};