littlejsengine 1.4.7 → 1.4.9

package/engine/engineWebGL.js

@@ -27,7 +27,7 @@ let glContext;
 let glTileTexture;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -48,27 +48,25 @@ function glInit()
         'uniform mat4 m;'+            // transform matrix
         'attribute vec2 p,t;'+        // position, uv
         'attribute vec4 c,a;'+        // color, additiveColor
-        'varying vec2 v;'+            // return uv
-        'varying vec4 d,e;'+          // return color, additiveColor
+        'varying vec4 v,d,e;'+        // return uv, color, additiveColor
         'void main(){'+               // shader entry point
         'gl_Position=m*vec4(p,1,1);'+ // transform position
-        'v=t;d=c;e=a;'+               // pass stuff to fragment shader
+        'v=vec4(t,p);d=c;e=a;'+       // pass stuff to fragment shader
         '}'                           // end of shader
         ,
-        'precision highp float;'+           // use highp for better accuracy
-        'varying vec2 v;'+                  // uv
-        'varying vec4 d,e;'+                // color, additiveColor
-        'uniform sampler2D s;'+             // texture
-        'void main(){'+                     // shader entry point
-        'gl_FragColor=texture2D(s,v)*d+e;'+ // modulate texture by color plus additive
-        '}'                                 // end of shader
+        'precision highp float;'+              // use highp for better accuracy
+        'varying vec4 v,d,e;'+                 // uv, color, additiveColor
+        'uniform sampler2D s;'+                // texture
+        'void main(){'+                        // shader entry point
+        'gl_FragColor=texture2D(s,v.xy)*d+e;'+ // modulate texture by color plus additive
+        '}'                                    // end of shader
     );
 
     // init buffers
-    glVertexData = new ArrayBuffer(gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE);
+    const vertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
     glArrayBuffer = glContext.createBuffer();
-    glPositionData = new Float32Array(glVertexData);
-    glColorData = new Uint32Array(glVertexData);
+    glPositionData = new Float32Array(vertexData);
+    glColorData = new Uint32Array(vertexData);
     glBatchCount = 0;
 }
 
@@ -143,18 +141,19 @@ function glCreateTexture(image)
     image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
         
     // use point filtering for pixelated rendering
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
+    const filter = cavasPixelated ? gl_NEAREST : gl_LINEAR;
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
     return texture;
 }
 
 // called automatically by engine before render
-function glPreRender(width, height, cameraX, cameraY, cameraScale)
+function glPreRender()
 {
     // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
+    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
     glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
@@ -162,7 +161,7 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
     glContext.activeTexture(gl_TEXTURE0);
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
     glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, glVertexData.byteLength, gl_DYNAMIC_DRAW);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
     glSetBlendMode();
     
     // set vertex attributes
@@ -180,14 +179,14 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
     initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
     // build the transform matrix
-    const sx = 2 * cameraScale / width;
-    const sy = 2 * cameraScale / height;
+    const sx = 2 * cameraScale / mainCanvas.width;
+    const sy = 2 * cameraScale / mainCanvas.height;
     glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
         new Float32Array([
             sx, 0, 0, 0,
             0, sy, 0, 0,
             1, 1, -1, 1,
-            -1-sx*cameraX, -1-sy*cameraY, 0, 0
+            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
         ])
     );
 }
@@ -235,10 +234,10 @@ function glCopyToContext(context, forceDraw)
  *  @param uv0Y
  *  @param uv1X
  *  @param uv1Y
- *  @param [rgba=0xffffffff]
+ *  @param rgba
  *  @param [rgbaAdditive=0]
  *  @memberof WebGL */
-function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffffff, rgbaAdditive=0)
+function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
     // flush if there is no room for more verts or if different blend mode
     if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
@@ -249,43 +248,16 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffff
     const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
         
     // setup 2 triangles to form a quad
