From 5bcd12fcb7939e276fd77114d465de8e87b31bc5 Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Fri, 23 Mar 2018 14:15:52 -0300 Subject: [PATCH] Base container rendering + sprite batching with parent matrix --- src/gameobjects/container/Container.js | 37 +++++++++++++++++ .../container/ContainerCanvasRenderer.js | 12 ++++++ src/gameobjects/container/ContainerCreator.js | 11 +++++ src/gameobjects/container/ContainerFactory.js | 11 +++++ src/gameobjects/container/ContainerRender.js | 19 +++++++++ .../container/ContainerWebGLRenderer.js | 32 +++++++++++++++ src/gameobjects/image/ImageWebGLRenderer.js | 4 +- src/gameobjects/index.js | 3 ++ .../webgl/pipelines/TextureTintPipeline.js | 40 +++++++++++++++---- 9 files changed, 159 insertions(+), 10 deletions(-) create mode 100644 src/gameobjects/container/Container.js create mode 100644 src/gameobjects/container/ContainerCanvasRenderer.js create mode 100644 src/gameobjects/container/ContainerCreator.js create mode 100644 src/gameobjects/container/ContainerFactory.js create mode 100644 src/gameobjects/container/ContainerRender.js create mode 100644 src/gameobjects/container/ContainerWebGLRenderer.js diff --git a/src/gameobjects/container/Container.js b/src/gameobjects/container/Container.js new file mode 100644 index 000000000..f87b39c13 --- /dev/null +++ b/src/gameobjects/container/Container.js @@ -0,0 +1,37 @@ +var Class = require('../../utils/Class'); +var Components = require('../components'); +var GameObject = require('../GameObject'); +var Render = require('./ContainerRender'); + +var Container = new Class({ + + Extends: GameObject, + + Mixins: [ + Components.BlendMode, + Components.Transform, + Render + ], + + initialize: + + function Container(scene, x, y) + { + GameObject.call(this, scene, 'Container'); + this.parentContainer = null; + this.children = []; + this.setPosition(x, y); + this.localTransform = new Components.TransformMatrix(); + }, + + add: function (gameObject) + { + if (this.children.indexOf(gameObject) < 0) + { + this.children.push(gameObject); + } + } + +}); + +module.exports = Container; diff --git a/src/gameobjects/container/ContainerCanvasRenderer.js b/src/gameobjects/container/ContainerCanvasRenderer.js new file mode 100644 index 000000000..3680683d1 --- /dev/null +++ b/src/gameobjects/container/ContainerCanvasRenderer.js @@ -0,0 +1,12 @@ +var GameObject = require('../GameObject'); + +var ContainerCanvasRenderer = function (renderer, src, interpolationPercentage, camera) +{ + if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id))) + { + return; + } + +}; + +module.exports = ContainerCanvasRenderer; \ No newline at end of file diff --git a/src/gameobjects/container/ContainerCreator.js b/src/gameobjects/container/ContainerCreator.js new file mode 100644 index 000000000..db098dd35 --- /dev/null +++ b/src/gameobjects/container/ContainerCreator.js @@ -0,0 +1,11 @@ +var GetAdvancedValue = require('../../utils/object/GetAdvancedValue'); +var GameObjectCreator = require('../GameObjectCreator'); +var Container = require('./Container'); + +GameObjectCreator.register('container', function (config) +{ + var x = GetAdvancedValue(config, 'x', 0.0); + var y = GetAdvancedValue(config, 'y', 0.0); + + return new Container(this.scene, x, y); +}); diff --git a/src/gameobjects/container/ContainerFactory.js b/src/gameobjects/container/ContainerFactory.js new file mode 100644 index 000000000..3531fced9 --- /dev/null +++ b/src/gameobjects/container/ContainerFactory.js @@ -0,0 +1,11 @@ +var Container = require('./Container'); +var GameObjectFactory = require('../GameObjectFactory'); + +GameObjectFactory.register('container', function (x, y) +{ + var container = new Container(this.scene, x, y); + + this.displayList.add(container); + + return container; +}); diff --git a/src/gameobjects/container/ContainerRender.js b/src/gameobjects/container/ContainerRender.js new file mode 100644 index 000000000..5c1970898 --- /dev/null +++ b/src/gameobjects/container/ContainerRender.js @@ -0,0 +1,19 @@ +var renderWebGL = require('../../utils/NOOP'); +var renderCanvas = require('../../utils/NOOP'); + +if (WEBGL_RENDERER) +{ + renderWebGL = require('./ContainerWebGLRenderer'); +} + +if (CANVAS_RENDERER) +{ + renderCanvas = require('./ContainerCanvasRenderer'); +} + +module.exports = { + + renderWebGL: renderWebGL, + renderCanvas: renderCanvas + +}; diff --git a/src/gameobjects/container/ContainerWebGLRenderer.js b/src/gameobjects/container/ContainerWebGLRenderer.js new file mode 100644 index 000000000..4a380eb78 --- /dev/null +++ b/src/gameobjects/container/ContainerWebGLRenderer.js @@ -0,0 +1,32 @@ +var GameObject = require('../GameObject'); + +var ContainerWebGLRenderer = function (renderer, container, interpolationPercentage, camera, parentMatrix) +{ + if (GameObject.RENDER_MASK !== container.renderFlags || (container.cameraFilter > 0 && (container.cameraFilter & camera._id))) + { + return; + } + + var children = container.children; + var transformMatrix = container.localTransform; + + if (parentMatrix === undefined) + { + transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY); + } + else + { + transformMatrix.loadIdentity(); + transformMatrix.multiply(parentMatrix); + transformMatrix.translate(container.x, container.y); + transformMatrix.rotate(container.rotation); + transformMatrix.scale(container.scaleX, container.scaleY); + } + + for (var index = 0; index < children.length; ++index) + { + children[index].renderWebGL(renderer, children[index], interpolationPercentage, camera, transformMatrix); + } +}; + +module.exports = ContainerWebGLRenderer; \ No newline at end of file diff --git a/src/gameobjects/image/ImageWebGLRenderer.js b/src/gameobjects/image/ImageWebGLRenderer.js index c9700ecf4..72d42eeca 100644 --- a/src/gameobjects/image/ImageWebGLRenderer.js +++ b/src/gameobjects/image/ImageWebGLRenderer.js @@ -20,14 +20,14 @@ var GameObject = require('../GameObject'); * @param {number} interpolationPercentage - Reserved for future use and custom pipelines. * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object. */ -var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera) +var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix) { if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id))) { return; } - this.pipeline.batchSprite(src, camera); + this.pipeline.batchSprite(src, camera, parentMatrix); }; module.exports = ImageWebGLRenderer; diff --git a/src/gameobjects/index.js b/src/gameobjects/index.js index 88f6cf848..6ec218e5a 100644 --- a/src/gameobjects/index.js +++ b/src/gameobjects/index.js @@ -22,6 +22,7 @@ var GameObjects = { GameObject: require('./GameObject'), BitmapText: require('./bitmaptext/static/BitmapText'), Blitter: require('./blitter/Blitter'), + Container: require('./container/Container'), DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'), Graphics: require('./graphics/Graphics.js'), Group: require('./group/Group'), @@ -39,6 +40,7 @@ var GameObjects = { Factories: { Blitter: require('./blitter/BlitterFactory'), + Container: require('./container/ContainerFactory'), DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'), Graphics: require('./graphics/GraphicsFactory'), Group: require('./group/GroupFactory'), @@ -56,6 +58,7 @@ var GameObjects = { Creators: { Blitter: require('./blitter/BlitterCreator'), + Container: require('./container/ContainerCreator'), DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextCreator'), Graphics: require('./graphics/GraphicsCreator'), Group: require('./group/GroupCreator'), diff --git a/src/renderer/webgl/pipelines/TextureTintPipeline.js b/src/renderer/webgl/pipelines/TextureTintPipeline.js index 0e9082c9d..a92ff48d1 100644 --- a/src/renderer/webgl/pipelines/TextureTintPipeline.js +++ b/src/renderer/webgl/pipelines/TextureTintPipeline.js @@ -10,6 +10,7 @@ var ShaderSourceFS = require('../shaders/TextureTint.frag'); var ShaderSourceVS = require('../shaders/TextureTint.vert'); var Utils = require('../Utils'); var WebGLPipeline = require('../WebGLPipeline'); +var IdentityMatrix = new Float32Array([1, 0, 0, 1, 0, 0]); /** * @classdesc @@ -651,15 +652,26 @@ var TextureTintPipeline = new Class({ * @param {Phaser.GameObjects.Sprite} sprite - [description] * @param {Phaser.Cameras.Scene2D.Camera} camera - [description] */ - batchSprite: function (sprite, camera) + batchSprite: function (sprite, camera, parentTransformMatrix) { + var parentMatrix; + + if (parentTransformMatrix === undefined) + { + parentMatrix = IdentityMatrix; + } + else + { + parentMatrix = parentTransformMatrix.matrix; + } + this.renderer.setPipeline(this); if (this.vertexCount + 6 > this.vertexCapacity) { this.flush(); } - + var roundPixels = this.renderer.config.roundPixels; var getTint = Utils.getTintAppendFloatAlpha; var vertexViewF32 = this.vertexViewF32; @@ -704,12 +716,24 @@ var TextureTintPipeline = new Class({ var cmd = cameraMatrix[3]; var cme = cameraMatrix[4]; var cmf = cameraMatrix[5]; - var mva = sra * cma + srb * cmc; - var mvb = sra * cmb + srb * cmd; - var mvc = src * cma + srd * cmc; - var mvd = src * cmb + srd * cmd; - var mve = sre * cma + srf * cmc + cme; - var mvf = sre * cmb + srf * cmd + cmf; + var pma = parentMatrix[0]; + var pmb = parentMatrix[1]; + var pmc = parentMatrix[2]; + var pmd = parentMatrix[3]; + var pme = parentMatrix[4]; + var pmf = parentMatrix[5]; + var pca = cma * pma + cmb * pmc; + var pcb = cma * pmb + cmb * pmd; + var pcc = cmc * pma + cmd * pmc; + var pcd = cmc * pmb + cmd * pmd; + var pce = cme * pma + cmf * pmc + pme; + var pcf = cme * pmb + cmf * pmd + pmf; + var mva = sra * pca + srb * pcc; + var mvb = sra * pcb + srb * pcd; + var mvc = src * pca + srd * pcc; + var mvd = src * pcb + srd * pcd; + var mve = sre * pca + srf * pcc + pce; + var mvf = sre * pcb + srf * pcd + pcf; var tx0 = x * mva + y * mvc + mve; var ty0 = x * mvb + y * mvd + mvf; var tx1 = x * mva + yh * mvc + mve;