melonjs 14.4.0 → 15.0.0

package/src/text/bitmaptext.js

@@ -1,6 +1,6 @@
 import Color from "./../math/color.js";
 import pool from "./../system/pooling.js";
-import loader from "./../loader/loader.js";
+import { getImage, getBinary } from "./../loader/loader.js";
 import Renderable from "./../renderable/renderable.js";
 import TextMetrics from "./textmetrics.js";
 
@@ -95,7 +95,7 @@ import TextMetrics from "./textmetrics.js";
          * font image
          * @private
          */
-        this.fontImage = (typeof settings.font === "object") ? settings.font : loader.getImage(settings.font);
+        this.fontImage = (typeof settings.font === "object") ? settings.font : getImage(settings.font);
 
         if (typeof settings.fontData !== "string") {
             /**
@@ -103,11 +103,11 @@ import TextMetrics from "./textmetrics.js";
              * @private
              */
             // use settings.font to retreive the data from the loader
-            this.fontData = pool.pull("BitmapTextData", loader.getBinary(settings.font));
+            this.fontData = pool.pull("BitmapTextData", getBinary(settings.font));
         } else {
             this.fontData = pool.pull("BitmapTextData",
                 // if starting/includes "info face" the whole data string was passed as parameter
-                (settings.fontData.includes("info face")) ? settings.fontData : loader.getBinary(settings.fontData)
+                (settings.fontData.includes("info face")) ? settings.fontData : getBinary(settings.fontData)
             );
         }
 
@@ -176,11 +176,70 @@ import TextMetrics from "./textmetrics.js";
             this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth);
         }
 
-        this.getBounds().addBounds(this.metrics.measureText(this._text), true);
+        this.updateBounds();
 
         return this;
     }
 
+    /**
+     * update the bounding box for this Bitmap Text.
+     * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
+     * @returns {Bounds} this Bitmap Text bounding box Rectangle object
+     */
+    updateBounds(absolute = true) {
+        var bounds = this.getBounds();
+
+        bounds.clear();
+
+        if (typeof this.metrics !== "undefined") {
+            var ax, ay;
+
+            bounds.addBounds(this.metrics.measureText(this._text));
+
+            switch (this.textAlign) {
+                case "right":
+                    ax = this.metrics.width * 1.0;
+                    break;
+
+                case "center":
+                    ax = this.metrics.width * 0.5;
+                    break;
+
+                default :
+                    ax = this.metrics.width * 0.0;
+                    break;
+            }
+
+             // adjust y pos based on alignment value
+             switch (this.textBaseline) {
+                case "middle":
+                    ay = this.metrics.height * 0.5;
+                    break;
+
+                case "ideographic":
+                case "alphabetic":
+                case "bottom":
+                    ay = this.metrics.height * 1.0;
+                    break;
+
+                default :
+                    ay = this.metrics.height * 0.0;
+                    break;
+            }
+
+            // translate the bounds accordingly
+            bounds.translate(ax, ay);
+        }
+
+        if (absolute === true) {
+            if (typeof this.ancestor !== "undefined" && typeof this.ancestor.addChild === "function" && this.floating !== true) {
+                 bounds.translate(this.ancestor.getAbsolutePosition());
+            }
+        }
+
+        return bounds;
+    }
+
     /**
      * defines the color used to tint the bitmap text
      * @public
@@ -207,9 +266,8 @@ import TextMetrics from "./textmetrics.js";
     resize(scale) {
         this.fontScale.set(scale, scale);
 
-        this.getBounds().addBounds(this.metrics.measureText(this._text), true);
+        this.updateBounds();
 
-        // clear the cache text to recalculate bounds
         this.isDirty = true;
 
         return this;

package/src/text/text.js

@@ -1,5 +1,4 @@
 import Color from "./../math/color.js";
-import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
 import { renderer as globalRenderer } from "./../video/video.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
@@ -19,18 +18,6 @@ import TextMetrics from "./textmetrics.js";
 const runits = ["ex", "em", "pt", "px"];
 const toPX = [12, 24, 0.75, 1];
 
-// return a valid 2d context for Text rendering/styling
-var getContext2d = function (renderer, text) {
-    if (text.offScreenCanvas === true) {
-        return text.canvasTexture.context;
-    } else {
-        if (typeof renderer === "undefined") {
-            renderer = globalRenderer;
-        }
-        return renderer.getFontContext();
-    }
-};
-
 /**
  * @classdesc
  * a generic system font object.
@@ -45,12 +32,11 @@ var getContext2d = function (renderer, text) {
      * @param {number|string} settings.size - size, or size + suffix (px, em, pt)
      * @param {Color|string} [settings.fillStyle="#000000"] - a CSS color value
      * @param {Color|string} [settings.strokeStyle="#000000"] - a CSS color value
-     * @param {number} [settings.lineWidth=1] - line width, in pixels, when drawing stroke
+     * @param {number} [settings.lineWidth=0] - line width, in pixels, when drawing stroke
      * @param {string} [settings.textAlign="left"] - horizontal text alignment
      * @param {string} [settings.textBaseline="top"] - the text baseline
      * @param {number} [settings.lineHeight=1.0] - line spacing height
      * @param {Vector2d} [settings.anchorPoint={x:0.0, y:0.0}] - anchor point to draw the text at
-     * @param {boolean} [settings.offScreenCanvas=false] - whether to draw the font to an individual "cache" texture first
      * @param {number} [settings.wordWrapWidth] - the maximum length in CSS pixel for a single segment of text
      * @param {(string|string[])} [settings.text=""] - a string, or an array of strings
      * @example
@@ -105,9 +91,9 @@ var getContext2d = function (renderer, text) {
          * sets the current line width, in pixels, when drawing stroke
          * @public
          * @type {number}
-         * @default 1
+         * @default 0
          */