-    let offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT;
-
-    // vertex 0
-    glPositionData[offset++] = x - cx - sy;
-    glPositionData[offset++] = y - cy + sx;
-    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-    
-    // vertex 1
-    glPositionData[offset++] = x + cx + sy;
-    glPositionData[offset++] = y + cy - sx;
-    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-    
-    // vertex 2
-    glPositionData[offset++] = x - cx + sy;
-    glPositionData[offset++] = y + cy + sx;
-    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-    
-    // vertex 0
-    glPositionData[offset++] = x - cx - sy;      
-    glPositionData[offset++] = y - cy + sx;  
-    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-
-    // vertex 3
-    glPositionData[offset++] = x + cx - sy;
-    glPositionData[offset++] = y - cy - sx;
-    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-
-    // vertex 1
-    glPositionData[offset++] = x + cx + sy;
-    glPositionData[offset++] = y + cy - sx;
-    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
+    for(let i=6, offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT; i--;)
+    {
+        const a = i-4&&i>1, b = i-5&&i-2&&i-1;
+        glPositionData[offset++] = x + (a?-cx:cx) + (b?sy:-sy);
+        glPositionData[offset++] = y + (b?cy:-cy) + (a?sx:-sx);
+        glPositionData[offset++] = a ? uv0X : uv1X; 
+        glPositionData[offset++] = b ? uv0Y : uv1Y;
+        glColorData[offset++] = rgba; 
+        glColorData[offset++] = rgbaAdditive;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -337,14 +309,13 @@ function glRenderPostProcess()
         return;
     
     // prepare to render post process shader
-    const width = mainCanvas.width, height = mainCanvas.height;
     if (glEnable)
     {
         glFlush(); // clear out the buffer
         mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
     }
-    else
-        glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height); // set viewport
+    else // set viewport
+        glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
 
     // setup shader program to draw one triangle
     glContext.useProgram(glPostShader);
@@ -368,7 +339,7 @@ function glRenderPostProcess()
     const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
     glContext.uniform1i(uniformLocation('iChannel0'), 0);
     glContext.uniform1f(uniformLocation('iTime'), time);
-    glContext.uniform3f(uniformLocation('iResolution'), width, height, 1);
+    glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
     glContext.drawArrays(gl_TRIANGLES, 0, 3);
 }
 
@@ -408,4 +379,5 @@ gl_UNPACK_FLIP_Y_WEBGL = 37440,
 gl_VERTICES_PER_QUAD = 6,
 gl_INDICIES_PER_VERT = 6,
 gl_MAX_BATCH = 1<<16,
-gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2; // vec2 * 2 + (char * 4) * 2
+gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
+gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE;

package/engine/index.d.ts

@@ -1,6 +1,6 @@
 /** 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=new Vector2(1,1)]            - Size of the tile in world space, width and height
+ *  @param {Vector2} [size=new Vector2(1,1)]            - Size of the tile in world space
  *  @param {Number}  [tileIndex=-1]                     - Tile index to use, negative is untextured
  *  @param {Vector2} [tileSize=tileSizeDefault]         - Tile size in source pixels
  *  @param {Color}   [color=new Color(1,1,1)]           - Color to modulate with
@@ -183,7 +183,7 @@ declare function glCreateProgram(vsSource: WebGLShader, fsSource: WebGLShader):
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 declare function glCreateTexture(image: new (width?: number, height?: number) => HTMLImageElement): WebGLTexture;
-declare function glPreRender(width: any, height: any, cameraX: any, cameraY: any, cameraScale: any): void;
+declare function glPreRender(): void;
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
  *  @memberof WebGL */
 declare function glFlush(): void;
