melonjs 14.5.0 → 15.1.0

package/dist/melonjs.mjs/video/renderer.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -8,7 +8,7 @@
 import Color from '../math/color.js';
 import Matrix3d from '../math/matrix3.js';
 import { createCanvas } from './video.js';
-import { on, emit, GAME_RESET, CANVAS_ONRESIZE } from '../system/event.js';
+import { emit, once, CANVAS_ONRESIZE, GAME_AFTER_DRAW } from '../system/event.js';
 import { platform } from '../system/device.js';
 import { setPrefixed } from '../utils/agent.js';
 import Rect from '../geometries/rectangle.js';
@@ -36,6 +36,7 @@ import Point from '../geometries/point.js';
      * @param {boolean} [options.transparent=false] - Whether to enable transparency on the canvas
      * @param {boolean} [options.premultipliedAlpha=true] - in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
      * @param {boolean} [options.blendMode="normal"] - the default blend mode to use ("normal", "multiply")
+     * @param {boolean} [options.depthBuffer="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
      * @param {boolean} [options.subPixel=false] - Whether to enable subpixel rendering (performance hit when enabled)
      * @param {boolean} [options.verbose=false] - Enable the verbose mode that provides additional details as to what the renderer is doing
      * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
@@ -70,6 +71,14 @@ import Point from '../geometries/point.js';
          */
         this.isContextValid = true;
 
+        /**
+         * the default method to sort object ("sorting", "z-buffer")
+         * @type {string}
+         * @default "sorting"
+         */
+        this.depthTest = "sorting";
+
+
         /**
          * The Path2D instance used by the renderer to draw primitives
          * @type {Path2D}
@@ -122,11 +131,6 @@ import Point from '../geometries/point.js';
 
         // default uvOffset
         this.uvOffset = 0;
-
-        // reset the renderer on game reset
-        on(GAME_RESET, () => {
-            this.reset();
-        });
     }
 
     /**
@@ -205,7 +209,7 @@ import Point from '../geometries/point.js';
             transparent = true;
         }
 
-        var _context = canvas.getContext("2d", {
+        let _context = canvas.getContext("2d", {
                 "alpha" : transparent
         });
 
@@ -267,7 +271,7 @@ import Point from '../geometries/point.js';
      * @param {number} height - new height of the canvas
      */
     resize(width, height) {
-        var canvas = this.getCanvas();
+        let canvas = this.getCanvas();
         if (width !== canvas.width || height !== canvas.height) {
             canvas.width = width;
             canvas.height = height;
@@ -286,7 +290,7 @@ import Point from '../geometries/point.js';
      * @param {boolean} [enable=false]
      */
     setAntiAlias(context, enable) {
-        var canvas = context.canvas;
+        let canvas = context.canvas;
 
         // enable/disable antialis on the given Context2d object
         setPrefixed("imageSmoothingEnabled", enable === true, context);
@@ -366,8 +370,8 @@ import Point from '../geometries/point.js';
      * @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
      */
     tint(src, color, mode) {
-        var canvas = createCanvas(src.width, src.height, true);
-        var context = this.getContext2d(canvas);
+        let canvas = createCanvas(src.width, src.height, true);
+        let context = this.getContext2d(canvas);
 
         context.save();
 
@@ -421,10 +425,62 @@ import Point from '../geometries/point.js';
     }
 
     /**
-     * @ignore
+     * creates a Blob object representing the last rendered frame
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a Blob object representing the last rendered frame
+     * @example
+     * renderer.convertToBlob().then((blob) => console.log(blob));
+     */
+    toBlob(options) {
+        return new Promise((resolve) => {
+            once(GAME_AFTER_DRAW, () => {
+                this.canvas.toBlob((blob) => {
+                    resolve(blob);
+                }, options ? options.type : undefined, options ? options.quality : undefined);
+            });
+        });
+    }
+
+    /**
+     * creates an ImageBitmap object of the last frame rendered
+     * (not supported by standard Canvas)
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning an ImageBitmap.
+     * @example
+     * renderer.transferToImageBitmap().then((image) => console.log(image));
      */
-    drawFont(/*bounds*/) {}
+    toImageBitmap(options) {
+        return new Promise((resolve) => {
+            once(GAME_AFTER_DRAW, () => {
+                let image = new Image();
+                image.src = this.canvas.toDataURL(options);
+                image.onload = () => {
+                    createImageBitmap(image).then((bitmap) => resolve(bitmap));
+                };
+            });
+        });
+    }
 
+    /**
+     * returns a data URL containing a representation of the last frame rendered
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a string containing the requested data URL.
+     * @example
+     * renderer.toDataURL().then((dataURL) => console.log(dataURL));
+     */
+    toDataURL(options) {
+        return new Promise((resolve) => {
+            once(GAME_AFTER_DRAW, () => {
+                resolve(this.canvas.toDataURL(options));
+            });
+        });
+    }
 }
 
 export { Renderer as default };

package/dist/melonjs.mjs/video/texture/atlas.js

@@ -1,13 +1,11 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
  * @copyright (C) 2011 - 2023 Olivier Biot (AltByte Pte Ltd)
  */
 import Vector2d from '../../math/vector2.js';
-import WebGLRenderer from '../webgl/webgl_renderer.js';
-import TextureCache from './cache.js';
 import Sprite from '../../renderable/sprite.js';
 import { renderer } from '../video.js';
 import pool from '../../system/pooling.js';
@@ -95,8 +93,8 @@ class TextureAtlas {
         if (typeof (atlases) !== "undefined") {
             // normalize to array to keep the following code generic
             atlases = Array.isArray(atlases) ? atlases : [atlases];
-            for (var i in atlases) {
-                var atlas = atlases[i];
+            for (let i in atlases) {
+                let atlas = atlases[i];
 
                 if (typeof(atlas.meta) !== "undefined") {
                     // Texture Packer or Free Texture Packer
@@ -105,7 +103,7 @@ class TextureAtlas {
                         // set the texture
                         if (typeof(src) === "undefined") {
                             // get the texture name from the atlas meta data
-                            var image = getImage(atlas.meta.image);
+                            let image = getImage(atlas.meta.image);
                             if (!image) {
                                 throw new Error(
                                     "Atlas texture '" + image + "' not found"
@@ -166,11 +164,7 @@ class TextureAtlas {
         // Add self to TextureCache if cache !== false
         if (cache !== false) {
             this.sources.forEach((source) => {
-                if (cache instanceof TextureCache) {
-                    cache.set(source, this);
-                } else {
-                    renderer.cache.set(source, this);
-                }
+                renderer.cache.set(source, this);
             });
         }
     }
@@ -180,17 +174,17 @@ class TextureAtlas {
      * @ignore
      */
     parse(data) {
-        var atlas = {};
+        let atlas = {};
 
         data.frames.forEach((frame) => {
             // fix wrongly formatted JSON (e.g. last dummy object in ShoeBox)
             if (frame.hasOwnProperty("filename")) {
                 // Source coordinates
-                var s = frame.frame;
+                let s = frame.frame;
 
-                var originX, originY;
+                let originX, originY;
                 // Pixel-based offset origin from the top-left of the source frame
-                var hasTextureAnchorPoint = (frame.spriteSourceSize && frame.sourceSize && frame.pivot);
+                let hasTextureAnchorPoint = (frame.spriteSourceSize && frame.sourceSize && frame.pivot);
                 if (hasTextureAnchorPoint) {
                     originX = (frame.sourceSize.w * frame.pivot.x) - ((frame.trimmed) ? frame.spriteSourceSize.x : 0);
                     originY = (frame.sourceSize.h * frame.pivot.y) - ((frame.trimmed) ? frame.spriteSourceSize.y : 0);
@@ -217,16 +211,16 @@ class TextureAtlas {
      * @ignore
      */
     parseFromSpriteSheet(data) {
-        var atlas = {};
-        var image = data.image;
-        var spacing = data.spacing || 0;
-        var margin = data.margin || 0;
+        let atlas = {};
+        let image = data.image;
+        let spacing = data.spacing || 0;
+        let margin = data.margin || 0;
 
-        var width = image.width;
-        var height = image.height;
+        let width = image.width;
+        let height = image.height;
 
         // calculate the sprite count (line, col)
-        var spritecount = pool.pull("Vector2d",
+        let spritecount = pool.pull("Vector2d",
             ~~((width - margin + spacing) / (data.framewidth + spacing)),
             ~~((height - margin + spacing) / (data.frameheight + spacing))
         );
@@ -234,8 +228,8 @@ class TextureAtlas {
         // verifying the texture size
         if ((width % (data.framewidth + spacing)) !== 0 ||
             (height % (data.frameheight + spacing)) !== 0) {
-            var computed_width = spritecount.x * (data.framewidth + spacing);
-            var computed_height = spritecount.y * (data.frameheight + spacing);
+            let computed_width = spritecount.x * (data.framewidth + spacing);
+            let computed_height = spritecount.y * (data.frameheight + spacing);
             if (computed_width - width !== spacing && computed_height - height !== spacing) {
                 // "truncate size" if delta is different from the spacing size
                 width = computed_width;
@@ -251,8 +245,8 @@ class TextureAtlas {
         }
 
         // build the local atlas
-        for (var frame = 0, count = spritecount.x * spritecount.y; frame < count; frame++) {
-            var name = "" + frame;
+        for (let frame = 0, count = spritecount.x * spritecount.y; frame < count; frame++) {
+            let name = "" + frame;
             atlas[name] = {
                 name        : name,
                 texture     : "default", // the source texture
@@ -323,10 +317,10 @@ class TextureAtlas {
             console.warn("Adding texture region", name, "for texture", this);
         }
 
-        var source = this.getTexture();
-        var atlas = this.getAtlas();
-        var dw = source.width;
-        var dh = source.height;
+        let source = this.getTexture();
+        let atlas = this.getAtlas();
+        let dw = source.width;
+        let dh = source.height;
 
         atlas[name] = {
             name    : name,
@@ -348,7 +342,7 @@ class TextureAtlas {
      * @returns {object}
      */
     getRegion(name, atlas) {
-        var region;
+        let region;
         if (typeof atlas === "string") {
             region = this.getAtlas(atlas)[name];
         } else {
@@ -371,11 +365,11 @@ class TextureAtlas {
      */
     getUVs(name) {
         // Get the source texture region
-        var region = this.getRegion(name);
+        let region = this.getRegion(name);
 
         if (typeof(region) === "undefined") {
             // TODO: Require proper atlas regions instead of caching arbitrary region keys
-            var keys = name.split(","),
+            let keys = name.split(","),
                 sx = +keys[0],
                 sy = +keys[1],
                 sw = +keys[2],
@@ -395,11 +389,11 @@ class TextureAtlas {
      */
     addUVs(atlas, name, w, h) {
         // ignore if using the Canvas Renderer
-        if (renderer instanceof WebGLRenderer) {
+        if (typeof renderer.gl !== "undefined") {
             // Source coordinates
-            var s = atlas[name].offset;
-            var sw = atlas[name].width;
-            var sh = atlas[name].height;
+            let s = atlas[name].offset;
+            let sw = atlas[name].width;
+            let sh = atlas[name].height;
 
             atlas[name].uvs = new Float32Array([
                 s.x / w,        // u0 (left)
@@ -409,7 +403,7 @@ class TextureAtlas {
             ]);
             // Cache source coordinates
             // TODO: Remove this when the Batcher only accepts a region name
-            var key = s.x + "," + s.y + "," + w + "," + h;
+            let key = s.x + "," + s.y + "," + w + "," + h;
             atlas[key] = atlas[name];
         }
         return atlas[name].uvs;
@@ -430,13 +424,13 @@ class TextureAtlas {
      * ...
      * ...
      * // create a new "coin" sprite
-     * var sprite = game.texture.createSpriteFromName("coin.png");
+     * let sprite = game.texture.createSpriteFromName("coin.png");
      * // set the renderable position to bottom center
      * sprite.anchorPoint.set(0.5, 1.0);
      * ...
      * ...
      * // create a 9-slice sprite
-     * var dialogPanel = game.texture.createSpriteFromName(
+     * let dialogPanel = game.texture.createSpriteFromName(
      *    "rpg_dialo.png",
      *    // width & height are mandatory for 9-slice sprites
      *    { width: this.width, height: this.height },
@@ -469,7 +463,7 @@ class TextureAtlas {
      * );
      *
      * // create a new Animated Sprite
-     * var sprite = game.texture.createAnimationFromName([
+     * let sprite = game.texture.createAnimationFromName([
      *     "walk0001.png", "walk0002.png", "walk0003.png",
      *     "walk0004.png", "walk0005.png", "walk0006.png",
      *     "walk0007.png", "walk0008.png", "walk0009.png",
@@ -486,12 +480,12 @@ class TextureAtlas {
      * sprite.anchorPoint.set(0.5, 1.0);
      */
     createAnimationFromName(names, settings) {
-        var tpAtlas = [], indices = {};
-        var width = 0, height = 0;
-        var region;
+        let tpAtlas = [], indices = {};
+        let width = 0, height = 0;
+        let region;
         // iterate through the given names
         // and create a "normalized" atlas
-        for (var i = 0; i < names.length; ++i) {
+        for (let i = 0; i < names.length; ++i) {
             region = this.getRegion(names[i]);
             if (region == null) {
                 // throw an error

package/dist/melonjs.mjs/video/texture/cache.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -9,8 +9,7 @@ import { renderer } from '../video.js';
 import { getBasename } from '../../utils/file.js';
 import { createAtlas, TextureAtlas } from './atlas.js';
 import { isPowerOfTwo } from '../../math/math.js';
-import '../../node_modules/@teppeis/multimaps/dist/src/index.js';
-import { __exports as src } from '../../_virtual/index.js';
+import { ArrayMultimap } from '../../node_modules/@teppeis/multimaps/dist/esm/arraymultimap.js';
 
 /**
  * a basic texture cache object
@@ -23,7 +22,7 @@ class TextureCache {
      */
     constructor(max_size) {
         // cache uses an array to allow for duplicated key
-        this.cache = new src.ArrayMultimap();
+        this.cache = new ArrayMultimap();
         this.tinted = new Map();
         this.units = new Map();
         this.max_size = max_size || Infinity;
@@ -57,14 +56,14 @@ class TextureCache {
      * @ignore
      */
     get(image, atlas) {
-        var entry;
+        let entry;
 
         if (typeof atlas === "undefined") {
             entry = this.cache.get(image)[0];
         } else {
             // manage cases where a specific atlas is specified
             this.cache.forEach((value, key) => {
-                var _atlas = value.getAtlas()[0];
+                let _atlas = value.getAtlas()[0];
                 if (key === image && _atlas.width === atlas.framewidth && _atlas.height === atlas.frameheight) {
                     entry = value;
                 }
@@ -96,7 +95,7 @@ class TextureCache {
      */
     tint(src, color) {
         // make sure the src is in the cache
-        var image_cache = this.tinted.get(src);
+        let image_cache = this.tinted.get(src);
 
         if (image_cache === undefined) {
             image_cache = this.tinted.set(src, new Map());
@@ -113,12 +112,12 @@ class TextureCache {
      * @ignore
      */
     set(image, texture) {
-        var width = image.width;
-        var height = image.height;
+        let width = image.width;
+        let height = image.height;
 
         // warn if a non POT texture is added to the cache when using WebGL1
         if (renderer.WebGLVersion === 1 && (!isPowerOfTwo(width) || !isPowerOfTwo(height))) {
-            var src = typeof image.src !== "undefined" ? image.src : image;
+            let src = typeof image.src !== "undefined" ? image.src : image;
             console.warn(
                 "[Texture] " + src + " is not a POT texture " +
                 "(" + width + "x" + height + ")"

package/dist/melonjs.mjs/video/texture/canvas_texture.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -10,7 +10,7 @@ import { setPrefixed } from '../../utils/agent.js';
 import { clamp } from '../../math/math.js';
 
 // default canvas settings
-var defaultAttributes = {
+let defaultAttributes = {
     offscreenCanvas : false,
     willReadFrequently : false,
     antiAlias : false,
@@ -72,7 +72,7 @@ class CanvasTexture {
      * @param {boolean} [enable=false]
      */
     setAntiAlias(enable = false) {
-        var canvas = this.canvas;
+        let canvas = this.canvas;
 
         // enable/disable antialias on the given Context2d object
         setPrefixed("imageSmoothingEnabled", enable, this.context);
@@ -124,6 +124,66 @@ class CanvasTexture {
         return this.context.getImageData(x, y, width, height);
     }
 
+    /**
+     * creates a Blob object representing the image contained in this canvas texture
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a Blob object representing the image contained in this canvas texture
+     * @example
+     * canvasTexture.convertToBlob().then((blob) => console.log(blob));
+     */
+    toBlob(options) {
+        if (typeof this.canvas.convertToBlob === "function") {
+            return this.canvas.convertToBlob(options);
+        } else {
+            return new Promise(function(resolve) {
+                this.canvas.toBlob((blob) => {
+                    resolve(blob);
+                }, options ? options.type : undefined, options ? options.quality : undefined);
+            });
+        }
+    }
+
+    /**
+     * creates an ImageBitmap object from the most recently rendered image of this canvas texture
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning an ImageBitmap.
+     * @example
+     * canvasTexture.transferToImageBitmap().then((bitmap) => console.log(bitmap));
+     */
+    toImageBitmap(options) {
+        return new Promise((resolve) => {
+            if (typeof this.canvas.transferToImageBitmap === "function") {
+                resolve(this.canvas.transferToImageBitmap());
+            } else {
+                let image = new Image();
+                image.src = this.canvas.toDataURL(options);
+                image.onload = () => {
+                    createImageBitmap(image).then((bitmap) => resolve(bitmap));
+                };
+            }
+        });
+    }
+
+    /**
+     * returns a data URL containing a representation of the most recently rendered image of this canvas texture
+     * (not supported by OffscreenCanvas)
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a string containing the requested data URL.
+     * @example
+     * renderer.toDataURL().then((dataURL) => console.log(dataURL));
+     */
+    toDataURL(options) {
+        return new Promise((resolve) => {
+            resolve(this.canvas.toDataURL(options));
+        });
+    }
+
     /**
      * @ignore
      */

package/dist/melonjs.mjs/video/utils/autodetect.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license

package/dist/melonjs.mjs/video/video.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -156,7 +156,7 @@ function init(width, height, options) {
  * @returns {HTMLCanvasElement|OffscreenCanvas}
  */
 function createCanvas(width, height, returnOffscreenCanvas = false) {
-    var _canvas;
+    let _canvas;
 
     if (width === 0 || height === 0) {
         throw new Error("width or height was zero, Canvas could not be initialized !");

package/dist/melonjs.mjs/video/webgl/buffer/vertex.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - v14.5.0
+ * melonJS Game Engine - v15.1.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -14,18 +14,18 @@
 
  class VertexArrayBuffer {
 
-    constructor(vertex_size, vertex_per_quad) {
+    constructor(vertex_size, vertex_per_obj) {
         // the size of one vertex in float
         this.vertexSize = vertex_size;
-        // size of a quad in vertex
-        this.quadSize = vertex_per_quad;
+        // size of an object in vertex
+        this.objSize = vertex_per_obj;
         // the maximum number of vertices the vertex array buffer can hold
-        this.maxVertex = 256;
+        this.maxVertex = 256; // (note: this seems to be the sweet spot performance-wise when using batching)
         // the current number of vertices added to the vertex array buffer
         this.vertexCount = 0;
 
         // the actual vertex data buffer
-        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.objSize);
         // Float32 and Uint32 view of the vertex data array buffer
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
@@ -44,7 +44,7 @@
      * return true if full
      * @ignore
      */
-    isFull(vertex = this.quadSize) {
+    isFull(vertex = this.objSize) {
          return (this.vertexCount + vertex >= this.maxVertex);
     }
 
@@ -52,14 +52,18 @@
      * resize the vertex buffer, retaining its original contents
      * @ignore
      */
-    resize() {
-        // double the vertex size
-        this.maxVertex <<= 1;
+    resize(vertexCount) {
+
+        while (vertexCount > this.maxVertex) {
+            // double the vertex size
+            this.maxVertex <<= 1;
+        }
+
         // save a reference to the previous data
-        var data = this.bufferF32;
+        let data = this.bufferF32;
 
         // recreate ArrayBuffer and views
-        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.objSize);
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
 
@@ -74,22 +78,22 @@
      * @ignore
      */
     push(x, y, u, v, tint) {
-        var offset = this.vertexCount * this.vertexSize;
+        let offset = this.vertexCount * this.vertexSize;
 
         if (this.vertexCount >= this.maxVertex) {
-            this.resize();
+            this.resize(this.vertexCount);
         }
 
-        this.bufferF32[offset + 0] = x;
-        this.bufferF32[offset + 1] = y;
+        this.bufferF32[offset] = x;
+        this.bufferF32[++offset] = y;
 
         if (typeof u !== "undefined") {
-            this.bufferF32[offset + 2] = u;
-            this.bufferF32[offset + 3] = v;
+            this.bufferF32[++offset] = u;
+            this.bufferF32[++offset] = v;
         }
 
         if (typeof tint !== "undefined") {
-            this.bufferU32[offset + 4] = tint;
+            this.bufferU32[++offset] = tint;
         }
 
         this.vertexCount++;