diff --git a/v3/src/boot/Config.js b/v3/src/boot/Config.js index ee338e949..e3e6e123a 100644 --- a/v3/src/boot/Config.js +++ b/v3/src/boot/Config.js @@ -18,7 +18,7 @@ var defaultBannerColor = [ var defaultBannerTextColor = '#ffffff'; -function Config (config) +var Config = function (config) { if (config === undefined) { config = {}; } @@ -42,7 +42,7 @@ function Config (config) this.gameVersion = GetObjectValue(config, 'version', ''); // If you do: { banner: false } it won't display any banner at all - this.hideBanner = (GetObjectValue(config, 'banner', false) === false); + this.hideBanner = (GetObjectValue(config, 'banner', null) === false); this.hidePhaser = GetObjectValue(config, 'banner.hidePhaser', false); this.bannerTextColor = GetObjectValue(config, 'banner.text', defaultBannerTextColor); @@ -55,8 +55,7 @@ function Config (config) // Callbacks this.preBoot = GetObjectValue(config, 'callbacks.preBoot', NOOP); this.postBoot = GetObjectValue(config, 'callbacks.postBoot', NOOP); - -} +}; Config.prototype.constructor = Config; diff --git a/v3/src/boot/Game.js b/v3/src/boot/Game.js index 0bc52e818..8b2abc8cf 100644 --- a/v3/src/boot/Game.js +++ b/v3/src/boot/Game.js @@ -15,7 +15,7 @@ var DOMContentLoaded = require('../dom/DOMContentLoaded'); var CreateRenderer = require('./CreateRenderer'); var RandomDataGenerator = require('../math/random-data-generator/RandomDataGenerator'); var StateManager = require('../state/StateManager'); -var TextureManager = require ('../textures/TextureManager'); +var TextureManager = require('../textures/TextureManager'); var Game = function (config) { diff --git a/v3/src/checksum.js b/v3/src/checksum.js index a2bf91c23..a8618f5cb 100644 --- a/v3/src/checksum.js +++ b/v3/src/checksum.js @@ -1,4 +1,4 @@ var CHECKSUM = { -build: 'cd5e7c40-d7b6-11e6-b751-619825ddff5c' +build: '8ffe3950-dc3c-11e6-846b-836ccabf9869' }; module.exports = CHECKSUM; \ No newline at end of file diff --git a/v3/src/components/Transform.js b/v3/src/components/Transform.js index 81544e9cc..ee5da9d40 100644 --- a/v3/src/components/Transform.js +++ b/v3/src/components/Transform.js @@ -43,8 +43,8 @@ var Transform = function (gameObject, x, y, scaleX, scaleY) // GL Vertex Data this.glVertextData = { x0: 0, y0: 0, x1: 0, y1: 0, x2: 0, y2: 0, x3: 0, y3: 0 }; - // Canvas SetTransform Data - this.canvasData = { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 }; + // Canvas SetTransform data + this.canvasData = { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0, dx: 0, dy: 0 }; this.immediate = false; @@ -455,7 +455,7 @@ Transform.prototype = { this.cache.d = this.cache.cr * this._scaleY; }, - updateVertexData: function (interpolationPercentage) + updateVertexData: function (interpolationPercentage, renderer) { if (!this.gameObject.frame || (!this._dirtyVertex && !this.interpolate)) { @@ -542,7 +542,7 @@ Transform.prototype = { h1 = _w1; } - if (frame.autoRound === 1 || (frame.autoRound === -1 && this.game.renderer.roundPixels)) + if (frame.autoRound === 1 || (frame.autoRound === -1 && renderer.roundPixels)) { tx |= 0; ty |= 0; @@ -597,8 +597,10 @@ Transform.prototype = { }; }, - getCanvasTransformData: function (interpolationPercentage) + getCanvasTransformData: function (interpolationPercentage, renderer) { + var frame = this.gameObject.frame; + var world = this.world; var data = this.canvasData; @@ -613,6 +615,8 @@ Transform.prototype = { data.d = old.d + ((world.d - old.d) * interpolationPercentage); data.tx = old.tx + ((world.tx - old.tx) * interpolationPercentage); data.ty = old.ty + ((world.ty - old.ty) * interpolationPercentage); + data.dx = old.dx + ((frame.x - (this.anchorX * frame.width)) * interpolationPercentage); + data.dy = old.dy + ((frame.y - (this.anchorY * frame.height)) * interpolationPercentage); } else { @@ -623,6 +627,16 @@ Transform.prototype = { data.d = world.d; data.tx = world.tx; data.ty = world.ty; + data.dx = frame.x - (this.anchorX * frame.width); + data.dy = frame.y - (this.anchorY * frame.height); + } + + if (frame.autoRound === 1 || (frame.autoRound === -1 && renderer.roundPixels)) + { + data.tx |= 0; + data.ty |= 0; + data.dx |= 0; + data.dy |= 0; } return data; diff --git a/v3/src/gameobjects/image/ImageCanvasRenderer.js b/v3/src/gameobjects/image/ImageCanvasRenderer.js index 2658398fe..167d28d47 100644 --- a/v3/src/gameobjects/image/ImageCanvasRenderer.js +++ b/v3/src/gameobjects/image/ImageCanvasRenderer.js @@ -11,11 +11,11 @@ var ImageCanvasRenderer = function (renderer, src, interpolationPercentage) return; } - var data = src.transform.getCanvasTransformData(interpolationPercentage); + var data = src.transform.getCanvasTransformData(interpolationPercentage, renderer); var tint = src.color._glTint; var bg = src.color._glBg; - renderer.batch.add(frame.source, src.blendMode, data, frame.uvs, alpha, tint, bg); + renderer.drawImage(frame, src.blendMode, data, alpha, tint, bg); }; module.exports = ImageCanvasRenderer; diff --git a/v3/src/gameobjects/image/ImageWebGLRenderer.js b/v3/src/gameobjects/image/ImageWebGLRenderer.js index dde02ff49..63b4ca2b3 100644 --- a/v3/src/gameobjects/image/ImageWebGLRenderer.js +++ b/v3/src/gameobjects/image/ImageWebGLRenderer.js @@ -11,7 +11,7 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage) return; } - var verts = src.transform.getVertexData(interpolationPercentage); + var verts = src.transform.getVertexData(interpolationPercentage, renderer); var index = src.frame.source.glTextureIndex; var tint = src.color._glTint; var bg = src.color._glBg; diff --git a/v3/src/phaser.js b/v3/src/phaser.js index e6dedfbbc..07dacb59f 100644 --- a/v3/src/phaser.js +++ b/v3/src/phaser.js @@ -1,5 +1,8 @@ require('./polyfills'); +var CONST = require('./const'); +var Extend = require('./utils/object/Extend'); + // This object is exported globally var Phaser = { @@ -41,6 +44,10 @@ var Phaser = { require('./gameobjects/image/ImageFactory'); require('./gameobjects/container/ContainerFactory'); +// Merge in the consts + +Phaser = Extend(false, Phaser, CONST); + // Export it module.exports = Phaser; diff --git a/v3/src/renderer/canvas/BatchManager.js b/v3/src/renderer/canvas/BatchManager.js deleted file mode 100644 index 2b501049e..000000000 --- a/v3/src/renderer/canvas/BatchManager.js +++ /dev/null @@ -1,98 +0,0 @@ -var DrawImageBatch = require('./batches/DrawImageBatch'); - -var BatchManager = function (renderer, batchSize) -{ - this.renderer = renderer; - - this.currentBatch = null; - - this.drawImageBatch = new DrawImageBatch(this, batchSize); - - // this.pixelBatch = new Batch.Pixel(this, batchSize); - // this.fxBatch = new Batch.FX(this, batchSize); -}; - -BatchManager.prototype.constructor = BatchManager; - -BatchManager.prototype = { - - init: function () - { - this.drawImageBatch.init(); - - // this.pixelBatch.init(); - // this.fxBatch.init(); - - this.currentBatch = this.drawImageBatch; - }, - - start: function () - { - this.currentBatch.start(); - }, - - stop: function () - { - this.currentBatch.stop(); - }, - - setBatch: function (newBatch) - { - if (this.currentBatch.type === newBatch.type) - { - return false; - } - - // Flush whatever was in the current batch (if anything) - this.currentBatch.flush(); - - this.currentBatch = newBatch; - - this.currentBatch.start(true); - - return true; - }, - - // Add a new entry into the current sprite batch -// add: function (source, blendMode, verts, uvs, textureIndex, alpha, tintColors, bgColors) - add: function (source, blendMode, ) - { - var hasFlushed = false; - - // Check Batch Size and flush if needed - if (this.drawImageBatch.size >= this.drawImageBatch.maxSize) - { - this.drawImageBatch.flush(); - - hasFlushed = true; - } - - this.drawImageBatch.add(); - }, - - /* - addPixel: function (x0, y0, x1, y1, x2, y2, x3, y3, color) - { - var hasFlushed = this.setBatch(this.pixelBatch); - - // Check Batch Size and flush if needed - if (!hasFlushed && this.pixelBatch.size >= this.pixelBatch.maxSize) - { - this.pixelBatch.flush(); - } - - this.pixelBatch.add(x0, y0, x1, y1, x2, y2, x3, y3, color); - }, - */ - - destroy: function () - { - this.singleTextureBatch.destroy(); - - this.renderer = null; - this.gl = null; - } - -}; - -module.exports = BatchManager; diff --git a/v3/src/renderer/canvas/CanvasRenderer.js b/v3/src/renderer/canvas/CanvasRenderer.js index e36ef574b..729447cad 100644 --- a/v3/src/renderer/canvas/CanvasRenderer.js +++ b/v3/src/renderer/canvas/CanvasRenderer.js @@ -1,4 +1,4 @@ -var BatchManager = require('./BatchManager'); +var DrawImage = require('./utils/DrawImage'); var CanvasRenderer = function (game) { @@ -38,10 +38,12 @@ var CanvasRenderer = function (game) this.roundPixels = false; - this.batch = new BatchManager(this, 4000); + // Map to the required function + this.drawImage = DrawImage; - // var so = 'source-over'; - // this.blendModes = [ so, 'lighter', so, so, so, so, so, so, so, so, so, so, so, so, so, so, so ]; + var so = 'source-over'; + + this.blendModes = [ so, 'lighter', so, so, so, so, so, so, so, so, so, so, so, so, so, so, so ]; this.currentAlpha = 1; this.currentBlendMode = 0; @@ -51,8 +53,6 @@ var CanvasRenderer = function (game) this.endTime = 0; this.drawCount = 0; - this.blendModes = []; - // this.tintMethod = this.tintWithPerPixel; this.init(); @@ -66,8 +66,6 @@ CanvasRenderer.prototype = { { this.mapBlendModes(); - this.batch.init(); - this.resize(this.width, this.height); }, @@ -164,13 +162,9 @@ CanvasRenderer.prototype = { this.drawCount = 0; - this.batch.start(); - // Could move to the State Systems or MainLoop this.game.state.renderChildren(this, state, interpolationPercentage); - this.batch.stop(); - this.endTime = Date.now(); // console.log('%c render end ', 'color: #ffffff; background: #ff0000;'); diff --git a/v3/src/renderer/canvas/utils/DrawImage.js b/v3/src/renderer/canvas/utils/DrawImage.js new file mode 100644 index 000000000..b9bec3e31 --- /dev/null +++ b/v3/src/renderer/canvas/utils/DrawImage.js @@ -0,0 +1,36 @@ + +var DrawImage = function (frame, blendMode, transform, alpha, tint, bg) +{ + var ctx = this.context; + var cd = frame.canvasData; + + // Blend Mode + + if (this.currentBlendMode !== blendMode) + { + this.currentBlendMode = blendMode; + ctx.globalCompositeOperation = this.blendModes[blendMode]; + } + + // Alpha + + if (this.currentAlpha !== alpha) + { + this.currentAlpha = alpha; + ctx.globalAlpha = alpha; + } + + // Smoothing (should this be a Game Object, or Frame / Texture level property?) + + if (this.currentScaleMode !== frame.source.scaleMode) + { + // this.currentScaleMode = source.scaleMode; + // ctx[this.smoothProperty] = (source.scaleMode === Phaser.scaleModes.LINEAR); + } + + ctx.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty); + ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, transform.dx, transform.dy, cd.dWidth, cd.dHeight); + +}; + +module.exports = DrawImage; diff --git a/v3/src/textures/Frame.js b/v3/src/textures/Frame.js index 7d0de68be..344da6844 100644 --- a/v3/src/textures/Frame.js +++ b/v3/src/textures/Frame.js @@ -9,9 +9,7 @@ var Extend = require('../utils/object/Extend'); /** * A Frame is a section of a Texture. * -* Called TextureFrame during integration, will rename to Frame later. -* -* @class Phaser.TextureFrame +* @class Phaser.Frame * @constructor * @param {Phaser.Texture} texture - The Texture this Frame belongs to. * @param {string} name - The unique (within the Texture) name of this Frame. @@ -142,6 +140,14 @@ var Frame = function (texture, name, sourceIndex, x, y, width, height) y2: 0, x3: 0, y3: 0 + }, + drawImage: { + sx: x, + sy: y, + sWidth: width, + sHeight: height, + dWidth: width, + dHeight: height } }; @@ -165,17 +171,21 @@ Frame.prototype = { */ setTrim: function (actualWidth, actualHeight, destX, destY, destWidth, destHeight) { + var data = this.data; + var ss = data.spriteSourceSize; + var di = data.drawImage; + // Store actual values - this.data.trim = true; + data.trim = true; - this.data.sourceSize.w = actualWidth; - this.data.sourceSize.h = actualHeight; + data.sourceSize.w = actualWidth; + data.sourceSize.h = actualHeight; - this.data.spriteSourceSize.x = destX; - this.data.spriteSourceSize.y = destY; - this.data.spriteSourceSize.w = destWidth; - this.data.spriteSourceSize.h = destHeight; + ss.x = destX; + ss.y = destY; + ss.w = destWidth; + ss.h = destHeight; // Adjust properties this.x = destX; @@ -183,6 +193,14 @@ Frame.prototype = { this.width = destWidth; this.height = destHeight; + // drawImage data + di.sx = destX; + di.sy = destY; + di.sWidth = destWidth; + di.sHeight = destHeight; + di.dWidth = destWidth; + di.dHeight = destHeight; + this.updateUVs(); return this; @@ -324,6 +342,23 @@ Object.defineProperties(Frame.prototype, { return this.data.uvs; } + }, + + /** + * Canvas Draw Image data + * + * @name Phaser.TextureFrame#canvasData + * @property {Object} canvasData + */ + canvasData: { + + enumerable: true, + + get: function () + { + return this.data.drawImage; + } + } }); diff --git a/v3/src/utils/GetObjectValue.js b/v3/src/utils/GetObjectValue.js index fb1ea31ea..983388820 100644 --- a/v3/src/utils/GetObjectValue.js +++ b/v3/src/utils/GetObjectValue.js @@ -6,8 +6,7 @@ var GetObjectValue = function (source, key, defaultValue) { if (key.indexOf('.')) { - keys = key.split('.'); - + var keys = key.split('.'); var parent = source; var value = defaultValue; @@ -31,9 +30,8 @@ var GetObjectValue = function (source, key, defaultValue) } else { - return (source.hasOwnProperty(key) ? source[key] : defaultValue); + return (source.hasOwnProperty(key)) ? source[key] : defaultValue; } - -} +}; module.exports = GetObjectValue;