@@ -202,15 +202,19 @@ declare function glCopyToContext(context: CanvasRenderingContext2D, forceDraw?:
  *  @param uv0Y
  *  @param uv1X
  *  @param uv1Y
- *  @param [rgba=0xffffffff]
+ *  @param rgba
  *  @param [rgbaAdditive=0]
  *  @memberof WebGL */
-declare function glDraw(x: any, y: any, sizeX: any, sizeY: any, angle: any, uv0X: any, uv0Y: any, uv1X: any, uv1Y: any, rgba?: number, rgbaAdditive?: number): void;
+declare function glDraw(x: any, y: any, sizeX: any, sizeY: any, angle: any, uv0X: any, uv0Y: any, uv1X: any, uv1Y: any, rgba: any, rgbaAdditive?: number): void;
 /** Set up a post processing shader
  *  @param {String} shaderCode
  *  @memberof WebGL */
 declare function glInitPostProcess(shaderCode: string): void;
 declare function glRenderPostProcess(): void;
+/** Set if game is paused
+ *  @param {Boolean} paused
+ */
+declare function setPaused(_paused: any): void;
 /** Start up LittleJS engine with your callback functions
  *  @param {Function} gameInit        - Called once after the engine starts up, setup the game
  *  @param {Function} gameUpdate      - Called every frame at 60 frames per second, handle input and update the game state
@@ -221,7 +225,7 @@ declare function glRenderPostProcess(): void;
  */
 declare function engineInit(gameInit: Function, gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, tileImageSource?: string): void;
 declare function enginePreRender(): void;
-/** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
+/** Update each engine object, remove destroyed objects, and update time */
 declare function engineObjectsUpdate(): void;
 /** Destroy and remove all objects */
 declare function engineObjectsDestroy(): void;
@@ -441,9 +445,13 @@ declare function randVector(length?: number): Vector2;
  *  @return {Color}
  *  @memberof Random */
 declare function randColor(cA?: Color, cB?: Color, linear?: boolean): Color;
-/** The seed used by the randSeeded function, should not be 0
+/** Seed used by the randSeeded function
  *  @memberof Random */
 declare let randSeed: number;
+/** Set seed used by the randSeeded function, should not be 0
+ *  @param {Number} seed
+ *  @memberof Random */
+declare function setRandSeed(seed: number): number;
 /** Returns a seeded random value between the two values passed in using randSeed
  *  @param {Number} [valueA=1]
  *  @param {Number} [valueB=0]
@@ -463,6 +471,13 @@ declare function randSeeded(a?: number, b?: number): number;
  * @memberof Utilities
  */
 declare function vec2(x?: number, y?: number): Vector2;
+/**
+ * Check if object is a valid Vector2
+ * @param {Vector2} vector
+ * @return {Boolean}
+ * @memberof Utilities
+ */
+declare function isVector2(v: any): boolean;
 /**
  * 2D Vector object with vector math library
  * <br> - Functions do not change this so they can be chained together
@@ -714,6 +729,15 @@ declare class Timer {
      * @return {Number} */
     valueOf(): number;
 }
+/** Position of camera in world space
+ *  @type {Vector2}
+ *  @default
+ *  @memberof Settings */
+declare let cameraPos: Vector2;
+/** Scale of camera in world space
+ *  @default
+ *  @memberof Settings */
+declare let cameraScale: number;
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
  *  @default
@@ -733,6 +757,14 @@ declare let cavasPixelated: number;
  *  @default
  *  @memberof Settings */
 declare let fontDefault: string;
+/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
+ *  @default
+ *  @memberof Settings */
+declare let glEnable: number;
+/** Fixes slow rendering in some browsers by not compositing the WebGL canvas
+ *  @default
+ *  @memberof Settings */
+declare let glOverlay: number;
 /** Default size of tiles in pixels
  *  @type {Vector2}
  *  @default
@@ -783,23 +815,6 @@ declare let gravity: number;
  *  @default
  *  @memberof Settings */
 declare let particleEmitRateScale: number;
-/** Position of camera in world space
- *  @type {Vector2}
- *  @default
- *  @memberof Settings */
-declare let cameraPos: Vector2;
-/** Scale of camera in world space
- *  @default
- *  @memberof Settings */
-declare let cameraScale: number;
-/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
- *  @default
- *  @memberof Settings */
-declare let glEnable: number;
-/** Fixes slow rendering in some browsers by not compositing the WebGL canvas
- *  @default
- *  @memberof Settings */
-declare let glOverlay: number;
 /** Should gamepads be allowed
  *  @default
  *  @memberof Settings */
