Merge branch 'photonstorm-master3' into master

.editorconfig

@@ -4,7 +4,6 @@ root = true
 [*]
 indent_style = space
 indent_size = 4
-end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.gitattributes

@@ -0,0 +1,13 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.js text
+*.ts text
+*.md text
+*.json text
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary

CHANGELOG-v3.50.md

@@ -0,0 +1,581 @@
+## Version 3.50.0 - Subaru - in development
+
+### WebGL Pipeline Updates
+
+If you use a custom WebGL Pipeline in your game, you must update your code in order to use Phaser 3.50.
+
+Due to the huge amount of work that has taken place in this area, all of the pipelines have been renamed. If you extend any of these pipelines or use them in your game code (referenced by name), then please update accordingly. The name changes are:
+
+* `TextureTintPipeline` is now called the `MultiPipeline`.
+* `TextureTintStripPipeline` is now called the `RopePipeline`.
+* `ForwardDiffuseLightPipeline` is now called the `LightPipeline`.
+
+To match the new pipeline names, the shader source code has also been renamed.
+
+* `ForwardDiffuse.frag` is now called `Light.frag`.
+* `TextureTint.frag` is now called `Multi.frag`.
+* `TextureTint.vert` is now called `Multi.vert`.
+
+Other pipeline changes are as follows:
+
+* `Types.Renderer.WebGL.WebGLPipelineConfig` is a new TypeDef that helps you easily configure your own Custom Pipeline when using TypeScript and also provides better JSDocs.
+* `Types.Renderer.WebGL.WebGLPipelineAttributesConfig` is a new TypeDef that helps you easily configure the attributes for your own Custom Pipelines when using TypeScript and also provides better JSDocs.
+* All pipelines will now work out the `renderer` property automatically, so it's no longer required in the config.
+* All pipelines will now work out the `gl` property automatically, so it's no longer required in the config.
+* All pipelines will now extract the `name` property from the config, allowing you to set it externally.
+* All pipelines will now extract the `vertexCapacity` property from the config, allowing you to set it externally.
+* All pipelines will now extract the `vertexSize` property from the config, allowing you to set it externally.
+* All pipelines will now extract the `vertexData` property from the config, allowing you to set it externally.
+* All pipelines will now extract the `attributes` property from the config, allowing you to set it externally.
+* All pipelines will now extract the `topology` property from the config, allowing you to set it externally.
+* The `WebGLPipeline.shouldFlush` method now accepts an optional parameter `amount`. If given, it will return `true` if when the amount is added to the vertex count it will exceed the vertex capacity. The Multi Pipeline has been updated to now use this method instead of performing the comparison multiple times itself.
+
+### Pipeline Manager
+
+The `WebGL.PipelineManager` is a new class that is responsbile for managing all of the WebGL Pipelines in Phaser. An instance of the Pipeline Manager is created by the WebGL Renderer and is available under the `pipelines` property. This means that the WebGL Renderer no longer handles pipelines directly, causing the following API changes:
+
+* `WebGLRenderer.pipelines` is no longer a plain object containing pipeline instances. It's now an instance of the `PipelineManager` class. This instance is created during the init and boot phase of the renderer.
+* The `WebGLRenderer.currentPipeline` property no longer exists, instead use `PipelineManager.current`.
+* The `WebGLRenderer.previousPipeline` property no longer exists, instead use `PipelineManager.previous`.
+* The `WebGLRenderer.hasPipeline` method no longer exists, instead use `PipelineManager.has`.
+* The `WebGLRenderer.getPipeline` method no longer exists, instead use `PipelineManager.get`.
+* The `WebGLRenderer.removePipeline` method no longer exists, instead use `PipelineManager.remove`.
+* The `WebGLRenderer.addPipeline` method no longer exists, instead use `PipelineManager.add`.
+* The `WebGLRenderer.setPipeline` method no longer exists, instead use `PipelineManager.set`.
+* The `WebGLRenderer.rebindPipeline` method no longer exists, instead use `PipelineManager.rebind`.
+* The `WebGLRenderer.clearPipeline` method no longer exists, instead use `PipelineManager.clear`.
+
+The Pipeline Manager also offers the following new features:
+
+* The `PipelineManager.resize` method automatically handles resize events across all pipelines.
+* The `PipelineManager.preRender` method calls the pre-render method of all pipelines.
+* The `PipelineManager.render` method calls the render method of all pipelines.
+* The `PipelineManager.postRender` method calls the post-render method of all pipelines.
+* The `PipelineManager.setMulti` method automatically binds the Multi Texture Pipeline, Phaser's default.
+* The `PipelineManager.clear` method will clear the pipeline, store it in `previous` and free the renderer.
+* The `PipelineManager.rebind` method will reset the rendering context and restore the `previous` pipeline, if set.
+
+New constants have been created to help you reference a pipeline without needing to use strings:
+
+* `Phaser.Renderer.WebGL.Pipelines.BITMAPMASK_PIPELINE` for the Bitmap Mask Pipeline.
+* `Phaser.Renderer.WebGL.Pipelines.LIGHT_PIPELINE` for the Light 2D Pipeline.
+* `Phaser.Renderer.WebGL.Pipelines.SINGLE_PIPELINE` for the Single Pipeline.
+* `Phaser.Renderer.WebGL.Pipelines.MULTI_PIPELINE` for the Multi Pipeline.
+* `Phaser.Renderer.WebGL.Pipelines.ROPE_PIPELINE` for the Rope Pipeline.
+
+All Game Objects have been updated to use the new constants and Pipeline Manager.
+
+#### Single Pipeline
+
+There is also a new pipeline called `SinglePipeline`, created to emulate the old `TextureTintPipeline`. This special pipeline uses just a single texture and makes things a lot easier if you wish to create a custom pipeline, but not have to recode your shaders to work with multiple textures. Instead, just extend `SinglePipeline`, where-as before you extended the `TextureTintPipeline` and you won't have to change any of your shader code. However, if you can, you should update it to make it perform faster, but that choice is left up to you.
+
+### WebGL Multi-Texture Rendering
+
+The Multi Pipeline (previously called the Texture Tint Pipeline) has had its core flow rewritten to eliminate the need for constantly creating `batch` objects. Instead, it now supports the new multi-texture shader, vastly increasing rendering performance, especially on draw-call bound systems.
+
+All of the internal functions, such as `batchQuad` and `batchSprite` have been updated to use the new method of texture setting. The method signatures all remain the same unless indicated below.
+
+* `Config.render.maxTextures` is a new game config setting that allows you to control how many texture units will be used in WebGL.
+* `WebGL.Utils.checkShaderMax` is a new function, used internally by the renderer, to determine the maximum number of texture units the GPU + browser supports.
+* The property `WebGLRenderer.currentActiveTextureUnit` has been renamed to `currentActiveTexture`.
+* `WebGLRenderer.startActiveTexture` is a new read-only property contains the current starting active texture unit.
+* `WebGLRenderer.maxTextures` is a new read-only property that contains the maximum number of texture units WebGL can use.
+* `WebGLRenderer.textureIndexes` is a new read-only array that contains all of the available WebGL texture units.
+* `WebGLRenderer.tempTextures` is a new read-only array that contains temporary WebGL textures.
+* The `WebGLRenderer.currentTextures` property has been removed, as it's no longer used.
+* `TextureSource.glIndex` is a new property that holds the currently assigned texture unit for the Texture Source.
+* `TextureSource.glIndexCounter` is a new property that holds the time the index was assigned to the Texture Source.
+* `WebGLRenderer.currentTextures` has been removed, as it's no longer used internally.
+* `WebGLRenderer.setBlankTexture` no longer has a `force` parameter, as it's set by default.
+* The Mesh Game Object WebGL Renderer function has been updated to support multi-texture units.
+* The Blitter Game Object WebGL Renderer function has been updated to support multi-texture units.
+* The Bitmap Text Game Object WebGL Renderer function has been updated to support multi-texture units.
+* The Dynamic Bitmap Text Game Object WebGL Renderer function has been updated to support multi-texture units.
+* The Particle Emitter Game Object WebGL Renderer function has been updated to support multi-texture units.
+* The Texture Tint vertex and fragment shaders have been updated to support the `inTexId` float attribute and dynamic generation.
+* The Texture Tint Pipeline has a new attribute, `inTexId` which is a `gl.FLOAT`.
+* `TextureTintPipeline.bind` is a new method that sets the `uMainSampler` uniform.
+* The `TextureTintPipeline.requireTextureBatch` method has been removed, as it's no longer required.
+* The `TextureTintPipeline.pushBatch` method has been removed, as it's no longer required.
+* The `TextureTintPipeline.maxQuads` property has been removed, as it's no longer required.
+* The `TextureTintPipeline.batches` property has been removed, as it's no longer required.
+* `TextureTintPipeline.flush` has been rewritten to support multi-textures.
+* `TextureTintPipeline.flush` no longer creates a sub-array if the batch is full, but instead uses `bufferData` for speed.
+* `WebGLPipeline.currentUnit` is a new property that holds the most recently assigned texture unit. Treat as read-only.
+* `WebGLRenderer.setTextureSource` is a new method, used by pipelines and Game Objects, that will assign a texture unit to the given Texture Source.
+* The `WebGLRenderer.setTexture2D` method has been updated to use the new texture unit assignment. It no longer takes the `textureUnit` or `flush` parameters and these have been removed from its method signature.
+* `WebGLRenderer.setTextureZero` is a new method that activates texture zero and binds the given texture to it. Useful for fbo backed game objects.
+* `WebGLRenderer.clearTextureZero` is a new method that clears the texture that was bound to unit zero.
+* `WebGLRenderer.textureZero` is a new property that holds the currently bound unit zero texture.
+* `WebGLRenderer.normalTexture` is a new property that holds the currently bound normal map (texture unit one).
+* `WebGLRenderer.setNormalMap` is a new method that sets the current normal map texture.
+* `WebGLRenderer.clearNormalMap` is a new method that clears the current normal map texture.
+* `WebGLRenderer.resetTextures` is a new method that flushes the pipeline, resets all textures back to the temporary ones, and resets the active texture counter.
+* `WebGLPipeline.boot` will now check all of the attributes and store the pointer location within the attribute entry.
+* `WebGLPipeline.bind` no longer looks-up and enables every attribute, every frame. Instead, it uses the cached pointer location stored in the attribute entry, cutting down on redundant WebGL operations.
+* `WebGLRenderer.isNewNormalMap` is a new method that returns a boolean if the given parameters are not currently used.
+* `WebGLPipeline.forceZero` is a new property that informs Game Objects if the pipeline requires a zero bound texture unit.
+* `WebGLPipeline.setAttribPointers` is a new method that will set the vertex attribute pointers for the pipeline.
+* `WebGLRenderer.unbindTextures` is a new method that will activate and then null bind all WebGL textures.
+* `Renderer.WebGL.Utils.parseFragmentShaderMaxTextures` is a new function that will take fragment shader source and search it for `%count%` and `%forloop%` declarations, replacing them with the required GLSL for multi-texture support, returning the modified source.
+
+### Light Pipeline Changes
+
+The Light Pipeline (previously called the Forward Diffuse Light Pipeline), which is responsible for rendering lights under WebGL, has been rewritten to work with the new Multi Pipeline features. Lots of redundant code has been removed and the following changes and improvements took place:
+
+* The pipeline now works with Game Objects that do not have a normal map. They will be rendered using the new default normal map, which allows for a flat light effect to pass over them and merge with their diffuse map colors.
+* Fixed a bug in the way lights were handled that caused Tilemaps to render one tile at a time, causing massive slow down. They're now batched properly, making a combination of lights and tilemaps possible again.
+* The Bitmap Text (Static and Dynamic) Game Objects now support rendering with normal maps.
+* The TileSprite Game Objects now support rendering with normal maps.
+* Mesh and Quad Game Objects now support rendering with normal maps.
+* The Graphics Game Objects now support rendering in Light2d. You can even use normal map textures for the texture fills.
+* Particle Emitter Game Object now supports rendering in Light2d.
+* All Shape Game Objects (Rectangle, IsoBox, Star, Polygon, etc) now support rendering in Light2d.
+* The Text Game Object now supports rendering in Light2d, no matter which font, stroke or style it is using.
+* Both Static and Dynamic Tilemap Layer Game Objects now support the Light2d pipeline, with or without normal maps.
+* The pipeline will no longer look-up and set all of the light uniforms unless the `Light` is dirty.
+* The pipeline will no longer reset all of the lights unless the quantity of lights has changed.
+* The `ForwardDiffuseLightPipeline.defaultNormalMap` property has changed, it's now an object with a `glTexture` property that maps to the pipelines default normal map.
+* The `ForwardDiffuseLightPipeline.boot` method has been changed to now generate a default normal map.
+* The `ForwardDiffuseLightPipeline.onBind` method has been removed as it's no longer required.
+* The `ForwardDiffuseLightPipeline.setNormalMap` method has been removed as it's no longer required.
+* `ForwardDiffuseLightPipeline.bind` is a new method that handles setting-up the shader uniforms.
+* The `ForwardDiffuseLightPipeline.batchTexture` method has been rewritten to use the Texture Tint Pipeline function instead.
+* The `ForwardDiffuseLightPipeline.batchSprite` method has been rewritten to use the Texture Tint Pipeline function instead.
+* `ForwardDiffuseLightPipeline.lightCount` is a new property that stores the previous number of lights rendered.
+* `ForwardDiffuseLightPipeline.getNormalMap` is a new method that will look-up and return a normal map for the given object.
+
+### Lights
+
+* `Light.dirty` is a new property that controls if the light is dirty, or not, and needs its uniforms updating.
+* `Light` has been recoded so that all of its properties are now setters that activate its `dirty` flag.
+* `LightsManager.destroy` will now clear the `lightPool` array when destroyed, where-as previously it didn't.
+* `LightsManager.cull` now takes the viewport height from the renderer instead of the game config (thanks zenwaichi)
+
+### WebGL ModelViewProjection API Changes
+
+The `ModelViewProjection` object contained a lot of functions that Phaser never used internally. These have now been
+moved to external functions, which can be easily excluded from Custom builds to save space.
+
+If you used any of them in your code, please update to the new function names below:
+
+* `Phaser.Renderer.WebGL.MVP` is a new namespace under which the Model View Projection functions now live.
+* `projIdentity` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ProjectIdentity`
+* `projPersp` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ProjectPerspective`
+* `modelRotateX` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.RotateX`
+* `modelRotateY` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.RotateY`
+* `modelRotateZ` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.RotateZ`
+* `viewLoad` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewLoad`
+* `viewRotateX` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewRotateX`
+* `viewRotateY` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewRotateY`
+* `viewRotateZ` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewRotateZ`
+* `viewScale` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewScale`
+* `viewTranslate` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewTranslate`
+* `modelIdentity` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.Identity`
+* `modelScale` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.Scale`
+* `modelTranslate` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.Translate`
+* `viewIdentity` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewIdentity`
+* `viewLoad2D` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ViewLoad2D`
+* `projOrtho` is now available as a stand-alone function `Phaser.Renderer.WebGL.MVP.ProjectOrtho`
+* `Phaser.Renderer.WebGL.MVP.SetIdentity` is a new function the others use, to save on space.
+
+### BitmapText - New Features, Updates and API Changes
+
+* `BitmapText.setCharacterTint` is a new method that allows you to set a tint color (either additive or fill) on a specific range of characters within a static Bitmap Text. You can specify the start and length offsets and per-corner tint colors.
+* `BitmapText.setWordTint` is a new method that allows you to set a tint color (either additive or fill) on all matching words within a static Bitmap Text. You can specify the word by string, or numeric offset, and the number of replacements to tint.
+* `BitmapText.setDropShadow` is a new method that allows you to apply a drop shadow effect to a Bitmap Text object. You can set the horizontal and vertical offset of the shadow, as well as the color and alpha levels. Call this method with no parameters to clear a shadow.
+* `BitmapTextWebGLRenderer` has been rewritten from scratch to make use of the new pre-cached WebGL uv texture and character location data generated by `GetBitmapTextSize`. This has reduced the number of calculations made in the function dramatically, as it no longer has work out glyph advancing or offsets during render, but only when the text content updates.
+* `BitmapText.getCharacterAt` is a new method that will return the character data from the BitmapText at the given `x` and `y` coordinates. The character data includes the code, position, dimensions, and glyph information.
+* The `BitmapTextSize` object returned by `BitmapText.getTextBounds` has a new property called `characters` which is an array that contains the scaled position coordinates of each character in the BitmapText, which you could use for tasks such as determining which character in the BitmapText was clicked.
+* `ParseXMLBitmapFont` will now calculate the WebGL uv data for the glyphs during parsing. This avoids it having to be done during rendering, saving CPU cycles on an operation that never changes.
+* `ParseXMLBitmapFont` will now create a Frame object for each glyph. This means you could, for example, create a Sprite using the BitmapText texture and the glyph as the frame key, i.e.: `this.add.sprite(x, y, fontName, 'A')`.
+* `BitmapTextWord`, `BitmapTextCharacter` and `BitmapTextLines` are three new type defs that are now part of the `BitmapTextSize` config object, as returned by `getTextBounds`. This improves the TypeScript defs and JS Docs for this object.
+* The signature of the `ParseXMLBitmapFont` function has changed. The `frame` parameter is no longer optional, and is now the second parameter in the list, instead of being the 4th. If you call this function directly, please update your code.
+* The `BitmapText.getTextBounds` method was being called every frame, even if the bounds didn't change, potentially costing a lot of CPU time depending on the text length and quantity of them. It now only updates the bounds if they change.
+* The `GetBitmapTextSize` function used `Math.round` on the values, if the `round` parameter was `true`, which didn't create integers. It now uses `Math.ceil` instead to give integer results.
+* The `GetBitmapTextSize` function has a new boolean parameter `updateOrigin`, which will adjust the origin of the parent BitmapText if set, based on the new bounds calculations.
+* `BitmapText.preDestroy` is a new method that will tidy-up all of the BitmapText data during object destruction.
+* `BitmapText.dropShadowX` is a new property that controls the horizontal offset of the drop shadow on the Bitmap Text.
+* `BitmapText.dropShadowY` is a new property that controls the vertical offset of the drop shadow on the Bitmap Text.
+* `BitmapText.dropShadowColor` is a new property that sets the color of the Bitmap Text drop shadow.
+* `BitmapText.dropShadowAlpha` is a new property that sets the alpha of the Bitmap Text drop shadow.
+* `BatchChar` is a new internal private function for batching a single character of a Bitmap Text to the pipeline.
+* If you give an invalid Bitmap Font key, the Bitmap Text object will now issue a `console.warn`.
+* Setting the `color` value in the `DynamicBitmapText.setDisplayCallback` would inverse the red and blue channels if the color was not properly encoded for WebGL. It is now encoded automatically, meaning you can pass normal hex values as the colors in the display callback. Fix #5225 (thanks @teebarjunk)
+* If you apply `setSize` to the Dynamic BitmapText the scissor is now calculated based on the parent transforms, not just the local ones, meaning you can crop Bitmap Text objects that exist within Containers. Fix #4653 (thanks @lgibson02)
+* `ParseXMLBitmapFont` has a new optional parameter `texture`. If defined, this Texture is populated with Frame data, one frame per glyph. This happens automatically when loading Bitmap Text data in Phaser.
+
+### Update List Changes
+
+The way in which Game Objects add themselves to the Scene Update List has changed. Instead of being added by the Factory methods, they will now add and remove themselves based on the new `ADDED_TO_SCENE` and `REMOVED_FROM_SCENE` events. This means, you can now add Sprites directly to a Container, or Group, and they'll animate properly without first having to be part of the Display List. The full set of changes and new features relating to this follow:
+
+* `GameObjects.Events.ADDED_TO_SCENE` is a new event, emitted by a Game Object, when it is added to a Scene, or a Container that is part of the Scene.
+* `GameObjects.Events.REMOVED_FROM_SCENE` is a new event, emitted by a Game Object, when it is removed from a Scene, or a Container that is part of the Scene.
+* `Scenes.Events.ADDED_TO_SCENE` is a new event, emitted by a Scene, when a new Game Object is added to the display list in the Scene, or a Container that is on the display list.
+* `Scenes.Events.REMOVED_FROM_SCENE` is a new event, emitted by a Scene, when it a Game Object is removed from the display list in the Scene, or a Container that is on the display list.
+* `GameObject.addedToScene` is a new method that custom Game Objects can use to perform additional set-up when a Game Object is added to a Scene. For example, Sprite uses this to add itself to the Update List.
+* `GameObject.removedFromScene` is a new method that custom Game Objects can use to perform additional tear-down when a Game Object is removed from a Scene. For example, Sprite uses this to remove themselves from the Update List.
+* Game Objects no longer automatically remove themselves from the Update List during `preDestroy`. This should be handled directly in the `removedFromScene` method now.
+* The `Container` will now test to see if any Game Object added to it is already on the display list, or not, and emit its ADDED and REMOVED events accordingly. Fix #5267 #3876 (thanks @halgorithm @mbpictures)
+* `DisplayList.events` is a new property that references the Scene's Event Emitter. This is now used internally.
+* `DisplayList.addChildCallback` is a new method that overrides the List callback and fires the new ADDED events.
+* `DisplayList.removeChildCallback` is a new method that overrides the List callback and fires the new REMOVED events.
+* `GameObjectCreator.events` is a new property that references the Scene's Event Emitter. This is now used internally.
+* `GameObjectFactory.events` is a new property that references the Scene's Event Emitter. This is now used internally.
+* `ProcessQueue.checkQueue` is a new boolean property that will make sure only unique objects are added to the Process Queue.
+* The `Update List` now uses the new `checkQueue` property to ensure no duplicate objects are on the active list.
+* `DOMElementFactory`, `ExternFactory`, `ParticleManagerFactor`, `RopeFactory` and `SpriteFactory` all no longer add the objects to the Update List, this is now handled by the ADDED events instead.
+* `Sprite`, `Rope`, `ParticleEmitterManager`, `Extern` and `DOMElement` now all override the `addedToScene` and `removedFromScene` callbacks to handle further set-up tasks.
+
+### Spine Plugin Updates
+
+* The Spine Runtimes have been updated to 3.8.95, which are the most recent non-beta versions. Please note, you will _need_ to re-export your animations if you're working in a version of Spine lower than 3.8.20.
+* `SpineContainer` is a new Game Object available via `this.add.spineContainer` to which you can add Spine Game Objects only. It uses a special rendering function to retain batching, even across multiple container or Spine Game Object instances, resulting in dramatically improved performance over using regular Containers.
+* A Spine Game Object with `setVisible(false)` will no longer still cause internal gl commands and is now properly skipped, retaining any current batch in the process. Fix #5174 (thanks @Kitsee)
+* The Spine Game Object WebGL Renderer will no longer clear the type if invisible and will only end the batch if the next type doesn't match.
+* The Spine Game Object WebGL Renderer will no longer rebind the pipeline if it was the final object on the display list, saving lots of gl commands.
+* The Webpack build scripts have all been updated for Webpack 4.44.x. Fix #5243 (thanks @RollinSafary)
+* There is a new npm script `npm run plugin.spine.runtimes` which will build all of the Spine runtimes, for ingestion by the plugin. Note: You will need to check-out the Esoteric Spine Runtimes repo into `plugins/spine/` in order for this to work.
+* Spine Game Objects can now be rendered to Render Textures. Fix #5184 (thanks @Kitsee)
+* Using > 128 Spine objects in a Container would cause a `WebGL: INVALID_OPERATION: vertexAttribPointer: no ARRAY_BUFFER is bound and offset is non-zero` error if you added any subsequent Spine objects to the Scene. There is now no limit. Fix #5246 (thanks @d7561985)
+* The Spine Plugin will now work in HEADLESS mode without crashing. Fix #4988 (thanks @raimon-segura)
+* Spine Game Objects now use -1 as their default blend mode, which means 'skip setting it'.
+* The Spine TypeScript defs have been updated for the latest version of the plugin and to add SpineContainers.
+* The `SpineGameObject.setAnimation` method will now use the `trackIndex` parameter if `ignoreIfPlaying` is set and run the check against this track index. Fix #4842 (thanks @vinerz)
+* The `SpineFile` will no longer throw a warning if adding a texture into the Texture Manager that already exists. This allows you to have multiple Spine JSON use the same texture file, however, it also means you now get no warning if you accidentally load a texture that exists, so be careful with your keys! Fix #4947 (thanks @Nomy1)
+* The Spine Plugin `destroy` method will now no longer remove the Game Objects from the Game Object Factory, or dispose of the Scene Renderer. This means when a Scene is destroyed, it will keep the Game Objects in the factory for other Scene's to use. Fix #5279 (thanks @Racoonacoon)
+* `SpinePlugin.gameDestroy` is a new method that is called if the Game instance emits a `destroy` event. It removes the Spine Game Objects from the factory and disposes of the Spine scene renderer.
+
+### Animation API - New Features and Updates
+
+If you use Animations in your game, please read the following important API changes in 3.50:
+
+The Animation API has had a significant overhaul to improve playback handling. Instead of just playing an animation based on its global key, you can now supply a new `PlayAnimationConfig` object instead, which allows you to override any of the default animation settings, such as `duration`, `delay` and `yoyo` (see below for the full list). This means you no longer have to create lots of duplicate animations just to change properties such as `duration`, and can now set them dynamically at run-time as well.
+
+* The `Animation` class no longer extends `EventEmitter`, as it no longer emits any events directly. This means you cannot now listen for events directly from an Animation instance. All of the events are now dispatched by the Game Objects instead.
+* All of the `SPRITE_ANIMATION_KEY` events have been removed. Instead, please use the new events which all carry the `frameKey` parameter, which can be used to handle frame specific events. The only exception to this is `ANIMATION_COMPLETE_KEY`, which is a key specific version of the completion event.
+* `ANIMATION_UPDATE_EVENT` is a new event that is emitted from a Sprite when an animation updates, i.e. its frame changes.
+* `ANIMATION_STOP_EVENT` is a new event that is emitted from a Sprite when its current animation is stopped. This can happen if any of the `stop` methods are called, or a new animation is played prior to this one reaching completion. Fix #4894 (thanks @scott20145)
+* The Game Object `Component.Animation` component has been renamed to `AnimationState` and has moved namespace. It's now in `Phaser.Animations` instead of `GameObjects.Components` to help differentiate it from the `Animation` class when browsing the documentation.
+* The `play`, `playReverse`, `playAfterDelay`, `playAfterRepeat` and `chain` Sprite and Animation Component methods can now all take a `Phaser.Types.Animations.PlayAnimationConfig` configuration object, as well as a string, as the `key` parameter. This allows you to override any default animation setting with those defined in the config, giving you far greater control over animations on a Game Object level, without needing to globally duplicate them.
+* `AnimationState.create` is a new method that allows you to create animations directly on a Sprite. These are not global and never enter the Animation Manager, instead risiding within the Sprite itself. This allows you to use the same keys across both local and global animations and set-up Sprite specific local animations.
+* All playback methods: `play`, `playReverse`, `playAfterDelay` and `playAfterRepeat` will now check to see if the given animation key exists locally on the Sprite first. If it does, it's used, otherwise it then checks the global Animation Manager for the key instead.
+* `AnimationState.skipMissedFrames` is now used when playing an animation, allowing you to create animations that run at frame rates far exceeding the refresh rate, or that will update to the correct frame should the game lag. Feature #4232 (thanks @colorcube)
+* `AnimationManager.addMix` is a new method that allows you to create mixes between two animations. Mixing allows you to specify a unique delay between a pairing of animations. When playing Animation A on a Game Object, if you then play Animation B, and a mix exists, it will wait for the specified delay to be over before playing Animation B. This allows you to customise smoothing between different types of animation, such as blending between an idle and a walk state, or a running and a firing state.
+* `AnimationManager.getMix` is a new method that will return the mix duration between the two given animations.
+* `AnimationManager.removeMix` is a new method that will remove the mixture between either two animations, or all mixtures for the given animation.
+* `AnimationState.remove` is a new method that will remove a locally stored Animation instance from a Sprite.
+* `AnimationState.get` is a new method that will return a locally stored Animation instance from the Sprite.
+* `AnimationState.exists` is a new method that will check if a locally stored Animation exists on the Sprite.
+* The internal `AnimationState.remove` method has been renamed to `globalRemove`.
+* `AnimationState.textureManager` is a new property that references the global Texture Manager.
+* `AnimationState.anims` is a new property that contains locally created Animations in a Custom Map.
+* `AnimationState.play` and `Sprite.play` no longer accept a `startFrame` parameter. Please set it via the `PlayAnimationConfig` instead.
+* `AnimationState.playReverse` and `Sprite.playReverse` no longer accept a `startFrame` parameter. Please set it via the `PlayAnimationConfig` instead.
+* The `AnimationState.delayedPlay` method has been renamed to `playAfterDelay`. The parameter order has also changed, so the key now comes first instead of the duration.
+* The `AnimationState.stopOnRepeat` method has been renamed to `stopAfterRepeat`
+* The `AnimationState.getCurrentKey` method has been renamed to `getName`.
+* `AnimationState.getFrameName` is a new method that will return the key of the current Animation Frame, if an animation has been loaded.
+* `AnimationState.playAfterDelay` and `Sprite.playAfterDelay` are new methods that will play the given animation after the delay in ms expires.
+* `AnimationState.playAfterRepeat` and `Sprite.playAfterRepeat` are new methods that will play the given animation after the current animation finishes repeating. You can also specify the number of repeats allowed left to run.
+* The `AnimationState.chain` method is now available on the Sprite class.
+* The `AnimationState.stopAfterDelay` method is now available on the Sprite class.
+* The `AnimationState.stopAfterRepeat` method is now available on the Sprite class.
+* The `AnimationState.stopOnFrame` method is now available on the Sprite class.
+* `AnimationManager.createFromAseprite` is a new method that allows you to use animations created in the Aseprite editor directly in Phaser. Please see the comprehensive documentation for this method for full details on how to do this.
+* `AnimationState` now handles all of the loading of the animation. It no longer has to make calls out to the Animation Manager or Animation instance itself and will load the animation data directly, replacing as required from the optional `PlayAnimationConfig`. This improves performance and massively reduces CPU calls in animation heavy games.
+* The `PlayAnimationConfig.frameRate` property lets you optionally override the animation frame rate.
+* The `PlayAnimationConfig.duration` property lets you optionally override the animation duration.
+* The `PlayAnimationConfig.delay` property lets you optionally override the animation delay.
+* The `PlayAnimationConfig.repeat` property lets you optionally override the animation repeat counter.
+* The `PlayAnimationConfig.repeatDelay` property lets you optionally override the animation repeat delay value.
+* The `PlayAnimationConfig.yoyo` property lets you optionally override the animation yoyo boolean.
+* The `PlayAnimationConfig.showOnStart` property lets you optionally override the animation show on start value.
+* The `PlayAnimationConfig.hideOnComplete` property lets you optionally override the animation hide on complete value.
+* The `PlayAnimationConfig.startFrame` property lets you optionally set the animation frame to start on.
+* The `PlayAnimationConfig.timeScale` property lets you optionally set the animation time scale factor.
+* `AnimationState.delayCounter` is a new property that allows you to control the delay before an animation will start playing. Only once this delay has expired, will the animation `START` events fire. Fix #4426 (thanks @bdaenen)
+* `AnimationState.hasStarted` is a new boolean property that allows you to tell if the current animation has started playing, or is still waiting for a delay to expire.
+* `AnimationState.showOnStart` is a new boolean property that controls if the Game Object should have `setVisible(true)` called on it when the animation starts.
+* `AnimationState.hideOnComplete` is a new boolean property that controls if the Game Object should have `setVisible(false)` called on it when the animation completes.
+* The `AnimationState.chain` method docs said it would remove all pending animations if called with no parameters. However, it didn't - and now does!
+* The `AnimationState.setDelay` method has been removed. It never actually worked and you can now perform the same thing by calling either `playAfterDelay` or setting the `delay` property in the play config.
+* The `AnimationState.getDelay` method has been removed. You can now read the `delay` property directly.
+* The `AnimationState.setRepeat` method has been removed. You can achieve the same thing by setting the `repeat` property in the play config, or adjusting the public `repeatCounter` property if the animation has started.
+* `AnimationState.handleStart` is a new internal private method that handles the animation start process.
+* `AnimationState.handleRepeat` is a new internal private method that handles the animation repeat process.
+* `AnimationState.handleStop` is a new internal private method that handles the animation stop process.
+* `AnimationState.handleComplete` is a new internal private method that handles the animation complete process.
+* `AnimationState.emitEvents` is a new internal private method that emits animation events, cutting down on duplicate code.
+* The `AnimationState.restart` method has a new optional boolean parameter `resetRepeats` which controls if you want to reset the repeat counter during the restart, or not.
+* `Animation.getTotalFrames` is a new method that will return the total number of frames in the animation. You can access it via `this.anims.currentAnim.getTotalFrames` from a Sprite.
+* `Animation.calculateDuration` is a new method that calculates the duration, frameRate and msPerFrame for a given animation target.
+* The `BuildGameObjectAnimation` function now uses the `PlayAnimationConfig` object to set the values.
+* `Sprite.playReverse` is a new method that allows you to play the given animation in reverse on the Sprite.
+* `Sprite.playAfterDelay` is a new method that allows you to play the given animation on the Sprite after a delay.
+* `Sprite.stop` is a new method that allows you to stop the current animation on the Sprite.
+* `AnimationManager.load` has been removed as it's no longer required.
+* `AnimationManager.staggerPlay` has been fixed so you can now pass in negative stagger values.
+* `AnimationManager.staggerPlay` has a new optional boolean parameter `staggerFirst`, which allows you to either include or exclude the first child in the stagger calculations.
+* The `Animation.completeAnimation` method has been removed as it's no longer required.
+* The `Animation.load` method has been removed as it's no longer required.
+* The `Animation.setFrame` method has been removed as it's no longer required.
+* The `Animation.getFirstTick` method has no longer needs the `includeDelay` parameter, as it's handled by `AnimationState` now.
+* The `Animation.getFrames` method has a new optional boolean parameter `sortFrames` which will run a numeric sort on the frame names after constructing them, if a string-based frame is given.
+* `Types.Animations.Animation` has a new boolean property `sortFrames`, which lets Phaser numerically sort the generated frames.
+* `AnimationState.timeScale` is a new public property that replaces the old private `_timeScale` property.
+* `AnimationState.delay` is a new public property that replaces the old private `_delay` property.
+* `AnimationState.repeat` is a new public property that replaces the old private `_repeat` property.
+* `AnimationState.repeatDelay` is a new public property that replaces the old private `_repeatDelay` property.
+* `AnimationState.yoyo` is a new public property that replaces the old private `_yoyo` property.
+* `AnimationState.inReverse` is a new public property that replaces the old private `_reverse` property.
+* `AnimationState.startAnimation` is a new public method that replaces the old private `_startAnimation` method.
+* The `AnimationState.getProgress` method has been fixed so it will return correctly if the animation is playing in reverse.
+* The `AnimationState.globalRemove` method will now always be called when an animation is removed from the global Animation Manager, not just once.
+* The `AnimationState.getRepeat` method has now been removed. You can get the value from the `repeat` property.
+* The `AnimationState.setRepeatDelay` method has now been removed. You can set the value using the `repeatDelay` config property, or changing it at run-time.
+* `AnimationState.complete` is a new method that handles the completion in animation playback.
+* The `AnimationState.setTimeScale` method has now been removed. You can set the value using the `timeScale` config property, or changing it at run-time.
+* The `AnimationState.getTimeScale` method has now been removed. You can read the value using the `timeScale` property.
+* The `AnimationState.getTotalFrames` method has been fixed and won't error if called when no animation is loaded.
+* The `AnimationState.setYoyo` method has now been removed. You can set the value using the `yoyo` config property, or changing it at run-time.
+* The `AnimationState.getYoyo` method has now been removed. You can read the value using the `yoyo` property.
+* The `AnimationState.stopAfterRepeat` method now has an optional parameter `repeatCount`, so you can tell the animation to stop after a specified number of repeats, not just 1.
+* When playing an animation in reverse, if it reached the first frame and had to repeat, it would then jump to the frame before the final frame and carry on, skipping out the final frame.
+* The `AnimationState.updateFrame` method has now been removed. Everything is handled by `setCurrentFrame` instead, which removes one extra step out of the update process.
+* `GenerateFrameNames` will now `console.warn` if the generated frame isn't present in the texture, which should help with debugging animation creation massively.
+* `GenerateFrameNumbers` will now `console.warn` if the generated frame isn't present in the texture, which should help with debugging animation creation massively.
+* `GenerateFrameNumbers` would include the __BASE frame by mistake in its calculations. This didn't end up in the final animation, but did cause a cache miss when building the animation.
+* `GenerateFrameNumbers` can now accept the `start` and `end` parameters in reverse order, meaning you can now do `{ start: 10, end: 1 }` to create the animation in reverse.
+* `GenerateFrameNames` can now accept the `start` and `end` parameters in reverse order, meaning you can now do `{ start: 10, end: 1 }` to create the animation in reverse.
+
+### Mesh Game Object - New Features, Updates and API Changes
+
+The Mesh Game Object has been rewritten in v3.50 with a lot of changes to make it more useful and able to handle 3D objects:
+
+* `GameObject.Vertex` is a new micro class that encapsulates all of the data required for a single vertex, such as position, uv, color and alpha. This class is now created internally by the Mesh Game Object.
+* `GameObject.Face` is a new micro class that consists of references to the three `Vertex` instances that construct the single Face.
+* The Mesh constructor and `MeshFactory` signatures have changed to `scene, x, y, texture, frame, vertices, uvs, indicies, colors, alphas`. Note the way the Texture and Frame parameters now comes first. `indicies` is a new parameter added to the list. It allows you to provide indexed vertex data to create the Mesh from, where the `indicies` array holds the vertex index information. The final list of vertices is built from this index along with the provided vertices and uvs arrays. The `indicies` array is optional. If your data is not indexed, then simply pass `null` or an empty array for this parameter.
+* The `Mesh` Game Object now extends the `SingleAlpha` component and the alpha value is factored into the final alpha value per vertex during rendering. This means you can now set the whole alpha across the Mesh using the standard `setAlpha` methods. But, if you wish to, you can still control the alpha on a per-vertex basis as well.
+* The `Mesh` Game Object now has the Animation State Component. This allows you to create and play animations across the texture of a Mesh, something that previously wasn't possible. As a result, the Mesh now adds itself to the Update List when added to a Scene.
+* `Geom.ParseObj` is a new function that will parse a triangulated Wavefront OBJ file into model data that can be consumed by the Mesh Game Object.
+* `Loader.OBJFile` is a new File Loader type that can load triangulated Wavefront OBJ files, which are then parsed and stored in the OBJ Cache.
+* `Mesh.hideCCW` is a new boolean property that, when enabled, tells a Face to not render if it isn't counter-clockwise. You can use this to hide backward facing Faces.
+* `Mesh.addOBJ` is a new method that will add the model data from a loaded Wavefront OBJ file to a Mesh. You load it via the new `OBJFile` with a `this.load.obj` call, then you can use the key with the `addOBJ` method. This method also takes an optional scale and position parameters to control placement of the created model within the Mesh.
+* `Mesh.addModel` is a new method that will add the model data to a Mesh. You can prepare the model data yourself, pull it in from a server, or get it by calling `Geom.ParseObj`, or a similar custom function. This method also takes an optional scale and position parameters to control placement of the created model within the Mesh.
+* `Mesh.rotateX` is a new method that will rotate all vertices of the Mesh around the x axis, by the amount given. It then depth sorts the faces.
+* `Mesh.rotateY` is a new method that will rotate all vertices of the Mesh around the y axis, by the amount given. It then depth sorts the faces.
+* `Mesh.rotateZ` is a new method that will rotate all vertices of the Mesh around the z axis, by the amount given. It then depth sorts the faces.
+* `Mesh.depthSort` is a new method that will run a depth sort across all Faces in the Mesh by sorting them on their average depth.
+* `Mesh.addVertex` is a new method that allows you to add a new single Vertex into the Mesh.
+* `Mesh.addFace` is a new method that allows you to add a new Face into the Mesh. A Face must consist of 3 Vertex instances.
+* `Mesh.addVertices` is a new method that allows you to add vertices to a Mesh Game Object based on the given parameters. This allows you to modify a mesh post-creation, or populate it with data at a later stage.
+* `Mesh.getFaceCount` new is a new method that will return the total number of Faces in the Mesh.
+* `Mesh.getVertexCount` new is a new method that will return the total number of Vertices in the Mesh.
+* `Mesh.getFace` new is a new method that will return a Face instance from the Mesh based on the given index.
+* `Mesh.getFaceAt` new is a new method that will return an array of Face instances from the Mesh based on the given position. The position is checked against each Face, translated through the optional Camera and Mesh matrix. If more than one Face intersects, they will all be returned but the array will be depth sorted first, so the first element will be that closest to the camera.
+* `Mesh.vertices` is now an array of `GameObject.Vertex` instances, not a Float32Array.
+* `Mesh.faces` is a new array of `GameObject.Face` instances, which is populated during a call to methods like `addVertices` or `addModel`.
+* `Mesh.clearVertices` is a new method that will destroy all Faces and Vertices and clear the Mesh.
+* `Mesh.setDebug` is a new method that allows you to render a debug visualisation of the Mesh vertices to a Graphics Game Object. You can provide your own Graphics instance and optionally callback that is invoked during rendering. This allows you to easily visualise the vertices of your Mesh to help debug UV mapping.
+* The Mesh now renders by iterating through the Faces array, not the vertices. This allows you to use Array methods such as `BringToTop` to reposition a Face, thus changing the drawing order without having to repopulate all of the vertices. Or, for a 3D model, you can now depth sort the Faces.
+* The Mesh renderer will now check to see if the pipeline capacity has been exceeded for every Face added, allowing you to use Meshes with vertex counts that exceed the pipeline capacity without causing runtime errors.
+* You can now supply just a single numerical value as the `colors` parameter in the constructor, factory method and `addVertices` method. If a number, instead of an array, it will be used as the color for all vertices created.
+* You can now supply just a single numerical value as the `alphas` parameter in the constructor, factory method and `addVertices` method. If a number, instead of an array, it will be used as the alpha for all vertices created.
+* `Mesh.debugGraphic` is a new property that holds the debug Graphics instance reference.
+* `Mesh.debugCallback` is a new property that holds the debug render callback.
+* `Mesh.renderDebugVerts` is a new method that acts as the default render callback for `setDebug` if none is provided.
+* `Mesh.preDestroy` is a new method that will clean-up the Mesh arrays and debug references on destruction.
+* The `Mesh.uv` array has been removed. All UV data is now bound in the Vertex instances.
+* The `Mesh.colors` array has been removed. All color data is now bound in the Vertex instances.
+* The `Mesh.alphas` array has been removed. All color data is now bound in the Vertex instances.
+* The `Mesh.tintFill` property is now a `boolean` and defaults to `false`.
+
+### Input / Mouse Updates and API Changes
+
+* `ScaleManager.refresh` is now called when the `Game.READY` event fires. This fixes a bug where the Scale Manager would have the incorrect canvas bounds, because they were calculated before a previous canvas was removed from the DOM. Fix #4862 (thanks @dranitski)
+* The Game Config property `inputMouseCapture` has been removed, as this is now split into 3 new config options:
+* `inputMousePreventDefaultDown` is a new config option that allows you to control `preventDefault` calls specifically on mouse down events. Set it via `input.mouse.preventDefaultDown` in the Game Config. It defaults to `true`, the same as the previous `capture` property did.
+* `inputMousePreventDefaultUp` is a new config option that allows you to control `preventDefault` calls specifically on mouse up events. Set it via `input.mouse.preventDefaultUp` in the Game Config. It defaults to `true`, the same as the previous `capture` property did.
+* `inputMousePreventDefaultMove` is a new config option that allows you to control `preventDefault` calls specifically on mouse move events. Set it via `input.mouse.preventDefaultMove` in the Game Config. It defaults to `true`, the same as the previous `capture` property did.
+* The `MouseManager.capture` property has been removed, as this is now split into 3 new config options (see below)
+* `MouseManager.preventDefaultDown` is a new boolean property, set via the `inputMousePreventDefaultDown` config option that allows you to toggle capture of mouse down events at runtime.
+* `MouseManager.preventDefaultUp` is a new boolean property, set via the `inputMousePreventDefaultUp` config option that allows you to toggle capture of mouse up events at runtime.
+* `MouseManager.preventDefaultMove` is a new boolean property, set via the `inputMousePreventDefaultMove` config option that allows you to toggle capture of mouse move events at runtime.
+* In the `MouseManager` the up, down and move events are no longer set as being passive if captured. Over, Out, Wheel and the Window level Down and Up events are always flagged as being passive.
+* The `GamepadPlugin` will now call `refreshPads` as part of its start process. This allows you to use Gamepads across multiple Scenes, without having to wait for a connected event from each one of them. If you've already had a connected event in a previous Scene, you can now just read the pads directly via `this.input.gamepad.pad1` and similar. Fix #4890 (thanks @Sytten)
+* Shutting down the Gamepad plugin (such as when sleeping a Scene) no longer calls `GamepadPlugin.disconnectAll`, but destroying it does.
+* `Gamepad._created` is a new private internal property that keeps track of when the instance was created. This is compared to the navigator timestamp in the update loop to avoid event spamming. Fix #4890.
+
+### Tint Updates and Shader Changes
+
+Phaser has had the ability to apply an additive tint to a Game Object since the beginning, and gained 'filled tints', with and without texture alpha, in v3.11. While this was handy, it introduced a 3-way if-else condition to the shaders to handle the different modes. Plus, setting tint colors was also generating rgb order Float32 color values for each Game Object, making reading those colors back again difficult (as they'd return in BGR order).
+
+This has all changed in 3.50, as outlined below. Tint values are now used directly in the shader and don't pass through a color conversion function first. Lots of private properties have been removed and the shaders no longer have a 3-way if-else block. All of this means improved performance and a slight reduction in memory overhead.
+
+* `Tint.tintTopLeft` is now a normal property in RGB order, not a setter, and no longer passes through the `GetColorFromValue` function. This directly replaces the private property `_tintTL` which has now been removed.
+* `Tint.tintTopRight` is now a normal property in RGB order, not a setter, and no longer passes through the `GetColorFromValue` function. This directly replaces the private property `_tintTR` which has now been removed.
+* `Tint.tintBottomLeft` is now a normal property in RGB order, not a setter, and no longer passes through the `GetColorFromValue` function. This directly replaces the private property `_tintBL` which has now been removed.
+* `Tint.tintBottomRight` is now a normal property in RGB order, not a setter, and no longer passes through the `GetColorFromValue` function. This directly replaces the private property `_tintBR` which has now been removed.
+* The property `Tint._isTinted` has been removed as it's no longer required.
+* The `Single.frag`, `Light.frag` and `Multi.frag` shaders have all been updated so they now read the color value as `outTint.bgr` instead of `outTint.rgb`. This allows the colors to remain in RGB order within the Tint component.
+* The `Single.frag`, `Light.frag` and `Multi.frag` shaders have all been updated so they no longer have a 3-way check on the `outTintEffect` value.
+* The `Multi Pipeline`, `Bitmap Text`, `Render Texture`, `Text`, `TileSprite` and `Camera` now all read the tint values from the public properties instead of the private `_tintTL` etc ones. They also now set the `tintEffect` value directly from the `tintFill` property, removing another conditional check.
+* The function `GetColorFromValue` has been removed as it's no longer used internally.
+* The `Rope.tintFill` property is now a boolean, not an integer, and can no longer take `2` as a value for a complete fill. Instead, you should provide a solid color texture with no alpha.
+* As a result of the change to the shader, all uses of the WebGL Util function `getTintAppendFloatAlphaAndSwap` have been replaced with `getTintAppendFloatAlpha` instead.
+* As a result of the change to the shader, the Multi Pipeline now uses the `WebGLRenderer.whiteTexture` and `tintEffect` mode of 1 by default, instead of mode 2 (which has been removed) and a transparent texture. This ensures Graphics and Shapes objects still render correctly under the new smaller shader code.
+* `WebGLRenderer.whiteTexture` is a new property that is a reference to a pure white 4x4 texture that is created during Boot by the Texture Manager. The Multi Pipeline uses this internally for all Graphic, Shape and fill rendering.
+* The `TextureManager` now generates a new texture with the key `__WHITE` durings its boot process. This is a pure white 4x4 texture used by the Graphics pipelines.
+* `Config.images.white` is a new Game Config property that specifies the 4x4 white PNG texture used by Graphics rendering. You can override this via the config, but only do so if needed.
+
+### Removal of 'resolution' property from across the API
+
+For legacy reasons, Phaser 3 has never properly supported HighDPI devices. It will render happily to them of course, but wouldn't let you set a 'resolution' for the Canvas beyond 1. Earlier versions of 3.x had a resolution property in the Game Config, but it was never fully implemented (for example, it would break zooming cameras). When the Scale Manager was introduced in v3.16 we forced the resolution to be 1 to avoid it breaking anything else internally.
+
+For a long time, the 'resolution' property has been present - taunting developers and confusing new comers. In this release we have finally gone through and removed all references to it. The Game Config option is now gone, it's removed from the Scale Manager, Base Camera and everywhere else where it matters. As much as we would have liked to implement the feature, we've spent too long without it, and things have been built around the assumption it isn't present. The API just wouldn't cope with having it shoe-horned in at this stage. As frustrating as this is, it's even more annoying to just leave the property there confusing people and wasting CPU cycles. Phaser 4 has been built with HighDPI screens in mind from the very start, but it's too late for v3. The following changes are a result of this removal:
+
+* The `Phaser.Scale.Events#RESIZE` event no longer sends the `resolution` as a parameter.
+* The `BaseCamera.resolution` property has been removed.
+* The internal private `BaseCamera._cx`, `_cy`, `_cw` and `_ch` properties has been removed.
+* The `BaseCamera.preRender` method no longer receives or uses the `resolution` parameter.
+* The `Camera.preRender` method no longer receives or uses the `resolution` parameter.
+* The `CameraManager.onResize` method no longer receives or uses the `resolution` parameter.
+* The `Core.Config.resolution` property has been removed.
+* The `TextStyle.resolution` property is no longer read from the Game Config. You can still set it via the Text Style config to a value other than 1, but it will default to this now.
+* The `CanvasRenderer` no longer reads or uses the Game Config resolution property.
+* The `PipelineManager.resize` method along with `WebGLPipeline.resize` and anything else that extends them no longer receives or uses the `resolution` parameter.
+* The `WebGLRenderer.resize` and `onResize` methods no longer receives or uses the `resolution` parameter.
+* The `ScaleManager.resolution` property has been removed and all internal use of it.
+
+### Removed 'interpolationPercentage' parameter from all render functions
+
+Since v3.0.0 the Game Object `render` functions have received a parameter called `interpolationPercentage` that was never used. The renderers do not calculate this value and no Game Objects apply it, so for the sake of clairty, reducing code and removing complexity from the API it has been removed from every single function that either sent or expected the parameter. This touches every single Game Object and changes the parameter order as a result, so please be aware of this if you have your own _custom_ Game Objects that implement their own `render` methods. In terms of surface API changes, you shouldn't notice anything at all from this removal.
+
+### New Features
+
+* `Geom.Intersects.GetLineToLine` is a new function that will return a Vector3 containing the point of intersection between 2 line segments, with the `z` property holding the distance value.
+* `Geom.Intersects.GetLineToPolygon` is a new function that checks for the closest point of intersection between a line segment and an array of polygons.
+* `Geom.Intersects.GetLineToPoints` is a new function that checks for the closest point of intersection between a line segment and an array of points, where each pair of points form a line segment.
+* `Geom.Intersects.GetRaysFromPointToPolygon` is a new function that emits rays out from the given point and detects for intersection against all given polygons, returning the points of intersection in the results array.
+* `Geom.Polygon.Translate` is a new function that allows you to translate all the points of a polygon by the given values.
+* `Geom.Polygon.Simplify` is a new function that takes a polygon and simplifies the points by running them through a combination of Douglas-Peucker and Radial Distance algorithms, potentially dramatically reducing the number of points while retaining its shape.
+* `WebGLRenderer.setInt1iv` will allow you to look-up and set a 1iv uniform on the given shader.
+* `Phaser.Types.Math.Vector3Like` is a new data type representing as Vector 3 like object.
+* `Phaser.Types.Math.Vector4Like` is a new data type representing as Vector 4 like object.
+* `Transform.getLocalPoint` is a new method, available on all Game Objects, that takes an `x` / `y` pair and translates them into the local space of the Game Object, factoring in parent transforms and display origins.
+* The `KeyboardPlugin` will now track the key code and timestamp of the previous key pressed and compare it to the current event. If they match, it will skip the event. On some systems, if you were to type quickly, you would sometimes get duplicate key events firing (the exact same event firing more than once). This is now prevented from happening.
+* `Display.Color.GetColorFromValue` is a new function that will take a hex color value and return it as an integer, for use in WebGL. This is now used internally by the Tint component and other classes.
+* `Utils.String.RemoveAt` is a new function that will remove a character from the given index in a string and return the new string.
+* `Frame.setUVs` is a new method that allows you to directly set the canvas and UV data for a frame. Use this if you need to override the values set automatically during frame creation.
+* `TweenManager.getTweensOf` has a new parameter `includePending`. If set, it will also check the pending tweens for the given targets and return those in the results as well. Fix #5260 (thanks @pcharest2000)
+* `WebGLPipeline.hasBooted` is a new boolean property that tracks if the pipeline has been booted or not, which is now far more important in 3.5 than in previous versions. This is checked in the `WebGLRenderer.addPipeline` method, and if not set, the pipeline is booted. Fix #5251 #5255 (thanks @telinc1 @rexrainbow)
+* The WebGL Renderer will now add the pipelines during the `boot` method, instead of `init`.
+* You can now use `this.renderer` from within a Scene, as it's now a Scene-level property and part of the Injection Map.
+* `Clock.addEvent` can now take an existing `TimerEvent` object, as well as a config object. If a `TimerEvent` is given it will be removed from the Clock, reset and then added. This allows you to pool TimerEvents rather than constantly create and delete them. Fix #4115 (thanks @jcyuan)
+* `Clock.removeEvent` is a new method that allows you to remove a `TimerEvent`, or an array of them, from all internal lists of the current Clock.
+* `Group.getMatching` is a new method that will return any members of the Group that match the given criteria, such as `getMatching('visible', true)` (thanks @atursams)
+* `ArcadePhysics.disableUpdate` is a new method that will prevent the Arcade Physics World `update` method from being called when the Scene updates. By disabling it, you're free to call the update method yourself, passing in your own delta and time values.
+* `ArcadePhysics.enableUpdate` is a new method that will make the Arcade Physics World update in time with the Scene update. This is the default, so only call this if you have specifically disabled it previously.
+* `ArcadeWorldConfig.customUpdate` is a new boolean property you can set in the Arcade Physics config object, either in the Scene or in the Game Config. If `true` the World update will never be called, allowing you to call it yourself from your own component. Close #5190 (thanks @cfortuner)
+* `Utils.Array.SortByDigits` is a new function that takes the given array of strings and runs a numeric sort on it, ignoring any non-digits.
+* `GroupCreateConfig`, which is used when calling `Group.createMultiple` or `Group.createFromConfig`, can now accept the following new properties: `setOrigin: { x, y, stepX, stepY }` which are applied to the items created by the Group.
+* `Transform.copyPosition` is a new method that will copy the position from the given object to the Game Object (thanks @samme)
+* The `Text.MeasureText` function, which is used to calculate the ascent and descent of Text Game Objects whenever the style, or font size, is changed, has been updated to use the new `actualBoundingBoxAscent` functions present in modern browsers. This allows for significantly faster ascent calculations than previously. Older browsers, such as IE, will still fall back (thanks @rexrainbow)
+* `GameObjects.GetCalcMatrix` is a new function that is used to calculate the transformed Game Object matrix, based on the given Game Object, Camera and Parent. This function is now used by the following Game Objects: `BitmapText` (Static and Dynamic), `Graphics`, `Extern`, `Mesh`, `Rope`, `Shader`, `Arc`, `Curve`, `Ellipse`, `Grid`, `IsoBox`, `IsoTriangle`, `Line`, `Polygon`, `Rectangle`, `Star` and `Triangle`. This dramatically reduces the amount of duplicate code across the API.
+* `Utils.Array.Matrix.Translate` is a new function that will translate an Array Matrix by horizontally and vertically by the given amounts.
+* `Vertor3.addScale` is a new method that will add the given vector and multiply it in the process.
+
+### Updates and API Changes
+
+* Earcut, used for polygon triangulation, has been updated from 2.1.4 to 2.2.2.
+* Earcut has now been exposed and is available via `Geom.Polygon.Earcut` and is fully documented.
+* `Config.batchSize` has been increased from 2000 to 4096.
+* Removed the Deferred Diffuse fragment and vertex shaders from the project, as they're not used.
+* `StaticTilemapLayer.upload` will now set the vertex attributes and buffer the data, and handles internal checks more efficiently.
+* `StaticTilemapLayer` now includes the `ModelViewProjection` mixin, so it doesn't need to modify the pipeline during rendering.
+* `WebGLRenderer.textureFlush` is a new property that keeps track of the total texture flushes per frame.
+* The `TextureTintStripPipeline` now extends `TextureTintPipeline` and just changes the topolgy, vastly reducing the filesize.
+* `TransformMatrix.getXRound` is a new method that will return the X component, optionally passed via `Math.round`.
+* `TransformMatrix.getYRound` is a new method that will return the Y component, optionally passed via `Math.round`.
+* The `KeyboardPlugin` no longer emits `keydown_` events. These were replaced with `keydown-` events in v3.15. The previous event string was deprecated in v3.20.
+* The `KeyboardPlugin` no longer emits `keyup_` events. These were replaced with `keyup-` events in v3.15. The previous event string was deprecated in v3.20.
+* The `ScaleManager.updateBounds` method is now called every time the browser fires a 'resize' or 'orientationchange' event. This will update the offset of the canvas element Phaser is rendering to, which is responsible for keeping input positions correct. However, if you change the canvas position, or visibility, via any other method (i.e. via an Angular route) you should call the `updateBounds` method directly, yourself.
+* The constant `Phaser.Renderer.WebGL.BYTE` value has been removed as it wasn't used internally.
+* The constant `Phaser.Renderer.WebGL.SHORT` value has been removed as it wasn't used internally.
+* The constant `Phaser.Renderer.WebGL.UNSIGNED_BYTE` value has been removed as it wasn't used internally.
+* The constant `Phaser.Renderer.WebGL.UNSIGNED_SHORT` value has been removed as it wasn't used internally.
+* The constant `Phaser.Renderer.WebGL.FLOAT` value has been removed as it wasn't used internally.
+* `global.Phaser = Phaser` has been removed, as it's no longer required by the UMD loader, which should make importing in Angular 10 easier. Fix #5212 (thanks @blackyale)
+* `Pointer.downTime` now stores the event timestamp of when the first button on the input device was pressed down, not just when button 1 was pressed down.
+* `Pointer.upTime` now stores the event timestamp of when the final depressed button on the input device was released, not just when button 1 was released.
+* The `Pointer.getDuration` method now uses the new Pointer `downTime` and `upTime` values, meaning it will accurately report the duration of when any button is being held down, not just the primary one. Fix #5112 (thanks @veleek)
+* The `BaseShader` default vertex shader now includes the `outTexCoord` vec2 varying, mapped to be the same as that found in the pipeline shaders. Fix #5120 (@pavel-shirobok)
+* When using the `GameObjectCreator` for `Containers` you can now specify the `children` property in the configuration object.
+* `WebGLRenderer.finalType` is a new boolean property that signifies if the current Game Object being rendered is the final one in the list.
+* The `WebGLRenderer.updateCanvasTexture` method will now set `gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL` to true, which should stop issues where you update a Text Game Object, having added a Render Texture or Spine Game Object to the Scene after it, which switches the PMA setting. Fix #5064 #5155 (thanks @hugoruscitti @immangrove-supertree)
+* `Textures.Parsers.JSONHash` will now perform a `hasOwnProperty` check when iterating the frames, skipping anything that isn't a direct property. This should allow you to use generated atlas data that comes from `JSON.parse`. Fix #4768 (thanks @RollinSafary)
+* The `Camera3D` Plugin has been rebuilt for Phaser 3.50 and the webpack config updated. This plugin is now considered deprecated and will not be updated beyond this release.
+* `Tween.seek` will no longer issue a console warning for `'Tween.seek duration too long'`, it's now up to you to check on the performance of tween seeking.
+* `WebGLRenderer.previousPipeline` is a new property that is set during a call to `clearPipeline` and used during calls to `rebindPipeline`, allowing the renderer to rebind any previous pipeline, not just the Multi Pipeline.
+* The `WebGLRenderer.rebindPipeline` method has been changed slightly. Previously, you had to specify the `pipelineInstance`, but this is now optional. If you don't, it will use the new `previousPipeline` property instead. If not set, or none given, it will now return without throwing gl errors as well.
+* If `inputWindowEvents` is set in the Game Config, then the `MouseManager` will now listen for the events on `window.top` instead of just `window`, which should help in situations where the pointer is released outside of an embedded iframe. Fix #4824 (thanks @rexrainbow)
+* `Types.GameObjects.Text.GetTextSizeObject` is a new type def for the GetTextSize function results.
+* The `Arcade.Body.resetFlags` method has a new optional boolean parameter `clear`. If set, it clears the `wasTouching` flags on the Body. This happens automatically when `Body.reset` is called. Previous to this, the flags were not reset until the next physics step (thanks @samme)
+* `Utils.Array.StableSort` has been recoded. It's now based on Two-Screens stable sort 0.1.8 and has been updated to fit into Phaser better and no longer create any window bound objects. The `inplace` function has been removed, just call `StableSort(array)` directly now. All classes that used `StableSort.inplace` have been updated to call it directly.
+* If a Scene is paused, or sent to sleep, it will automatically call `Keyboard.resetKeys`. This means that if you hold a key down, then sleep or pause a Scene, then release the key and resume or wake the Scene, it will no longer think it is still being held down (thanks @samme)
+* `Actions.setOrigin` will now call `updateDisplayOrigin` on the items array, otherwise the effects can't be seen when rendering.
+* You can now set the `ArcadeWorld.fixedStep` property via the `ArcadeWorldConfig` object (thanks @samme)
+* `Utils.Array.NumerArray` can now accept the `start` and `end` parameters in reverse order, i.e. `10, 1` will generate a number array running from 10 to 1. Internally it has also been optimized to skip string based returns.
+* `DataManager.Events.DESTROY` is a new event that the Data Manager will _listen_ for from its parent and then call its own `destroy` method when received.
+
+### Bug Fixes
+
+* `RenderTexture.resize` (which is called from `setSize`) wouldn't correctly set the `TextureSource.glTexture` property, leading to `bindTexture: attempt to use a deleted object` errors under WebGL.
+* `RenderTexture.fill` would fail to fill the correct area under WebGL if the RenderTexture wasn't the same size as the Canvas. It now fills the given region properly.
+* The `MatterAttractors` plugin, which enables attractors between bodies, has been fixed. The original plugin only worked if the body with the attractor was _first_ in the world bodies list. It can now attract any body, no matter where in the world list it is. Fix #5160 (thanks @strahius)
+* The `KeyboardManager` and `KeyboardPlugin` were both still checking for the `InputManager.useQueue` property, which was removed several versions ago.
+* In Arcade Physics, Dynamic bodies would no longer hit walls when riding on horizontally moving platforms. The horizontal (and vertical) friction is now re-applied correctly in these edge-cases. Fix #5210 (thanks @Dercetech @samme)
+* Calling `Rectangle.setSize()` wouldn't change the underlying geometry of the Shape Game Object, causing any stroke to be incorrectly rendered after a size change.
+* The `ProcessQueue` was emitting the wrong events internally. It now emits 'add' and 'remove' correctly (thanks @halilcakar)
+* The `GridAlign` action didn't work if only the `height` parameter was set. Fix #5019 (thanks @halilcakar)
+* The `Color.HSVToRGB` function has been rewritten to use the HSL and HSV formula from Wikipedia, giving much better results. Fix #5089 (thanks @DiamondeX)
+* Previously, the `easeParams` array within a Tweens `props` object, or a multi-object tween, were ignored and it was only used if set on the root Tween object. It will now work correctly set at any depth. Fix #4292 (thanks @willblackmore)
+* When using `Camera.setRenderToTexture` its `zoom` and `rotation` values would be applied twice. Fix #4221 #4924 #4713 (thanks @wayfu @DanMcgraw @pavel-shirobok)
+* `GameObjects.Shape.Grid` would render a white fill even if you passed `undefined` as the fill color in the constructor. It now doesn't render cells if no fill color is given.
+* The `onMouse` events in the Input Manager didn't reset the `activePointer` property to the mouse, meaning on dual-input systems such as Touch Screen devices, the active pointer would become locked to whichever input method was used first. Fix #4615 #5232 (thanks @mmolina01 @JstnPwll @Legomite)
+* The Scale Managers `GetScreenOrientation` function will now check for `window.orientation` first, because iOS mobile browsers have an incomplete implementation of the Screen API, forcing us to use the window value as a priority. This means the Scale Manager will now emit `orientationchange` events correctly on iOS. Fix #4361 #4914 (thanks @pfdtravalmatic @jackfreak @cuihu)
+* `Time.Clock.addEvent` can now take an instance of a `TimerEvent` as its parameter. Fix #5294 (thanks @samme @EmilSV)
+* `GameConfig.audio` now defaults to an empty object, which simplifies access to the config in later checks (thanks @samme)
+* The `Loader.path` was being added to the File URL even if the URL was absolute. This is now checked for and the path is not applied unless the URL is relative (thanks @firesoft)
+
+### Namespace Updates
+
+* The `Phaser.Curves.MoveTo` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.DOM.GetInnerHeight` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.Bob` class has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.LightsManager` class has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.LightsPlugin` class has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.Particles.EmitterOp` class has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.GetTextSize` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.MeasureText` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.GameObjects.TextStyle` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Input.CreatePixelPerfectHandler` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Arcade.Components.OverlapCirc` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Arcade.Components.OverlapRect` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Arcade.Tilemap` namespace has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Matter.Components` namespace has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Matter.Events` namespace has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Matter.MatterGameObject` class has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Physics.Matter.PointerConstraint` class has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Scenes.GetPhysicsPlugins` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Scenes.GetScenePlugins` function has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Structs.Events` namespace has now been exposed on the Phaser namespace (thanks @samme)
+* The `Phaser.Tilemaps.Parsers.Tiled` function has now been exposed on the Phaser namespace (thanks @samme)
+* Every single `Tilemap.Component` function has now been made public. This means you can call the Component functions directly, should you need to, outside of the Tilemap system.
+
+### Examples, Documentation and TypeScript
+
+My thanks to the following for helping with the Phaser 3 Examples, Docs, and TypeScript definitions, either by reporting errors, fixing them, or helping author the docs:
+
+@samme @16patsle @scott20145 @khasanovbi @mk360 @volkans80 @jaabberwocky @maikthomas @atursams @LearningCode2023 @DylanC @BenjaminDRichards @rexrainbow @Riderrr @spwilson2 @EmilSV @PhaserEditor2D 

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Richard Davey, Photon Storm Ltd.
+Copyright (c) 2020 Richard Davey, Photon Storm Ltd.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser",
-  "version": "3.50.0-beta.3",
+  "version": "3.50.0-beta.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -68,9 +68,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -408,15 +408,15 @@
       "dev": true
     },
     "acorn-jsx": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
-      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
+      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
       "dev": true
     },
     "aggregate-error": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
-      "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
       "dev": true,
       "requires": {
         "clean-stack": "^2.0.0",
@@ -1659,9 +1659,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.8.1.tgz",
-      "integrity": "sha512-/2rX2pfhyUG0y+A123d0ccXtMm7DV7sH1m3lk9nk2DZ2LReq39FXHueR9xZwshE5MdfSf0xunSaMWRqyIA6M1w==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.9.0.tgz",
+      "integrity": "sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -1710,13 +1710,32 @@
       "dev": true
     },
     "eslint-scope": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
-      "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "requires": {
-        "esrecurse": "^4.1.0",
+        "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
+      },
+      "dependencies": {
+        "esrecurse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+          "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+          "dev": true,
+          "requires": {
+            "estraverse": "^5.2.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+              "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+              "dev": true
+            }
+          }
+        }
       }
     },
     "eslint-utils": {
@@ -3871,19 +3890,19 @@
       "dev": true
     },
     "remove-files-webpack-plugin": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/remove-files-webpack-plugin/-/remove-files-webpack-plugin-1.4.3.tgz",
-      "integrity": "sha512-NOqO5gB4uMeflnnKmouTcRWHPKCI2a3Ft44vQ7Os7avn/N3pK/TEPyCtja3W2A82BlWELXbueRUwPNhc+qNnag==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/remove-files-webpack-plugin/-/remove-files-webpack-plugin-1.4.4.tgz",
+      "integrity": "sha512-vCtIPQRA9Sf6yn90qepj0A8zEMZK4oHxGH+rTG74ELPprDbhJ9Phe74fj9FM6Jc5I11Q5Ah6EogqJDzSqJ6mEA==",
       "dev": true,
       "requires": {
-        "@types/webpack": "4.41.12",
+        "@types/webpack": "4.41.22",
         "trash": "6.1.1"
       },
       "dependencies": {
         "@types/webpack": {
-          "version": "4.41.12",
-          "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.12.tgz",
-          "integrity": "sha512-BpCtM4NnBen6W+KEhrL9jKuZCXVtiH6+0b6cxdvNt2EwU949Al334PjQSl2BeAyvAX9mgoNNG21wvjP3xZJJ5w==",
+          "version": "4.41.22",
+          "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.22.tgz",
+          "integrity": "sha512-JQDJK6pj8OMV9gWOnN1dcLCyU9Hzs6lux0wBO4lr1+gyEhIBR9U3FMrz12t2GPkg110XAxEAw2WHF6g7nZIbRQ==",
           "dev": true,
           "requires": {
             "@types/anymatch": "*",
@@ -3892,8 +3911,8 @@
             "@types/uglify-js": "*",
             "@types/webpack-sources": "*",
             "source-map": "^0.6.0"
+          }
         },
-          "dependencies": {
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3901,8 +3920,6 @@
           "dev": true
         }
       }
-        }
-      }
     },
     "remove-trailing-separator": {
       "version": "1.1.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser",
-  "version": "3.50.0-beta.4",
+  "version": "3.50.0-beta.7",
   "release": "Subaru",
   "description": "A fast, free and fun HTML5 Game Framework for Desktop and Mobile web browsers.",
   "author": "Richard Davey <rich@photonstorm.com> (http://www.photonstorm.com)",
@@ -25,8 +25,6 @@
     "dist": "webpack --config config/webpack.dist.config.js",
     "distfb": "webpack --config config/webpack.fb.dist.config.js",
     "distfull": "npm run dist && npm run distfb",
-    "distT": " npm run dist && npm run toT",
-    "toT": "cp ./dist/phaser.min.js ../phasertest/phaser.min.js",
     "plugin.cam3d": "webpack --config plugins/camera3d/webpack.config.js",
     "plugin.spine": "webpack --config plugins/spine/webpack.config.js",
     "plugin.spine.dist": "webpack --config plugins/spine/webpack.auto.dist.config.js",
@@ -67,12 +65,12 @@
     "@types/source-map": "^0.5.7",
     "clean-webpack-plugin": "^3.0.0",
     "dts-dom": "^3.6.0",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
     "eslint-plugin-es5": "^1.5.0",
     "fs-extra": "^9.0.1",
     "jsdoc": "^3.6.5",
     "node-sloc": "^0.1.12",
-    "remove-files-webpack-plugin": "^1.4.3",
+    "remove-files-webpack-plugin": "^1.4.4",
     "typescript": "^4.0.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vivid-cli": "^1.1.2",

plugins/spine/src/container/SpineContainerWebGLRenderer.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 /**
  * @author       Richard Davey <rich@photonstorm.com>
  * @copyright    2020 Photon Storm Ltd.
@@ -166,3 +167,173 @@ var SpineContainerWebGLRenderer = function (renderer, container, interpolationPe
 };
 
 module.exports = SpineContainerWebGLRenderer;
+=======
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2020 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+var Clamp = require('../../../../src/math/Clamp');
+var RadToDeg = require('../../../../src/math/RadToDeg');
+var Wrap = require('../../../../src/math/Wrap');
+
+/**
+ * Renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method SpineContainerWebGLRenderer#renderWebGL
+ * @since 3.50.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {Phaser.GameObjects.Container} container - The Game Object being rendered in this call.
+ * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var SpineContainerWebGLRenderer = function (renderer, container, interpolationPercentage, camera, parentMatrix)
+{
+    var plugin = container.plugin;
+    var sceneRenderer = plugin.sceneRenderer;
+    var children = container.list;
+
+    if (children.length === 0)
+    {
+        if (sceneRenderer.batcher.isDrawing && renderer.finalType)
+        {
+            sceneRenderer.end();
+
+            renderer.pipelines.rebind();
+        }
+
+        return;
+    }
+
+    var transformMatrix = container.localTransform;
+
+    if (parentMatrix)
+    {
+        transformMatrix.loadIdentity();
+        transformMatrix.multiply(parentMatrix);
+        transformMatrix.translate(container.x, container.y);
+        transformMatrix.rotate(container.rotation);
+        transformMatrix.scale(container.scaleX, container.scaleY);
+    }
+    else
+    {
+        transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY);
+    }
+
+    var alpha = container.alpha;
+    var scrollFactorX = container.scrollFactorX;
+    var scrollFactorY = container.scrollFactorY;
+
+    var GameObjectRenderMask = 15;
+
+    if (renderer.newType)
+    {
+        //  flush + clear if this is a new type
+        renderer.pipelines.clear();
+
+        sceneRenderer.begin();
+    }
+
+    for (var i = 0; i < children.length; i++)
+    {
+        var src = children[i];
+
+        var skeleton = src.skeleton;
+        var childAlpha = skeleton.color.a;
+
+        var willRender = !(GameObjectRenderMask !== src.renderFlags || (src.cameraFilter !== 0 && (src.cameraFilter & camera.id)) || childAlpha === 0);
+
+        if (!skeleton || !willRender)
+        {
+            continue;
+        }
+
+        var camMatrix = renderer._tempMatrix1;
+        var spriteMatrix = renderer._tempMatrix2;
+        var calcMatrix = renderer._tempMatrix3;
+
+        spriteMatrix.applyITRS(src.x, src.y, src.rotation, Math.abs(src.scaleX), Math.abs(src.scaleY));
+
+        camMatrix.copyFrom(camera.matrix);
+
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(transformMatrix, -camera.scrollX * scrollFactorX, -camera.scrollY * scrollFactorY);
+
+        //  Undo the camera scroll
+        spriteMatrix.e = src.x;
+        spriteMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+
+        var viewportHeight = renderer.height;
+
+        skeleton.x = calcMatrix.tx;
+        skeleton.y = viewportHeight - calcMatrix.ty;
+
+        skeleton.scaleX = calcMatrix.scaleX;
+        skeleton.scaleY = calcMatrix.scaleY;
+
+        if (src.scaleX < 0)
+        {
+            skeleton.scaleX *= -1;
+
+            src.root.rotation = RadToDeg(calcMatrix.rotationNormalized);
+        }
+        else
+        {
+            //  +90 degrees to account for the difference in Spine vs. Phaser rotation
+            src.root.rotation = Wrap(RadToDeg(CounterClockwise(calcMatrix.rotationNormalized)) + 90, 0, 360);
+        }
+
+        if (src.scaleY < 0)
+        {
+            skeleton.scaleY *= -1;
+
+            if (src.scaleX < 0)
+            {
+                src.root.rotation -= (RadToDeg(calcMatrix.rotationNormalized) * 2);
+            }
+            else
+            {
+                src.root.rotation += (RadToDeg(calcMatrix.rotationNormalized) * 2);
+            }
+        }
+
+        if (camera.renderToTexture || renderer.currentFramebuffer !== null)
+        {
+            skeleton.y = calcMatrix.ty;
+            skeleton.scaleY *= -1;
+        }
+
+        //  Add autoUpdate option
+        skeleton.updateWorldTransform();
+
+        skeleton.color.a = Clamp(childAlpha * alpha, 0, 1);
+
+        //  Draw the current skeleton
+        sceneRenderer.drawSkeleton(skeleton, src.preMultipliedAlpha);
+
+        //  Restore alpha
+        skeleton.color.a = childAlpha;
+    }
+
+    if (!renderer.nextTypeMatch)
+    {
+        //  The next object in the display list is not a Spine Game Object or Spine Container, so we end the batch
+        sceneRenderer.end();
+
+        //  And rebind the previous pipeline
+        renderer.pipelines.rebind();
+    }
+};
+
+module.exports = SpineContainerWebGLRenderer;
+>>>>>>> af272842021308c7ba8519c30ff2737b8130f96e

plugins/spine/src/gameobject/SpineGameObject.js

@@ -1037,6 +1037,9 @@ var SpineGameObject = new Class({
      */
     addAnimation: function (trackIndex, animationName, loop, delay)
     {
+        if (loop === undefined) { loop = false; }
+        if (delay === undefined) { delay = 0; }
+
         return this.state.addAnimation(trackIndex, animationName, loop, delay);
     },
 

plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js

@@ -43,7 +43,7 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
             //  The next object in the display list is not a Spine object, so we end the batch
             sceneRenderer.end();
 
-            renderer.rebindPipeline();
+            renderer.pipelines.rebind();
         }
 
         if (!renderer.finalType)
@@ -58,7 +58,7 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
     if (renderer.newType)
     {
         //  flush + clear previous pipeline if this is a new type
-        renderer.clearPipeline();
+        renderer.pipelines.clear();
     }
 
     var camMatrix = renderer._tempMatrix1;
@@ -162,7 +162,7 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
         sceneRenderer.end();
 
         //  And rebind the previous pipeline
-        renderer.rebindPipeline();
+        renderer.pipelines.rebind();
     }
 };
 

src/animations/AnimationState.js

@@ -1056,7 +1056,7 @@ var AnimationState = new Class({
             this.parent.setVisible(false);
         }
 
-        this.emitEvents(Events.ANIMATION_COMPLETE);
+        this.emitEvents(Events.ANIMATION_COMPLETE, Events.ANIMATION_COMPLETE_KEY);
     },
 
     /**
@@ -1068,13 +1068,20 @@ var AnimationState = new Class({
      *
      * @param {string} event - The Animation Event to dispatch.
      */
-    emitEvents: function (event)
+    emitEvents: function (event, keyEvent)
     {
         var anim = this.currentAnim;
         var frame = this.currentFrame;
         var gameObject = this.parent;
 
-        gameObject.emit(event, anim, frame, gameObject, frame.textureFrame);
+        var frameKey = frame.textureFrame;
+
+        gameObject.emit(event, anim, frame, gameObject, frameKey);
+
+        if (keyEvent)
+        {
+            gameObject.emit(keyEvent + anim.key, anim, frame, gameObject, frameKey);
+        }
     },
 
     /**

src/animations/events/ANIMATION_COMPLETE_EVENT.js

@@ -23,6 +23,7 @@
  * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
  * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
  * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
  *
  * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
  *

src/animations/events/ANIMATION_COMPLETE_KEY_EVENT.js

@@ -0,0 +1,44 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2020 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Animation Complete Dynamic Key Event.
+ *
+ * This event is dispatched by a Sprite when an animation playing on it completes playback.
+ * This happens when the animation gets to the end of its sequence, factoring in any delays
+ * or repeats it may have to process.
+ *
+ * An animation that is set to loop, or repeat forever, will never fire this event, because
+ * it never actually completes. If you need to handle this, listen for the `ANIMATION_STOP`
+ * event instead, as this is emitted when the animation is stopped directly.
+ *
+ * The difference between this and the `ANIMATION_COMPLETE` event is that this one has a
+ * dynamic event name that contains the name of the animation within it. For example,
+ * if you had an animation called `explode` you could listen for the completion of that
+ * specific animation by using: `sprite.on('animationcomplete-explode', listener)`. Or, if you
+ * wish to use types: `sprite.on(Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + 'explode', listener)`.
+ *
+ * The animation event flow is as follows:
+ *
+ * 1. `ANIMATION_START`
+ * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
+ * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
+ * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
+ *
+ * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
+ *
+ * If the animation is restarted while it is already playing, `ANIMATION_RESTART` is emitted.
+ *
+ * @event Phaser.Animations.Events#ANIMATION_COMPLETE_KEY
+ * @since 3.50.0
+ *
+ * @param {Phaser.Animations.Animation} animation - A reference to the Animation that completed.
+ * @param {Phaser.Animations.AnimationFrame} frame - The current Animation Frame of the Animation.
+ * @param {Phaser.GameObjects.Sprite} gameObject - A reference to the Game Object on which the animation updated.
+ * @param {string} frameKey - The unique key of the Animation Frame within the Animation.
+ */
+module.exports = 'animationcomplete-';

src/animations/events/ANIMATION_REPEAT_EVENT.js

@@ -20,6 +20,7 @@
  * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
  * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
  * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
  *
  * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
  *

src/animations/events/ANIMATION_RESTART_EVENT.js

@@ -18,6 +18,7 @@
  * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
  * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
  * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
  *
  * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
  *

src/animations/events/ANIMATION_START_EVENT.js

@@ -19,6 +19,7 @@
  * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
  * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
  * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
  *
  * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
  *

src/animations/events/ANIMATION_STOP_EVENT.js

@@ -19,6 +19,7 @@
  * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
  * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
  * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
  *
  * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
  *

src/animations/events/ANIMATION_UPDATE_EVENT.js

@@ -23,6 +23,7 @@
  * 2. `ANIMATION_UPDATE` (repeated for however many frames the animation has)
  * 3. `ANIMATION_REPEAT` (only if the animation is set to repeat, it then emits more update events after this)
  * 4. `ANIMATION_COMPLETE` (only if there is a finite, or zero, repeat count)
+ * 5. `ANIMATION_COMPLETE_KEY` (only if there is a finite, or zero, repeat count)
  *
  * If the animation is stopped directly, the `ANIMATION_STOP` event is dispatched instead of `ANIMATION_COMPLETE`.
  *

src/animations/events/index.js

@@ -12,6 +12,7 @@ module.exports = {
 
     ADD_ANIMATION: require('./ADD_ANIMATION_EVENT'),
     ANIMATION_COMPLETE: require('./ANIMATION_COMPLETE_EVENT'),
+    ANIMATION_COMPLETE_KEY: require('./ANIMATION_COMPLETE_KEY_EVENT'),
     ANIMATION_REPEAT: require('./ANIMATION_REPEAT_EVENT'),
     ANIMATION_RESTART: require('./ANIMATION_RESTART_EVENT'),
     ANIMATION_START: require('./ANIMATION_START_EVENT'),

src/cameras/2d/BaseCamera.js

@@ -133,19 +133,6 @@ var BaseCamera = new Class({
          */
         this.name = '';
 
-        /**
-         * This property is un-used in v3.16.
-         * 
-         * The resolution of the Game, used in most Camera calculations.
-         *
-         * @name Phaser.Cameras.Scene2D.BaseCamera#resolution
-         * @type {number}
-         * @readonly
-         * @deprecated
-         * @since 3.12.0
-         */
-        this.resolution = 1;
-
         /**
          * Should this camera round its pixel values to integers?
          *
@@ -231,46 +218,6 @@ var BaseCamera = new Class({
          */
         this._y = y;
 
-        /**
-         * Internal Camera X value multiplied by the resolution.
-         *
-         * @name Phaser.Cameras.Scene2D.BaseCamera#_cx
-         * @type {number}
-         * @private
-         * @since 3.12.0
-         */
-        this._cx = 0;
-
-        /**
-         * Internal Camera Y value multiplied by the resolution.
-         *
-         * @name Phaser.Cameras.Scene2D.BaseCamera#_cy
-         * @type {number}
-         * @private
-         * @since 3.12.0
-         */
-        this._cy = 0;
-
-        /**
-         * Internal Camera Width value multiplied by the resolution.
-         *
-         * @name Phaser.Cameras.Scene2D.BaseCamera#_cw
-         * @type {number}
-         * @private
-         * @since 3.12.0
-         */
-        this._cw = 0;
-
-        /**
-         * Internal Camera Height value multiplied by the resolution.
-         *
-         * @name Phaser.Cameras.Scene2D.BaseCamera#_ch
-         * @type {number}
-         * @private
-         * @since 3.12.0
-         */
-        this._ch = 0;
-
         /**
          * The width of the Camera viewport, in pixels.
          *
@@ -847,18 +794,16 @@ var BaseCamera = new Class({
         var s = Math.sin(this.rotation);
 
         var zoom = this.zoom;
-        var res = this.resolution;
 
         var scrollX = this.scrollX;
         var scrollY = this.scrollY;
 
-        //  Works for zoom of 1 with any resolution, but resolution > 1 and zoom !== 1 breaks
         var sx = x + ((scrollX * c - scrollY * s) * zoom);
         var sy = y + ((scrollX * s + scrollY * c) * zoom);
 
         //  Apply transform to point
-        output.x = (sx * ima + sy * imc) * res + ime;
-        output.y = (sx * imb + sy * imd) * res + imf;
+        output.x = (sx * ima + sy * imc) + ime;
+        output.y = (sx * imb + sy * imd) + imf;
 
         return output;
     },
@@ -910,10 +855,8 @@ var BaseCamera = new Class({
      * @method Phaser.Cameras.Scene2D.BaseCamera#preRender
      * @protected
      * @since 3.0.0
-     *
-     * @param {number} resolution - The game resolution, as set in the Scale Manager.
      */
-    preRender: function (resolution)
+    preRender: function ()
     {
         var width = this.width;
         var height = this.height;
@@ -921,7 +864,7 @@ var BaseCamera = new Class({
         var halfWidth = width * 0.5;
         var halfHeight = height * 0.5;
 
-        var zoom = this.zoom * resolution;
+        var zoom = this.zoom;
         var matrix = this.matrix;
 
         var originX = width * this.originX;
@@ -1265,8 +1208,6 @@ var BaseCamera = new Class({
     /**
      * Sets the Scene the Camera is bound to.
      *
-     * Also populates the `resolution` property and updates the internal size values.
-     *
      * @method Phaser.Cameras.Scene2D.BaseCamera#setScene
      * @since 3.0.0
      *
@@ -1289,15 +1230,6 @@ var BaseCamera = new Class({
         this.scaleManager = sys.scale;
         this.cameraManager = sys.cameras;
 
-        var res = this.scaleManager.resolution;
-
-        this.resolution = res;
-
-        this._cx = this._x * res;
-        this._cy = this._y * res;
-        this._cw = this._width * res;
-        this._ch = this._height * res;
-
         this.updateSystem();
 
         return this;
@@ -1626,7 +1558,6 @@ var BaseCamera = new Class({
         set: function (value)
         {
             this._x = value;
-            this._cx = value * this.resolution;
             this.updateSystem();
         }
 
@@ -1651,7 +1582,6 @@ var BaseCamera = new Class({
         set: function (value)
         {
             this._y = value;
-            this._cy = value * this.resolution;
             this.updateSystem();
         }
 
@@ -1677,7 +1607,6 @@ var BaseCamera = new Class({
         set: function (value)
         {
             this._width = value;
-            this._cw = value * this.resolution;
             this.updateSystem();
         }
 
@@ -1703,7 +1632,6 @@ var BaseCamera = new Class({
         set: function (value)
         {
             this._height = value;
-            this._ch = value * this.resolution;
             this.updateSystem();
         }
 

src/cameras/2d/Camera.js

@@ -301,7 +301,7 @@ var Camera = new Class({
          * This is only set if Phaser is running with the WebGL Renderer.
          *
          * @name Phaser.Cameras.Scene2D.Camera#pipeline
-         * @type {any}
+         * @type {?Phaser.Renderer.WebGL.WebGLPipeline}
          * @since 3.13.0
          */
         this.pipeline = null;
@@ -397,9 +397,9 @@ var Camera = new Class({
         {
             var renderer = this.scene.sys.game.renderer;
 
-            if (renderer.gl && renderer.hasPipeline(pipeline))
+            if (renderer.gl && renderer.pipelines.has(pipeline))
             {
-                this.pipeline = renderer.getPipeline(pipeline);
+                this.pipeline = renderer.pipelines.get(pipeline);
             }
         }
         else
@@ -748,10 +748,8 @@ var Camera = new Class({
      * @method Phaser.Cameras.Scene2D.Camera#preRender
      * @protected
      * @since 3.0.0
-     *
-     * @param {number} resolution - The game resolution, as set in the Scale Manager.
      */
-    preRender: function (resolution)
+    preRender: function ()
     {
         var width = this.width;
         var height = this.height;
@@ -759,7 +757,7 @@ var Camera = new Class({
         var halfWidth = width * 0.5;
         var halfHeight = height * 0.5;
 
-        var zoom = this.zoom * resolution;
+        var zoom = this.zoom;
         var matrix = this.matrix;
 
         var originX = width * this.originX;

src/cameras/2d/CameraManager.js

@@ -584,9 +584,8 @@ var CameraManager = new Class({
      *
      * @param {(Phaser.Renderer.Canvas.CanvasRenderer|Phaser.Renderer.WebGL.WebGLRenderer)} renderer - The Renderer that will render the children to this camera.
      * @param {Phaser.GameObjects.GameObject[]} children - An array of renderable Game Objects.
-     * @param {number} interpolation - Interpolation value. Reserved for future use.
      */
-    render: function (renderer, children, interpolation)
+    render: function (renderer, children)
     {
         var scene = this.scene;
         var cameras = this.cameras;
@@ -600,7 +599,7 @@ var CameraManager = new Class({
                 //  Hard-coded to 1 for now
                 camera.preRender(1);
 
-                renderer.render(scene, children, interpolation, camera);
+                renderer.render(scene, children, camera);
             }
         }
     },
@@ -655,9 +654,9 @@ var CameraManager = new Class({
      * @since 3.18.0
      *
      * @param {Phaser.Structs.Size} gameSize - The default Game Size object. This is the un-modified game dimensions.
-     * @param {Phaser.Structs.Size} baseSize - The base Size object. The game dimensions multiplied by the resolution. The canvas width / height values match this.
+     * @param {Phaser.Structs.Size} baseSize - The base Size object. The game dimensions. The canvas width / height values match this.
      */
-    onResize: function (gameSize, baseSize, displaySize, resolution, previousWidth, previousHeight)
+    onResize: function (gameSize, baseSize, displaySize, previousWidth, previousHeight)
     {
         for (var i = 0; i < this.cameras.length; i++)
         {

src/const.js

@@ -20,7 +20,7 @@ var CONST = {
      * @type {string}
      * @since 3.0.0
      */
-    VERSION: '3.50.0-beta.4',
+    VERSION: '3.50.0-beta.7',
 
     BlendModes: require('./renderer/BlendModes'),
 
@@ -188,6 +188,7 @@ var CONST = {
         }
         return constor;
     }
+
 };
 
 module.exports = CONST;

src/core/Config.js

@@ -61,11 +61,6 @@ var Config = new Class({
          */
         this.zoom = GetValue(config, 'zoom', 1);
 
-        /**
-         * @const {number} Phaser.Core.Config#resolution - The canvas device pixel resolution. Currently un-used.
-         */
-        this.resolution = GetValue(config, 'resolution', 1);
-
         /**
          * @const {?*} Phaser.Core.Config#parent - A parent DOM element into which the canvas created by the renderer will be injected.
          */
@@ -130,7 +125,6 @@ var Config = new Class({
             this.width = GetValue(scaleConfig, 'width', this.width);
             this.height = GetValue(scaleConfig, 'height', this.height);
             this.zoom = GetValue(scaleConfig, 'zoom', this.zoom);
-            this.resolution = GetValue(scaleConfig, 'resolution', this.resolution);
             this.parent = GetValue(scaleConfig, 'parent', this.parent);
             this.scaleMode = GetValue(scaleConfig, 'mode', this.scaleMode);
             this.expandParent = GetValue(scaleConfig, 'expandParent', this.expandParent);
@@ -241,9 +235,19 @@ var Config = new Class({
         this.inputMouseEventTarget = GetValue(config, 'input.mouse.target', null);
 
         /**
-         * @const {boolean} Phaser.Core.Config#inputMouseCapture - Should mouse events be captured? I.e. have prevent default called on them.
+         * @const {boolean} Phaser.Core.Config#inputMousePreventDefaultDown - Should `mousedown` events be captured? I.e. have prevent default called on them.
          */
-        this.inputMouseCapture = GetValue(config, 'input.mouse.capture', true);
+        this.inputMousePreventDefaultDown = GetValue(config, 'input.mouse.preventDefaultDown', true);
+
+        /**
+         * @const {boolean} Phaser.Core.Config#inputMousePreventDefaultUp - Should `mouseup` events be captured? I.e. have prevent default called on them.
+         */
+        this.inputMousePreventDefaultUp = GetValue(config, 'input.mouse.preventDefaultUp', true);
+
+        /**
+         * @const {boolean} Phaser.Core.Config#inputMousePreventDefaultMove - Should `mousemove` events be captured? I.e. have prevent default called on them.
+         */
+        this.inputMousePreventDefaultMove = GetValue(config, 'input.mouse.preventDefaultMove', true);
 
         /**
          * @const {boolean} Phaser.Core.Config#inputTouch - Enable the Touch Plugin. This can be disabled in games that don't need touch input.
@@ -293,7 +297,7 @@ var Config = new Class({
         /**
          * @const {Phaser.Types.Core.AudioConfig} Phaser.Core.Config#audio - The Audio Configuration object.
          */
-        this.audio = GetValue(config, 'audio');
+        this.audio = GetValue(config, 'audio', {});
 
         //  If you do: { banner: false } it won't display any banner at all
 
@@ -562,6 +566,11 @@ var Config = new Class({
          */
         this.missingImage = GetValue(config, 'images.missing', pngPrefix + 'CAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ9JREFUeNq01ssOwyAMRFG46v//Mt1ESmgh+DFmE2GPOBARKb2NVjo+17PXLD8a1+pl5+A+wSgFygymWYHBb0FtsKhJDdZlncG2IzJ4ayoMDv20wTmSMzClEgbWYNTAkQ0Z+OJ+A/eWnAaR9+oxCF4Os0H8htsMUp+pwcgBBiMNnAwF8GqIgL2hAzaGFFgZauDPKABmowZ4GL369/0rwACp2yA/ttmvsQAAAABJRU5ErkJggg==');
 
+        /**
+         * @const {string} Phaser.Core.Config#whiteImage - A base64 encoded PNG that will be used as the default texture when a texture is assigned that is white or not loaded.
+         */
+        this.whiteImage = GetValue(config, 'images.white', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi/P//PwMMMDEgAdwcgAADAJZuAwXJYZOzAAAAAElFTkSuQmCC');
+
         if (window)
         {
             if (window.FORCE_WEBGL)

src/core/DebugHeader.js

@@ -41,11 +41,11 @@ var DebugHeader = function (game)
 
     var audioType;
 
-    if (deviceAudio.webAudio && !(audioConfig && audioConfig.disableWebAudio))
+    if (deviceAudio.webAudio && !audioConfig.disableWebAudio)
     {
         audioType = 'Web Audio';
     }
-    else if ((audioConfig && audioConfig.noAudio) || (!deviceAudio.webAudio && !deviceAudio.audioData))
+    else if (audioConfig.noAudio || (!deviceAudio.webAudio && !deviceAudio.audioData))
     {
         audioType = 'No Audio';
     }

src/core/typedefs/GameConfig.js

@@ -5,7 +5,6 @@
  * @property {(integer|string)} [width=1024] - The width of the game, in game pixels.
  * @property {(integer|string)} [height=768] - The height of the game, in game pixels.
  * @property {number} [zoom=1] - Simple scale applied to the game canvas. 2 is double size, 0.5 is half size, etc.
- * @property {number} [resolution=1] - The size of each game pixel, in canvas pixels. Values larger than 1 are "high" resolution.
  * @property {number} [type=CONST.AUTO] - Which renderer to use. Phaser.AUTO, Phaser.CANVAS, Phaser.HEADLESS, or Phaser.WEBGL. AUTO picks WEBGL if available, otherwise CANVAS.
  * @property {(HTMLElement|string)} [parent=undefined] - The DOM element that will contain the game canvas, or its `id`. If undefined, or if the named element doesn't exist, the game canvas is appended to the document body. If `null` no parent will be used and you are responsible for adding the canvas to the dom.
  * @property {HTMLCanvasElement} [canvas=null] - Provide your own Canvas element for Phaser to use instead of creating one.

src/core/typedefs/ImagesConfig.js

@@ -2,6 +2,7 @@
  * @typedef {object} Phaser.Types.Core.ImagesConfig
  * @since 3.0.0
  *
- * @property {string} [default] - URL to use for the 'default' texture.
- * @property {string} [missing] - URL to use for the 'missing' texture.
+ * @property {string} [default] - A base64 encoded image file to use as the 'default' texture.
+ * @property {string} [missing] - A base64 encoded image file to use as the 'missing' texture.
+ * @property {string} [white] - A base64 encoded image file to use as the 'white' texture.
  */

src/core/typedefs/MouseInputConfig.js

@@ -3,5 +3,7 @@
  * @since 3.0.0
  *
  * @property {*} [target=null] - Where the Mouse Manager listens for mouse input events. The default is the game canvas.
- * @property {boolean} [capture=true] - Whether mouse input events have `preventDefault` called on them.
+ * @property {boolean} [preventDefaultDown=true] - If `true` the DOM `mousedown` event will have `preventDefault` set.
+ * @property {boolean} [preventDefaultUp=true] - If `true` the DOM `mouseup` event will have `preventDefault` set.
+ * @property {boolean} [preventDefaultMove=true] - If `true` the DOM `mousemove` event will have `preventDefault` set.
  */

src/core/typedefs/ScaleConfig.js

@@ -5,7 +5,6 @@
  * @property {(integer|string)} [width=1024] - The base width of your game. Can be an integer or a string: '100%'. If a string it will only work if you have set a parent element that has a size.
  * @property {(integer|string)} [height=768] - The base height of your game. Can be an integer or a string: '100%'. If a string it will only work if you have set a parent element that has a size.
  * @property {(Phaser.Scale.ZoomType|integer)} [zoom=1] - The zoom value of the game canvas.
- * @property {number} [resolution=1] - The rendering resolution of the canvas. This is reserved for future use and is currently ignored.
  * @property {?(HTMLElement|string)} [parent] - The DOM element that will contain the game canvas, or its `id`. If undefined, or if the named element doesn't exist, the game canvas is inserted directly into the document body. If `null` no parent will be used and you are responsible for adding the canvas to your environment.
  * @property {boolean} [expandParent=true] - Is the Scale Manager allowed to adjust the CSS height property of the parent and/or document body to be 100%?
  * @property {Phaser.Scale.ScaleModeType} [mode=Phaser.Scale.ScaleModes.NONE] - The scale mode.

src/data/DataManager.js

@@ -109,7 +109,7 @@ var DataManager = new Class({
 
         if (!parent.hasOwnProperty('sys') && this.events)
         {
-            this.events.once('destroy', this.destroy, this);
+            this.events.once(Events.DESTROY, this.destroy, this);
         }
     },
 

src/data/events/DESTROY_EVENT.js

@@ -0,0 +1,15 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2020 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Data Manager Destroy Event.
+ *
+ * The Data Manager will listen for the destroy event from its parent, and then close itself down.
+ *
+ * @event Phaser.Data.Events#DESTROY
+ * @since 3.50.0
+ */
+module.exports = 'destroy';

src/data/events/index.js

@@ -12,6 +12,7 @@ module.exports = {
 
     CHANGE_DATA: require('./CHANGE_DATA_EVENT'),
     CHANGE_DATA_KEY: require('./CHANGE_DATA_KEY_EVENT'),
+    DESTROY: require('./DESTROY_EVENT'),
     REMOVE_DATA: require('./REMOVE_DATA_EVENT'),
     SET_DATA: require('./SET_DATA_EVENT')
 

src/display/color/index.js

@@ -10,7 +10,6 @@ Color.ColorToRGBA = require('./ColorToRGBA');
 Color.ComponentToHex = require('./ComponentToHex');
 Color.GetColor = require('./GetColor');
 Color.GetColor32 = require('./GetColor32');
-Color.GetColorFromValue = require('./GetColorFromValue');
 Color.HexStringToColor = require('./HexStringToColor');
 Color.HSLToColor = require('./HSLToColor');
 Color.HSVColorWheel = require('./HSVColorWheel');

src/display/mask/BitmapMask.js

@@ -205,7 +205,7 @@ var BitmapMask = new Class({
      */
     preRenderWebGL: function (renderer, maskedObject, camera)
     {
-        renderer.pipelines.BitmapMaskPipeline.beginMask(this, maskedObject, camera);
+        renderer.pipelines.BITMAPMASK_PIPELINE.beginMask(this, maskedObject, camera);
     },
 
     /**
@@ -220,7 +220,7 @@ var BitmapMask = new Class({
      */
     postRenderWebGL: function (renderer, camera)
     {
-        renderer.pipelines.BitmapMaskPipeline.endMask(this, camera);
+        renderer.pipelines.BITMAPMASK_PIPELINE.endMask(this, camera);
     },
 
     /**

src/dom/GetScreenOrientation.js

@@ -33,12 +33,9 @@ var GetScreenOrientation = function (width, height)
         return orientation;
     }
 
-    if (screen)
-    {
-        return (screen.height > screen.width) ? CONST.ORIENTATION.PORTRAIT : CONST.ORIENTATION.LANDSCAPE;
-    }
-    else if (typeof window.orientation === 'number')
+    if (typeof window.orientation === 'number')
     {
+        //  Do this check first, as iOS supports this, but also has an incomplete window.screen implementation
         //  This may change by device based on "natural" orientation.
         return (window.orientation === 0 || window.orientation === 180) ? CONST.ORIENTATION.PORTRAIT : CONST.ORIENTATION.LANDSCAPE;
     }
@@ -53,8 +50,10 @@ var GetScreenOrientation = function (width, height)
             return CONST.ORIENTATION.LANDSCAPE;
         }
     }
-    
+    else
+    {
         return (height > width) ? CONST.ORIENTATION.PORTRAIT : CONST.ORIENTATION.LANDSCAPE;
+    }
 };
 
 module.exports = GetScreenOrientation;

src/gameobjects/GameObject.js

@@ -36,12 +36,15 @@ var GameObject = new Class({
         EventEmitter.call(this);
 
         /**
-         * The Scene to which this Game Object belongs.
+         * A reference to the Scene to which this Game Object belongs.
+         *
          * Game Objects can only belong to one Scene.
          *
+         * You should consider this property as being read-only. You cannot move a
+         * Game Object to another Scene by simply changing it.
+         *
          * @name Phaser.GameObjects.GameObject#scene
          * @type {Phaser.Scene}
-         * @protected
          * @since 3.0.0
          */
         this.scene = scene;

src/gameobjects/GameObjectFactory.js

@@ -134,8 +134,7 @@ var GameObjectFactory = new Class({
         {
             this.displayList.add(child);
         }
-
-        if (child.preUpdate)
+        else if (child.preUpdate)
         {
             this.updateList.add(child);
         }

src/gameobjects/GetCalcMatrix.js

@@ -0,0 +1,65 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2020 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+var TransformMatrix = require('./components/TransformMatrix');
+
+var tempMatrix1 = new TransformMatrix();
+var tempMatrix2 = new TransformMatrix();
+var tempMatrix3 = new TransformMatrix();
+
+var result = { camera: tempMatrix1, sprite: tempMatrix2, calc: tempMatrix3 };
+
+/**
+ * Calculates the Transform Matrix of the given Game Object and Camera, factoring in
+ * the parent matrix if provided.
+ *
+ * Note that the object this results contains _references_ to the Transform Matrices,
+ * not new instances of them. Therefore, you should use their values immediately, or
+ * copy them to your own matrix, as they will be replaced as soon as another Game
+ * Object is rendered.
+ *
+ * @function Phaser.GameObjects.GetCalcMatrix
+ * @memberof Phaser.GameObjects
+ * @since 3.50.0
+ *
+ * @param {Phaser.GameObjects.GameObject} src - The Game Object to calculate the transform matrix for.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The camera being used to render the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} [parentMatrix] - The transform matrix of the parent container, if any.
+ *
+ * @return {Phaser.Types.GameObjects.GetCalcMatrixResults} The results object containing the updated transform matrices.
+ */
+var GetCalcMatrix = function (src, camera, parentMatrix)
+{
+    var camMatrix = tempMatrix1;
+    var spriteMatrix = tempMatrix2;
+    var calcMatrix = tempMatrix3;
+
+    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+
+    camMatrix.copyFrom(camera.matrix);
+
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        spriteMatrix.e = src.x;
+        spriteMatrix.f = src.y;
+    }
+    else
+    {
+        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
+        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
+    }
+
+    //  Multiply by the Sprite matrix, store result in calcMatrix
+    camMatrix.multiply(spriteMatrix, calcMatrix);
+
+    return result;
+};
+
+module.exports = GetCalcMatrix;

src/gameobjects/bitmaptext/BatchChar.js

@@ -11,7 +11,7 @@
  * @since 3.50.0
  * @private
  *
- * @param {Phaser.Renderer.WebGL.WebGLPipeline} pipeline - The BitmapText Game Object.
+ * @param {Phaser.Renderer.WebGL.WebGLPipeline} pipeline - The WebGLPipeline. Must have a `batchQuad` method.
  * @param {Phaser.GameObjects.BitmapText} src - The BitmapText Game Object.
  * @param {Phaser.Types.GameObjects.BitmapText.BitmapTextCharacter} char - The character to render.
  * @param {Phaser.Types.GameObjects.BitmapText.BitmapFontCharacterData} glyph - The character glyph.

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js

@@ -17,11 +17,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.DynamicBitmapText} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var DynamicBitmapTextCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var text = src._text;
     var textLength = text.length;

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextWebGLRenderer.js

@@ -4,8 +4,8 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
-var GetColorFromValue = require('../../../display/color/GetColorFromValue');
 
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
@@ -18,11 +18,10 @@ var GetColorFromValue = require('../../../display/color/GetColorFromValue');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.DynamicBitmapText} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var DynamicBitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var DynamicBitmapTextWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     var text = src.text;
     var textLength = text.length;
@@ -32,40 +31,15 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, src, interpolationPerce
         return;
     }
 
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline, src);
 
-    renderer.setPipeline(pipeline, src);
+    var result = GetCalcMatrix(src, camera, parentMatrix);
+
+    var spriteMatrix = result.sprite;
+    var calcMatrix = result.calc;
 
-    var camMatrix = pipeline._tempMatrix1;
-    var spriteMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
     var fontMatrix = pipeline._tempMatrix4;
 
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        spriteMatrix.e = src.x;
-        spriteMatrix.f = src.y;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-    else
-    {
-        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
-        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-
     var crop = (src.cropWidth > 0 || src.cropHeight > 0);
 
     if (crop)
@@ -87,11 +61,11 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, src, interpolationPerce
     var textureWidth = texture.width;
     var textureHeight = texture.height;
 
-    var tintEffect = (src._isTinted && src.tintFill);
-    var tintTL = Utils.getTintAppendFloatAlpha(src._tintTL, camera.alpha * src._alphaTL);
-    var tintTR = Utils.getTintAppendFloatAlpha(src._tintTR, camera.alpha * src._alphaTR);
-    var tintBL = Utils.getTintAppendFloatAlpha(src._tintBL, camera.alpha * src._alphaBL);
-    var tintBR = Utils.getTintAppendFloatAlpha(src._tintBR, camera.alpha * src._alphaBR);
+    var tintEffect = src.tintFill;
+    var tintTL = Utils.getTintAppendFloatAlpha(src.tintTopLeft, camera.alpha * src._alphaTL);
+    var tintTR = Utils.getTintAppendFloatAlpha(src.tintTopRight, camera.alpha * src._alphaTR);
+    var tintBL = Utils.getTintAppendFloatAlpha(src.tintBottomLeft, camera.alpha * src._alphaBL);
+    var tintBR = Utils.getTintAppendFloatAlpha(src.tintBottomRight, camera.alpha * src._alphaBR);
 
     var textureUnit = pipeline.setGameObject(src);
 
@@ -234,10 +208,10 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, src, interpolationPerce
                 tintBR = output.tint.bottomRight;
             }
 
-            tintTL = Utils.getTintAppendFloatAlpha(GetColorFromValue(tintTL), camera.alpha * src._alphaTL);
-            tintTR = Utils.getTintAppendFloatAlpha(GetColorFromValue(tintTR), camera.alpha * src._alphaTR);
-            tintBL = Utils.getTintAppendFloatAlpha(GetColorFromValue(tintBL), camera.alpha * src._alphaBL);
-            tintBR = Utils.getTintAppendFloatAlpha(GetColorFromValue(tintBR), camera.alpha * src._alphaBR);
+            tintTL = Utils.getTintAppendFloatAlpha(tintTL, camera.alpha * src._alphaTL);
+            tintTR = Utils.getTintAppendFloatAlpha(tintTR, camera.alpha * src._alphaTR);
+            tintBL = Utils.getTintAppendFloatAlpha(tintBL, camera.alpha * src._alphaBL);
+            tintBR = Utils.getTintAppendFloatAlpha(tintBR, camera.alpha * src._alphaBR);
         }
 
         x *= scale;

src/gameobjects/bitmaptext/static/BitmapText.js

@@ -8,7 +8,6 @@ var Class = require('../../../utils/Class');
 var Clamp = require('../../../math/Clamp');
 var Components = require('../../components');
 var GameObject = require('../../GameObject');
-var GetColorFromValue = require('../../../display/color/GetColorFromValue');
 var GetBitmapTextSize = require('../GetBitmapTextSize');
 var ParseFromAtlas = require('../ParseFromAtlas');
 var ParseXMLBitmapFont = require('../ParseXMLBitmapFont');
@@ -246,22 +245,13 @@ var BitmapText = new Class({
         /**
          * The color of the drop shadow.
          *
-         * @name Phaser.GameObjects.BitmapText#_dropShadowColor
-         * @type {number}
-         * @private
-         * @since 3.50.0
-         */
-        this._dropShadowColor = 0x000000;
-
-        /**
-         * The GL encoded color of the drop shadow.
+         * You can set this directly, or use `Phaser.GameObjects.BitmapText#setDropShadow`.
          *
-         * @name Phaser.GameObjects.BitmapText#_dropShadowColorGL
+         * @name Phaser.GameObjects.BitmapText#dropShadowColor
          * @type {number}
-         * @private
          * @since 3.50.0
          */
-        this._dropShadowColorGL = 0x000000;
+        this.dropShadowColor = 0x000000;
 
         /**
          * The alpha value of the drop shadow.
@@ -536,27 +526,23 @@ var BitmapText = new Class({
             else
             {
                 var tintEffect = (tintFill) ? 1 : 0;
-                var tintTL = GetColorFromValue(topLeft);
-                var tintTR = GetColorFromValue(topRight);
-                var tintBL = GetColorFromValue(bottomLeft);
-                var tintBR = GetColorFromValue(bottomRight);
 
                 if (color)
                 {
                     color.tintEffect = tintEffect;
-                    color.tintTL = tintTL;
-                    color.tintTR = tintTR;
-                    color.tintBL = tintBL;
-                    color.tintBR = tintBR;
+                    color.tintTL = topLeft;
+                    color.tintTR = topRight;
+                    color.tintBL = bottomLeft;
+                    color.tintBR = bottomRight;
                 }
                 else
                 {
                     charColors[i] = {
                         tintEffect: tintEffect,
-                        tintTL: tintTL,
-                        tintTR: tintTR,
-                        tintBL: tintBL,
-                        tintBR: tintBR
+                        tintTL: topLeft,
+                        tintTR: topRight,
+                        tintBL: bottomLeft,
+                        tintBR: bottomRight
                     };
                 }
             }
@@ -989,31 +975,6 @@ var BitmapText = new Class({
 
     },
 
-    /**
-     * The color of the drop shadow.
-     *
-     * You can also set this via `Phaser.GameObjects.BitmapText#setDropShadow`.
-     *
-     * @name Phaser.GameObjects.BitmapText#dropShadowColor
-     * @type {number}
-     * @since 3.50.0
-     */
-    dropShadowColor: {
-
-        get: function ()
-        {
-            return this._dropShadowColor;
-        },
-
-        set: function (value)
-        {
-            this._dropShadowColor = value;
-
-            this._dropShadowColorGL = GetColorFromValue(value);
-        }
-
-    },
-
     /**
      * Build a JSON representation of this Bitmap Text.
      *

src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js

@@ -17,11 +17,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.BitmapText} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var BitmapTextCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var text = src._text;
     var textLength = text.length;

src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js

@@ -5,6 +5,7 @@
  */
 
 var BatchChar = require('../BatchChar');
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
 
 /**
@@ -18,11 +19,10 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.BitmapText} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var BitmapTextWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     var text = src._text;
     var textLength = text.length;
@@ -32,38 +32,9 @@ var BitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage,
         return;
     }
 
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline, src);
 
-    renderer.setPipeline(pipeline, src);
-
-    var camMatrix = pipeline._tempMatrix1;
-    var spriteMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
-
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        spriteMatrix.e = src.x;
-        spriteMatrix.f = src.y;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-    else
-    {
-        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
-        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
 
     var roundPixels = camera.roundPixels;
 
@@ -71,12 +42,12 @@ var BitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage,
 
     var charColors = src.charColors;
 
-    var tintEffect = (src._isTinted && src.tintFill);
+    var tintEffect = src.tintFill;
 
-    var tintTL = Utils.getTintAppendFloatAlpha(src._tintTL, cameraAlpha * src._alphaTL);
-    var tintTR = Utils.getTintAppendFloatAlpha(src._tintTR, cameraAlpha * src._alphaTR);
-    var tintBL = Utils.getTintAppendFloatAlpha(src._tintBL, cameraAlpha * src._alphaBL);
-    var tintBR = Utils.getTintAppendFloatAlpha(src._tintBR, cameraAlpha * src._alphaBR);
+    var tintTL = Utils.getTintAppendFloatAlpha(src.tintTopLeft, cameraAlpha * src._alphaTL);
+    var tintTR = Utils.getTintAppendFloatAlpha(src.tintTopRight, cameraAlpha * src._alphaTR);
+    var tintBL = Utils.getTintAppendFloatAlpha(src.tintBottomLeft, cameraAlpha * src._alphaBL);
+    var tintBR = Utils.getTintAppendFloatAlpha(src.tintBottomRight, cameraAlpha * src._alphaBR);
 
     var texture = src.frame.glTexture;
     var textureUnit = pipeline.setGameObject(src);

src/gameobjects/blitter/BlitterCanvasRenderer.js

@@ -15,11 +15,10 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Blitter} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var BlitterCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var list = src.getRenderList();
 

src/gameobjects/blitter/BlitterWebGLRenderer.js

@@ -17,11 +17,10 @@ var Utils = require('../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Blitter} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var BlitterWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     var list = src.getRenderList();
 
@@ -30,9 +29,7 @@ var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage, cam
         return;
     }
 
-    var pipeline = this.pipeline;
-
-    renderer.setPipeline(pipeline, src);
+    var pipeline = renderer.pipelines.set(this.pipeline, src);
 
     var cameraScrollX = camera.scrollX * src.scrollFactorX;
     var cameraScrollY = camera.scrollY * src.scrollFactorY;

src/gameobjects/components/Pipeline.js

@@ -4,6 +4,8 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var PIPELINE_CONST = require('../../renderer/webgl/pipelines/const');
+
 /**
  * Provides methods used for setting the WebGL rendering pipeline of a Game Object.
  *
@@ -45,19 +47,20 @@ var Pipeline = {
      * @webglOnly
      * @since 3.0.0
      *
-     * @param {string} [pipelineName=MultiPipeline] - The name of the pipeline to set on this Game Object. Defaults to the Multi Pipeline.
+     * @param {string} [name=MultiPipeline] - The name of the pipeline to set on this Game Object. Defaults to the Multi Pipeline.
      *
      * @return {boolean} `true` if the pipeline was set successfully, otherwise `false`.
      */
-    initPipeline: function (pipelineName)
+    initPipeline: function (name)
     {
-        if (pipelineName === undefined) { pipelineName = 'MultiPipeline'; }
+        if (name === undefined) { name = PIPELINE_CONST.MULTI_PIPELINE; }
 
         var renderer = this.scene.sys.game.renderer;
+        var pipelines = renderer.pipelines;
 
-        if (renderer && renderer.gl && renderer.hasPipeline(pipelineName))
+        if (pipelines && pipelines.has(name))
         {
-            this.defaultPipeline = renderer.getPipeline(pipelineName);
+            this.defaultPipeline = pipelines.get(name);
             this.pipeline = this.defaultPipeline;
 
             return true;
@@ -73,17 +76,18 @@ var Pipeline = {
      * @webglOnly
      * @since 3.0.0
      *
-     * @param {string} pipelineName - The name of the pipeline to set on this Game Object.
+     * @param {string} name - The name of the pipeline to set on this Game Object.
      *
      * @return {this} This Game Object instance.
      */
-    setPipeline: function (pipelineName)
+    setPipeline: function (name)
     {
         var renderer = this.scene.sys.game.renderer;
+        var pipelines = renderer.pipelines;
 
-        if (renderer && renderer.gl && renderer.hasPipeline(pipelineName))
+        if (pipelines && pipelines.has(name))
         {
-            this.pipeline = renderer.getPipeline(pipelineName);
+            this.pipeline = pipelines.get(name);
         }
 
         return this;

src/gameobjects/components/Tint.js

@@ -4,8 +4,6 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
-var GetColorFromValue = require('../../display/color/GetColorFromValue');
-
 /**
  * Provides methods used for setting the tint of a Game Object.
  * Should be applied as a mixin and not used directly.
@@ -18,62 +16,58 @@ var GetColorFromValue = require('../../display/color/GetColorFromValue');
 var Tint = {
 
     /**
-     * Private internal value. Holds the top-left tint value.
+     * The tint value being applied to the top-left vertice of the Game Object.
+     * This value is interpolated from the corner to the center of the Game Object.
+     * The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.
      *
-     * @name Phaser.GameObjects.Components.Tint#_tintTL
+     * @name Phaser.GameObjects.Components.Tint#tintTopLeft
      * @type {number}
-     * @private
-     * @default 16777215
+     * @default 0xffffff
      * @since 3.0.0
      */
-    _tintTL: 16777215,
+    tintTopLeft: 0xffffff,
 
     /**
-     * Private internal value. Holds the top-right tint value.
+     * The tint value being applied to the top-right vertice of the Game Object.
+     * This value is interpolated from the corner to the center of the Game Object.
+     * The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.
      *
-     * @name Phaser.GameObjects.Components.Tint#_tintTR
+     * @name Phaser.GameObjects.Components.Tint#tintTopRight
      * @type {number}
-     * @private
-     * @default 16777215
+     * @default 0xffffff
      * @since 3.0.0
      */
-    _tintTR: 16777215,
+    tintTopRight: 0xffffff,
 
     /**
-     * Private internal value. Holds the bottom-left tint value.
+     * The tint value being applied to the bottom-left vertice of the Game Object.
+     * This value is interpolated from the corner to the center of the Game Object.
+     * The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.
      *
-     * @name Phaser.GameObjects.Components.Tint#_tintBL
+     * @name Phaser.GameObjects.Components.Tint#tintBottomLeft
      * @type {number}
-     * @private
-     * @default 16777215
+     * @default 0xffffff
      * @since 3.0.0
      */
-    _tintBL: 16777215,
+    tintBottomLeft: 0xffffff,
 
     /**
-     * Private internal value. Holds the bottom-right tint value.
+     * The tint value being applied to the bottom-right vertice of the Game Object.
+     * This value is interpolated from the corner to the center of the Game Object.
+     * The value should be set as a hex number, i.e. 0xff0000 for red, or 0xff00ff for purple.
      *
-     * @name Phaser.GameObjects.Components.Tint#_tintBR
+     * @name Phaser.GameObjects.Components.Tint#tintBottomRight
      * @type {number}
-     * @private
-     * @default 16777215
+     * @default 0xffffff
      * @since 3.0.0
      */
-    _tintBR: 16777215,
+    tintBottomRight: 0xffffff,
 
     /**
-     * Private internal value. Holds if the Game Object is tinted or not.
+     * The tint fill mode.
      *
-     * @name Phaser.GameObjects.Components.Tint#_isTinted
-     * @type {boolean}
-     * @private
-     * @default false
-     * @since 3.11.0
-     */
-    _isTinted: false,
-
-    /**
-     * Fill or additive?
+     * `false` = An additive tint (the default), where vertices colors are blended with the texture.
+     * `true` = A fill tint, where the vertices colors replace the texture, but respects texture alpha.
      *
      * @name Phaser.GameObjects.Components.Tint#tintFill
      * @type {boolean}
@@ -98,8 +92,6 @@ var Tint = {
     {
         this.setTint(0xffffff);
 
-        this._isTinted = false;
-
         return this;
     },
 
@@ -141,12 +133,10 @@ var Tint = {
             bottomRight = topLeft;
         }
 
-        this._tintTL = GetColorFromValue(topLeft);
-        this._tintTR = GetColorFromValue(topRight);
-        this._tintBL = GetColorFromValue(bottomLeft);
-        this._tintBR = GetColorFromValue(bottomRight);
-
-        this._isTinted = true;
+        this.tintTopLeft = topLeft;
+        this.tintTopRight = topRight;
+        this.tintBottomLeft = bottomLeft;
+        this.tintBottomRight = bottomRight;
 
         this.tintFill = false;
 
@@ -190,102 +180,6 @@ var Tint = {
         return this;
     },
 
-    /**
-     * The tint value being applied to the top-left of the Game Object.
-     * This value is interpolated from the corner to the center of the Game Object.
-     *
-     * @name Phaser.GameObjects.Components.Tint#tintTopLeft
-     * @type {integer}
-     * @webglOnly
-     * @since 3.0.0
-     */
-    tintTopLeft: {
-
-        get: function ()
-        {
-            return this._tintTL;
-        },
-
-        set: function (value)
-        {
-            this._tintTL = GetColorFromValue(value);
-            this._isTinted = true;
-        }
-
-    },
-
-    /**
-     * The tint value being applied to the top-right of the Game Object.
-     * This value is interpolated from the corner to the center of the Game Object.
-     *
-     * @name Phaser.GameObjects.Components.Tint#tintTopRight
-     * @type {integer}
-     * @webglOnly
-     * @since 3.0.0
-     */
-    tintTopRight: {
-
-        get: function ()
-        {
-            return this._tintTR;
-        },
-
-        set: function (value)
-        {
-            this._tintTR = GetColorFromValue(value);
-            this._isTinted = true;
-        }
-
-    },
-
-    /**
-     * The tint value being applied to the bottom-left of the Game Object.
-     * This value is interpolated from the corner to the center of the Game Object.
-     *
-     * @name Phaser.GameObjects.Components.Tint#tintBottomLeft
-     * @type {integer}
-     * @webglOnly
-     * @since 3.0.0
-     */
-    tintBottomLeft: {
-
-        get: function ()
-        {
-            return this._tintBL;
-        },
-
-        set: function (value)
-        {
-            this._tintBL = GetColorFromValue(value);
-            this._isTinted = true;
-        }
-
-    },
-
-    /**
-     * The tint value being applied to the bottom-right of the Game Object.
-     * This value is interpolated from the corner to the center of the Game Object.
-     *
-     * @name Phaser.GameObjects.Components.Tint#tintBottomRight
-     * @type {integer}
-     * @webglOnly
-     * @since 3.0.0
-     */
-    tintBottomRight: {
-
-        get: function ()
-        {
-            return this._tintBR;
-        },
-
-        set: function (value)
-        {
-            this._tintBR = GetColorFromValue(value);
-            this._isTinted = true;
-        }
-
-    },
-
     /**
      * The tint value being applied to the whole of the Game Object.
      * This property is a setter-only. Use the properties `tintTopLeft` etc to read the current tint value.
@@ -304,7 +198,10 @@ var Tint = {
     },
 
     /**
-     * Does this Game Object have a tint applied to it or not?
+     * Does this Game Object have a tint applied?
+     *
+     * It checks to see if the 4 tint properties are set to the value 0xffffff
+     * and that the `tintFill` property is `false`. This indicates that a Game Object isn't tinted.
      *
      * @name Phaser.GameObjects.Components.Tint#isTinted
      * @type {boolean}
@@ -316,7 +213,15 @@ var Tint = {
 
         get: function ()
         {
-            return this._isTinted;
+            var white = 0xffffff;
+
+            return (
+                this.tintFill ||
+                this.tintTopLeft !== white ||
+                this.tintTopRight !== white ||
+                this.tintBottomLeft !== white ||
+                this.tintBottomRight !== white
+            );
         }
 
     }

src/gameobjects/components/Transform.js

@@ -279,6 +279,26 @@ var Transform = {
         return this;
     },
 
+    /**
+     * Copies an object's coordinates to this Game Object's position.
+     *
+     * @method Phaser.GameObjects.Components.Transform#copyPosition
+     * @since 3.50.0
+     *
+     * @param {(Phaser.Types.Math.Vector2Like|Phaser.Types.Math.Vector3Like|Phaser.Types.Math.Vector4Like)} source - An object with numeric 'x', 'y', 'z', or 'w' properties. Undefined values are not copied.
+     *
+     * @return {this} This Game Object instance.
+     */
+    copyPosition: function (source)
+    {
+        if (source.x !== undefined) { this.x = source.x; }
+        if (source.y !== undefined) { this.y = source.y; }
+        if (source.z !== undefined) { this.z = source.z; }
+        if (source.w !== undefined) { this.w = source.w; }
+
+        return this;
+    },
+
     /**
      * Sets the position of this Game Object to be a random position within the confines of
      * the given area.

src/gameobjects/container/Container.js

@@ -45,6 +45,9 @@ var Vector2 = require('../../math/Vector2');
  * Containers can be enabled for input. Because they do not have a texture you need to provide a shape for them
  * to use as their hit area. Container children can also be enabled for input, independent of the Container.
  * 
+ * If input enabling a _child_ you should not set both the `origin` and a **negative** scale factor on the child,
+ * or the input area will become misaligned.
+ *
  * Containers can be given a physics body for either Arcade Physics, Impact Physics or Matter Physics. However,
  * if Container _children_ are enabled for physics you may get unexpected results, such as offset bodies,
  * if the Container itself, or any of its ancestors, is positioned anywhere other than at 0 x 0. Container children

src/gameobjects/container/ContainerCanvasRenderer.js

@@ -16,11 +16,10 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Container} container - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ContainerCanvasRenderer = function (renderer, container, interpolationPercentage, camera, parentMatrix)
+var ContainerCanvasRenderer = function (renderer, container, camera, parentMatrix)
 {
     var children = container.list;
 
@@ -85,7 +84,7 @@ var ContainerCanvasRenderer = function (renderer, container, interpolationPercen
         child.setAlpha(childAlpha * alpha);
 
         //  Render
-        child.renderCanvas(renderer, child, interpolationPercentage, camera, transformMatrix);
+        child.renderCanvas(renderer, child, camera, transformMatrix);
 
         //  Restore original values
         child.setAlpha(childAlpha);

src/gameobjects/container/ContainerWebGLRenderer.js

@@ -16,11 +16,10 @@
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Container} container - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ContainerWebGLRenderer = function (renderer, container, interpolationPercentage, camera, parentMatrix)
+var ContainerWebGLRenderer = function (renderer, container, camera, parentMatrix)
 {
     var children = container.list;
 
@@ -123,7 +122,7 @@ var ContainerWebGLRenderer = function (renderer, container, interpolationPercent
         child.setAlpha(childAlphaTopLeft * alpha, childAlphaTopRight * alpha, childAlphaBottomLeft * alpha, childAlphaBottomRight * alpha);
 
         //  Render
-        child.renderWebGL(renderer, child, interpolationPercentage, camera, transformMatrix);
+        child.renderWebGL(renderer, child, camera, transformMatrix);
 
         //  Restore original values
 

src/gameobjects/domelement/DOMElementCSSRenderer.js

@@ -18,11 +18,10 @@ var GameObject = require('../GameObject');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active renderer.
  * @param {Phaser.GameObjects.DOMElement} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var DOMElementCSSRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var DOMElementCSSRenderer = function (renderer, src, camera, parentMatrix)
 {
     var node = src.node;
     var style = node.style;

src/gameobjects/extern/ExternWebGLRenderer.js

@@ -4,6 +4,8 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../GetCalcMatrix');
+
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -15,49 +17,18 @@
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Extern} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ExternWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var ExternWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = renderer.currentPipeline;
+    renderer.pipelines.clear();
 
-    renderer.clearPipeline();
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
 
-    var camMatrix = renderer._tempMatrix1;
-    var spriteMatrix = renderer._tempMatrix2;
-    var calcMatrix = renderer._tempMatrix3;
-
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        spriteMatrix.e = src.x;
-        spriteMatrix.f = src.y;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-    else
-    {
-        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
-        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-
-    //  Callback
     src.render.call(src, renderer, camera, calcMatrix);
 
-    renderer.rebindPipeline(pipeline);
+    renderer.pipelines.rebind();
 };
 
 module.exports = ExternWebGLRenderer;

src/gameobjects/graphics/Graphics.js

@@ -1510,8 +1510,8 @@ var Graphics = new Class({
 
         if (ctx)
         {
-            // var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix, renderTargetCtx, allowClip)
-            this.renderCanvas(renderer, this, 0, Graphics.TargetCamera, null, ctx, false);
+            // var GraphicsCanvasRenderer = function (renderer, src, camera, parentMatrix, renderTargetCtx, allowClip)
+            this.renderCanvas(renderer, this, Graphics.TargetCamera, null, ctx, false);
 
             if (texture)
             {

src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -18,13 +18,12 @@ var SetTransform = require('../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Graphics} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  * @param {CanvasRenderingContext2D} [renderTargetCtx] - The target rendering context.
  * @param {boolean} allowClip - If `true` then path operations will be used instead of fill operations.
  */
-var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix, renderTargetCtx, allowClip)
+var GraphicsCanvasRenderer = function (renderer, src, camera, parentMatrix, renderTargetCtx, allowClip)
 {
     var commandBuffer = src.commandBuffer;
     var commandBufferLength = commandBuffer.length;

src/gameobjects/graphics/GraphicsWebGLRenderer.js

@@ -36,20 +36,17 @@ var matrixStack = [];
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Graphics} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var GraphicsWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     if (src.commandBuffer.length === 0)
     {
         return;
     }
 
-    var pipeline = this.pipeline;
-
-    renderer.setPipeline(pipeline, src);
+    var pipeline = renderer.pipelines.set(this.pipeline, src);
 
     var camMatrix = src._tempMatrix1;
     var graphicsMatrix = src._tempMatrix2;
@@ -102,10 +99,10 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
     var pathOpen = false;
     var lastPath = null;
 
-    var getTint = Utils.getTintAppendFloatAlphaAndSwap;
+    var getTint = Utils.getTintAppendFloatAlpha;
 
     //  Set to a white texture, not a blank one, so Lights2D works too!
-    var currentTexture = renderer.tempTextures[0];
+    var currentTexture = renderer.whiteTexture;
 
     for (var cmdIndex = 0; cmdIndex < commands.length; cmdIndex++)
     {

src/gameobjects/image/ImageCanvasRenderer.js

@@ -15,11 +15,10 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ImageCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var ImageCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     renderer.batchSprite(src, src.frame, camera, parentMatrix);
 };

src/gameobjects/image/ImageWebGLRenderer.js

@@ -15,11 +15,10 @@
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var ImageWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     this.pipeline.batchSprite(src, camera, parentMatrix);
 };

src/gameobjects/index.js

@@ -123,6 +123,8 @@ if (typeof WEBGL_RENDERER)
 {
     //  WebGL only Game Objects
     GameObjects.Mesh = require('./mesh/Mesh');
+    GameObjects.MeshCamera = require('./mesh/MeshCamera');
+
     GameObjects.Quad = require('./quad/Quad');
     GameObjects.Shader = require('./shader/Shader');
 

src/gameobjects/mesh/Mesh.js

@@ -7,13 +7,20 @@
 var Class = require('../../utils/Class');
 var Components = require('../components');
 var GameObject = require('../GameObject');
+var GameObjectEvents = require('../events');
+var GetCalcMatrix = require('../GetCalcMatrix');
 var MeshRender = require('./MeshRender');
-var NOOP = require('../../utils/NOOP');
+var MeshCamera = require('./MeshCamera');
+var Model = require('../../geom/mesh/Model');
 
 /**
  * @classdesc
  * A Mesh Game Object.
  *
+ * The Mesh object is WebGL only and does not have a Canvas counterpart.
+ *
+ * The Mesh origin is always 0.5 x 0.5 and cannot be changed.
+ *
  * @class Mesh
  * @extends Phaser.GameObjects.GameObject
  * @memberof Phaser.GameObjects
@@ -21,144 +28,582 @@ var NOOP = require('../../utils/NOOP');
  * @webglOnly
  * @since 3.0.0
  *
+ * @extends Phaser.GameObjects.Components.AlphaSingle
  * @extends Phaser.GameObjects.Components.BlendMode
  * @extends Phaser.GameObjects.Components.Depth
  * @extends Phaser.GameObjects.Components.Mask
  * @extends Phaser.GameObjects.Components.Pipeline
- * @extends Phaser.GameObjects.Components.Size
- * @extends Phaser.GameObjects.Components.Texture
  * @extends Phaser.GameObjects.Components.Transform
  * @extends Phaser.GameObjects.Components.Visible
  * @extends Phaser.GameObjects.Components.ScrollFactor
+ * @extends Phaser.GameObjects.Components.Size
  *
  * @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
- * @param {number} x - The horizontal position of this Game Object in the world.
- * @param {number} y - The vertical position of this Game Object in the world.
- * @param {number[]} vertices - An array containing the vertices data for this Mesh.
- * @param {number[]} uv - An array containing the uv data for this Mesh.
- * @param {number[]} colors - An array containing the color data for this Mesh.
- * @param {number[]} alphas - An array containing the alpha data for this Mesh.
- * @param {(string|Phaser.Textures.Texture)} texture - The key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
- * @param {(string|integer)} [frame] - An optional frame from the Texture this Game Object is rendering with.
+ * @param {number} [x] - The horizontal position of this Game Object in the world.
+ * @param {number} [y] - The vertical position of this Game Object in the world.
+ * @param {string|Phaser.Textures.Texture} [texture] - The key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
+ * @param {string|integer} [frame] - An optional frame from the Texture this Game Object is rendering with.
+ * @param {number[]} [vertices] - An array containing the vertices data for this Mesh.
+ * @param {number[]} [uvs] - An array containing the uv data for this Mesh.
+ * @param {number[]} [indicies] - An array containing the vertex indicies for this Mesh.
+ * @param {number|number[]} [colors=0xffffff] - An array containing the color data for this Mesh.
+ * @param {number|number[]} [alphas=1] - An array containing the alpha data for this Mesh.
  */
 var Mesh = new Class({
 
     Extends: GameObject,
 
     Mixins: [
+        Components.AlphaSingle,
         Components.BlendMode,
         Components.Depth,
         Components.Mask,
         Components.Pipeline,
-        Components.Size,
-        Components.Texture,
         Components.Transform,
         Components.Visible,
         Components.ScrollFactor,
+        Components.Size,
         MeshRender
     ],
 
     initialize:
 
-    function Mesh (scene, x, y, vertices, uv, colors, alphas, texture, frame)
+    function Mesh (scene, x, y, texture, frame, vertices, uvs, indicies, colors, alphas)
     {
         GameObject.call(this, scene, 'Mesh');
 
-        if (vertices.length !== uv.length)
-        {
-            throw new Error('Mesh Vertex count must match UV count');
-        }
-
-        var verticesUB = (vertices.length / 2) | 0;
-
-        if (colors.length > 0 && colors.length < verticesUB)
-        {
-            throw new Error('Mesh Color count must match Vertex count');
-        }
-
-        if (alphas.length > 0 && alphas.length < verticesUB)
-        {
-            throw new Error('Mesh Alpha count must match Vertex count');
-        }
-
-        var i;
-
-        if (colors.length === 0)
-        {
-            for (i = 0; i < verticesUB; ++i)
-            {
-                colors[i] = 0xFFFFFF;
-            }
-        }
-
-        if (alphas.length === 0)
-        {
-            for (i = 0; i < verticesUB; ++i)
-            {
-                alphas[i] = 1.0;
-            }
-        }
+        /**
+         * A Camera which can be used to control the view of the models being managed
+         * by this Mesh. It will default to have an fov of 45 and be positioned at 0, 0, -10,
+         * with a near of 0.01 and far of 1000. You can change all of these by using the
+         * methods and properties available on the `MeshCamera` class.
+         *
+         * @name Phaser.GameObjects.Mesh#camera
+         * @type {Phaser.GameObjects.MeshCamera}
+         * @since 3.50.0
+         */
+        this.camera = new MeshCamera(45, 0, 0, -10, 0.01, 1000);
 
         /**
-         * An array containing the vertices data for this Mesh.
+         * An array of Model instances that have been created in this Mesh.
          *
-         * @name Phaser.GameObjects.Mesh#vertices
-         * @type {Float32Array}
-         * @since 3.0.0
+         * @name Phaser.GameObjects.Mesh#models
+         * @type {Phaser.Geom.Mesh.Model[]}
+         * @since 3.50.0
          */
-        this.vertices = new Float32Array(vertices);
+        this.models = [];
 
         /**
-         * An array containing the uv data for this Mesh.
+         * You can optionally choose to render the vertices of this Mesh to a Graphics instance.
          *
-         * @name Phaser.GameObjects.Mesh#uv
-         * @type {Float32Array}
-         * @since 3.0.0
+         * Achieve this by setting the `debugCallback` and the `debugGraphic` properties.
+         *
+         * You can do this in a single call via the `Mesh.setDebug` method, which will use the
+         * built-in debug function. You can also set it to your own callback. The callback
+         * will be invoked _once per render_ and sent the following parameters:
+         *
+         * `debugCallback(src, meshLength, verts)`
+         *
+         * `src` is the Mesh instance being debugged.
+         * `meshLength` is the number of mesh vertices in total.
+         * `verts` is an array of the translated vertex coordinates.
+         *
+         * To disable rendering, set this property back to `null`.
+         *
+         * @name Phaser.GameObjects.Mesh#debugCallback
+         * @type {function}
+         * @since 3.50.0
          */
-        this.uv = new Float32Array(uv);
+        this.debugCallback = null;
 
         /**
-         * An array containing the color data for this Mesh.
+         * The Graphics instance that the debug vertices will be drawn to, if `setDebug` has
+         * been called.
          *
-         * @name Phaser.GameObjects.Mesh#colors
-         * @type {Uint32Array}
-         * @since 3.0.0
+         * @name Phaser.GameObjects.Mesh#debugGraphic
+         * @type {Phaser.GameObjects.Graphics}
+         * @since 3.50.0
          */
-        this.colors = new Uint32Array(colors);
+        this.debugGraphic = null;
 
         /**
-         * An array containing the alpha data for this Mesh.
+         * Internal cached value.
          *
-         * @name Phaser.GameObjects.Mesh#alphas
-         * @type {Float32Array}
-         * @since 3.0.0
+         * @name Phaser.GameObjects.Mesh#_prevWidth
+         * @type {number}
+         * @private
+         * @since 3.50.0
          */
-        this.alphas = new Float32Array(alphas);
+        this._prevWidth = 0;
 
         /**
-         * Fill or additive mode used when blending the color values?
+         * Internal cached value.
          *
-         * @name Phaser.GameObjects.Mesh#tintFill
-         * @type {boolean}
-         * @default false
-         * @since 3.11.0
+         * @name Phaser.GameObjects.Mesh#_prevHeight
+         * @type {number}
+         * @private
+         * @since 3.50.0
          */
-        this.tintFill = false;
+        this._prevHeight = 0;
+
+        var renderer = scene.sys.renderer;
 
-        this.setTexture(texture, frame);
         this.setPosition(x, y);
-        this.setSizeToFrame();
+
+        this.setSize(renderer.width, renderer.height);
+
         this.initPipeline();
+
+        if (vertices)
+        {
+            this.addModelFromVertices(vertices, uvs, indicies, texture, frame, colors, alphas);
+        }
+
+        this.on(GameObjectEvents.ADDED_TO_SCENE, this.addedToScene, this);
+        this.on(GameObjectEvents.REMOVED_FROM_SCENE, this.removedFromScene, this);
+    },
+
+    //  Overrides Game Object method
+    addedToScene: function ()
+    {
+        this.scene.sys.updateList.add(this);
+    },
+
+    //  Overrides Game Object method
+    removedFromScene: function ()
+    {
+        this.scene.sys.updateList.remove(this);
     },
 
     /**
-     * This method is left intentionally empty and does not do anything.
-     * It is retained to allow a Mesh or Quad to be added to a Container.
+     * Removes all Models from this Mesh, calling `destroy` on each one of them.
      *
-     * @method Phaser.GameObjects.Mesh#setAlpha
-     * @since 3.17.0
+     * @method Phaser.GameObjects.Mesh#clearModels
+     * @since 3.50.0
      */
-    setAlpha: NOOP
+    clearModels: function ()
+    {
+        var models = this.models;
+
+        for (var i = 0; i < models.length; i++)
+        {
+            models[i].destroy();
+        }
+
+        this.models = [];
+    },
+
+    /**
+     * This method creates a new blank Model instance and adds it to this Mesh.
+     *
+     * @method Phaser.GameObjects.Mesh#addModel
+     * @since 3.50.0
+     *
+     * @param {string|Phaser.Textures.Texture} [texture] - The key, or instance of the Texture this model will use to render with, as stored in the Texture Manager.
+     * @param {string|integer} [frame] - An optional frame from the Texture this model is rendering with. Ensure your UV data also matches this frame.
+     * @param {number} [x=0] - The x position of the Model.
+     * @param {number} [y=0] - The y position of the Model.
+     * @param {number} [z=0] - The z position of the Model.
+     *
+     * @return {Phaser.Geom.Mesh.Model} The Model instance that was created.
+     */
+    addModel: function (texture, frame, x, y, z)
+    {
+        var model = new Model(this, texture, frame, x, y, z);
+
+        this.models.push(model);
+
+        return model;
+    },
+
+    /**
+     * This method creates a new Model based on a loaded triangulated Wavefront OBJ.
+     *
+     * The obj file should have been loaded via OBJFile:
+     *
+     * ```javascript
+     * this.load.obj(key, url, [ flipUV ]);
+     * ```
+     *
+     * Then use the key it was loaded under in this method.
+     *
+     * If the model has a texture, you must provide it as the second parameter.
+     *
+     * The model is then added to this Mesh. A single Mesh can contain multiple models
+     * without impacting each other. Equally, multiple models can all share the same base OBJ
+     * data.
+     *
+     * Make sure your 3D package has triangulated the model data prior to exporting it.
+     *
+     * You can scale the model data during import, which will set the new 'base' scale for the model.
+     *
+     * You can also offset the models generated vertex positions via the `originX`, `originY` and `originZ`
+     * parameters, which will change the rotation origin of the model. The model itself can be positioned,
+     * rotated and scaled independantly of these settings, so don't use them to position the model, just
+     * use them to offset the base values.
+     *
+     * @method Phaser.GameObjects.Mesh#addModelFromOBJ
+     * @since 3.50.0
+     *
+     * @param {string} key - The key of the data in the OBJ Cache to create the model from.
+     * @param {string|Phaser.Textures.Texture} [texture] - The key, or instance of the Texture this model will use to render with, as stored in the Texture Manager.
+     * @param {string|integer} [frame] - An optional frame from the Texture this model is rendering with. Ensure your UV data also matches this frame.
+     * @param {number} [scale=1] - An amount to scale the model data by during creation.
+     * @param {number} [originX=0] - The x origin of the model vertices during creation.
+     * @param {number} [originY=0] - The y origin of the model vertices during creation.
+     * @param {number} [originZ=0] - The z origin of the model vertices during creation.
+     *
+     * @return {Phaser.Geom.Mesh.Model|Phaser.Geom.Mesh.Model[]} The Model instance that was created. If the OBJ contained multiple models then an array of Model instances is returned.
+     */
+    addModelFromOBJ: function (key, texture, frame, scale, originX, originY, originZ)
+    {
+        var model = [];
+        var data = this.scene.sys.cache.obj.get(key);
+
+        if (data)
+        {
+            model = this.addModelFromData(data, texture, frame, scale, originX, originY, originZ);
+        }
+
+        return (model.length === 1) ? model[0] : model;
+    },
+
+    /**
+     * This method creates a new Model based on the parsed triangulated model data.
+     *
+     * The data should have been parsed in advance via a function such as `ParseObj`:
+     *
+     * ```javascript
+     * const data = Phaser.Geom.Mesh.ParseObj(rawData, flipUV);
+     *
+     * Mesh.addModelFromData(data, texture, frame);
+     * ```
+     *
+     * If the model has a texture, you must provide it as the second parameter.
+     *
+     * The model is then added to this Mesh. A single Mesh can contain multiple models
+     * without impacting each other. Equally, multiple models can all share the same base OBJ
+     * data.
+     *
+     * Make sure your 3D package has triangulated the model data prior to exporting it.
+     *
+     * You can scale the model data during import, which will set the new 'base' scale for the model.
+     *
+     * You can also offset the models generated vertex positions via the `originX`, `originY` and `originZ`
+     * parameters, which will change the rotation origin of the model. The model itself can be positioned,
+     * rotated and scaled independantly of these settings, so don't use them to position the model, just
+     * use them to offset the base values.
+     *
+     * @method Phaser.GameObjects.Mesh#addModelFromData
+     * @since 3.50.0
+     *
+     * @param {array} data - The parsed model data.
+     * @param {string|Phaser.Textures.Texture} [texture] - The key, or instance of the Texture this model will use to render with, as stored in the Texture Manager.
+     * @param {string|integer} [frame] - An optional frame from the Texture this model is rendering with. Ensure your UV data also matches this frame.
+     * @param {number} [scale=1] - An amount to scale the model data by during creation.
+     * @param {number} [originX=0] - The x origin of the model vertices during creation.
+     * @param {number} [originY=0] - The y origin of the model vertices during creation.
+     * @param {number} [originZ=0] - The z origin of the model vertices during creation.
+     *
+     * @return {Phaser.Geom.Mesh.Model|Phaser.Geom.Mesh.Model[]} The Model instance that was created. If the data contained multiple models then an array of Model instances is returned.
+     */
+    addModelFromData: function (data, texture, frame, scale, originX, originY, originZ)
+    {
+        if (scale === undefined) { scale = 1; }
+        if (originX === undefined) { originX = 0; }
+        if (originY === undefined) { originY = 0; }
+        if (originZ === undefined) { originZ = 0; }
+
+        var results = [];
+
+        for (var m = 0; m < data.models.length; m++)
+        {
+            var model = this.addModel(texture, frame);
+
+            var modelData = data.models[m];
+
+            var vertices = modelData.vertices;
+            var textureCoords = modelData.textureCoords;
+            var faces = modelData.faces;
+
+            var defaultUV1 = { u: 0, v: 1 };
+            var defaultUV2 = { u: 0, v: 0 };
+            var defaultUV3 = { u: 1, v: 1 };
+
+            for (var i = 0; i < faces.length; i++)
+            {
+                var face = faces[i];
+
+                var v1 = face.vertices[0];
+                var v2 = face.vertices[1];
+                var v3 = face.vertices[2];
+
+                var m1 = vertices[v1.vertexIndex];
+                var m2 = vertices[v2.vertexIndex];
+                var m3 = vertices[v3.vertexIndex];
+
+                var t1 = v1.textureCoordsIndex;
+                var t2 = v2.textureCoordsIndex;
+                var t3 = v3.textureCoordsIndex;
+
+                var uv1 = (t1 === -1) ? defaultUV1 : textureCoords[t1];
+                var uv2 = (t2 === -1) ? defaultUV2 : textureCoords[t2];
+                var uv3 = (t3 === -1) ? defaultUV3 : textureCoords[t3];
+
+                var vert1 = model.addVertex(originX + m1.x * scale, originY + m1.y * scale, originZ + m1.z * scale, uv1.u, uv1.v);
+                var vert2 = model.addVertex(originX + m2.x * scale, originY + m2.y * scale, originZ + m2.z * scale, uv2.u, uv2.v);
+                var vert3 = model.addVertex(originX + m3.x * scale, originY + m3.y * scale, originZ + m3.z * scale, uv3.u, uv3.v);
+
+                model.addFace(vert1, vert2, vert3);
+            }
+
+            results.push(model);
+        }
+
+        return results;
+    },
+
+    /**
+     * This method creates a new Model based on the given triangulated vertices arrays.
+     *
+     * The `vertices` parameter is a numeric array consisting of `x` and `y` pairs.
+     * The `uvs` parameter is a numeric array consisting of `u` and `v` pairs.
+     * The `indicies` parameter is an optional array that, if given, is an indexed list of vertices to be added.
+     *
+     * The following example will create a 256 x 256 sized quad using an index array:
+     *
+     * ```javascript
+     * const vertices = [
+     *   -128, 128,
+     *   128, 128,
+     *   -128, -128,
+     *   128, -128
+     * ];
+     *
+     * const uvs = [
+     *   0, 1,
+     *   1, 1,
+     *   0, 0,
+     *   1, 0
+     * ];
+     *
+     * const indices = [ 0, 2, 1, 2, 3, 1 ];
+     *
+     * Mesh.addModelFromVertices(vertices, uvs, indicies);
+     * ```
+     *
+     * Vertices must be provided as x/y pairs, there is no `z` component used in this call. For that, please see
+     * `addModelFromData` instead.
+     *
+     * @method Phaser.GameObjects.Mesh#addModelFromVertices
+     * @since 3.50.0
+     *
+     * @param {number[]} vertices - The vertices array.
+     * @param {number[]} uvs - The UVs array.
+     * @param {number[]} [indicies] - Optional vertex indicies array.
+     * @param {string|Phaser.Textures.Texture} [texture] - The key, or instance of the Texture this model will use to render with, as stored in the Texture Manager.
+     * @param {string|integer} [frame] - An optional frame from the Texture this model is rendering with.
+     * @param {number|number[]} [colors=0xffffff] - An array of colors, one per vertex, or a single color value applied to all vertices.
+     * @param {number|number[]} [alphas=1] - An array of alpha values, one per vertex, or a single alpha value applied to all vertices.
+     *
+     * @return {Phaser.Geom.Mesh.Model} The Model instance that was created.
+     */
+    addModelFromVertices: function (vertices, uvs, indicies, texture, frame, colors, alphas)
+    {
+        var model = this.addModel(texture, frame, 0, 0, 0);
+
+        model.addVertices(vertices, uvs, indicies, colors, alphas);
+
+        return model;
+    },
+
+    /**
+     * Return an array of Modes from this Mesh that intersect with the given coordinates.
+     *
+     * The given position is translated through the matrix of this Mesh and the given Camera,
+     * before being compared against the model vertices.
+     *
+     * If more than one model intersects, they will all be returned in the array, but the array will
+     * be depth sorted first, so the first element will always be that closest to the camera.
+     *
+     * @method Phaser.GameObjects.Mesh#getModelAt
+     * @since 3.50.0
+     *
+     * @param {number} x - The x position to check against.
+     * @param {number} y - The y position to check against.
+     * @param {Phaser.Cameras.Scene2D.Camera} [camera] - The camera to pass the coordinates through. If not given, the default Scene Camera is used.
+     *
+     * @return {Phaser.Geom.Mesh.Model[]} An array of Models objects that intersect with the given point, ordered by depth.
+     */
+    getModelAt: function (x, y, camera)
+    {
+        if (camera === undefined) { camera = this.scene.sys.cameras.main; }
+
+        var results = [];
+
+        var models = this.models;
+
+        var calcMatrix = GetCalcMatrix(this.mesh, camera).calc;
+
+        for (var i = 0; i < models.length; i++)
+        {
+            var model = models[i];
+
+            if (model.visible)
+            {
+                var faces = model.getFaceAt(x, y, camera, calcMatrix);
+
+                if (faces.length > 0)
+                {
+                    results.push({ model: model, faces: faces });
+                }
+            }
+        }
+
+        return results;
+    },
+
+    /**
+     * This method enables rendering of the Model vertices to the given Graphics instance.
+     *
+     * If you enable this feature, you **must** call `Graphics.clear()` in your Scene `update`,
+     * otherwise the Graphics instance you provide to debug will fill-up with draw calls,
+     * eventually crashing the browser. This is not done automatically to allow you to debug
+     * draw multiple Mesh objects to a single Graphics instance.
+     *
+     * You can toggle debug drawing on a per-Model basis via the `Model.drawDebug` boolean property.
+     *
+     * The Mesh class has a built-in debug rendering callback `Mesh.renderDebugVerts`, however
+     * you can also provide your own callback to be used instead. Do this by setting the `callback` parameter.
+     *
+     * The callback is invoked _once per render_ and sent the following parameters:
+     *
+     * `callback(src, meshLength, verts)`
+     *
+     * `src` is the Model instance being debugged.
+     * `verts` is an array of the translated vertex coordinates.
+     *
+     * If using your own callback you do not have to provide a Graphics instance to this method.
+     *
+     * To disable debug rendering, to either your own callback or the built-in one, call this method
+     * with no arguments.
+     *
+     * @method Phaser.GameObjects.Mesh#setDebug
+     * @since 3.50.0
+     *
+     * @param {Phaser.GameObjects.Graphics} [graphic] - The Graphic instance to render to if using the built-in callback.
+     * @param {function} [callback] - The callback to invoke during debug render. Leave as undefined to use the built-in callback.
+     *
+     * @return {this} This Game Object instance.
+     */
+    setDebug: function (graphic, callback)
+    {
+        this.debugGraphic = graphic;
+
+        if (!graphic && !callback)
+        {
+            this.debugCallback = null;
+        }
+        else if (!callback)
+        {
+            this.debugCallback = this.renderDebugVerts;
+        }
+        else
+        {
+            this.debugCallback = callback;
+        }
+
+        return this;
+    },
+
+    /**
+     * The Mesh update loop.
+     *
+     * @method Phaser.GameObjects.Mesh#preUpdate
+     * @protected
+     * @since 3.50.0
+     *
+     * @param {number} time - The current timestamp.
+     * @param {number} delta - The delta time, in ms, elapsed since the last frame.
+     */
+    preUpdate: function (time, delta)
+    {
+        var width = this.width;
+        var height = this.height;
+
+        var camera = this.camera;
+
+        if (camera.dirty || width !== this._prevWidth || height !== this._prevHeight)
+        {
+            //  Mesh has resized, flow that down to the Camera
+            camera.update(width, height);
+
+            this._prevWidth = width;
+            this._prevHeight = height;
+        }
+
+        var models = this.models;
+
+        for (var i = 0; i < models.length; i++)
+        {
+            var model = models[i];
+
+            if (model.visible)
+            {
+                model.preUpdate(time, delta, camera, width, height);
+            }
+        }
+
+        camera.dirty = false;
+    },
+
+    /**
+     * The built-in vertices debug rendering method.
+     *
+     * See `Mesh.setDebug` for more details.
+     *
+     * @method Phaser.GameObjects.Mesh#renderDebugVerts
+     * @since 3.50.0
+     *
+     * @param {Phaser.Geom.Mesh.Model} src - The Model being rendered.
+     * @param {number[]} verts - An array of translated vertex coordinates.
+     */
+    renderDebugVerts: function (src, verts)
+    {
+        var graphic = src.debugGraphic;
+
+        for (var i = 0; i < verts.length; i += 6)
+        {
+            var x0 = verts[i + 0];
+            var y0 = verts[i + 1];
+            var x1 = verts[i + 2];
+            var y1 = verts[i + 3];
+            var x2 = verts[i + 4];
+            var y2 = verts[i + 5];
+
+            graphic.strokeTriangle(x0, y0, x1, y1, x2, y2);
+        }
+    },
+
+    /**
+     * The destroy step for the Mesh, which removes all models, destroys the camera and
+     * nulls references.
+     *
+     * @method Phaser.GameObjects.Mesh#preDestroy
+     * @private
+     * @since 3.50.0
+     */
+    preDestroy: function ()
+    {
+        this.clearModels();
+
+        this.camera.destroy();
+
+        this.camera = null;
+
+        this.debugCallback = null;
+        this.debugGraphic = null;
+    }
 
 });
 

src/gameobjects/mesh/MeshCamera.js

@@ -0,0 +1,302 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2020 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+var Class = require('../../utils/Class');
+var DegToRad = require('../../math/DegToRad');
+var Matrix4 = require('../../math/Matrix4');
+var Vector3 = require('../../math/Vector3');
+var Vector4 = require('../../math/Vector4');
+
+/**
+ * @classdesc
+ * The Mesh Camera.
+ *
+ * @class MeshCamera
+ * @memberof Phaser.GameObjects
+ * @constructor
+ * @since 3.50.0
+ */
+var MeshCamera = new Class({
+
+    initialize:
+
+    function MeshCamera (fov, x, y, z, near, far)
+    {
+        this.dirty = true;
+        this.aspectRatio = 1;
+
+        this._fov = fov;
+        this._near = near;
+        this._far = far;
+
+        this.position = new Vector3();
+        this.rotation = new Vector3();
+
+        this.forward = new Vector4();
+        this.up = new Vector4(); //  What the up direction is, invert to get bottom
+        this.right = new Vector4();	//  What the right direction is, invert to get left
+
+        this.matView = new Matrix4();
+        this.viewMatrix = new Matrix4();
+        this.projectionMatrix = new Matrix4();
+
+        this.mode = MeshCamera.MODE_ORBIT;
+    },
+
+    panX: function (v)
+    {
+        this.updateViewMatrix();
+
+        this.position.addScale(this.right, v);
+    },
+
+    panY: function (v)
+    {
+        this.updateViewMatrix();
+
+        this.position.y += this.up.y * v;
+
+        if (this.mode === MeshCamera.MODE_ORBIT)
+        {
+            //  Can only move up and down the y axix in orbit mode
+            return;
+        }
+
+        this.position.x += this.up.x * v;
+        this.position.z += this.up.z * v;
+    },
+
+    panZ: function (v)
+    {
+        this.updateViewMatrix();
+
+        if (this.mode === MeshCamera.MODE_ORBIT)
+        {
+            //  orbit mode does translate after rotate, so only need to set Z, the rotate will handle the rest.
+            this.position.z += v;
+        }
+        else
+        {
+            //  In freemode to move forward, we need to move based on our forward which is relative to our current rotation
+            this.position.addScale(this.forward, v);
+        }
+    },
+
+    //  To have different modes of movements, this function handles the view matrix update for the transform object.
+    updateViewMatrix: function ()
+    {
+        var d = Math.PI / 180;
+        var matView = this.matView;
+        var rotation = this.rotation;
+
+        matView.identity();
+
+        //  Optimize camera transform update, no need for scale nor rotateZ
+        if (this.mode === MeshCamera.MODE_FREE)
+        {
+            matView.translate(this.position);
+            matView.rotateX(rotation.x * d);
+            matView.rotateY(rotation.y * d);
+        }
+        else
+        {
+            matView.rotateX(rotation.x * d);
+            matView.rotateY(rotation.y * d);
+            matView.translate(this.position);
+        }
+
+        this.updateDirection();
+
+        this.viewMatrix.copy(matView);
+        this.viewMatrix.invert();
+
+        this.dirty = true;
+    },
+
+    update: function (width, height)
+    {
+        this.aspectRatio = width / height;
+
+        this.updateViewMatrix();
+
+        this.projectionMatrix.perspective(DegToRad(this._fov), this.aspectRatio, this._near, this._far);
+    },
+
+    updateDirection: function ()
+    {
+        var matView = this.matView;
+
+        this.forward.set(0, 0, 1, 0).transformMat4(matView);
+        this.up.set(0, 1, 0, 0).transformMat4(matView);
+        this.right.set(1, 0, 0, 0).transformMat4(matView);
+    },
+
+    reset: function ()
+    {
+        this.position.set();
+        this.rotation.set();
+
+        this.updateViewMatrix();
+    },
+
+    fov: {
+
+        get: function ()
+        {
+            return this._fov;
+        },
+
+        set: function (value)
+        {
+            if (value > 0 && value < 180)
+            {
+                this._fov = value;
+                this.dirty = true;
+            }
+        }
+
+    },
+
+    near: {
+
+        get: function ()
+        {
+            return this._near;
+        },
+
+        set: function (value)
+        {
+            if (value > 0)
+            {
+                this._near = value;
+                this.dirty = true;
+            }
+        }
+
+    },
+
+    far: {
+
+        get: function ()
+        {
+            return this._far;
+        },
+
+        set: function (value)
+        {
+            if (value > 0)
+            {
+                this._far = value;
+                this.dirty = true;
+            }
+        }
+
+    },
+
+    x: {
+
+        get: function ()
+        {
+            return this.position.x;
+        },
+
+        set: function (value)
+        {
+            this.position.x = value;
+            this.updateViewMatrix();
+        }
+
+    },
+
+    y: {
+
+        get: function ()
+        {
+            return this.position.y;
+        },
+
+        set: function (value)
+        {
+            this.position.y = value;
+            this.updateViewMatrix();
+        }
+
+    },
+
+    z: {
+
+        get: function ()
+        {
+            return this.position.z;
+        },
+
+        set: function (value)
+        {
+            this.position.z = value;
+            this.updateViewMatrix();
+        }
+
+    },
+
+    rotationX: {
+
+        get: function ()
+        {
+            return this.rotation.x;
+        },
+
+        set: function (value)
+        {
+            this.rotation.x = value;
+            this.updateViewMatrix();
+        }
+
+    },
+
+    rotationY: {
+
+        get: function ()
+        {
+            return this.rotation.y;
+        },
+
+        set: function (value)
+        {
+            this.rotation.y = value;
+            this.updateViewMatrix();
+        }
+
+    },
+
+    rotationZ: {
+
+        get: function ()
+        {
+            return this.rotation.z;
+        },
+
+        set: function (value)
+        {
+            this.rotation.z = value;
+            this.updateViewMatrix();
+        }
+
+    },
+
+    destroy: function ()
+    {
+        //  TODO - Needed?
+    }
+
+});
+
+// Allows free movement of position and rotation
+MeshCamera.MODE_FREE = 0;
+
+// Movement is locked to rotate around the origin
+MeshCamera.MODE_ORBIT = 1;
+
+module.exports = MeshCamera;

src/gameobjects/mesh/MeshCanvasRenderer.js

@@ -13,7 +13,6 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Mesh} src - The Game Object being rendered in this call.
- * @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 MeshCanvasRenderer = function ()

src/gameobjects/mesh/MeshFactory.js

@@ -16,22 +16,23 @@ var GameObjectFactory = require('../GameObjectFactory');
  * @webglOnly
  * @since 3.0.0
  *
- * @param {number} x - The horizontal position of this Game Object in the world.
- * @param {number} y - The vertical position of this Game Object in the world.
- * @param {number[]} vertices - An array containing the vertices data for this Mesh.
- * @param {number[]} uv - An array containing the uv data for this Mesh.
- * @param {number[]} colors - An array containing the color data for this Mesh.
- * @param {number[]} alphas - An array containing the alpha data for this Mesh.
- * @param {(string|Phaser.Textures.Texture)} texture - The key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
- * @param {(string|integer)} [frame] - An optional frame from the Texture this Game Object is rendering with.
+ * @param {number} [x] - The horizontal position of this Game Object in the world.
+ * @param {number} [y] - The vertical position of this Game Object in the world.
+ * @param {string|Phaser.Textures.Texture} [texture] - The key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
+ * @param {string|integer} [frame] - An optional frame from the Texture this Game Object is rendering with.
+ * @param {number[]} [vertices] - An array containing the vertices data for this Mesh.
+ * @param {number[]} [uvs] - An array containing the uv data for this Mesh.
+ * @param {number[]} [indicies] - An array containing the vertex indicies for this Mesh.
+ * @param {number|number[]} [colors=0xffffff] - An array containing the color data for this Mesh.
+ * @param {number|number[]} [alphas=1] - An array containing the alpha data for this Mesh.
  *
  * @return {Phaser.GameObjects.Mesh} The Game Object that was created.
  */
 if (typeof WEBGL_RENDERER)
 {
-    GameObjectFactory.register('mesh', function (x, y, vertices, uv, colors, alphas, texture, frame)
+    GameObjectFactory.register('mesh', function (x, y, texture, frame, vertices, uvs, indicies, colors, alphas)
     {
-        return this.displayList.add(new Mesh(this.scene, x, y, vertices, uv, colors, alphas, texture, frame));
+        return this.displayList.add(new Mesh(this.scene, x, y, texture, frame, vertices, uvs, indicies, colors, alphas));
     });
 }
 

src/gameobjects/mesh/MeshWebGLRenderer.js

@@ -4,7 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
-var Utils = require('../../renderer/webgl/Utils');
+var GetCalcMatrix = require('../GetCalcMatrix');
 
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
@@ -17,94 +17,101 @@ var Utils = require('../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Mesh} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var MeshWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var MeshWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var models = src.models;
+    var totalModels = models.length;
 
-    renderer.setPipeline(pipeline, src);
-
-    var camMatrix = pipeline._tempMatrix1;
-    var spriteMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
-
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
+    if (totalModels === 0)
     {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        spriteMatrix.e = src.x;
-        spriteMatrix.f = src.y;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-    else
-    {
-        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
-        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
+        return;
     }
 
-    var vertices = src.vertices;
-    var uvs = src.uv;
-    var colors = src.colors;
-    var alphas = src.alphas;
+    var pipeline = renderer.pipelines.set(src.pipeline, src);
 
-    var meshVerticesLength = vertices.length;
-    var vertexCount = Math.floor(meshVerticesLength * 0.5);
-
-    if (pipeline.vertexCount + vertexCount > pipeline.vertexCapacity)
-    {
-        pipeline.flush();
-    }
-
-    var textureUnit = pipeline.setGameObject(src);
-
-    var vertexViewF32 = pipeline.vertexViewF32;
-    var vertexViewU32 = pipeline.vertexViewU32;
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
 
     var vertexOffset = (pipeline.vertexCount * pipeline.vertexComponentCount) - 1;
 
-    var colorIndex = 0;
-    var tintEffect = src.tintFill;
+    var debugVerts;
+    var debugCallback = src.debugCallback;
 
-    for (var i = 0; i < meshVerticesLength; i += 2)
+    var a = calcMatrix.a;
+    var b = calcMatrix.b;
+    var c = calcMatrix.c;
+    var d = calcMatrix.d;
+    var e = calcMatrix.e;
+    var f = calcMatrix.f;
+
+    var F32 = pipeline.vertexViewF32;
+    var U32 = pipeline.vertexViewU32;
+
+    var globalAlpha = camera.alpha * src.alpha;
+
+    for (var m = 0; m < totalModels; m++)
     {
-        var x = vertices[i + 0];
-        var y = vertices[i + 1];
+        var model = models[m];
 
-        var tx = x * calcMatrix.a + y * calcMatrix.c + calcMatrix.e;
-        var ty = x * calcMatrix.b + y * calcMatrix.d + calcMatrix.f;
+        var faces = model.faces;
+        var totalFaces = faces.length;
+        var alpha = globalAlpha * model.alpha;
 
-        if (camera.roundPixels)
+        if (totalFaces === 0 || !model.visible || alpha <= 0)
         {
-            tx = Math.round(tx);
-            ty = Math.round(ty);
+            continue;
         }
 
-        vertexViewF32[++vertexOffset] = tx;
-        vertexViewF32[++vertexOffset] = ty;
-        vertexViewF32[++vertexOffset] = uvs[i + 0];
-        vertexViewF32[++vertexOffset] = uvs[i + 1];
-        vertexViewF32[++vertexOffset] = textureUnit;
-        vertexViewF32[++vertexOffset] = tintEffect;
-        vertexViewU32[++vertexOffset] = Utils.getTintAppendFloatAlpha(colors[colorIndex], camera.alpha * alphas[colorIndex]);
-
-        colorIndex++;
+        if (debugCallback)
+        {
+            debugVerts = [];
         }
 
-    pipeline.vertexCount += vertexCount;
+        var tintEffect = model.tintFill;
+        var textureUnit = pipeline.setGameObject(model);
+
+        for (var i = 0; i < totalFaces; i++)
+        {
+            var face = faces[i];
+
+            if (model.hideCCW && !face.isCounterClockwise())
+            {
+                continue;
+            }
+
+            if (pipeline.shouldFlush(3))
+            {
+                pipeline.flush();
+
+                vertexOffset = 0;
+            }
+
+            vertexOffset = face.vertex1.load(F32, U32, vertexOffset, textureUnit, tintEffect, alpha, a, b, c, d, e, f);
+            vertexOffset = face.vertex2.load(F32, U32, vertexOffset, textureUnit, tintEffect, alpha, a, b, c, d, e, f);
+            vertexOffset = face.vertex3.load(F32, U32, vertexOffset, textureUnit, tintEffect, alpha, a, b, c, d, e, f);
+
+            pipeline.vertexCount += 3;
+
+            if (debugCallback && model.drawDebug)
+            {
+                debugVerts.push(
+                    F32[vertexOffset - 20],
+                    F32[vertexOffset - 19],
+                    F32[vertexOffset - 13],
+                    F32[vertexOffset - 12],
+                    F32[vertexOffset - 6],
+                    F32[vertexOffset - 5]
+                );
+            }
+        }
+
+        if (debugCallback && model.drawDebug)
+        {
+            debugCallback.call(src, src, debugVerts);
+        }
+    }
 };
 
 module.exports = MeshWebGLRenderer;

src/gameobjects/particles/ParticleManagerCanvasRenderer.js

@@ -15,11 +15,10 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Particles.ParticleEmitterManager} emitterManager - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpolationPercentage, camera, parentMatrix)
+var ParticleManagerCanvasRenderer = function (renderer, emitterManager, camera, parentMatrix)
 {
     var emitters = emitterManager.emitters.list;
     var emittersLength = emitters.length;

src/gameobjects/particles/ParticleManagerWebGLRenderer.js

@@ -17,11 +17,10 @@ var Utils = require('../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Particles.ParticleEmitterManager} emitterManager - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ParticleManagerWebGLRenderer = function (renderer, emitterManager, interpolationPercentage, camera, parentMatrix)
+var ParticleManagerWebGLRenderer = function (renderer, emitterManager, camera, parentMatrix)
 {
     var emitters = emitterManager.emitters.list;
     var emittersLength = emitters.length;
@@ -31,7 +30,7 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, interpola
         return;
     }
 
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
     var camMatrix = pipeline._tempMatrix1.copyFrom(camera.matrix);
     var calcMatrix = pipeline._tempMatrix2;
@@ -40,11 +39,9 @@ var ParticleManagerWebGLRenderer = function (renderer, emitterManager, interpola
 
     camMatrix.multiply(managerMatrix);
 
-    renderer.setPipeline(pipeline);
-
     var roundPixels = camera.roundPixels;
     var texture = emitterManager.defaultFrame.glTexture;
-    var getTint = Utils.getTintAppendFloatAlphaAndSwap;
+    var getTint = Utils.getTintAppendFloatAlpha;
 
     var textureUnit = pipeline.setGameObject(emitterManager, emitterManager.defaultFrame);
 

src/gameobjects/rendertexture/RenderTexture.js

@@ -330,8 +330,10 @@ var RenderTexture = new Class({
      * texture will not change.
      *
      * If Render Texture was not created from specific frame, the following will happen:
+     *
      * In WebGL it will destroy and then re-create the frame buffer being used by the Render Texture.
      * In Canvas it will resize the underlying canvas element.
+     *
      * Both approaches will erase everything currently drawn to the Render Texture.
      *
      * If the dimensions given are the same as those already being used, calling this method will do nothing.

src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js

@@ -15,11 +15,10 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.RenderTexture} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var RenderTextureCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var RenderTextureCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     renderer.batchSprite(src, src.frame, camera, parentMatrix);
 };

src/gameobjects/rendertexture/RenderTextureWebGLRenderer.js

@@ -17,19 +17,16 @@ var Utils = require('../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.RenderTexture} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var RenderTextureWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var RenderTextureWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     var frame = src.frame;
     var width = frame.width;
     var height = frame.height;
     var getTint = Utils.getTintAppendFloatAlpha;
-    var pipeline = src.pipeline;
-
-    renderer.setPipeline(pipeline, src);
+    var pipeline = renderer.pipelines.set(src.pipeline, src);
 
     var textureUnit = pipeline.setTexture2D(frame.glTexture, src);
 
@@ -45,11 +42,11 @@ var RenderTextureWebGLRenderer = function (renderer, src, interpolationPercentag
         src.scrollFactorX, src.scrollFactorY,
         src.displayOriginX, src.displayOriginY,
         0, 0, width, height,
-        getTint(src._tintTL, camera.alpha * src._alphaTL),
-        getTint(src._tintTR, camera.alpha * src._alphaTR),
-        getTint(src._tintBL, camera.alpha * src._alphaBL),
-        getTint(src._tintBR, camera.alpha * src._alphaBR),
-        (src._isTinted && src.tintFill),
+        getTint(src.tintTopLeft, camera.alpha * src._alphaTL),
+        getTint(src.tintTopRight, camera.alpha * src._alphaTR),
+        getTint(src.tintBottomLeft, camera.alpha * src._alphaBL),
+        getTint(src.tintBottomRight, camera.alpha * src._alphaBR),
+        src.tintFill,
         0, 0,
         camera,
         parentMatrix,

src/gameobjects/rope/Rope.js

@@ -4,10 +4,12 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var AnimationState = require('../../animations/AnimationState');
 var Class = require('../../utils/Class');
 var Components = require('../components');
 var GameObject = require('../GameObject');
 var GameObjectEvents = require('../events');
+var PIPELINE_CONST = require('../../renderer/webgl/pipelines/const');
 var RopeRender = require('./RopeRender');
 var Vector2 = require('../../math/Vector2');
 
@@ -83,13 +85,13 @@ var Rope = new Class({
         GameObject.call(this, scene, 'Rope');
 
         /**
-         * The Animation Controller of this Rope.
+         * The Animation State of this Rope.
          *
          * @name Phaser.GameObjects.Rope#anims
-         * @type {Phaser.GameObjects.Components.Animation}
+         * @type {Phaser.Animation.AnimationState}
          * @since 3.23.0
          */
-        this.anims = new Components.Animation(this);
+        this.anims = new AnimationState(this);
 
         /**
          * An array containing the points data for this Rope.
@@ -165,15 +167,14 @@ var Rope = new Class({
         /**
          * The tint fill mode.
          *
-         * 0 = An additive tint (the default), where vertices colors are blended with the texture.
-         * 1 = A fill tint, where the vertices colors replace the texture, but respects texture alpha.
-         * 2 = A complete tint, where the vertices colors replace the texture, including alpha, entirely.
+        * `false` = An additive tint (the default), where vertices colors are blended with the texture.
+        * `true` = A fill tint, where the vertices colors replace the texture, but respects texture alpha.
          *
          * @name Phaser.GameObjects.Rope#tintFill
-         * @type {integer}
+         * @type {boolean}
          * @since 3.23.0
          */
-        this.tintFill = (texture === '__DEFAULT') ? 2 : 0;
+        this.tintFill = (texture === '__DEFAULT') ? true : false;
 
         /**
          * If the Rope is marked as `dirty` it will automatically recalculate its vertices
@@ -274,7 +275,7 @@ var Rope = new Class({
         this.setTexture(texture, frame);
         this.setPosition(x, y);
         this.setSizeToFrame();
-        this.initPipeline('RopePipeline');
+        this.initPipeline(PIPELINE_CONST.ROPE_PIPELINE);
 
         if (Array.isArray(points))
         {
@@ -421,28 +422,26 @@ var Rope = new Class({
     /**
      * Sets the tint fill mode.
      *
-     * Mode 0 is an additive tint, the default, which blends the vertices colors with the texture.
+     * Mode 0 (`false`) is an additive tint, the default, which blends the vertices colors with the texture.
      * This mode respects the texture alpha.
      *
-     * Mode 1 is a fill tint. Unlike an additive tint, a fill-tint literally replaces the pixel colors
+     * Mode 1 (`true`) is a fill tint. Unlike an additive tint, a fill-tint literally replaces the pixel colors
      * from the texture with those in the tint. You can use this for effects such as making a player flash 'white'
      * if hit by something. This mode respects the texture alpha.
      *
-     * Mode 2 is a complete tint. The texture colors and alpha are replaced entirely by the vertices colors.
-     *
      * See the `setColors` method for details of how to color each of the vertices.
      *
      * @method Phaser.GameObjects.Rope#setTintFill
      * @webglOnly
      * @since 3.23.0
      *
-     * @param {integer} [value=0] - Set to 0 for an Additive tint, 1 for a fill tint with alpha, or 2 for a fill tint without alpha.
+     * @param {boolean} [value=false] - Set to `false` for an Additive tint or `true` fill tint with alpha.
      *
      * @return {this} This Game Object instance.
      */
     setTintFill: function (value)
     {
-        if (value === undefined) { value = 0; }
+        if (value === undefined) { value = false; }
 
         this.tintFill = value;
 
@@ -949,9 +948,10 @@ var Rope = new Class({
     /**
      * This method enables rendering of the Rope vertices to the given Graphics instance.
      *
-     * If you enable this feature, you must call `Graphics.clear()` in your Scene `update`,
-     * otherwise the Graphics instance will fill-in with draw calls. This is not done automatically
-     * to allow for you to debug render multiple Rope objects to a single Graphics instance.
+     * If you enable this feature, you **must** call `Graphics.clear()` in your Scene `update`,
+     * otherwise the Graphics instance you provide to debug will fill-up with draw calls,
+     * eventually crashing the browser. This is not done automatically to allow you to debug
+     * draw multiple Rope objects to a single Graphics instance.
      *
      * The Rope class has a built-in debug rendering callback `Rope.renderDebugVerts`, however
      * you can also provide your own callback to be used instead. Do this by setting the `callback` parameter.

src/gameobjects/rope/RopeCanvasRenderer.js

@@ -13,7 +13,6 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Rope} src - The Game Object being rendered in this call.
- * @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 RopeCanvasRenderer = function ()

src/gameobjects/rope/RopeWebGLRenderer.js

@@ -4,6 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../GetCalcMatrix');
 var Utils = require('../../renderer/webgl/Utils');
 
 /**
@@ -17,51 +18,21 @@ var Utils = require('../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Rope} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var RopeWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var RopeWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = src.pipeline;
+    var pipeline = renderer.pipelines.set(src.pipeline, src);
 
-    renderer.setPipeline(pipeline, src);
-
-    var camMatrix = pipeline._tempMatrix1;
-    var spriteMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
-
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        spriteMatrix.e = src.x;
-        spriteMatrix.f = src.y;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
-    else
-    {
-        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
-        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
-
-        //  Multiply by the Sprite matrix, store result in calcMatrix
-        camMatrix.multiply(spriteMatrix, calcMatrix);
-    }
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
 
     var vertices = src.vertices;
     var uvs = src.uv;
     var colors = src.colors;
     var alphas = src.alphas;
     var alpha = src.alpha;
-    var getTint = Utils.getTintAppendFloatAlphaAndSwap;
+    var getTint = Utils.getTintAppendFloatAlpha;
     var roundPixels = camera.roundPixels;
 
     var meshVerticesLength = vertices.length;

src/gameobjects/shader/Shader.js

@@ -447,14 +447,12 @@ var Shader = new Class({
 
         if (this.shader)
         {
-            var pipeline = renderer.currentPipeline;
-
-            renderer.clearPipeline();
+            renderer.pipelines.clear();
 
             this.load();
             this.flush();
 
-            renderer.rebindPipeline(pipeline);
+            renderer.pipelines.rebind();
         }
 
         return this;

src/gameobjects/shader/ShaderCanvasRenderer.js

@@ -13,7 +13,6 @@
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Shader} src - The Game Object being rendered in this call.
- * @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 ShaderCanvasRenderer = function ()

src/gameobjects/shader/ShaderWebGLRenderer.js

@@ -4,6 +4,8 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../GetCalcMatrix');
+
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -15,20 +17,17 @@
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Shader} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ShaderWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var ShaderWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
     if (!src.shader)
     {
         return;
     }
 
-    var pipeline = renderer.currentPipeline;
-
-    renderer.clearPipeline();
+    renderer.pipelines.clear();
 
     if (src.renderToTexture)
     {
@@ -37,30 +36,7 @@ var ShaderWebGLRenderer = function (renderer, src, interpolationPercentage, came
     }
     else
     {
-        var camMatrix = src._tempMatrix1;
-        var shapeMatrix = src._tempMatrix2;
-        var calcMatrix = src._tempMatrix3;
-    
-        shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-    
-        camMatrix.copyFrom(camera.matrix);
-    
-        if (parentMatrix)
-        {
-            //  Multiply the camera by the parent matrix
-            camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-    
-            //  Undo the camera scroll
-            shapeMatrix.e = src.x;
-            shapeMatrix.f = src.y;
-        }
-        else
-        {
-            shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-            shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-        }
-    
-        camMatrix.multiply(shapeMatrix, calcMatrix);
+        var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
 
         //  Renderer size changed?
         if (renderer.width !== src._rendererWidth || renderer.height !== src._rendererHeight)
@@ -72,7 +48,7 @@ var ShaderWebGLRenderer = function (renderer, src, interpolationPercentage, came
         src.flush();
     }
 
-    renderer.rebindPipeline(pipeline);
+    renderer.pipelines.rebind();
 };
 
 module.exports = ShaderWebGLRenderer;

src/gameobjects/shape/FillPathWebGL.js

@@ -22,7 +22,7 @@ var Utils = require('../../renderer/webgl/Utils');
  */
 var FillPathWebGL = function (pipeline, calcMatrix, src, alpha, dx, dy)
 {
-    var fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * alpha);
+    var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
 
     var path = src.pathData;
     var pathIndexes = src.pathIndexes;

src/gameobjects/shape/StrokePathWebGL.js

@@ -22,7 +22,7 @@ var Utils = require('../../renderer/webgl/Utils');
 var StrokePathWebGL = function (pipeline, src, alpha, dx, dy)
 {
     var strokeTint = pipeline.strokeTint;
-    var strokeTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.strokeColor, src.strokeAlpha * alpha);
+    var strokeTintColor = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
 
     strokeTint.TL = strokeTintColor;
     strokeTint.TR = strokeTintColor;

src/gameobjects/shape/arc/ArcCanvasRenderer.js

@@ -20,11 +20,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Arc} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ArcCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var ArcCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/arc/ArcWebGLRenderer.js

@@ -4,6 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var FillPathWebGL = require('../FillPathWebGL');
 var StrokePathWebGL = require('../StrokePathWebGL');
 
@@ -18,40 +19,16 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Arc} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ArcWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var ArcWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;

src/gameobjects/shape/curve/CurveCanvasRenderer.js

@@ -19,11 +19,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Curve} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var CurveCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/curve/CurveWebGLRenderer.js

@@ -5,6 +5,7 @@
  */
 
 var FillPathWebGL = require('../FillPathWebGL');
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var StrokePathWebGL = require('../StrokePathWebGL');
 
 /**
@@ -18,40 +19,16 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Curve} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var CurveWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var CurveWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     var dx = src._displayOriginX + src._curveBounds.x;
     var dy = src._displayOriginY + src._curveBounds.y;

src/gameobjects/shape/ellipse/EllipseCanvasRenderer.js

@@ -19,11 +19,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Ellipse} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var EllipseCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var EllipseCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/ellipse/EllipseWebGLRenderer.js

@@ -5,6 +5,7 @@
  */
 
 var FillPathWebGL = require('../FillPathWebGL');
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var StrokePathWebGL = require('../StrokePathWebGL');
 
 /**
@@ -18,40 +19,16 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Ellipse} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var EllipseWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var EllipseWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;

src/gameobjects/shape/grid/GridCanvasRenderer.js

@@ -19,11 +19,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Grid} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var GridCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/grid/GridWebGLRenderer.js

@@ -4,6 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
 
 /**
@@ -17,40 +18,16 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Grid} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var GridWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     calcMatrix.translate(-src._displayOriginX, -src._displayOriginY);
 
@@ -108,7 +85,7 @@ var GridWebGLRenderer = function (renderer, src, interpolationPercentage, camera
     if (showCells && src.fillAlpha > 0)
     {
         fillTint = pipeline.fillTint;
-        fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * alpha);
+        fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
 
         fillTint.TL = fillTintColor;
         fillTint.TR = fillTintColor;
@@ -148,7 +125,7 @@ var GridWebGLRenderer = function (renderer, src, interpolationPercentage, camera
     if (showAltCells && src.altFillAlpha > 0)
     {
         fillTint = pipeline.fillTint;
-        fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.altFillColor, src.altFillAlpha * alpha);
+        fillTintColor = Utils.getTintAppendFloatAlpha(src.altFillColor, src.altFillAlpha * alpha);
 
         fillTint.TL = fillTintColor;
         fillTint.TR = fillTintColor;
@@ -188,7 +165,7 @@ var GridWebGLRenderer = function (renderer, src, interpolationPercentage, camera
     if (showOutline && src.outlineFillAlpha > 0)
     {
         var strokeTint = pipeline.strokeTint;
-        var color = Utils.getTintAppendFloatAlphaAndSwap(src.outlineFillColor, src.outlineFillAlpha * alpha);
+        var color = Utils.getTintAppendFloatAlpha(src.outlineFillColor, src.outlineFillAlpha * alpha);
 
         strokeTint.TL = color;
         strokeTint.TR = color;

src/gameobjects/shape/isobox/IsoBoxCanvasRenderer.js

@@ -18,11 +18,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.IsoBox} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var IsoBoxCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var IsoBoxCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/isobox/IsoBoxWebGLRenderer.js

@@ -4,6 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
 
 /**
@@ -17,40 +18,16 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.IsoBox} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var IsoBoxWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     var size = src.width;
     var height = src.height;
@@ -85,7 +62,7 @@ var IsoBoxWebGLRenderer = function (renderer, src, interpolationPercentage, came
 
     if (src.showTop)
     {
-        tint = Utils.getTintAppendFloatAlphaAndSwap(src.fillTop, alpha);
+        tint = Utils.getTintAppendFloatAlpha(src.fillTop, alpha);
 
         x0 = calcMatrix.getX(-sizeA, -height);
         y0 = calcMatrix.getY(-sizeA, -height);
@@ -99,14 +76,14 @@ var IsoBoxWebGLRenderer = function (renderer, src, interpolationPercentage, came
         x3 = calcMatrix.getX(0, sizeB - height);
         y3 = calcMatrix.getY(0, sizeB - height);
 
-        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 1);
     }
 
     //  Left Face
 
     if (src.showLeft)
     {
-        tint = Utils.getTintAppendFloatAlphaAndSwap(src.fillLeft, alpha);
+        tint = Utils.getTintAppendFloatAlpha(src.fillLeft, alpha);
 
         x0 = calcMatrix.getX(-sizeA, 0);
         y0 = calcMatrix.getY(-sizeA, 0);
@@ -120,14 +97,14 @@ var IsoBoxWebGLRenderer = function (renderer, src, interpolationPercentage, came
         x3 = calcMatrix.getX(-sizeA, -height);
         y3 = calcMatrix.getY(-sizeA, -height);
 
-        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 1);
     }
 
     //  Right Face
 
     if (src.showRight)
     {
-        tint = Utils.getTintAppendFloatAlphaAndSwap(src.fillRight, alpha);
+        tint = Utils.getTintAppendFloatAlpha(src.fillRight, alpha);
 
         x0 = calcMatrix.getX(sizeA, 0);
         y0 = calcMatrix.getY(sizeA, 0);
@@ -141,7 +118,7 @@ var IsoBoxWebGLRenderer = function (renderer, src, interpolationPercentage, came
         x3 = calcMatrix.getX(sizeA, -height);
         y3 = calcMatrix.getY(sizeA, -height);
 
-        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 1);
     }
 };
 

src/gameobjects/shape/isotriangle/IsoTriangleCanvasRenderer.js

@@ -18,11 +18,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.IsoTriangle} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var IsoTriangleCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var IsoTriangleCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/isotriangle/IsoTriangleWebGLRenderer.js

@@ -4,6 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
 
 /**
@@ -17,40 +18,16 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.IsoTriangle} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var IsoTriangleWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     var size = src.width;
     var height = src.height;
@@ -84,7 +61,7 @@ var IsoTriangleWebGLRenderer = function (renderer, src, interpolationPercentage,
 
     if (src.showTop && reversed)
     {
-        tint = Utils.getTintAppendFloatAlphaAndSwap(src.fillTop, alpha);
+        tint = Utils.getTintAppendFloatAlpha(src.fillTop, alpha);
 
         x0 = calcMatrix.getX(-sizeA, -height);
         y0 = calcMatrix.getY(-sizeA, -height);
@@ -98,14 +75,14 @@ var IsoTriangleWebGLRenderer = function (renderer, src, interpolationPercentage,
         var x3 = calcMatrix.getX(0, sizeB - height);
         var y3 = calcMatrix.getY(0, sizeB - height);
 
-        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        pipeline.batchQuad(x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 1);
     }
 
     //  Left Face
 
     if (src.showLeft)
     {
-        tint = Utils.getTintAppendFloatAlphaAndSwap(src.fillLeft, alpha);
+        tint = Utils.getTintAppendFloatAlpha(src.fillLeft, alpha);
 
         if (reversed)
         {
@@ -130,14 +107,14 @@ var IsoTriangleWebGLRenderer = function (renderer, src, interpolationPercentage,
             y2 = calcMatrix.getY(0, sizeB - height);
         }
 
-        pipeline.batchTri(x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 2);
+        pipeline.batchTri(x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 1);
     }
 
     //  Right Face
 
     if (src.showRight)
     {
-        tint = Utils.getTintAppendFloatAlphaAndSwap(src.fillRight, alpha);
+        tint = Utils.getTintAppendFloatAlpha(src.fillRight, alpha);
 
         if (reversed)
         {
@@ -162,7 +139,7 @@ var IsoTriangleWebGLRenderer = function (renderer, src, interpolationPercentage,
             y2 = calcMatrix.getY(0, sizeB - height);
         }
 
-        pipeline.batchTri(x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 2);
+        pipeline.batchTri(x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 1);
     }
 };
 

src/gameobjects/shape/line/LineCanvasRenderer.js

@@ -18,11 +18,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Line} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var LineCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var LineCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/line/LineWebGLRenderer.js

@@ -4,6 +4,7 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
 
 /**
@@ -17,37 +18,16 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Line} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var LineWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var LineWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
+    pipeline._tempMatrix3.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
@@ -56,7 +36,7 @@ var LineWebGLRenderer = function (renderer, src, interpolationPercentage, camera
     if (src.isStroked)
     {
         var strokeTint = pipeline.strokeTint;
-        var color = Utils.getTintAppendFloatAlphaAndSwap(src.strokeColor, src.strokeAlpha * alpha);
+        var color = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
 
         strokeTint.TL = color;
         strokeTint.TR = color;
@@ -78,8 +58,8 @@ var LineWebGLRenderer = function (renderer, src, interpolationPercentage, camera
             1,
             0,
             false,
-            shapeMatrix,
-            camMatrix
+            result.sprite,
+            result.camera
         );
     }
 };

src/gameobjects/shape/polygon/PolygonCanvasRenderer.js

@@ -19,11 +19,10 @@ var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {Phaser.GameObjects.Polygon} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var PolygonCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var PolygonCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var ctx = renderer.currentContext;
 

src/gameobjects/shape/polygon/PolygonWebGLRenderer.js

@@ -5,6 +5,7 @@
  */
 
 var FillPathWebGL = require('../FillPathWebGL');
+var GetCalcMatrix = require('../../GetCalcMatrix');
 var StrokePathWebGL = require('../StrokePathWebGL');
 
 /**
@@ -18,40 +19,16 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Polygon} src - The Game Object being rendered in this call.
- * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var PolygonWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var PolygonWebGLRenderer = function (renderer, src, camera, parentMatrix)
 {
-    var pipeline = this.pipeline;
+    var pipeline = renderer.pipelines.set(this.pipeline);
 
-    var camMatrix = pipeline._tempMatrix1;
-    var shapeMatrix = pipeline._tempMatrix2;
-    var calcMatrix = pipeline._tempMatrix3;
+    var result = GetCalcMatrix(src, camera, parentMatrix);
 
-    renderer.setPipeline(pipeline);
-
-    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
-    {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
-
-        //  Undo the camera scroll
-        shapeMatrix.e = src.x;
-        shapeMatrix.f = src.y;
-    }
-    else
-    {
-        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
-        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
-    }
-
-    camMatrix.multiply(shapeMatrix, calcMatrix);
+    var calcMatrix = pipeline._tempMatrix3.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;