littlejsengine 1.1.18 → 1.2.3

package/engine/engineParticles.js

@@ -15,9 +15,9 @@
  * let pos = vec2(2,3);
  * let particleEmiter = new ParticleEmitter
  * (
- *     pos, 1, 0, 500, PI,  // pos, emitSize, emitTime, emitRate, emiteCone
+ *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
  *     0, vec2(16),                            // tileIndex, tileSize
- *     new Color, new Color(0,0,0),            // colorStartA, colorStartB
+ *     new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
  *     new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
  *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
@@ -28,6 +28,7 @@ class ParticleEmitter extends EngineObject
 {
     /** Create a particle system with the given settings
      *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [angle=0]          - Angle to rotate the object
      *  @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
      *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
      *  @param {Number}  [emitRate=100]     - How many particles per second to spawn, does not emit if 0
@@ -51,12 +52,13 @@ class ParticleEmitter extends EngineObject
      *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
      *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
      *  @param {Boolean} [additive=0]           - Should particles use addtive blend
-     *  @param {Boolean} [randomColorLinear=0]  - Should color be randomized linearly or across each component
+     *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
      *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
      */
     constructor
     ( 
         pos,
+        angle,
         emitSize = 0,
         emitTime = 0,
         emitRate = 100,
@@ -84,7 +86,7 @@ class ParticleEmitter extends EngineObject
         renderOrder = additive ? 1e9 : 0
     )
     {
-        super(pos, new Vector2, tileIndex, tileSize, 0, undefined, renderOrder);
+        super(pos, new Vector2, tileIndex, tileSize, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
@@ -152,9 +154,9 @@ class ParticleEmitter extends EngineObject
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // emit particles
-            if (this.emitRate)
+            if (this.emitRate * particleEmitRateScale)
             {
-                const rate = 1/this.emitRate;
+                const rate = 1/this.emitRate/particleEmitRateScale;
                 for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
                     this.emitParticle();
             }

package/engine/engineRelease.js

@@ -1,5 +1,7 @@
 /*
-    LittleJS - Release build include file
+    LittleJS - Release Build
+    MIT License - Copyright 2021 Frank Force
+    
     - This file is used for release builds in place of engineDebug.js
     - Debug functionality will be disabled to lower size and increase performance
 */

package/engine/engineSettings.js

@@ -42,7 +42,7 @@ let tileSizeDefault = vec2(16);
 /** Prevent tile bleeding from neighbors in pixels
  *  @default
  *  @memberof Settings */
-let tileBleedShrinkFix = .3;
+let tileFixBleedScale = .3;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -88,6 +88,11 @@ let objectMaxSpeed = 1;
  *  @memberof Settings */
 let gravity = 0;
 
+/** Scales emit rate of particles, useful for low graphics mode (0 disables particle emitters)
+ *  @default
+ *  @memberof Settings */
+let particleEmitRateScale = 1;
+
 ///////////////////////////////////////////////////////////////////////////////
 // Camera settings
 
@@ -133,11 +138,6 @@ let gamepadDirectionEmulateStick = 1;
  *  @memberof Settings */
 let inputWASDEmulateDirection = 1;
 
-/** If true touch input is routed to mouse functions
- *  @default
- *  @memberof Settings */
-let touchMouseEnable = 1;
-
 /** True if touch gamepad should appear on mobile devices
  *  <br> - Supports left analog stick, 4 face buttons and start button (button 9)
  *  <br> - Must be set by end of gameInit to be activated
@@ -145,6 +145,11 @@ let touchMouseEnable = 1;
  *  @memberof Settings */
 let touchGamepadEnable = 0;
 
+/** True if touch gamepad should be analog stick or false to use if 8 way dpad
+ *  @default
+ *  @memberof Settings */
+let touchGamepadAnalog = 1;
+
 /** Size of virutal gamepad for touch devices in pixels
  *  @default
  *  @memberof Settings */
@@ -153,7 +158,12 @@ let touchGamepadSize = 80;
 /** Transparency of touch gamepad overlay
  *  @default
  *  @memberof Settings */
-let touchGamepadAlpha = .5;
+let touchGamepadAlpha = .3;
+
+/** Allow vibration hardware if it exists
+ *  @default
+ *  @memberof Settings */
+let vibrateEnable = 1;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Audio settings
@@ -166,7 +176,7 @@ let soundVolume = .5;
 /** All audio code can be disabled and removed from build
  *  @default
  *  @memberof Settings */
-let soundEnable = 0;
+let soundEnable = 1;
 
 /** Default range where sound no longer plays
  *  @default
@@ -199,9 +209,9 @@ let medalDisplayWidth = 640;
 /** Height of medal display
  *  @default
  *  @memberof Settings */
-let medalDisplayHeight = 99;
+let medalDisplayHeight = 80;
 
 /** Size of icon in medal display
  *  @default
  *  @memberof Settings */
-let medalDisplayIconSize = 80;
+let medalDisplayIconSize = 50;

package/engine/engineTileLayer.js

@@ -142,8 +142,9 @@ class TileLayerData
 /**
  * Tile layer object - cached rendering system for tile layers
  * <br> - Each Tile layer is rendered to an off screen canvas
- * <br> - Tile layers are not rendered using WebGL to allow modifications at run time
- * <br> - Tile layers are sorted
+ * <br> - To allow dynamic modifications, layers are rendered using canvas 2d
+ * <br> - Some devices like mobile phones are limited to 4k texture resolution
+ * <br> - So with 16x16 tiles this limits layers to 256x256 on mobile devices
  * @extends EngineObject
  * @example
  * // create tile collision and visible tile layer
@@ -153,11 +154,11 @@ class TileLayerData
 class TileLayer extends EngineObject
 {
     /** Create a tile layer object
-     *  @param {Vector2} [position=new Vector2(0,0)] - World space position
-     *  @param {Vector2} [size=objectDefaultSize]    - World space size
-     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tiles in source pixels
-     *  @param {Vector2} [scale=new Vector2(1,1)]    - How much to scale this layer when rendered
-     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2} [position=new Vector2()]   - World space position
+     *  @param {Vector2} [size=objectDefaultSize]   - World space size
+     *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+     *  @param {Vector2} [scale=new Vector2(1,1)]   - How much to scale this layer when rendered
+     *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
      */
     constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
     {
@@ -208,7 +209,7 @@ class TileLayer extends EngineObject
         // flush and copy gl canvas because tile canvas does not use webgl
         glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
         
-        // draw the entire cached level onto the main canvas
+        // draw the entire cached level onto the canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
         (this.isOverlay ? overlayContext : mainContext).drawImage
         (
@@ -217,25 +218,25 @@ class TileLayer extends EngineObject
         );
     }
 
-    /** Draw all the tile data to an offscreen canvas using webgl if possible */
+    /** Draw all the tile data to an offscreen canvas 
+     *  - This may be slow in some browsers
+    */
     redraw()
     {
-        this.redrawStart();
+        this.redrawStart(1);
         this.drawAllTileData();
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
-     *  @param {Boolean} [clear=1] - Should it clear the canvas before drawing */
-    redrawStart(clear = 1)
+     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
+    redrawStart(clear = 0)
     {
-        // clear and set size
-        const width  = this.size.x * this.tileSize.x;
-        const height = this.size.y * this.tileSize.y;
         if (clear)
         {
-            this.canvas.width  = width;
-            this.canvas.height = height;
+            // clear and set size
+            this.canvas.width  = this.size.x * this.tileSize.x;
+            this.canvas.height = this.size.y * this.tileSize.y;
         }
 
         // save current render settings
@@ -325,7 +326,7 @@ class TileLayer extends EngineObject
             else
             {
                 const cols = tileImage.width/tileSize.x;
-                context.globalAlpha = color.a; // full color not supported in this mode
+                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
                 context.drawImage(tileImage, 
                     (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.x, 
                     tileSize.x, tileSize.y, -.5, -.5, 1, 1);

package/engine/engineUtilities.js

@@ -49,27 +49,27 @@ const mod = (a, b=1)=> ((a % b) + b) % b;
 
 /** Clamps the value beween max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const clamp = (v, max=1, min=0)=> (ASSERT(max > min), v < min ? min : v > max ? max : v);
+const clamp = (v, min=0, max=1)=> v < min ? min : v > max ? max : v;
 
 /** Returns what percentage the value is between max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const percent = (v, max=1, min=0)=> max-min ? clamp((v-min) / (max-min)) : 0;
+const percent = (v, min=0, max=1)=> max-min ? clamp((v-min) / (max-min)) : 0;
 
 /** Linearly interpolates the percent value between max and min
  *  @param {Number} percent
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const lerp = (p, max=1, min=0)=> min + clamp(p) * (max-min);
+const lerp = (p, min=0, max=1)=> min + clamp(p) * (max-min);
 
 /** Applies smoothstep function to the percentage value
  *  @param {Number} value
@@ -84,11 +84,11 @@ const smoothStep = (p)=> p * p * (3 - 2 * p);
 const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
- *  @param {Vector2} pointA - Center of box A
- *  @param {Vector2} sizeA  - Size of box A
- *  @param {Vector2} pointB - Center of box B
- *  @param {Vector2} sizeB  - Size of box B
- *  @return {Boolean}       - True if overlapping
+ *  @param {Vector2} pointA  - Center of box A
+ *  @param {Vector2} sizeA   - Size of box A
+ *  @param {Vector2} pointB  - Center of box B
+ *  @param {Vector2} [sizeB] - Size of box B
+ *  @return {Boolean}        - True if overlapping
  *  @memberof Utilities */
 const isOverlapping = (pA, sA, pB, sB)=> abs(pA.x - pB.x)*2 < sA.x + sB.x & abs(pA.y - pB.y)*2 < sA.y + sB.y;
 
@@ -185,10 +185,12 @@ const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y)
 
 /** 
  * 2D Vector object with vector math library
+ * <br> - Functions do not change this so they can be chained together
  * @example
  * let a = new Vector2(2, 3); // vector with coordinates (2, 3)
  * let b = new Vector2;       // vector with coordinates (0, 0)
  * let c = vec2(4, 2);        // use the vec2 function to make a Vector2
+ * let d = a.add(b).scale(5); // operators can be chained
  */
 class Vector2
 {
@@ -475,5 +477,5 @@ class Timer
 
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {Number} */
-    getPercent() { return this.isSet()? percent(this.time - time, 0, this.setTime) : 0; }
+    getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
 }

package/engine/engineWebGL.js

@@ -38,38 +38,33 @@ function glInit()
 
     // create the canvas and tile texture
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl');
-
+    glContext = glCanvas.getContext('webgl', {antialias: false});
+    glCanvas.style = styleCanvas;
     glTileTexture = glCreateTexture(tileImage);
 
-    if (glOverlay)
-    {
-        // some browsers are much faster without copying the gl buffer so we just overlay it instead
-        document.body.appendChild(glCanvas);
-        glCanvas.style = mainCanvas.style.cssText;
-    }
+    // some browsers are much faster without copying the gl buffer so we just overlay it instead
+    glOverlay && document.body.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
-        'precision highp float;'+   // use highp for better accuracy, lowp for better perf
-        'uniform mat4 m;'+          // transform matrix
-        'attribute float a;'+       // angle
-        'attribute vec2 p,s,t;'+    // position, size, uv
-        'attribute vec4 c,b;'+      // color, additiveColor
-        'varying vec2 v;'+          // return uv
-        'varying vec4 d,e;'+        // return color, additiveColor
-        'void main(){'+             // shader entry point
-        'gl_Position=m*vec4((s*cos(a)-vec2(-s.y,s)*sin(a))*.5+p,1,1);'+// transform position
-        'v=t;d=c;e=b;'+             // pass stuff to fragment shader
-        '}'                         // end of shader
+        'precision highp float;'+     // use highp for better accuracy, lowp for better perf
+        '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
+        '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
+        '}'                           // end of shader
         ,
-        'precision lowp float;'+             // use highp for better accuracy, lowp for better perf
-        'varying vec2 v;'+                   // uv
-        'varying vec4 d,e;'+                 // color, additiveColor
-        'uniform sampler2D j;'+              // texture
-        'void main(){'+                      // shader entry point
-        'gl_FragColor=texture2D(j,v)*d+e;'+  // modulate texture by color plus additive
-        '}'                                  // end of shader
+        'precision highp float;'+           // use highp for better accuracy, lowp for better perf
+        '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
     );
 
     // init buffers
@@ -79,6 +74,7 @@ function glInit()
     glColorData = new Uint32Array(glVertexData);
 
     // setup the vertex data array
+    let offset = glBatchCount = 0;
     const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
@@ -86,13 +82,10 @@ function glInit()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    let offset = glBatchCount = 0;
-    initVertexAttribArray('a', gl_FLOAT, 4, 1);            // angle
     initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('s', gl_FLOAT, 4, 2);            // size
     initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
     initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('b', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 }
 
 /** Set the WebGl blend mode, normally you should call setBlendMode instead
@@ -113,7 +106,8 @@ function glSetBlendMode(additive)
 function glSetTexture(texture=glTileTexture)
 {
     if (!glEnable) return;
-        
+    
+    // must flush cache with the old texture to set a new one
     if (texture != glActiveTexture)
         glFlush();
 
@@ -206,6 +200,7 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
 
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
@@ -249,15 +244,13 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
-    if (!glEnable || !glBatchCount)  return;
+    if (!glEnable || !glBatchCount) return;
     
     glFlush();
+    
+    // do not draw in overlay mode because the canvas is visible
     if (!glOverlay || forceDraw)
-    {
-        // do not draw/clear in overlay mode because the canvas is visible
         context.drawImage(glCanvas, 0, 0);
-        glContext.clear(gl_COLOR_BUFFER_BIT);
-    }
 }
 
 /** Add a sprite to the gl draw list, used by all gl draw functions
@@ -280,51 +273,49 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffff
     // flush if there is no room for more verts or if different blend mode
     if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
         glFlush();
+
+    // prepare to create the verts from size and angle
+    const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
+    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++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    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++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    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++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX; glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    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++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    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++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;  glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    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++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x + cx + sy;
+    glPositionData[offset++] = y + cy - sx;
+    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -356,6 +347,6 @@ gl_LINK_STATUS = 35714,
 
 // constants for batch rendering
 gl_VERTICES_PER_QUAD = 6,
-gl_INDICIES_PER_VERT = 9,
+gl_INDICIES_PER_VERT = 6,
 gl_MAX_BATCH = 1<<16,
-gl_VERTEX_BYTE_STRIDE = 4 + (4 * 2) * 3 + (4) * 2; // float + vec2 * 3 + (char * 4) * 2
+gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2; // vec2 * 2 + (char * 4) * 2