@@ -834,14 +849,14 @@ declare let touchGamepadAlpha: number;
  *  @default
  *  @memberof Settings */
 declare let vibrateEnable: number;
-/** Volume scale to apply to all sound, music and speech
- *  @default
- *  @memberof Settings */
-declare let soundVolume: number;
 /** All audio code can be disabled and removed from build
  *  @default
  *  @memberof Settings */
 declare let soundEnable: number;
+/** Volume scale to apply to all sound, music and speech
+ *  @default
+ *  @memberof Settings */
+declare let soundVolume: number;
 /** Default range where sound no longer plays
  *  @default
  *  @memberof Settings */
@@ -858,18 +873,18 @@ declare let medalDisplayTime: number;
  *  @default
  *  @memberof Settings */
 declare let medalDisplaySlideTime: number;
-/** Width of medal display
- *  @default
- *  @memberof Settings */
-declare let medalDisplayWidth: number;
-/** Height of medal display
+/** Size of medal display
  *  @default
  *  @memberof Settings */
-declare let medalDisplayHeight: number;
+declare let medalDisplaySize: Vector2;
 /** Size of icon in medal display
  *  @default
  *  @memberof Settings */
 declare let medalDisplayIconSize: number;
+/** Set to stop medals from being unlockable (like if cheats are enabled)
+ *  @default
+ *  @memberof Settings */
+declare let medalsPreventUnlock: any;
 /**
  * LittleJS Object Base Object Class
  * <br> - Base object class used by the engine
@@ -991,10 +1006,6 @@ declare class EngineObject {
     isSolid: boolean;
     toString(): string;
 }
-/** Tile sheet for batch rendering system
- *  @type {Image}
- *  @memberof Draw */
-declare const tileImage: new (width?: number, height?: number) => HTMLImageElement;
 /** The primary 2D canvas visible to the user
  *  @type {HTMLCanvasElement}
  *  @memberof Draw */
@@ -1015,6 +1026,13 @@ declare let overlayContext: CanvasRenderingContext2D;
  *  @type {Vector2}
  *  @memberof Draw */
 declare let mainCanvasSize: Vector2;
+/** Tile sheet for batch rendering system
+ *  @type {Image}
+ *  @memberof Draw */
+declare const tileImage: new (width?: number, height?: number) => HTMLImageElement;
+declare let tileImageSize: any;
+declare let tileImageFixBleed: any;
+declare let drawCount: any;
 /** Convert from screen to world space coordinates
  *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} screenPos
@@ -1042,8 +1060,8 @@ declare function worldToScreen(worldPos: Vector2): Vector2;
 declare let engineFontImage: any;
 declare class FontImage {
     /** Create an image font
-     *  @param {HTMLImageElement}   [image] - The image the font is stored in, if undefined the default font is used
-     *  @param {Vector2} [tileSize=vec2(8)] - The size of the font source tiles
+     *  @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
@@ -1169,8 +1187,8 @@ declare function vibrateStop(): boolean;
  *  @memberof Input */
 declare const isTouchDevice: boolean;
 declare let touchGamepadTimer: Timer;
-declare let touchGamepadButtons: any[];
-declare let touchGamepadStick: Vector2;
+declare let touchGamepadButtons: any;
+declare let touchGamepadStick: any;
 /**
  * Sound Object - Stores a zzfx sound for later use and can be played positionally
  * <br>
@@ -1510,9 +1528,6 @@ declare class Particle extends EngineObject {
 /** List of all medals
  *  @memberof Medals */
 declare const medals: any[];
-/** Set to stop medals from being unlockable (like if cheats are enabled)
- *  @memberof Medals */
-declare let medalsPreventUnlock: any;
 declare let medalsDisplayQueue: any[];
 declare let medalsSaveName: any;
 declare let medalsDisplayTimeLast: any;
@@ -1554,7 +1569,7 @@ declare class Medal {
      *  @param {Number} y - Screen space Y position
      *  @param {Number} [size=medalDisplayIconSize] - Screen space size
      */
-    renderIcon(x: number, y: number, size?: number): void;
+    renderIcon(pos: any, size?: number): void;
     storageKey(): string;
 }
 declare let newgrounds: any;