-        this.lineWidth = settings.lineWidth || 1;
+        this.lineWidth = settings.lineWidth || 0;
 
         /**
          * Set the default text alignment (or justification),<br>
@@ -136,16 +122,6 @@ var getContext2d = function (renderer, text) {
          */
         this.lineHeight = settings.lineHeight || 1.0;
 
-        /**
-         * whether to draw the font to a indidividual offscreen canvas texture first <br>
-         * Note: this will improve performances when using WebGL, but will impact
-         * memory consumption as every text element will have its own canvas texture
-         * @public
-         * @type {boolean}
-         * @default false
-         */
-        this.offScreenCanvas = false;
-
         /**
          * the maximum length in CSS pixel for a single segment of text.
          * (use -1 to disable word wrapping)
@@ -192,10 +168,8 @@ var getContext2d = function (renderer, text) {
             this.italic();
         }
 
-        if (settings.offScreenCanvas === true) {
-            this.offScreenCanvas = true;
-            this.canvasTexture = pool.pull("CanvasTexture", 2, 2, { offscreenCanvas: true });
-        }
+        // the canvas Texture used to render this text
+        this.canvasTexture = pool.pull("CanvasTexture", 2, 2, { offscreenCanvas: true });
 
         // instance to text metrics functions
         this.metrics = new TextMetrics(this);
@@ -284,38 +258,38 @@ var getContext2d = function (renderer, text) {
 
         // word wrap if necessary
         if (this._text.length > 0 && this.wordWrapWidth > 0) {
-            this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth, getContext2d(globalRenderer, this));
+            this._text = this.metrics.wordWrap(this._text, this.wordWrapWidth, this.canvasTexture.context);
         }
 
         // calculcate the text size and update the bounds accordingly
-        bounds.addBounds(this.metrics.measureText(this._text, getContext2d(globalRenderer, this)), true);
+        bounds.addBounds(this.metrics.measureText(this._text, this.canvasTexture.context), true);
 
         // update the offScreenCanvas texture if required
-        if (this.offScreenCanvas === true) {
-            var width = Math.ceil(this.metrics.width),
-                height = Math.ceil(this.metrics.height);
-
-            if (globalRenderer instanceof WebGLRenderer) {
-                // invalidate the previous corresponding texture so that it can reuploaded once changed
-                this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvasTexture.canvas));
-                globalRenderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
-
-                if (globalRenderer.WebGLVersion === 1) {
-                    // round size to next Pow2
-                    width = nextPowerOfTwo(this.metrics.width);
-                    height = nextPowerOfTwo(this.metrics.height);
-                }
-            }
-
-            // resize the cache canvas if necessary
-            if (this.canvasTexture.width < width || this.canvasTexture.height < height) {
-                this.canvasTexture.resize(width, height);
+        var width = Math.ceil(this.metrics.width),
+            height = Math.ceil(this.metrics.height);
+
+        if (typeof globalRenderer.gl !== "undefined") {
+            // make sure the right compositor is active
+            globalRenderer.setCompositor("quad");
+            // invalidate the previous corresponding texture so that it can reuploaded once changed
+            this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvasTexture.canvas));
+            globalRenderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
+
+            if (globalRenderer.WebGLVersion === 1) {
+                // round size to next Pow2
+                width = nextPowerOfTwo(this.metrics.width);
+                height = nextPowerOfTwo(this.metrics.height);
             }
+        }
 
-            this.canvasTexture.clear();
-            this._drawFont(this.canvasTexture.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
+        // resize the cache canvas if necessary
+        if (this.canvasTexture.width < width || this.canvasTexture.height < height) {
+            this.canvasTexture.resize(width, height);
         }
 
+        this.canvasTexture.clear();
+        this._drawFont(this.canvasTexture.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y);
+
         this.isDirty = true;
 
         return this;
@@ -328,7 +302,7 @@ var getContext2d = function (renderer, text) {
      * @returns {TextMetrics} a TextMetrics object defining the dimensions of the given piece of text
      */
     measureText(renderer, text = this._text) {
-        return this.metrics.measureText(text, getContext2d(renderer, this));
+        return this.metrics.measureText(text, this.canvasTexture.context);
     }
 
 