@@ -1575,7 +1590,7 @@ declare class Newgrounds {
     cipher: string;
     host: string;
     cryptoJS: any;
-    session_id: string | number;
+    session_id: string;
     medals: any;
     scoreboards: any;
     /** Send message to unlock a medal by id
@@ -1603,8 +1618,8 @@ declare class Newgrounds {
      * @return {Object}                - The response JSON object
      */
     call(component: string, parameters?: any, async?: boolean): any;
+    CryptoJS(): any;
 }
-declare function CryptoJS(): any;
 /** The WebGL canvas which appears above the main canvas and below the overlay canvas
  *  @type {HTMLCanvasElement}
  *  @memberof WebGL */
@@ -1620,7 +1635,6 @@ declare let glTileTexture: WebGLTexture;
 declare let glActiveTexture: any;
 declare let glShader: any;
 declare let glArrayBuffer: any;
-declare let glVertexData: any;
 declare let glPositionData: any;
 declare let glColorData: any;
 declare let glBatchCount: any;
@@ -1661,10 +1675,11 @@ declare const gl_VERTICES_PER_QUAD: 6;
 declare const gl_INDICIES_PER_VERT: 6;
 declare const gl_MAX_BATCH: number;
 declare const gl_VERTEX_BYTE_STRIDE: number;
+declare const gl_VERTEX_BUFFER_SIZE: number;
 /** Name of engine */
 declare const engineName: "LittleJS";
 /** Version of engine */
-declare const engineVersion: "1.4.7";
+declare const engineVersion: "1.4.9";
 /** Frames per second to update objects
  *  @default */
 declare const frameRate: 60;
@@ -1681,9 +1696,5 @@ declare let frame: number;
 declare let time: number;
 /** Actual clock time since start in seconds (not affected by pause or frame rate clamping) */
 declare let timeReal: number;
-/** Is the game paused? Causes time and objects to not be updated. */
+/** Is the game paused? Causes time and objects to not be updated */
 declare let paused: number;
-declare let tileImageSize: any;
-declare let tileImageFixBleed: any;
-declare let averageFPS: any;
-declare let drawCount: any;

package/examples/breakout/game.js

@@ -8,22 +8,22 @@ let levelSize, ball, paddle, score, brickCount;
 
 // sound effects
 const sound_start  = new Sound([,0,500,,.04,.3,1,2,,,570,.02,.02,,,,.04]);
-const sound_break  = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01], 0);
-const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06], 0);
+const sound_break  = new Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
+const sound_bounce = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
     canvasFixedSize = vec2(1280, 720); // 720p
-    levelSize = vec2(72, 40);
+    levelSize = vec2(38, 20);
     cameraPos = levelSize.scale(.5);
-    paddle = new Paddle(vec2(levelSize.x/2-12,2));
+    paddle = new Paddle(vec2(levelSize.x/2-12,1));
     score = brickCount = 0;
 
     // spawn bricks
     const pos = vec2();
-    for (pos.x = 6; pos.x <= levelSize.x-6; pos.x += 4)
-    for (pos.y = levelSize.y/2; pos.y <= levelSize.y-4; pos.y += 2)
+    for (pos.x = 4; pos.x <= levelSize.x-4; pos.x += 2)
+    for (pos.y = 12; pos.y <= levelSize.y-2; pos.y += 1)
         new Brick(pos);
 
     initPostProcess(); // set up a post processing shader
@@ -35,7 +35,7 @@ function gameUpdate()
     // spawn ball
     if (!ball && (mouseWasPressed(0) || gamepadWasPressed(0)))
     {
-        ball = new Ball(vec2(levelSize.x/2, levelSize.y/2-6));
+        ball = new Ball(vec2(levelSize.x/2, levelSize.y/2));
         sound_start.play();
     }
 }
@@ -59,11 +59,11 @@ function gameRenderPost()
 {
     // use built in image font for text
     const font = new FontImage;
-    font.drawText('Score: ' + score, cameraPos.add(vec2(0,22)), .2, 1);
+    font.drawText('Score: ' + score, cameraPos.add(vec2(0,9.6)), .1, 1);
     if (!brickCount)
-        font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .25, 1);
+        font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .2, 1);
     else if (!ball)