@@ -338,9 +312,8 @@ var getContext2d = function (renderer, text) {
      * @param {string} [text]
      * @param {number} [x]
      * @param {number} [y]
-     * @param {boolean} [stroke=false] - draw stroke the the text if true
      */
-    draw(renderer, text, x = this.pos.x, y = this.pos.y, stroke = false) {
+    draw(renderer, text, x = this.pos.x, y = this.pos.y) {
         // "hacky patch" for backward compatibilty
         if (typeof this.ancestor === "undefined") {
 
@@ -354,21 +327,18 @@ var getContext2d = function (renderer, text) {
             // update text cache
             this.setText(text);
 
-            x = this.metrics.x;
-            y = this.metrics.y;
-
             // save the previous context
             renderer.save();
 
             // apply the defined alpha value
             renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());
 
-        } else {
-             // added directly to an object container
-            x = this.pos.x;
-            y = this.pos.y;
         }
 
+        // adjust x,y position based on the bounding box
+        x = this.metrics.x;
+        y = this.metrics.y;
+
         // clamp to pixel grid if required
         if (renderer.settings.subPixel === false) {
             x = ~~x;
@@ -376,12 +346,7 @@ var getContext2d = function (renderer, text) {
         }
 
         // draw the text
-        if (this.offScreenCanvas === true) {
-            renderer.drawImage(this.canvasTexture.canvas, x, y);
-        } else {
-            renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
-        }
-
+        renderer.drawImage(this.canvasTexture.canvas, x, y);
 
         // for backward compatibilty
         if (typeof this.ancestor === "undefined") {
@@ -391,28 +356,33 @@ var getContext2d = function (renderer, text) {
     }
 
     /**
-     * draw a stroke text at the specified coord, as defined <br>
-     * by the `lineWidth` and `fillStroke` properties. <br>
-     * Note : using drawStroke is not recommended for performance reasons
+     * draw a stroke text at the specified coord, as defined by the `lineWidth` and `fillStroke` properties.
+     * @deprecated since 15.0.0
      * @param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
      * @param {string} text
      * @param {number} x
      * @param {number} y
      */
     drawStroke(renderer, text, x, y) {
-        this.draw(renderer, text, x, y, true);
+        this.draw(renderer, text, x, y);
     }
 
     /**
      * @ignore
      */
-    _drawFont(context, text, x, y, stroke = false) {
-        setContextStyle(context, this, stroke);
+    _drawFont(context, text, x, y) {
+        setContextStyle(context, this);
 
         for (var i = 0; i < text.length; i++) {
             var string = text[i].trimEnd();
             // draw the string
-            context[stroke ? "strokeText" : "fillText"](string, x, y);
+            if (this.fillStyle.alpha > 0) {
+                context.fillText(string, x, y);
+            }
+            // stroke the text
+            if (this.lineWidth > 0 && this.strokeStyle.alpha > 0) {
+                context.strokeText(string, x, y);
+            }
             // add leading space
             y += this.metrics.lineHeight();
         }
@@ -424,15 +394,15 @@ var getContext2d = function (renderer, text) {
      * @ignore
      */
     destroy() {
-        if (this.offScreenCanvas === true) {
-            if (globalRenderer instanceof WebGLRenderer) {
-                globalRenderer.currentCompositor.deleteTexture2D(globalRenderer.currentCompositor.getTexture2D(this.glTextureUnit));
-                this.glTextureUnit = undefined;
-            }
-            globalRenderer.cache.delete(this.canvasTexture.canvas);
-            pool.push(this.canvasTexture);
-            this.canvasTexture = undefined;
+        if (typeof globalRenderer.gl !== "undefined") {
+            // make sure the right compositor is active
+            globalRenderer.setCompositor("quad");
+            globalRenderer.currentCompositor.deleteTexture2D(globalRenderer.currentCompositor.getTexture2D(this.glTextureUnit));
+            this.glTextureUnit = undefined;
         }
+        globalRenderer.cache.delete(this.canvasTexture.canvas);
+        pool.push(this.canvasTexture);
+        this.canvasTexture = undefined;
         pool.push(this.fillStyle);
         pool.push(this.strokeStyle);
         this.fillStyle = this.strokeStyle = undefined;

package/src/text/textstyle.js

@@ -2,13 +2,11 @@
  * apply the current text style to the given context
  * @ignore
  */
-export default function setContextStyle(context, style, stroke = false) {
+export default function setContextStyle(context, style) {
     context.font = style.font;
     context.fillStyle = style.fillStyle.toRGBA();
-    if (stroke === true) {
-        context.strokeStyle = style.strokeStyle.toRGBA();
-        context.lineWidth = style.lineWidth;
-    }
+    context.strokeStyle = style.strokeStyle.toRGBA();
+    context.lineWidth = style.lineWidth;
     context.textAlign = style.textAlign;
     context.textBaseline = style.textBaseline;
 }

package/src/utils/string.js

@@ -27,7 +27,7 @@ export function isNumeric(str) {
     if (typeof str === "string") {
         str = str.trim();
     }
-    return !isNaN(str) && /[+-]?([0-9]*[.])?[0-9]+/.test(str);
+    return !isNaN(str) && /^[+-]?(\d+(\.\d+)?|\.\d+)$/.test(str);
 }
 
 /**

package/src/utils/utils.js

@@ -99,9 +99,7 @@ var utils = {
         }
 
         // parse the url
-        url.slice(1).split("&").filter((value) => {
-            return (value !== "");
-        }).forEach((value) => {
+        url.slice(1).split("&").filter((value) => value !== "").forEach((value) => {
             var kv = value.split("=");
             var k = kv.shift();
             var v = kv.join("=");

package/src/video/canvas/canvas_renderer.js

@@ -59,6 +59,11 @@ import * as event from "./../../system/event.js";
             this.isContextValid = true;
             event.emit(event.ONCONTEXT_RESTORED, this);
         }, false );
+
+        // reset the renderer on game reset
+        event.on(event.GAME_RESET, () => {
+            this.reset();
+        });
     }
 
     /**
@@ -534,15 +539,6 @@ import * as event from "./../../system/event.js";
         this.strokePoint(x, y);
     }
 
-    /**
-     * return a reference to the font 2d Context
-     * @ignore
-     */
-    getFontContext() {
-        // in canvas mode we can directly use the 2d context
-        return this.getContext();
-    }
-
     /**
      * save the canvas context
      * @name save

package/src/video/renderer.js

@@ -115,11 +115,6 @@ import Point from "../geometries/point.js";
 
         // default uvOffset
         this.uvOffset = 0;
-
-        // reset the renderer on game reset
-        event.on(event.GAME_RESET, () => {
-            this.reset();
-        });
     }
 
     /**
@@ -412,10 +407,4 @@ import Point from "../geometries/point.js";
         // reset to default
         this.currentTint.setColor(255, 255, 255, 1.0);
     }
-
-    /**
-     * @ignore
-     */
-    drawFont(/*bounds*/) {}
-
 }

package/src/video/texture/atlas.js

@@ -1,10 +1,8 @@
 import Vector2d from "./../../math/vector2.js";
-import WebGLRenderer from "./../webgl/webgl_renderer.js";
-import TextureCache from "./../texture/cache.js";
 import Sprite from "./../../renderable/sprite.js";
 import { renderer } from "./../video.js";
 import pool from "./../../system/pooling.js";
-import loader from "./../../loader/loader.js";
+import { getImage } from "./../../loader/loader.js";
 import { ETA } from "./../../math/math.js";
 
 /**
@@ -98,7 +96,7 @@ export class TextureAtlas {
                         // set the texture
                         if (typeof(src) === "undefined") {
                             // get the texture name from the atlas meta data
-                            var image = loader.getImage(atlas.meta.image);
+                            var image = getImage(atlas.meta.image);
                             if (!image) {
                                 throw new Error(
                                     "Atlas texture '" + image + "' not found"
@@ -106,7 +104,7 @@ export class TextureAtlas {
                             }
                             this.sources.set(atlas.meta.image, image);
                         } else {
-                            this.sources.set(atlas.meta.image || "default", typeof src === "string" ? loader.getImage(src) : src);
+                            this.sources.set(atlas.meta.image || "default", typeof src === "string" ? getImage(src) : src);
                         }
                         this.repeat = "no-repeat";
                     }
@@ -120,13 +118,13 @@ export class TextureAtlas {
                         }
                         this.format = "ShoeBox";
                         this.repeat = "no-repeat";
-                        this.sources.set("default", typeof src === "string" ? loader.getImage(src) : src);
+                        this.sources.set("default", typeof src === "string" ? getImage(src) : src);
                     }
                     // Internal texture atlas
                     else if (atlas.meta.app.includes("melonJS")) {
                         this.format = "melonJS";
                         this.repeat = atlas.meta.repeat || "no-repeat";
-                        this.sources.set("default", typeof src === "string" ? loader.getImage(src) : src);
+                        this.sources.set("default", typeof src === "string" ? getImage(src) : src);
                     }
                     // initialize the atlas
                     this.atlases.set(atlas.meta.image || "default", this.parse(atlas));
@@ -140,7 +138,7 @@ export class TextureAtlas {
 
                         if (typeof(src) !== "undefined") {
                             // overwrite if specified
-                            atlas.image = typeof src === "string" ? loader.getImage(src) : src;
+                            atlas.image = typeof src === "string" ? getImage(src) : src;
                         }
                         // initialize the atlas
                         this.atlases.set("default", this.parseFromSpriteSheet(atlas));
@@ -159,11 +157,7 @@ export 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);
             });
         }
     }
@@ -346,12 +340,13 @@ export class TextureAtlas {
             region = this.getAtlas(atlas)[name];
         } else {
             // look for the given region in each existing atlas
-            this.atlases.forEach((atlas) => {
+            for (let atlas of this.atlases.values()) {
                 if (typeof atlas[name] !== "undefined") {
                     // there should be only one
                     region = atlas[name];
+                    break;
                 }
-            });
+            }
         }
         return region;
     }
@@ -387,7 +382,7 @@ export 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;

package/src/video/texture/cache.js

@@ -56,8 +56,8 @@ class TextureCache {
         } else {
             // manage cases where a specific atlas is specified
             this.cache.forEach((value, key) => {
-                var _atlas = value.getAtlas();
-                if (key === image && _atlas[0].width === atlas.framewidth && _atlas[0].height === atlas.frameheight) {
+                var _atlas = value.getAtlas()[0];
+                if (key === image && _atlas.width === atlas.framewidth && _atlas.height === atlas.frameheight) {
                     entry = value;
                 }
             });

package/src/video/video.js

@@ -87,7 +87,7 @@ export function init(width, height, options) {
          // initialize the default game Application with the given options
         game.init(width, height, options);
     } catch (e) {
-        console(e.message);
+        console.log(e.message);
         // me.video.init() historically returns false if failing at creating/using a HTML5 canvas
         return false;
     }

package/src/video/webgl/buffer/vertex.js

@@ -7,18 +7,18 @@
 
  export default 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);
@@ -37,7 +37,7 @@
      * return true if full
      * @ignore
      */
-    isFull(vertex = this.quadSize) {
+    isFull(vertex = this.objSize) {
          return (this.vertexCount + vertex >= this.maxVertex);
     }
 
@@ -45,14 +45,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;
 
         // 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);
 
@@ -70,19 +74,19 @@
         var 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++;