-        font.drawText('Click to Play', cameraPos.add(vec2(0,-5)), .25, 1);
+        font.drawText('Click to Play', cameraPos.add(vec2(0,-5)), .2, 1);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/breakout/gameObjects.js

@@ -9,7 +9,7 @@ class Paddle extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(8,1));
+        super(pos, vec2(5,.5));
 
         // set to collide
         this.setCollision();
@@ -38,7 +38,7 @@ class Brick extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(4,2), 1, vec2(32,16), 0, randColor());
+        super(pos, vec2(2,1), 1, vec2(32,16), 0, randColor());
 
         // set to collide
         this.setCollision();
@@ -62,7 +62,7 @@ class Brick extends EngineObject
             0, vec2(16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
-            .2, 1, 2, .1, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
+            .2, .5, 1, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
             .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
             .1, .5, 0, 1        // fadeRate, randomness, collide, additive
         );
@@ -76,11 +76,11 @@ class Ball extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(1), 0);
+        super(pos, vec2(.5), 0);
 
         // make a bouncy ball
         this.setCollision();
-        this.velocity = vec2(randSign(), -1).scale(.2);
+        this.velocity = vec2(randSign(), -1).scale(.1);
         this.elasticity = 1;
         this.damping = 1;
     }
@@ -117,7 +117,7 @@ class Ball extends EngineObject
         {
             // put english on the ball when it collides with paddle
             this.velocity = this.velocity.rotate(.2 * (this.pos.x - o.pos.x));
-            this.velocity.y = max(abs(this.velocity.y), .2);
+            this.velocity.y = max(-this.velocity.y, .2);
             this.bounce();
             return 0;
         }
@@ -127,7 +127,7 @@ class Ball extends EngineObject
     bounce()
     {
         // speed up
-        const speed = min(1.1*this.velocity.length(), 1);
+        const speed = min(1.05*this.velocity.length(), .5);
         this.velocity = this.velocity.normalize(speed);
 
         // scale bounce sound pitch by speed

package/examples/breakout/index.html

@@ -5,6 +5,6 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?120></script>
-<script src=gameObjects.js?120></script>
-<script src=game.js?120></script>
+<script src=../../engine/engine.all.js?123></script>
+<script src=gameObjects.js?123></script>
+<script src=game.js?123></script>

package/examples/module/game.js

@@ -12,7 +12,7 @@ const Timer   = LittleJS.Timer;
 const vec2    = LittleJS.vec2;
 
 // sound effects
-const sound_click = new LittleJS.Sound([.5,.5]);
+const sound_click = new LittleJS.Sound([1,.5]);
 
 // medals
 const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
@@ -26,8 +26,8 @@ function gameInit()
 {
     // create tile collision and visible tile layer
     LittleJS.initTileCollision(vec2(32, 16));
-    const tileLayer = new LittleJS.TileLayer(vec2(), LittleJS.tileCollisionSize);
     const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
 
     // get level data from the tiles image
     const imageLevelDataRow = 1;
@@ -36,24 +36,22 @@ function gameInit()
     for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
     for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;)
     {
-        const data = mainContext.getImageData(pos.x, 16*(imageLevelDataRow+1)-pos.y-1, 1, 1).data;
-        if (data[0])
+        const imageData = mainContext.getImageData(pos.x, 16*(imageLevelDataRow+1)-pos.y-1, 1, 1).data;
+        if (imageData[0])
         {
-            LittleJS.setTileCollisionData(pos, 1);
-
             const tileIndex = 1;
             const direction = LittleJS.randInt(4)
             const mirror = LittleJS.randInt(2);
             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));
-    LittleJS.setCameraScale(32);
 
     // enable gravity
     LittleJS.setGravity(-.01);

package/examples/module/index.html

@@ -6,4 +6,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?120 type=module></script>
+<script src=game.js?123 type=module></script>