Merge remote-tracking branch 'origin/master' into Fix_object_types

.eslintignore

@@ -8,8 +8,10 @@ src/geom/polygon/Earcut.js
 src/utils/array/StableSort.js
 src/utils/object/Extend.js
 src/structs/RTree.js
+src/layer3d/
 plugins/spine/dist/
 plugins/spine/src/runtimes/
+scripts/
 webpack.*
 webpack.config.js
 webpack.dist.config.js

.gitattributes

@@ -7,7 +7,11 @@
 *.ts text
 *.md text
 *.json text
+*.vert text
+*.frag text
 
 # Denote all files that are truly binary and should not be modified.
 *.png binary
 *.jpg binary
+*.ico binary
+*.gif binary

.github/ISSUE_TEMPLATE/bug_report.md

@@ -9,7 +9,7 @@ Thank you for taking the time to contribute towards Phaser. Before submitting yo
 
 1. This repo is for Phaser 3 only. Phaser 2.x issues should be raised in the [Phaser CE](https://github.com/photonstorm/phaser-ce) repo.
 
-2. This repo should not be used for technical support. If you're struggling to use Phaser then post your question to the [forum](https://phaser.discourse.group/), [Slack](https://phaser.io/community/slack) or [Discord](https://phaser.io/community/discord) channels. GitHub Issues are for bugs and feature requests only.
+2. This repo should not be used for technical support. If you're struggling to use Phaser then post your question to the [forum](https://phaser.discourse.group/) or [Discord](https://phaser.io/community/discord) channels. GitHub Issues are for bugs and feature requests only.
 
 3. Make sure your issue isn't a duplicate, or has already been fixed.
 

CHANGELOG-v3.50.md

@@ -10,6 +10,8 @@ Due to the huge amount of work that has taken place in this area, all of the pip
 * `TextureTintStripPipeline` is now called the `RopePipeline`.
 * `ForwardDiffuseLightPipeline` is now called the `LightPipeline`.
 
+There is also the new `GraphicsPipeline`. Previously, the `TextureTintPipeline` was responsible for rendering all Sprites, Graphics and Shape objects. Now, it only renders Sprites. All Graphics and Shapes are handled by the new `GraphicsPipeline` which uses its own shaders. See below for details about this change.
+
 To match the new pipeline names, the shader source code has also been renamed.
 
 * `ForwardDiffuse.frag` is now called `Light.frag`.
@@ -18,6 +20,7 @@ To match the new pipeline names, the shader source code has also been renamed.
 
 Other pipeline changes are as follows:
 
+* None of the shaders or pipelines use the `uViewMatrix` and `uModelMatrix` uniforms any longer. These were always just plain identity matrices, so there is no point spending CPU and GPU time to set them as uniforms, or use them in the shaders. Should you need these uniforms, you can add them to your own custom pipelines.
 * `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.
@@ -29,6 +32,71 @@ Other pipeline changes are as follows:
 * 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.
+* The `RopePipeline` now extends `MultiPipeline` and just changes the topology, vastly reducing the filesize.
+* The `WebGLPipeline.flushLocked` property has been removed. A pipeline can never flush in the middle of a flush anyway, so it was just wasting CPU cycles being set.
+* You can now pass a pipeline instance to the `GameObject.setPipeline` method, as well as a string.
+* `WebGLPipeline.manager` is a new property that is a reference to the WebGL Pipeline Manager.
+* `WebGLPipeline.currentUnit` is a new property that holds the most recently assigned texture unit. Treat as read-only.
+* `WebGLPipeline.forceZero` is a new boolean property that sets if the pipeline should force the use of texture zero.
+* `WebGLPipeline.hasBooted` is a new boolean property that is set once the pipeline has finished setting itself up and has booted.
+* `WebGLPipeline.isPostFX` is a new boolean property that is only set by Post FX Pipelines to help identify them.
+* `WebGLPipeline.renderTargets` is a new property that holds an array of WebGL Render Targets belonging to the pipeline.
+* `WebGLPipeline.currentRenderTarget` is a new property that holds a reference to the currently bound Render Target.
+* `WebGLPipeline.shaders` is a new property that holds an array of all WebGLShader instances that belong to the pipeline.
+* `WebGLPipeline.currentShader` is a new property that holds a reference to the currently active shader within the pipeline.
+* `WebGLPipeline.config` is a new property that holds the pipeline configuration object used to create it.
+* `WebGLPipeline.projectionMatrix` is a new property that holds a Matrix4 used as the projection matrix for the pipeline.
+* `WebGLPipeline.setProjectionMatrix` is a new method that allows you to set the ortho projection matrix of the pipeline.
+* `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.
+* `WebGLPipeline.setAttribPointers` is a new method that will set the vertex attribute pointers for the pipeline.
+* `WebGLPipeline.setShader` is a new method that allows you to set the currently active shader within the pipeline.
+* `WebGLPipeline.getShaderByName` is a new method that allows you to get a shader from the pipeline based on its name.
+* `WebGLPipeline.setShadersFromConfig` is a new method that destroys all current shaders and creates brand new ones parsed from the given config object. This is part of the pipeline boot process, but also exposed should you need to call it directly.
+* `WebGLPipeline.setGameObject` is a new method that custom pipelines can use in order to perform pre-batch tasks for the given Game Object.
+* `WebGLPipeline.setVertexBuffer` is a new method that checks if the pipelines vertex buffer is active, or not, and if not, binds it as the active buffer. This used to be performed by the WebGL Renderer, but pipelines now manage this directly.
+* `WebGLPipeline.preBatch` is a new method that is called when a new quad is about to be added to the batch. This is used by Post FX Pipelines to set frame buffers.
+* `WebGLPipeline.postBatch` is a new method that is called after a quad has been added to the batch. This is used by Post FX Pipelines to apply post processing.
+* `WebGLPipeline.unbind` is a new method that unbinds the current Render Target, if one is set.
+* `WebGLPipeline.batchVert` is a new method that adds a single vertex to the vertex buffer and increments the count by 1.
+* `WebGLPipeline.batchQuad` is a new method that adds a single quad (6 vertices) to the vertex buffer and increments the count, flushing first if adding the quad would exceed the batch limit.
+* `WebGLPipeline.batchTri` is a new method that adds a single tri (3 vertices) to the vertex buffer and increments the count, flushing first if adding the tri would exceed the batch limit.
+* `WebGLPipeline.drawFillRect` is a new method that pushes a filled rectangle into the vertex batch.
+* `WebGLPipeline.setTexture2D` is a new method that sets the texture to be bound to the next available texture unit.
+* `WebGLPipeline.bindTexture` is a new method that immediately activates the given WebGL Texture and binds it to the requested slot.
+* `WebGLPipeline.bindRenderTarget` is a new method that binds the given Render Target to a given texture slot.
+* `WebGLPipeline.setTime` is a new method that gets the current game loop duration to the given shader uniform.
+
+### Pipeline Hooks
+
+WebGL Pipeline has lots of new hooks you can use. These are all empty by default so you can safely override them in your own classes and take advantage of them:
+
+* `WebGLPipeline.onBoot` is a new hook you can override in your own pipelines that is called when the pipeline has booted.
+* `WebGLPipeline.onResize` is a new hook you can override in your own pipelines that is called when the pipeline is resized.
+* `WebGLPipeline.onDraw` is a new hook you can override in your own pipelines that is called by Post FX Pipelines every time `postBatch` is invoked.
+* `WebGLPipeline.onActive` is a new hook you can override in your own pipelines that is called every time the Pipeline Manager makes the pipeline the active pipeline.
+* `WebGLPipeline.onBind` is a new hook you can override in your own pipelines that is called every time a Game Object asks the Pipeline Manager to use this pipeline, even if it's already active.
+* `WebGLPipeline.onRebind` is a new hook you can override in your own pipelines that is called every time the Pipeline Manager needs to reset and rebind the current pipeline.
+* `WebGLPipeline.onBatch` is a new hook you can override in your own pipelines that is called _after_ a new quad (or tri) has been added to the batch.
+* `WebGLPipeline.onPreBatch` is a new hook you can override in your own pipelines that is called _before_ a new Game Object is about to process itself through the batch.
+* `WebGLPipeline.onPostBatch` is a new hook you can override in your own pipelines that is called _after_ a new Game Object has added itself to the batch.
+* `WebGLPipeline.onPreRender` is a new hook you can override in your own pipelines that is called once, per frame, right before anything has been rendered.
+* `WebGLPipeline.onRender` is a new hook you can override in your own pipelines that is called once, per frame, by every Camera in the Scene that wants to render, at the start of the render process.
+* `WebGLPipeline.onPostRender` is a new hook you can override in your own pipelines that is called once, per frame, after all rendering has happened and snapshots have been taken.
+* `WebGLPipeline.onBeforeFlush` is a new hook you can override in your own pipelines that is called immediately before the `gl.bufferData` and `gl.drawArrays` calls are made, so you can perform any final pre-render modifications.
+* `WebGLPipeline.onAfterFlush` is a new hook you can override in your own pipelines that is called after `gl.drawArrays`, so you can perform additional post-render effects.
+
+### Pipeline Events
+
+The WebGL Pipeline class now extends Event Emitter and emits the following events:
+
+* The `WebGL.Pipelines.Events.AFTER_FLUSH` event is dispatched by a WebGL Pipeline right after it has issued a `drawArrays` command.
+* The `WebGL.Pipelines.Events.BEFORE_FLUSH` event is dispatched by a WebGL Pipeline right before it is about to flush.
+* The `WebGL.Pipelines.Events.BIND` event is dispatched by a WebGL Pipeline when it is bound by the Pipeline Manager.
+* The `WebGL.Pipelines.Events.BOOT` event is dispatched by a WebGL Pipeline when it has finished booting.
+* The `WebGL.Pipelines.Events.DESTROY` event is dispatched by a WebGL Pipeline when it begins its destruction process.
+* The `WebGL.Pipelines.Events.REBIND` event is dispatched by a WebGL Pipeline when the Pipeline Manager resets and rebinds it.
+* The `WebGL.Pipelines.Events.RESIZE` event is dispatched by a WebGL Pipeline when it is resized, usually as a result of the Renderer.
 
 ### Pipeline Uniform Changes
 
@@ -76,6 +144,11 @@ If your code uses any of the old method names, please update them using the list
 * `WebGLPipeline.setMatrix2` has been removed. Please use `setMatrix3fv` instead.
 * `WebGLPipeline.setMatrix3` has been removed. Please use `setMatrix4fv` instead.
 
+
+### Post FX Pipelines
+
+TODO - Explain them here + pipeline component updates.
+
 ### 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:
@@ -147,7 +220,6 @@ All of the internal functions, such as `batchQuad` and `batchSprite` have been u
 * 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.
@@ -157,13 +229,138 @@ All of the internal functions, such as `batchQuad` and `batchSprite` have been u
 * `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.
+* The `WebGL.Utils.getComponentCount` function has been removed as this is no longer required internally.
+
+### WebGLRenderer New Features, Updates and API Changes
+
+* `WebGLRenderer.instancedArraysExtension` is a new property that holds the WebGL Extension for instanced array drawing, if supported by the browser.
+* `WebGLRenderer.vaoExtension` is a new property that holds a reference to the Vertex Array Object WebGL Extension, if supported by the browser.
+* `WebGLRenderer.resetProgram` is a new method that will rebind the current program, without flushing or changing any properties.
+* `WebGLRenderer.textureFlush` is a new property that keeps track of the total texture flushes per frame.
+* `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)
+* `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.
+* `WebGLRenderer.defaultScissor` is a new property that holds the default scissor dimensions for the renderer. This is modified during `resize` and avoids continuous array generation in the `preRender` loop.
+* The `WebGLRenderer.nativeTextures` array has been removed and any WebGLTextures created by the renderer are no longer stored within it. All WebGLTexture instances are stored in the `TextureSource` objects anyway, or by local classes such as RenderTexture, so there was no need to have another array taking up memroy.
+* The `WebGLRenderer.deleteTexture` method has a new optional boolean parameter `reset` which allows you to control if the `WebGLRenderer.resetTextures` method is called, or not, after the texture is deleted.
+* The `WebGLRenderer.getMaxTextures` method has been removed. This is no longer needed as you can use the `WebGLRenderer.maxTextures` property instead.
+* The `WebGLRenderer.setProgram` method now returns a boolean. `true` if the program was set, otherwise `false`.
+* `WebGLRenderer.setFloat1` has been removed. Use `WebGLPipeline.set1f` or `WebGLShader.set1f` instead.
+* `WebGLRenderer.setFloat2` has been removed. Use `WebGLPipeline.set2f` or `WebGLShader.set2f` instead.
+* `WebGLRenderer.setFloat3` has been removed. Use `WebGLPipeline.set3f` or `WebGLShader.set3f` instead.
+* `WebGLRenderer.setFloat4` has been removed. Use `WebGLPipeline.set4f` or `WebGLShader.set4f` instead.
+* `WebGLRenderer.setFloat1v` has been removed. Use `WebGLPipeline.set1fv` or `WebGLShader.set1fv` instead.
+* `WebGLRenderer.setFloat2v` has been removed. Use `WebGLPipeline.set1fv` or `WebGLShader.set2fv` instead.
+* `WebGLRenderer.setFloat3v` has been removed. Use `WebGLPipeline.set1fv` or `WebGLShader.set3fv` instead.
+* `WebGLRenderer.setFloat4v` has been removed. Use `WebGLPipeline.set1fv` or `WebGLShader.set4fv` instead.
+* `WebGLRenderer.setInt1` has been removed. Use `WebGLPipeline.set1fi` or `WebGLShader.set1i` instead.
+* `WebGLRenderer.setInt2` has been removed. Use `WebGLPipeline.set1fi` or `WebGLShader.set2i` instead.
+* `WebGLRenderer.setInt3` has been removed. Use `WebGLPipeline.set1fi` or `WebGLShader.set3i` instead.
+* `WebGLRenderer.setInt4` has been removed. Use `WebGLPipeline.set1fi` or `WebGLShader.set4i` instead.
+* `WebGLRenderer.setMatrix2` has been removed. Use `WebGLPipeline.setMatrix2fv` or `WebGLShader.setMatrix2fv` instead.
+* `WebGLRenderer.setMatrix3` has been removed. Use `WebGLPipeline.setMatrix3fv` or `WebGLShader.setMatrix3fv` instead.
+* `WebGLRenderer.setMatrix4` has been removed. Use `WebGLPipeline.setMatrix4fv` or `WebGLShader.setMatrix4fv` instead.
+* The `WebGLRenderer._tempMatrix1`, `_tempMatrtix2`, `_tempMatrix3` and `_tempMatrix4` properties have been removed. They were all flagged as private, yet used in lots of places. Instead, Game Objects now manager their own matrices, or use the global `GetCalcMatrix` function instead.
+* `WebGLRenderer.fboStack` is a new property that maintains a stack of framebuffer objects, used for pipelines supporting multiple render targets.
+* `WebGLRenderer.pushFramebuffer` is a new method that is used to push a framebuffer onto the fbo stack before setting it as the current framebuffer. This should now be called in place of `setFramebuffer`. Remember to call `popFramebuffer` after using it.
+* `WebGLRenderer.popFramebuffer` is a new method that will pop the current framebuffer off the fbo stack and set the previous one as being active.
+* `WebGLRenderer.setFramebuffer` has a new optional boolean parameter `resetTextures` which will reset the WebGL Textures, if set to `true` (which is the default).
+* `WebGLRenderer.isBooted` is a new boolean property that lets you know if the rendere has fully finished booting.
+* The `WebGLRenderer` now extends the Event Emitter, allowing you to listen to renderer specific events.
+* `WebGLRenderer.defaultCamera` has been removed as it's not used anywhere internally any longer.
+* The `WebGLRenderer.setVertexBuffer` method has been removed along with the `WebGLRenderer.currentVertexBuffer` property. This is now set directly by the WebGL Pipeline, as needed.
+* The `WebGLRenderer.setIndexBuffer` method has been removed along with the `WebGLRenderer.currentIndexBuffer` property. This is now set directly by the WebGL Pipeline, as needed.
+* `WebGLRenderer.resetScissor` is a new method that will reset the gl scissor state to be the current scissor, if there is one, without modifying the stack.
+* `WebGLRenderer.resetViewport` is a new method that will reset the gl viewport to the current renderer dimensions.
+* `WebGLRenderer.renderTarget` is a new property that contains a Render Target that is bound to the renderer and kept resized to match it.
+* `WebGLRenderer.beginCapture` is a new method that will bind the renderers Render Target, so everything drawn is redirected to it.
+* `WebGLRenderer.endCapture` is a new method that will unbind the renderers Render Target and return it, preventing anything else from being drawn to it.
+
+### WebGL and Canvas Renderer Events
+
+* `Phaser.Renderer.Events` is a new namespace for events emited by the Canvas and WebGL Renderers.
+* `Renderer.Events.PRE_RENDER` is a new event dispatched by the Phaser Renderer. This happens right at the start of the render process.
+* `Renderer.Events.RENDER` is a new event dispatched by the Phaser Renderer. This happens once for every camera, in every Scene at the start of its render process.
+* `Renderer.Events.POST_RENDER` is a new event dispatched by the Phaser Renderer. This happens right at the end of the render process.
+* `Renderer.Events.RESIZE` is a new event dispatched by the Phaser Renderer whenever it is resized.
+
+### Canvas Renderer Updates
+
+* `CanvasRenderer.isBooted` is a new boolean property that lets you know if the rendere has fully finished booting.
+* The `CanvasRenderer` now extends the Event Emitter, allowing you to listen to renderer specific events.
+
+### Camera - New Features, Updates and API Changes
+
+The Camera API has changed in line with the new pipeline updates. To this end, the following changes have taken place:
+
+The Camera class now inherits the `Pipeline` Component. This gives it new features, in line with the other pipelines changes in 3.50, such as `Camera.setPipeline`, `Camera.setPostPipeline`, `Camera.setPipelineData` and so on. This is a much more powerful and flexible way of setting camera effects, rather than it managing its own framebuffer and texture directly.
+
+To that end, the following properties and methods have been removed to tidy things up:
+
+* The `Camera.renderToTexture` property has been removed. Effects are now handled via pipelines.
+* The `Camera.renderToGame` property has been removed. Effects are now handled via pipelines.
+* The `Camera.canvas` property has been removed. Textures are handled by pipelines.
+* The `Camera.context` property has been removed. Textures are handled by pipelines.
+* The `Camera.glTexture` property has been removed. GL Textures are handled by pipelines.
+* The `Camera.framebuffer` property has been removed. GL Framebuffers are handled by pipelines.
+* The `Camera.setRenderToTexture` method has been removed. Effects are now handled via pipelines.
+* The `Camera.clearRenderToTexture` method has been removed. Effects are now handled via pipelines.
+
+These changes mean that you can no longer render a Camera to a canvas in Canvas games.
+
+Other changes and fixes:
+
+* `Camera.zoomX` is a new property that allows you to specifically set the horizontal zoom factor of a Camera.
+* `Camera.zoomY` is a new property that allows you to specifically set the vertical zoom factor of a Camera.
+* The `Camera.setZoom` method now allows you to pass two parameters: `x` and `y`, to control the `zoomX` and `zoomY` values accordingly.
+* The `Camera.zoom` property now returns an _average_ of the `zoomX` and `zoomY` properties.
+* `Cameras.Scene2D.Events.FOLLOW_UPDATE` is a new Event that is dispatched by a Camera when it is following a Game Object. It is dispatched every frame, right after the final Camera position and internal matrices have been updated. Use it if you need to react to a camera, using its most current position and the camera is following something. Fix #5253 (thanks @rexrainbow)
+* If the Camera has `roundPixels` set it will now round the internal scroll factors and `worldView` during the `preRender` step. Fix #4464 (thanks @Antriel)
+
+### Graphics Pipeline and Graphics Game Object Changes
+
+The Graphics Pipeline is a new pipeline added in 3.50 that is responsible for rendering Graphics Game Objects and all of the Shape Game Objects, such as Arc, Rectangle, Star, etc. Due to the new pipeline some changes have been made:
+
+* The Graphics Pipeline now uses much simpler vertex and fragment shaders, with just two attributes (`inPosition` and `inColor`), making the vertex size and memory-use 57% smaller.
+* The private `_tempMatrix1`, 2, 3 and 4 properties have all been removed from the pipeline.
+* A new public `calcMatrix` property has been added, which Shape Game Objects use to maintain transform state during rendering.
+* The Graphics Pipeline no longer makes use of `tintEffect` or any textures.
+* Because Graphics and Shapes now render with their own pipeline, you are able to exclude the pipeline and those Game Objects entirely from custom builds, further reducing the final bundle size.
+
+As a result of these changes the following features are no longer available:
+
+* `Graphics.setTexture` has been removed. You can no longer use a texture as a 'fill' for a Graphic. It never worked with any shape other than a Rectangle, anyway, due to UV mapping issues, so is much better handled via the new Mesh Game Object.
+* `Graphics._tempMatrix1`, 2 and 3 have been removed. They're not required internally any longer.
+* `Graphics.renderWebGL` now uses the standard `GetCalcMatrix` function, cutting down on duplicate code significantly.
+
+### Render Texture Game Object - New Features, API Changes and Bug Fixes
+
+The Render Texture Game Object has been rewritten to use the new `RenderTarget` class internally, rather than managing its own framebuffer and gl textures directly. The core draw methods are now a lot simpler and no longer require manipulating render pipelines.
+
+As a result of these changes the following updates have happened:
+
+* `RenderTexture.renderTarget` is a new property that contains a `RenderTarget` instance, which is used for all drawing.
+* The `RenderTexture.framebuffer` property has been removed. You can now access this via `RenderTexture.renderTarget.framebuffer`.
+* The `RenderTexture.glTexture` property has been removed. You can now access this via `RenderTexture.renderTarget.texture`.
+* The `RenderTexture.gl` property has been removed.
+
+Render Textures have the following new features:
+
+* `RenderTexture.beginDraw` is a new method that allows you to create a batched draw to the Render Texture. Use this method to begin the batch.
+* `RenderTexture.batchDraw` is a new method that allows you to batch the drawing of an object to the Render Texture. You should never call this method unless you have previously started a batch with `beginDraw`. You can call this method as many times as you like, to draw as many objects as you like, without causing a framebuffer bind.
+* `RenderTexture.batchDrawFrame` is a new method that allows you to batch the drawing of a texture frame to the Render Texture. You should never call this method unless you have previously started a batch with `beginDraw`. You can call this method as many times as you like, to draw as many frames as you like, without causing a framebuffer bind.
+* `RenderTexture.endDraw` is a new method that ends a previously created batched draw on the Render Texture. Use it to write all of your batch changes to the Render Texture.
+* You can now draw a `Group` to a `RenderTexture`. Previously, it failed to pass the camera across, resulting in none of the Group children being drawn. Fix #5330 (thanks @somnolik)
+
+Render Textures have the following 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.
+* `RenderTexture.erase` has never worked when using the Canvas Renderer and a texture frame, only with Game Objects. It now works with both. Fix #5422 (thanks @vforsh)
 
 ### Light Pipeline Changes
 
@@ -173,12 +370,10 @@ The Light Pipeline (previously called the Forward Diffuse Light Pipeline), which
 * 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.
+* Mesh Game Objects now support rendering with normal maps.
 * 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.
+* 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.
@@ -198,39 +393,34 @@ The Light Pipeline (previously called the Forward Diffuse Light Pipeline), which
 * `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
+### WebGL ModelViewProjection Removed
 
-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.
+The `ModelViewProjection` object contained a lot of functions that Phaser never used internally. Instead, the functions available in them were already available in the `Math.Matrix4` class. So the pipelines have been updated to use a Matrix4 instead and all of the MVP functions have been removed. The full list of removed functions is below:
 
-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.
+* `projIdentity` has been removed.
+* `projPersp` has been removed.
+* `modelRotateX` has been removed.
+* `modelRotateY` has been removed.
+* `modelRotateZ` has been removed.
+* `viewLoad` has been removed.
+* `viewRotateX` has been removed.
+* `viewRotateY` has been removed.
+* `viewRotateZ` has been removed.
+* `viewScale` has been removed.
+* `viewTranslate` has been removed.
+* `modelIdentity` has been removed.
+* `modelScale` has been removed.
+* `modelTranslate` has been removed.
+* `viewIdentity` has been removed.
+* `viewLoad2D` has been removed.
+* `projOrtho` has been removed.
 
 ### 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.
+* `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 to 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.
@@ -254,7 +444,7 @@ If you used any of them in your code, please update to the new function names be
 
 ### 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:
+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 Update 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.
@@ -276,22 +466,26 @@ The way in which Game Objects add themselves to the Scene Update List has change
 
 ### 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.
+* The Spine Runtimes have been updated to 3.8.99, 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 compared to using regular Containers. You _can_ still use regular Containers if you need, but they do not benefit from the new batching.
 * 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.
+* 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 and then run `npm i`.
 * 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'.
+* Spine Game Objects now use -1 as their default blend mode, which means 'skip setting it', as blend modes should be handled by the Spine skeletons directly.
 * 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)
+* 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 Scenes 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.
+* `SpineFile` will now check to see if another identical atlas in the load queue is already loading the texture it needs and will no longer get locked waiting for a file that will never complete. This allows multiple skeleton JSONs to use the same atlas data. Fix #5331 (thanks @Racoonacoon)
+* `SpineFile` now uses a `!` character to split the keys, instead of an underscore, preventing the plugin from incorrectly working out the keys for filenames with underscores in them. Fix #5336 (thanks @Racoonacoon)
+* `SpineGameObject.willRender` is no longer hard-coded to return `true`. It instead now takes a Camera parameter and performs all of the checks needed before returning. Previously, this happened during the render functions.
+* The Spine Plugin now uses a single instance of the Scene Renderer when running under WebGL. All instances of the plugin (installed per Scene) share the same base Scene Renderer, avoiding duplicate allocations and resizing events under multi-Scene games. Fix #5286 (thanks @spayton BunBunBun)
 
 ### Animation API - New Features and Updates
 
@@ -306,6 +500,8 @@ The Animation API has had a significant overhaul to improve playback handling. I
 * 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.
+* `AnimationState.generateFrameNumbers` is a new method that is a proxy for the same method available under the Animation Manager. It's exposed in the Animation State so you're able to access it from within a Sprite (thanks @juanitogan)
+* `AnimationState.generateFrameNames` is a new method that is a proxy for the same method available under the Animation Manager. It's exposed in the Animation State so you're able to access it from within a Sprite (thanks @juanitogan)
 * 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.
@@ -396,36 +592,102 @@ The Animation API has had a significant overhaul to improve playback handling. I
 * `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.
 
+### Tilemap - New Features, Updates and API Changes
+
+There are three large changes to Tilemaps in 3.50. If you use tilemaps, you must read this section:
+
+1) The first change is that there are no longer `DynamicTilemapLayer` and `StaticTilemapLayer` classes. They have both been removed and replaced with the new `TilemapLayer` class. This new class consolidates features from both and provides a lot cleaner API experience, as well as speeding up internal logic.
+
+In your game where you use `map.createDynamicLayer` or `map.createStaticLayer` replace it with `map.createLayer` instead.
+
+2) The second change is that the Tilemap system now supports isometric, hexagonal and staggered isometric map types, along with the previous orthogonal format, thanks to a PR from @svipal. You can now export maps using any of these orientations from the Tiled Map Editor and load them into Phaser using the existing tilemap loading API. No further changes need to take place in the way your maps are loaded.
+
+3) The `Tilemap.createFromObjects` method has been overhauled to make it much more useful. The method signature has changed and it now takes a new `CreateFromObjectLayerConfig` configuration object, or an array of them, which allows much more fine-grained control over which objects in the Tiled Object Layers are converted and what they are converted to. Previously it could only convert to Sprites, but you can now pass in a custom class, filter based on id, gid or name, even provide a Container to add the created Game Objects to. Please see the new documentation for this method and the config object for more details. Fix #3817 #4613 (thanks @georgzoeller @Secretmapper)
+
+* The `Tilemap.createDynamicLayer` method has been renamed to `createLayer`.
+* The `Tilemap.createStaticLayer` method has been removed. Use `createLayer` instead.
+* The `Tilemap.createBlankDynamicLayer` method has been renamed to `createBlankLayer`.
+* The `Tilemap.convertLayerToStatic` method has been removed as it is no longer required.
+* The `TilemapLayerWebGLRenderer` function will no longer iterate through the layer tilesets, drawing tiles from only that set. Instead all it does now is iterate directly through only the tiles. This allows it to take advantage of the new Multi Texturing pipeline and also draw multi-tileset isometric layers correctly.
+* `Phaser.Types.Tilemaps.TilemapOrientationType` is a new type def that holds the 4 types of map orientation now supported.
+* The `Tile.updatePixelXY` method now updates the tile XY position based on map type.
+* `ParseTilesets` will now correctly handle non-consecutive tile IDs. It also now correctly sets the `maxId` property, fixing a bug where tiles wouldn't render if from IDs outside the expected range. Fix #4367 (thanks @jackfreak)
+* `Tilemap.hexSideLength` is a new property that holds the length of the hexagon sides, if using Hexagonal Tilemaps.
+* `LayerData.orientation` is a new property that holds the tilemap layers orientation constant.
+* `LayerData.hexSideLength` is a new property that holds the length of the hexagon sides, if using Hexagonal Tilemaps.
+* `MapData.orientation` is a new property that holds the tilemap layers orientation constant.
+* `MapData.hexSideLength` is a new property that holds the length of the hexagon sides, if using Hexagonal Tilemaps.
+* `Tilemaps.Components.HexagonalWorldToTileY` is a new function that converts a world Y coordinate to hexagonal tile Y coordinate.
+* `Tilemaps.Components.StaggeredWorldToTileY` is a new function that converts a world Y coordinate to staggered tile Y coordinate.
+* `Tilemaps.Components.HexagonalWorldToTileXY` is a new function that converts world coordinates to hexagonal tile coordinates.
+* `Tilemaps.Components.IsometricWorldToTileXY` is a new function that converts world coordinates to isometric tile coordinates.
+* `Tilemaps.Components.StaggeredWorldToTileXY` is a new function that converts world coordinates to staggered tile coordinates.
+* `Tilemaps.Components.HexagonalTileToWorldY` is a new function that converts a hexagonal Y coordinate to a world coordinate.
+* `Tilemaps.Components.StaggeredTileToWorldY` is a new function that converts a staggered Y coordinate to a world coordinate.
+* `Tilemaps.Components.HexagonalTileToWorldXY` is a new function that converts hexagonal tile coordinates to world coordinates.
+* `Tilemaps.Components.IsometricTileToWorldXY` is a new function that converts isometric tile coordinates to world coordinates.
+* `Tilemaps.Components.StaggeredTileToWorldXY` is a new function that converts staggered tile coordinates to world coordinates.
+* `Tilemaps.Components.GetTileToWorldXFunction` is a new function that returns the correct conversion function to use.
+* `Tilemaps.Components.GetTileToWorldYFunction` is a new function that returns the correct conversion function to use.
+* `Tilemaps.Components.GetTileToWorldXXFunction` is a new function that returns the correct conversion function to use.
+* `Tilemaps.Components.GetWorldToTileXFunction` is a new function that returns the correct conversion function to use.
+* `Tilemaps.Components.GetWorldToTileYFunction` is a new function that returns the correct conversion function to use.
+* `Tilemaps.Components.GetWorldToTileXYFunction` is a new function that returns the correct conversion function to use.
+* `Tilemaps.Components.GetCullTilesFunction` is a new function that returns the correct culling function to use.
+* `Tilemaps.Components.HexagonalCullTiles` is a new function that culls tiles in a hexagonal map.
+* `Tilemaps.Components.StaggeredCullTiles` is a new function that culls tiles in a staggered map.
+* `Tilemaps.Components.IsometricCullTiles` is a new function that culls tiles in a isometric map.
+* `Tilemaps.Components.CullBounds` is a new function that calculates the cull bounds for an orthogonal map.
+* `Tilemaps.Components.HexagonalCullBounds` is a new function that calculates the cull bounds for a hexagonal map.
+* `Tilemaps.Components.StaggeredCullBounds` is a new function that calculates the cull bounds for a staggered map.
+* `Tilemaps.Components.RunCull` is a new function that runs the culling process from the combined bounds and tilemap.
+* `Tilemap._convert` is a new internal private hash of tilemap conversion functions used by the public API.
+* The `Tilemap._isStaticCall` method has been removed and no Tilemap methods now check this, leading to faster execution.
+* The Arcade Physics Sprites vs. Tilemap Layers flow has changed. Previously, it would iterate through a whole bunch of linked functions, taking lots of jumps in the process. It now just calls the `GetTilesWithinWorldXY` component directly, saving lots of overhead.
+* The method `Tilemap.weightedRandomize` has changed so that the parameter `weightedIndexes` is now first in the method and is non-optional. Previously, it was the 5th parameter and incorrectly flagged as optional.
+* The method `TilemapLayer.weightedRandomize` has changed so that the parameter `weightedIndexes` is now first in the method and is non-optional. Previously, it was the 5th parameter and incorrectly flagged as optional.
+
 ### 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:
+The Mesh Game Object has been rewritten from scratch in v3.50 with a lot of changes to make it much more useful. It is accompanied by the new `Geom.Mesh` set of functions.
 
-* `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.
+* `Geom.Mesh` is a new namespace that contains the Mesh related geometry functions. These are stand-alone functions that you may, or may not require, depending on your game.
+* `Geom.Mesh.Vertex` is a new class that encapsulates all of the data required for a single vertex, including position, uv, normals, color and alpha.
+* `Geom.Mesh.Face` is a new class that consists of references to the three `Vertex` instances that construct a single Face in a Mesh and provides methods for manipulating them.
+* `Geom.Mesh.GenerateVerts` is a new function that will return an array of `Vertex` and `Face` objects generated from the given data. You can provide index, or non-index vertex lists, along with UV data, normals, colors and alpha which it will parse and return the results from.
+* `Geom.Mesh.GenerateGridVerts` is a new function that will generate a series of `Vertex` objects in a grid format, based on the given `GenerateGridConfig` config file. You can set the size of the grid, the number of segments to split it into, translate it, color it and tile the texture across it. The resulting data can be easily used by a Mesh Game Object.
+* `Geom.Mesh.GenerateObjVerts` is a new function that will generate a series of `Vertex` objects based on the given parsed Wavefront Obj Model data. You can optionally scale and translate the generated vertices and add them to a Mesh.
+* `Geom.Mesh.ParseObj` is a new function that will parse a triangulated Wavefront OBJ file into model data into a format that the `GenerateObjVerts` function can consume.
+* `Geom.Mesh.ParseObjMaterial` is a new function that will parse a Wavefront material file and extract the diffuse color data from it, combining it with the parsed object data.
+* `Geom.Mesh.RotateFace` is a new function that will rotate a Face by a given amount, based on an optional center of rotation.
+* `Loader.OBJFile` is a new File Loader type that can load triangulated Wavefront OBJ files, and optionally material files, which are then parsed and stored in the OBJ Cache.
+* The Mesh constructor and `MeshFactory` signatures have changed to `scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas`. Note the way the Texture and Frame parameters now comes first. `indicies` is a new parameter that 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 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.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.addVerticesFromObj` 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 this method. This method also takes an optional scale and position parameters to control placement of the created model within the Mesh.
 * `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.modelPosition` is a new Vector3 property that allows you to translate the position of all vertices in the Mesh.
+* `Mesh.modelRotation` is a new Vector3 property that allows you to rotate all vertices in the Mesh.
+* `Mesh.modelScale` is a new Vector3 property that allows you to scale all vertices in the Mesh.
+* `Mesh.panX` is a new function that will translate the view position of the Mesh on the x axis.
+* `Mesh.panY` is a new function that will translate the view position of the Mesh on the y axis.
+* `Mesh.panZ` is a new function that will translate the view position of the Mesh on the z axis.
+* `Mesh.setPerspective` is a new method that allows you to set a perspective projection matrix based on the given dimensions, fov, near and far values.
+* `Mesh.setOrtho` is a new method that allows you to set an orthographic projection matrix based on the given scale, near and far values.
+* `Mesh.clear` is a new method that will destroy all Faces and Vertices and clear the Mesh.
+* `Mesh.depthSort` is a new method that will run a depth sort across all Faces in the Mesh by sorting them based 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.totalRendered` is a new property that holds the total number of Faces that were rendered in the previous frame.
 * `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` 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 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.
@@ -433,11 +695,46 @@ The Mesh Game Object has been rewritten in v3.50 with a lot of changes to make i
 * `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.
+* `Mesh.isDirty` is a new method that will check if any of the data is dirty, requiring the vertices to be transformed. This is called automatically in `preUpdate` to avoid generating lots of math when nothing has changed.
 * 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`.
 
+### Quad Game Object Removed
+
+The `Quad` Game Object has been removed from v3.50.0.
+
+You can now create your own Quads easily using the new `Geom.Mesh.GenerateGridVerts` function, which is far more flexible than the old quads were.
+
+### Layer Game Object
+
+A Layer is a special type of Game Object that acts as a Display List. You can add any type of Game Object to a Layer, just as you would to a Scene. Layers can be used to visually group together 'layers' of Game Objects:
+
+```javascript
+const spaceman = this.add.sprite(150, 300, 'spaceman');
+const bunny = this.add.sprite(400, 300, 'bunny');
+const elephant = this.add.sprite(650, 300, 'elephant');
+
+const layer = this.add.layer();
+
+layer.add([ spaceman, bunny, elephant ]);
+```
+
+The 3 sprites in the example above will now be managed by the Layer they were added to. Therefore, if you then set `layer.setVisible(false)` they would all vanish from the display.
+
+You can also control the depth of the Game Objects within the Layer. For example, calling the `setDepth` method of a child of a Layer will allow you to adjust the depth of that child _within the Layer itself_, rather than the whole Scene. The Layer, too, can have its depth set as well.
+
+The Layer class also offers many different methods for manipulating the list, such as the methods `moveUp`, `moveDown`, `sendToBack`, `bringToTop` and so on. These allow you to change the display list position of the Layers children, causing it to adjust the order in which they are rendered. Using `setDepth` on a child allows you to override this.
+
+Layers can have Post FX Pipelines set, which allows you to easily enable a post pipeline across a whole range of children, which, depending on the effect, can often be far more efficient that doing so on a per-child basis.
+
+Layers have no position or size within the Scene. This means you cannot enable a Layer for physics or input, or change the position, rotation or scale of a Layer. They also have no scroll factor, texture, tint, origin, crop or bounds.
+
+If you need those kind of features then you should use a Container instead. Containers can be added to Layers, but Layers cannot be added to Containers.
+
+However, you can set the Alpha, Blend Mode, Depth, Mask and Visible state of a Layer. These settings will impact all children being rendered by the Layer.
+
 ### 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)
@@ -445,17 +742,20 @@ The Mesh Game Object has been rewritten in v3.50 with a lot of changes to make i
 * `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.
+* `inputMousePreventDefaultWheel` is a new config option that allows you to control `preventDefault` calls specifically on mouse wheel events. Set it via `input.mouse.preventDefaultWheel` 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.
+* `MouseManager.preventDefaultWheel` is a new boolean property, set via the `inputMousePreventDefaultWheel` config option that allows you to toggle capture of mouse wheel 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. Wheel events are non-passive if capturing is enabled.
 * 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.
 * `Pointer.down` will now check if the browser is running under macOS and if the ctrl key was also pressed, if so, it will flag the down event as being a right-click instead of a left-click, as per macOS conventions. Fix #4245 (thanks @BigZaphod)
 * When destroying an interactive Game Object that had `useHandCursor` enabled, it would reset the CSS cursor to default, even if the cursor wasn't over that Game Object. It will now only reset the cursor if it's over the Game Object being destroyed. Fix #5321 (thanks @JstnPwll)
 * The `InputPlugin.shutdown` method will now reset the CSS cursor, in case it was set by any Game Objects in the Scene that have since been destroyed.
+* The `InputPlugin.processOverEvents` has had a duplicate internal loop removed from it (thanks KingCosmic)
 
 ### Tint Updates and Shader Changes
 
@@ -475,10 +775,69 @@ This has all changed in 3.50, as outlined below. Tint values are now used direct
 * 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.
+* `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 Graphics Pipeline uses this internally for all geometry 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.
 
+### Arcade Physics Updates
+
+Prior to v3.50 an Arcade Physics Body could be one of two states: immovable, or moveable. An immovable body could not receive _any_ impact from another Body. If something collided with it, it wouldn't even separate to break free from the collision (the other body had to take the full separation value). It was intended for objects such as platforms, ground or walls, there they absolutely shouldn't move under any circumstances. As a result, two immovable bodies could never be collided together. While this worked for scenery-like items, it didn't work if you required maybe 2 players who could collide with each other, but should never be able to push one another. As of 3.50 all physics bodies now have a new property `pushable` that allows this. A pushable body can share separation with its collider, as well as take on mass-based velocity from the impact. A non-pushable body will behave differently depending on what it collides with. For example, a pushable body hitting a non-pushable (or immoveable) body will rebound off it.
+
+* The Arcade Physics `Body` class has a new boolean property `pushable` (true, by default). This allows you to set if a Body can be physically pushed by another Body, or not. Fix #4175 #4415 (thanks @inmylo @CipSoft-Components)
+* `Body.setPushable` is a new chainable method that allows you to set the `pushable` state of a Body.
+* `Arcade.Components.Pushable` is a new component, inherited by the standard Arcade Physics Image and Sprite classes.
+* Bodies will now check to see if they are blocked in the direction they're being pushed, before resolving the collision. This helps stop some bodies from being pushed into other objects.
+* Bodies will now check which direction they were moving and separate accordingly. This helps stop some bodies from being pushed into other objects.
+* `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)
+* `Physics.Arcade.Body.setCollideWorldBounds` now has a new optional parameter `onWorldBounds` which allows you to enable the Body's `onWorldBounds` property in the same call (thanks @samme)
+* `ArcadePhysics.Body.setMaxVelocityX` is a new method that allows you to set the maximum horizontal velocity of a Body (thanks @samme)
+* `ArcadePhysics.Body.setMaxVelocityY` is a new method that allows you to set the maximum vertical velocity of a Body (thanks @samme)
+* The `PhysicsGroup` config now has two new optional properties `maxVelocityX` and `maxVelocityY` which allows you to set the maximum velocity on bodies added to the Group (thanks @samme)
+* 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)
+* `Physics.Arcade.ProcessX` is a new set of functions, called by the `SeparateX` function, that handles all of the different collision tests, checks and resolutions. These functions are not exposed in the public API.
+* `Physics.Arcade.ProcessY` is a new set of functions, called by the `SeparateY` function, that handles all of the different collision tests, checks and resolutions. These functions are not exposed in the public API.
+* `Arcade.Body.center` values were incorrect after collisions with the world bounds or (for rectangular bodies) after collisions with another body. The body center is now updated after those separations (thanks @samme)
+* The Arcade Physics `WORLD_STEP` event now has a new parameter: the delta argument (thanks @samme)
+* The Arcade Body `drag` property has been redefined when damping is used and scales the damping multiplier by the physics step delta. Drag is now the velocity retained after 1 second instead of after 1 step, when damping is used. This makes damping consistent for different physics step rates and more accurate when fixedStep is off. If you use `drag` you will need to change any existing drag values to get the same effects as before. Convert `drag` to `drag ^ 60` or `drag ^ fps` if you use a different step rate (thanks @samme)
+
+### Loader Cache Changes
+
+When loading any of the file types listed below it will no longer store the data file in the cache. For example, when loading a Texture Atlas using a JSON File, it used to store the parsed image data in the Texture Manager and also store the JSON in the JSON Cache under the same key. This has changed in 3.50. The data files are no longer cached, as they are not required by the textures once parsing is completed, which happens during load. This helps free-up memory. How much depends on the size of your data files. And also allows you to easily remove textures based on just their key, without also having to clear out the corresponding data cache.
+
+* `AtlasJSONFile` no longer stores the JSON in the JSON Cache once the texture has been created.
+* `AtlasXMLFile` no longer stores the XML in the XML Cache once the texture has been created.
+* `UnityAtlasFile` no longer stores the Text in the Text Cache once the texture has been created.
+* `BitmapFontFile` no longer stores the XML in the XML Cache once the texture has been created.
+* You can now use `TextureManager.remove` to remove a texture and not have to worry about clearing the corresponding JSON or XML cache entry as well in order to reload a new texture using the same key. Fix #5323 (thanks @TedGriggs)
+
+### ColorMatrix
+
+* `Phaser.Display.ColorMatrix` is a new class that allows you to create and manipulate a 5x4 color matrix, which can be used by shaders or graphics operations.
+* The `ColorMatrix.set` method allows you to set the values of a ColorMatrix.
+* The `ColorMatrix.reset` method will reset the ColorMatrix to its default values.
+* The `ColorMatrix.getData` method will return the data in the ColorMatrix as a Float32Array, useful for setting in a shader uniform.
+* The `ColorMatrix.brightness` method lets you set the brightness of the ColorMatrix.
+* The `ColorMatrix.saturate` method lets you set the saturation of the ColorMatrix.
+* The `ColorMatrix.desaturate` method lets you desaturate the colors in the ColorMatrix.
+* The `ColorMatrix.hue` method lets you rotate the hues of the ColorMatrix by the given amount.
+* The `ColorMatrix.grayscale` method converts the ColorMatrix to grayscale.
+* The `ColorMatrix.blackWhite` method converts the ColorMatrix to black and whites.
+* The `ColorMatrix.contrast` method lets you set the contrast of the ColorMatrix.
+* The `ColorMatrix.negative` method converts the ColorMatrix to negative values.
+* The `ColorMatrix.desaturateLuminance` method applies a desaturated luminance to the ColorMatrix.
+* The `ColorMatrix.sepia` method applies a sepia tone to the ColorMatrix.
+* The `ColorMatrix.night` method applies a night time effect to the ColorMatrix.
+* The `ColorMatrix.lsd` method applies a trippy color effect to the ColorMatrix.
+* The `ColorMatrix.brown` method applies a brown tone to the ColorMatrix.
+* The `ColorMatrix.vintagePinhole` method applies a vintage pinhole color effect to the ColorMatrix.
+* The `ColorMatrix.kodachrome` method applies a kodachrome color effect to the ColorMatrix.
+* The `ColorMatrix.technicolor` method applies a technicolor color effect to the ColorMatrix.
+* The `ColorMatrix.polaroid` method applies a polaroid color effect to the ColorMatrix.
+* The `ColorMatrix.shiftToBGR` method shifts the values of the ColorMatrix into BGR order.
+* The `ColorMatrix.multiply` method multiplies two ColorMatrix data sets together.
+
 ### 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.
@@ -487,7 +846,7 @@ For a long time, the 'resolution' property has been present - taunting developer
 
 * 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 internal private `BaseCamera._cx`, `_cy`, `_cw` and `_ch` properties has been removed, use `x`, `y`, `width` and `height` instead.
 * 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.
@@ -500,7 +859,7 @@ For a long time, the 'resolution' property has been present - taunting developer
 
 ### 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.
+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, or plugins, that implement their own `render` methods. In terms of surface API changes, you shouldn't notice anything at all from this removal.
 
 ### New Features
 
@@ -510,7 +869,6 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * `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.
@@ -525,9 +883,6 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * `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)
@@ -535,13 +890,47 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * `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.
-* `Physics.Arcade.Body.setCollideWorldBounds` now has a new optional parameter `onWorldBounds` which allows you to enable the World Bounce property in the same call (thanks @samme)
 * When defining the ease used with a Particle Emitter you can now set `easeParams` in the config object, allowing you to pass custom ease parameters through to an ease function (thanks @vforsh)
-* `ArcadePhysics.Body.setMaxVelocityX` is a new method that allows you to set the maximum horizontal velocity of a Body (thanks @samme)
-* `ArcadePhysics.Body.setMaxVelocityY` is a new method that allows you to set the maximum vertical velocity of a Body (thanks @samme)
-* The `PhysicsGroup` config now has two new optional properties `maxVelocityX` and `maxVelocityY` which allows you to set the maximum velocity on bodies added to the Group (thanks @samme)
 * `BitmapMask.createMask` is a new method that will internally create the WebGL textures and framebuffers required for the mask. This is now used by the constructor and if the context is lost. It now also clears any previous textures/fbos that may have been created first, helping prevent memory leaks.
 * `BitmapMask.clearMask` will delete any WebGL textures or framebuffers the mask is using. This is now called when the mask is destroyed, or a new mask is created upon it.
+* `Quaternion` now has a new property `onChangeCallback` which, if set, will be invoked each time the quaternion is updated. This allows you to link change events to other objects.
+* The `Quaternion.set` method has a new optional boolean parameter `update` (defaults to `true`), which will call the `onChangeCallback` if set.
+* `Quaternion.setFromEuler` is a new method that will set the quaternion from the given `Euler` object, optionally calling the `onChangeCallback` in the process.
+* `Quaternion.setFromRotationMatrix` is a new method that will set the rotation of the quaternion from the given Matrix4.
+* `Vector3.setFromMatrixPosition` is a new method that will set the components of the Vector3 based on the position of the given Matrix4.
+* `Vector3.setFromMatrixColumn` is a new method that will set the components of the Vector3 based on the specified Matrix4 column.
+* `Vector3.fromArray` is a new method that will set the components of the Vector3 based on the values in the given array, at the given offset.
+* `Vector3.min` is a new method that will set the components of the Vector3 based on the `Main.min` between it and the given Vector3.
+* `Vector3.max` is a new method that will set the components of the Vector3 based on the `Main.max` between it and the given Vector3.
+* `Vector3.addVectors` is a new method that will set the components of the Vector3 based on the addition of the two Vector3s given.
+* `Vector3.addScalar` is a new method that will multiply the components of the Vector3 by the scale value given.
+* `Vector3.applyMatrix3` is a new method that will take a Matrix3 and apply it to the Vector3.
+* `Vector3.applyMatrix4` is a new method that will take a Matrix4 and apply it to the Vector3.
+* `Vector3.projectViewMatrix` is a new method that multiplies the Vector3 by the given view and projection matrices.
+* `Vector3.unprojectViewMatrix` is a new method that multiplies the Vector3 by the given inversed projection matrix and world matrix.
+* `Matrix4.setValues` is a new method that allows you to set all of the matrix components individually. Most internal methods now use this.
+* `Matrix.multiplyToMat4` is a new method that multiplies a Matrix4 by the given `src` Matrix4 and stores the results in the `out` Matrix4.
+* `Matrix4.fromRotationXYTranslation` is a new method that takes the rotation and position vectors and builds this Matrix4 from them.
+* `Matrix4.getMaxScaleOnAxis` is a new method that will return the maximum axis scale from the Matrix4.
+* `Matrix4.lookAtRH` is a new method that will generate a right-handed look-at matrix from the given eye, target and up positions.
+* `Matrix4.transform` is a new method that will generate a transform matrix from the given position and scale vectors and a rotation quaternion.
+* `Matrix4.multiplyMatrices` is a new method that multiplies two given Matrix4 objects and stores the results in the Matrix4.
+* `Matrix4.premultiply` is a new method that takes a Matrix4 and multiplies it by the current Matrix4.
+* `Matrix4.getInverse` is a new method that takes a Matrix4, copies it to the current matrix, then returns the inverse of it.
+* `CameraManager.getVisibleChildren` is a new method that is called internally by the `CameraManager.render` method. It filters the DisplayList, so that Game Objects that pass the `willRender` test for the given Camera are added to a sub-list, which is then passed to the renderer. This avoids the renderer having to do any checks on the children, it just renders each one in turn.
+* `Physics.Arcade.Body.setDamping` is a new method that allows you to set the `useDamping` property of a Body in a chainable way. Fix #5352 (thanks @juanitogan)
+* The `GameObjects.Graphics.fillGradientStyle` method can now accept a different alpha value for each of the fill colors. The default is still 1. If you only provide a single alpha, it'll be used for all colors. Fix #5044 (thanks @zhangciwu)
+* `Types.Core.PipelineConfig` is a new configuration object that you can set in the Game Config under the `pipeline` property. It allows you to define custom WebGL pipelines as part of the Game Config, so they're automatically installed and ready for use by all Scenes in your game. You can either set the `pipeline` object, or set it under the `render` sub-config.
+* `Utils.Object.DeepCopy` is a new function that will recursively deep copy an array of object.
+* `Time.TimerEvent.getRemaining` is a new method that returns the time interval until the next iteration of the Timer Event (thanks @samme)
+* `Time.TimerEvent.getRemainingSeconds` is a new method that returns the time interval until the next iteration of the Timer Event in seconds (thanks @samme)
+* `Time.TimerEvent.getOverallRemaining` is a new method that returns the time interval until the last iteration of the Timer Event (thanks @samme)
+* `Time.TimerEvent.getOverallRemainingSeconds` is a new method that returns the time interval until the last iteration of the Timer Event in seconds (thanks @samme)
+* `GameObjects.Video.loadMediaStream` is a new method that allows you to hook a Video Game Object up to a Media Stream, rather than a URL, allowing you to stream video from a source such as a webcam (thanks @pirateksh)
+* `Display.Color.ColorSpectrum` is a new function that will return an array of 1024 Color Object elements aligned in a Color Spectrum layout, where the darkest colors have been omitted.
+* `AsepriteFile` is a new File Type for the Loader that allows you to load Aseprite images and animation data for use with the new Aseprite animation features. You can call this via `this.load.asesprite(png, json)`.
+* `GameObject.displayList` is a new property that contains a reference to the Display List to which the Game Object has been added. This will typically either by the Display List owned by a Scene, or a Layer Game Object. You should treat this property as read-only.
+* The `Shader` Game Object now supports being able to use a Render Texture as a `sampler2D` texture on the shader #5423 (thanks @ccaleb)
 
 ### Updates and API Changes
 
@@ -551,8 +940,6 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * 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.
@@ -563,22 +950,17 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * 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)
+* 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. This check is wrapped in a `try/catch` block, as not all sites allow access to `window.top` (specifically in cross-origin iframe situations) Fix #4824 (thanks @rexrainbow)
+* `MouseManager.isTop` is a new boolean read-only property that flags if the mouse event listeners were attached to `window.top` (true), or just `window` (false). By default Phaser will attempt `window.top`, but this isn't possible in all environments, such as cross-origin iframes, so it will fall back to `window` in those cases and set this property to false (thanks BunBunBun)
 * `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.
@@ -590,13 +972,24 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * Setting the `pixelArt` config option will now set `antialiasGL` to `false`, as well as `antialias`. Fix #5309 (thanks @Vegita2)
 * The `Shape` class now includes the `ComputedSize` component properties and methods directly in the class, rather than applying as a mixin. `setSize` is now flagged as being `private`, because it shouldn't be used on Shape classes, which was leading to confusion as it appeared in the public-facing API. Fix #4811 (thanks @aolsx)
 * The `Loader.maxParallelDownloads` value is now set to 6 if running on Android, or 32 on any other OS. This avoids `net::ERR_FAILED` issues specifically on Android. You can still override this in the Game Config if you wish. Fix #4957 (thanks @RollinSafary)
-* `WebGLRenderer.defaultScissor` is a new property that holds the default scissor dimensions for the renderer. This is modified during `resize` and avoids continuous array generation in the `preRender` loop.
 * When running an Arcade Physics `overlap` test against a `StaticBody`, it will no longer set the `blocked` states of the dynamic body. If you are doing a collision test, they will still be set, but they're skipped for overlap-only tests. Fix #4435 (thanks @samme)
+* The `Line` Game Object will now default its width and height to 1, rather than zero. This allows you to give Line objects a physics body (although you will still need to re-adjust the center of the body manually). Fix #4596 (thanks @andrewaustin)
+* Internally, the `Quaternion` class now has 4 new private properties: `_x`, `_y`, `_z` and `_w` and 4 new getters and setters for the public versions. It also now passes most methods via `set` to allow for the onChange callback to be invoked. This does not change the public-facing API.
+* `Group` now extends `EventEmitter`, allowing you to emit custom events from within a Group.
+* `Device.Audio.wav` now uses `audio/wav` as the `canPlayType` check string, instead of `audio/wav; codecs="1"`, which should allow iOS13 to play wav files again.
+* In the `Loader.FileTypes.TextFile` config you can now override the type and cache destination for the file.
+* `Loader.MultiFile` will now parse the given files array and only add valid entries into the file list, allowing multifiles to now have optional file entries.
+* The `ParticleEmitter.tint` value is now `0xffffff` (previously, it was `0xffffffff`) to allow particle tints to work in the correct RGB order including alpha (thanks @vforsh)
+* `SceneManager.start` will now reset the `SceneSystems.sceneUpdate` reference to `NOOP`. This gets set back to the Scene update method again during `bootScene` (if it has one) and stops errors with external plugins and multi-part files that may trigger `update` before `create` has been called. Fix #4629 (thanks @Osmose)
+* `Phaser.Scene.renderer` is a new property available in every Phaser.Scene that gives you a reference to the renderer, either Canvas or WebGL.
+* The `CanvasRenderer._tempMatrix1`, `_tempMatrtix2`, `_tempMatrix3` and `_tempMatrix4` properties have been removed. They were all flagged as private, yet used in lots of places. Instead, Game Objects now manager their own matrices, or use the global `GetCalcMatrix` function instead.
+* Since iOS 13, iPads now identify as MacOS devices. A new maxTouchPoint check is now part of the `Device.OS` tests, stopping iPads from being flagged as desktop devices. Fix #5389 (thanks @SBCGames)
+* The `BitmapMask.prevFramebuffer` property has been removed as it's no longer required, due to the fbo stack in the renderer.
+* The `TextureManager.addGLTexture` method has been updated so that the `width` and `height` parameters are now optional. If not provided, and if available, they will be read from the given WebGLTexture instead (thanks @hexus)
+* `GameObjects.Components.Depth.depthList` is a new property that all Game Objects that have the Depth Component now have. It contains a reference to the List responsible for managing the depth sorting of the Game Object. This is typically the Scene Display List, but can also be a Layer. It allows the Depth component to queue a depth sort directly on the list it belongs to now, rather than just the Scene.
 
 ### 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)
@@ -620,6 +1013,15 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 * Creating a Bitmap Mask from a texture atlas that was then used to mask another Game Object also using that same texture atlas would throw the error `GL_INVALID_OPERATION : glDrawArrays: Source and destination textures of the draw are the same.`. It now renders as expected. Fix #4675 (thanks @JacobCaron)
 * When using the same asset for a Game Object to be used as a mask, it would make other Game Objects using the same asset, that appeared above the mask in the display list, to not render. Fix #4767 (thanks @smjnab)
 * When taking a `snapshot` in WebGL it would often have an extra line of empty pixels at the top of the resulting image, due to a rounding error in the `WebGLSnapshot` function. Fix #4956 (thanks @gammafp @telinc1)
+* `Particles.EmitterOp.setMethods` will now reset both `onEmit` and `onUpdate` to their default values. This allows you to reconfigure an emitter op with a new type of value and not have it stuck on the previous one. Fix #3663 (thanks @samme)
+* `Particles.EmitterOp` now cleanly separates between the different types of property configuration options. `start | end` will now ease between the two values, `min | max` will pick a random value between them and `random: []` will pick a random element. They no longer get mixed together. Fix #3608 (thanks @samme)
+* When setting both `transparent: true` and `backgroundColor` in the Game Config, it would ignore the transparency and use the color anyway. If transparent, the game is now fully transparent. Fix #5362 (thanks @Hoshinokoe)
+* The `Ellipse` Game Object now will update the width, height, and geometric position in the `setSize` method (thanks @PhaserEditor2D)
+* When measuring the last word in a line in a `Text` Game Object, it no longer adds extra white space to the end (thanks @rexrainbow)
+* `Utils.Array.Remove` would return an incorrect array of removed elements if one of the items to be removed was skipped in the array. Fix #5398 (thanks @year221)
+* `Geom.Intersects.TriangleToLine` wouldn't return `true` if the start or end of the Line fell inside the Triangle, only if the entire Line did. It now checks the start and end points correctly. (thanks @wiserim)
+* Using a Bitmap Mask and a Blend Mode in WebGL would reset the blend mode when the mask was rendered, causing the Game Object to have no blend mode. Fix #5409 (thanks @jcyuan)
+* `BitmapMask` would become corrupted when resizing the Phaser Game, either via the Scale Manager or directly, because the framebuffer and texture it used for rendering was still at the old dimensions. The BitmapMask now listens for the Renderer RESIZE event and re-creates itself accordingly. Fix #5399 (thanks @Patapits)
 
 ### Namespace Updates
 
@@ -650,4 +1052,4 @@ Since v3.0.0 the Game Object `render` functions have received a parameter called
 
 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 @Gangryong @vinerz
+@samme @16patsle @scott20145 @khasanovbi @mk360 @volkans80 @jaabberwocky @maikthomas @atursams @LearningCode2023 @DylanC @BenjaminDRichards @rexrainbow @Riderrr @spwilson2 @EmilSV @PhaserEditor2D @Gangryong @vinerz @trynx @usufruct99 @pirateksh @justin-calleja @monteiz

README.md

@@ -33,7 +33,7 @@ I'm pleased to announce the immediate availability of Phaser 3.24. This release
 
 So, please do spend some time digging through the [Change Log](#changelog). I assure you, it's worth while :)
 
-I'd like to send a massive thank-you to everyone who supports [Phaser on Patreon](https://www.patreon.com/photonstorm) (and now even GitHub Sponsors, too!) Your continued backing keeps allowing me to work on Phaser full-time and this great new releases is the very real result of that. If you've ever considered becoming a backer, now is the perfect time!
+I'd like to send a massive thank-you to everyone who supports [Phaser on Patreon](https://www.patreon.com/photonstorm) (and now even GitHub Sponsors, too!) Your continued backing keeps allowing me to work on Phaser full-time and this great new release is the very real result of that. If you've ever considered becoming a backer, now is the perfect time!
 
 As well as all of these updates, development has been progressing rapidly on Phaser 4. If you'd like to stay abreast of developments then I'm now publishing them to the [Phaser Patreon](https://www.patreon.com/photonstorm). Here you can find details about the latest developments and concepts behind Phaser 4.
 
@@ -63,7 +63,7 @@ There are other benefits to [backing Phaser](https://www.patreon.com/join/photon
 
 We use [Patreon](https://www.patreon.com/photonstorm) to manage the backing and you can [support Phaser](https://www.patreon.com/join/photonstorm?) from $1 per month. The amount you pledge is entirely up to you and can be changed as often as you like. Patreon renews monthly, just like Netflix. You can, of course, cancel at any point. Tears will be shed on this end, but that's not your concern.
 
-Extra special thanks to the following companies who's support makes Phaser possible:
+Extra special thanks to the following companies whose support makes Phaser possible:
 
 * [Cerebral Fix](https://cerebralfix.com)
 * [CrossInstall](https://crossinstall.com)

config/webpack.3d.dist.config.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+
+    context: `${__dirname}/../src/`,
+
+    entry: {
+        phaser: './phaser.js',
+        'phaser.min': './phaser.js'
+    },
+
+    output: {
+        path: `${__dirname}/../dist/`,
+        filename: '[name]3d.js',
+        library: 'Phaser',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+
+    performance: { hints: false },
+
+    optimization: {
+        minimizer: [
+            new UglifyJSPlugin({
+                include: /\.min\.js$/,
+                parallel: true,
+                sourceMap: false,
+                uglifyOptions: {
+                    compress: true,
+                    ie8: false,
+                    ecma: 5,
+                    output: {comments: false},
+                    warnings: false
+                },
+                warningsFilter: () => false
+            })
+        ]
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(true),
+            "typeof EXPERIMENTAL": JSON.stringify(false),
+            "typeof PLUGIN_3D": JSON.stringify(true),
+            "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
+            "typeof PLUGIN_FBINSTANT": JSON.stringify(false),
+            "typeof FEATURE_SOUND": JSON.stringify(true)
+        }),
+
+        new CleanWebpackPlugin()
+    ]
+};

config/webpack.config.js

@@ -30,6 +30,7 @@ module.exports = {
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true),
             "typeof EXPERIMENTAL": JSON.stringify(true),
+            "typeof PLUGIN_3D": JSON.stringify(false),
             "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
             "typeof PLUGIN_FBINSTANT": JSON.stringify(false),
             "typeof FEATURE_SOUND": JSON.stringify(true)

config/webpack.dist.config.js

@@ -49,6 +49,7 @@ module.exports = {
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true),
             "typeof EXPERIMENTAL": JSON.stringify(false),
+            "typeof PLUGIN_3D": JSON.stringify(false),
             "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
             "typeof PLUGIN_FBINSTANT": JSON.stringify(false),
             "typeof FEATURE_SOUND": JSON.stringify(true)

config/webpack.fb.config.js

@@ -30,6 +30,7 @@ module.exports = {
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true),
             "typeof EXPERIMENTAL": JSON.stringify(false),
+            "typeof PLUGIN_3D": JSON.stringify(false),
             "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
             "typeof PLUGIN_FBINSTANT": JSON.stringify(true),
             "typeof FEATURE_SOUND": JSON.stringify(true)

config/webpack.fb.dist.config.js

@@ -46,6 +46,7 @@ module.exports = {
             "typeof CANVAS_RENDERER": JSON.stringify(true),
             "typeof WEBGL_RENDERER": JSON.stringify(true),
             "typeof EXPERIMENTAL": JSON.stringify(false),
+            "typeof PLUGIN_3D": JSON.stringify(false),
             "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
             "typeof PLUGIN_FBINSTANT": JSON.stringify(true),
             "typeof FEATURE_SOUND": JSON.stringify(true)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser",
-  "version": "3.50.0-beta.7",
+  "version": "3.50.0-beta.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -68,9 +68,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.5",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
-          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -102,12 +102,6 @@
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
       "dev": true
     },
-    "@types/color-name": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
-      "dev": true
-    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -119,9 +113,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
-      "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+      "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw=="
     },
     "@types/minimatch": {
       "version": "3.0.3",
@@ -402,9 +396,9 @@
       "dev": true
     },
     "acorn": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
-      "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
       "dev": true
     },
     "acorn-jsx": {
@@ -971,12 +965,11 @@
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
@@ -1393,12 +1386,12 @@
       "dev": true
     },
     "debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+      "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
       "dev": true,
       "requires": {
-        "ms": "^2.1.1"
+        "ms": "2.1.2"
       }
     },
     "decamelize": {
@@ -1596,9 +1589,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz",
-      "integrity": "sha512-S7eiFb/erugyd1rLb6mQ3Vuq+EXHv5cpCkNqqIkYkBgN2QdFnyCZzFBleqwGEx4lgNGYij81BWnCrFNK7vxvjQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
+      "integrity": "sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -1649,9 +1642,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.9.0.tgz",
-      "integrity": "sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.11.0.tgz",
+      "integrity": "sha512-G9+qtYVCHaDi1ZuWzBsOWo2wSwd70TXnU6UHA3cTYHp7gCTXZcpggWFoUVAMRarg68qtPoNfFbzPh+VdOgmwmw==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -1662,9 +1655,9 @@
         "debug": "^4.0.1",
         "doctrine": "^3.0.0",
         "enquirer": "^2.3.5",
-        "eslint-scope": "^5.1.0",
+        "eslint-scope": "^5.1.1",
         "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^1.3.0",
+        "eslint-visitor-keys": "^2.0.0",
         "espree": "^7.3.0",
         "esquery": "^1.2.0",
         "esutils": "^2.0.2",
@@ -1707,25 +1700,6 @@
       "requires": {
         "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": {
@@ -1735,13 +1709,21 @@
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^1.1.0"
-      }
       },
+      "dependencies": {
         "eslint-visitor-keys": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
           "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
           "dev": true
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
+      "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+      "dev": true
     },
     "espree": {
       "version": "7.3.0",
@@ -1752,6 +1734,14 @@
         "acorn": "^7.4.0",
         "acorn-jsx": "^5.2.0",
         "eslint-visitor-keys": "^1.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        }
       }
     },
     "esprima": {
@@ -1908,19 +1898,19 @@
       }
     },
     "exports-loader": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/exports-loader/-/exports-loader-1.1.0.tgz",
-      "integrity": "sha512-zGB2SujiAyO0Rwn4GQ17/HlT8cwmT8abcBeZpr2R3sItJ5sI5Y9BzNzus3H9tH1iWLAoJLi9N3TP54D2+j859Q==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exports-loader/-/exports-loader-1.1.1.tgz",
+      "integrity": "sha512-CmyhIR2sJ3KOfVsHjsR0Yvo+0lhRhRMAevCbB8dhTVLHsZPs0lCQTvRmR9YNvBXDBxUuhmCE2f54KqEjZUaFrg==",
       "requires": {
         "loader-utils": "^2.0.0",
-        "schema-utils": "^2.7.0",
+        "schema-utils": "^3.0.0",
         "source-map": "^0.6.1"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-          "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -1929,28 +1919,18 @@
           }
         },
         "ajv-keywords": {
-          "version": "3.5.1",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.1.tgz",
-          "integrity": "sha512-KWcq3xN8fDjSB+IMoh2VaXVhRI0BBGxoYp3rx7Pkb6z0cFjYR9Q9l4yZqqals0/zsioCmocC5H6UvsGD4MoIBA=="
-        },
-        "fast-deep-equal": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
         },
         "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
           "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
           }
         },
         "source-map": {
@@ -2049,8 +2029,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
@@ -2526,20 +2505,25 @@
       }
     },
     "imports-loader": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/imports-loader/-/imports-loader-1.1.0.tgz",
-      "integrity": "sha512-HcPM6rULdQ6EBLVq+5O+CF9xb7qiUjsRm6V28bTG/c3IU5sQkVZzUDwYY0r4jHvSAmVFdO9WA/vLAURR5WQSeQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/imports-loader/-/imports-loader-1.2.0.tgz",
+      "integrity": "sha512-zPvangKEgrrPeqeUqH0Uhc59YqK07JqZBi9a9cQ3v/EKUIqrbJHY4CvUrDus2lgQa5AmPyXuGrWP8JJTqzE5RQ==",
       "requires": {
         "loader-utils": "^2.0.0",
-        "schema-utils": "^2.7.0",
+        "schema-utils": "^3.0.0",
         "source-map": "^0.6.1",
         "strip-comments": "^2.0.1"
       },
       "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+          "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw=="
+        },
         "ajv": {
-          "version": "6.12.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-          "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -2548,28 +2532,18 @@
           }
         },
         "ajv-keywords": {
-          "version": "3.5.1",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.1.tgz",
-          "integrity": "sha512-KWcq3xN8fDjSB+IMoh2VaXVhRI0BBGxoYp3rx7Pkb6z0cFjYR9Q9l4yZqqals0/zsioCmocC5H6UvsGD4MoIBA=="
-        },
-        "fast-deep-equal": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
         },
         "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
           "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
           }
         },
         "source-map": {
@@ -2879,8 +2853,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -4704,9 +4677,9 @@
       }
     },
     "tslib": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
     "tty-browserify": {
@@ -5112,34 +5085,11 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+          "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
           "dev": true
         },
-        "enhanced-resolve": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
-          "integrity": "sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "memory-fs": "^0.5.0",
-            "tapable": "^1.0.0"
-          },
-          "dependencies": {
-            "memory-fs": {
-              "version": "0.5.0",
-              "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-              "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-              "dev": true,
-              "requires": {
-                "errno": "^0.1.3",
-                "readable-stream": "^2.0.1"
-              }
-            }
-          }
-        },
         "eslint-scope": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaser",
-  "version": "3.50.0-beta.7",
+  "version": "3.50.0-beta.13",
   "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)",
@@ -23,6 +23,7 @@
     "buildfb": "webpack --config config/webpack.fb.config.js",
     "watchfb": "webpack --config config/webpack.fb.config.js --watch",
     "dist": "webpack --config config/webpack.dist.config.js",
+    "dist3d": "webpack --config config/webpack.3d.dist.config.js",
     "distfb": "webpack --config config/webpack.fb.dist.config.js",
     "distfull": "npm run dist && npm run distfb",
     "plugin.cam3d": "webpack --config plugins/camera3d/webpack.config.js",
@@ -43,6 +44,7 @@
     "lintfix": "eslint --config .eslintrc.json \"src/**/*.js\" --fix",
     "sloc": "node-sloc \"./src\" --include-extensions \"js\"",
     "bundleshaders": "node scripts/bundle-shaders.js",
+    "bundle3dshaders": "node scripts/bundle-layer3d-shaders.js",
     "build-tsgen": "cd scripts/tsgen && tsc",
     "tsgen": "cd scripts/tsgen && jsdoc -c jsdoc-tsd.conf.json",
     "test-ts": "cd scripts/tsgen/test && tsc --build tsconfig.json > output.txt",
@@ -65,12 +67,13 @@
     "@types/source-map": "^0.5.7",
     "clean-webpack-plugin": "^3.0.0",
     "dts-dom": "^3.6.0",
-    "eslint": "^7.9.0",
+    "eslint": "^7.11.0",
     "eslint-plugin-es5": "^1.5.0",
     "fs-extra": "^9.0.1",
     "jsdoc": "^3.6.6",
     "node-sloc": "^0.1.12",
     "remove-files-webpack-plugin": "^1.4.4",
+    "source-map": "^0.7.3",
     "typescript": "^4.0.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vivid-cli": "^1.1.2",
@@ -80,8 +83,8 @@
   },
   "dependencies": {
     "eventemitter3": "^4.0.7",
-    "exports-loader": "^1.1.0",
-    "imports-loader": "^1.1.0",
+    "exports-loader": "^1.1.1",
+    "imports-loader": "^1.2.0",
     "path": "^0.12.7"
   }
 }

plugins/layer3d/Layer3D.js

@@ -320,6 +320,11 @@ var Layer3D = new Class({
 
         var results = [];
 
+        // if (material)
+        // {
+        //     material = this.parseOBJMaterial(material);
+        // }
+
         for (var m = 0; m < data.models.length; m++)
         {
             var modelData = data.models[m];
@@ -361,6 +366,13 @@ var Layer3D = new Class({
                 var uv2 = (t2 === -1) ? defaultUV2 : textureCoords[t2];
                 var uv3 = (t3 === -1) ? defaultUV3 : textureCoords[t3];
 
+                // var color = 0xffffff;
+
+                // if (material && face.material !== '' && material[face.material])
+                // {
+                //     color = material[face.material];
+                // }
+
                 model.addVertex(originX + m1.x * scale, originY + m1.y * scale, originZ + m1.z * scale, uv1.u, uv1.v, n1.x, n1.y, n1.z);
                 model.addVertex(originX + m2.x * scale, originY + m2.y * scale, originZ + m2.z * scale, uv2.u, uv2.v, n2.x, n2.y, n2.z);
                 model.addVertex(originX + m3.x * scale, originY + m3.y * scale, originZ + m3.z * scale, uv3.u, uv3.v, n3.x, n3.y, n3.z);

plugins/spine/README.md

@@ -0,0 +1,11 @@
+# Updating Spine
+
+1. Checkout the Esoteric Spine Runtimes repo to the `spine-runtimes` folder: https://github.com/EsotericSoftware/spine-runtimes/ and make sure this is in the `plugins/spine` folder, not the `plugins/spine/src` folder.
+2. Run `npm i` inside the `spine-runtimes` folder.
+3. Add the `source-map` module: `npm i --save-dev source-map`.
+4. Run `npm run plugin.spine.runtimes` to build the new runtimes to the `plugins/spine/src/runtimes` folder.
+
+You can now build a new version of the Spine Plugin:
+
+5. `npm run plugin.spine.dist`.
+

plugins/spine/src/SpineFile.js

@@ -84,7 +84,7 @@ var SpineFile = new Class({
             for (i = 0; i < atlasURL.length; i++)
             {
                 atlas = new TextFile(loader, {
-                    key: key + '_' + i,
+                    key: key + '!' + i,
                     url: atlasURL[i],
                     extension: GetFastValue(config, 'atlasExtension', 'atlas'),
                     xhrSettings: GetFastValue(config, 'atlasXhrSettings')
@@ -106,7 +106,7 @@ var SpineFile = new Class({
 
             for (i = 0; i < atlasURL.length; i++)
             {
-                atlas = new TextFile(loader, key + '_' + i, atlasURL[i], atlasXhrSettings);
+                atlas = new TextFile(loader, key + '!' + i, atlasURL[i], atlasXhrSettings);
                 atlas.cache = cache;
 
                 files.push(atlas);
@@ -180,10 +180,13 @@ var SpineFile = new Class({
 
                     var image = new ImageFile(loader, key, textureURL, textureXhrSettings);
 
+                    if (!loader.keyExists(image))
+                    {
                         this.addToMultiFile(image);
 
                         loader.addFile(image);
                     }
+                }
 
                 //  Reset the loader settings
                 loader.setBaseURL(currentBaseURL);
@@ -219,7 +222,7 @@ var SpineFile = new Class({
 
                 if (file.type === 'text')
                 {
-                    atlasKey = file.key.replace(/_[\d]$/, '');
+                    atlasKey = file.key.replace(/![\d]$/, '');
 
                     atlasCache = file.cache;
 
@@ -228,7 +231,7 @@ var SpineFile = new Class({
                 else
                 {
                     var src = file.key.trim();
-                    var pos = src.indexOf('_');
+                    var pos = src.indexOf('!');
                     var key = src.substr(pos + 1);
 
                     if (!textureManager.exists(key))

plugins/spine/src/SpinePlugin.js

@@ -15,6 +15,9 @@ var SpineGameObject = require('./gameobject/SpineGameObject');
 var SpineContainer = require('./container/SpineContainer');
 var NOOP = require('../../../src/utils/NOOP');
 
+//  Plugin specific instance of the Spine Scene Renderer
+var sceneRenderer;
+
 /**
  * @classdesc
  * The Spine Plugin is a Scene based plugin that handles the creation and rendering of Spine Game Objects.
@@ -216,6 +219,8 @@ var SpinePlugin = new Class({
         /**
          * An instance of the Spine WebGL Scene Renderer.
          *
+         * There is only one instance of the Scene Renderer shared across the whole plugin.
+         *
          * Only set if running in WebGL mode.
          *
          * @name SpinePlugin#sceneRenderer
@@ -246,7 +251,7 @@ var SpinePlugin = new Class({
 
         /**
          * A reference to the Spine runtime.
-         * This is the runtime created by Esoteric Software
+         * This is the runtime created by Esoteric Software.
          *
          * @name SpinePlugin#plugin
          * @type {spine}
@@ -436,8 +441,6 @@ var SpinePlugin = new Class({
      */
     bootWebGL: function ()
     {
-        this.sceneRenderer = new Spine.webgl.SceneRenderer(this.renderer.canvas, this.gl, true);
-
         //  Monkeypatch the Spine setBlendMode functions, or batching is destroyed!
 
         var setBlendMode = function (srcBlend, dstBlend)
@@ -457,11 +460,17 @@ var SpinePlugin = new Class({
             }
         };
 
-        this.sceneRenderer.batcher.setBlendMode = setBlendMode;
-        this.sceneRenderer.shapes.setBlendMode = setBlendMode;
+        if (!sceneRenderer)
+        {
+            sceneRenderer = new Spine.webgl.SceneRenderer(this.renderer.canvas, this.gl, true);
+            sceneRenderer.batcher.setBlendMode = setBlendMode;
+            sceneRenderer.shapes.setBlendMode = setBlendMode;
+        }
 
-        this.skeletonRenderer = this.sceneRenderer.skeletonRenderer;
-        this.skeletonDebugRenderer = this.sceneRenderer.skeletonDebugRenderer;
+        //  All share the same instance
+        this.sceneRenderer = sceneRenderer;
+        this.skeletonRenderer = sceneRenderer.skeletonRenderer;
+        this.skeletonDebugRenderer = sceneRenderer.skeletonDebugRenderer;
 
         this.temp1 = new Spine.webgl.Vector3(0, 0, 0);
         this.temp2 = new Spine.webgl.Vector3(0, 0, 0);
@@ -1059,8 +1068,7 @@ var SpinePlugin = new Class({
         sceneRenderer.camera.position.x = viewportWidth / 2;
         sceneRenderer.camera.position.y = viewportHeight / 2;
 
-        sceneRenderer.camera.viewportWidth = viewportWidth;
-        sceneRenderer.camera.viewportHeight = viewportHeight;
+        sceneRenderer.camera.setViewport(viewportWidth, viewportHeight);
     },
 
     /**
@@ -1122,9 +1130,9 @@ var SpinePlugin = new Class({
     {
         this.destroy();
 
-        if (this.sceneRenderer)
+        if (sceneRenderer)
         {
-            this.sceneRenderer.dispose();
+            sceneRenderer.dispose();
         }
 
         this.sceneRenderer = null;

plugins/spine/src/container/SpineContainer.js

@@ -13,8 +13,8 @@ var SpineContainerRender = require('./SpineContainerRender');
  * A Spine Container is a special kind of Container created specifically for Spine Game Objects.
  *
  * You have all of the same features of a standard Container, but the rendering functions are optimized specifically
- * for Spine Game Objects. You must only add ever Spine Game Objects to this type of Container. Although Phaser will
- * not prevent you from adding other types, they will not render and are likely to throw runtime errors.
+ * for Spine Game Objects. You must only add ever Spine Game Objects, or other Spine Containers, to this type of Container.
+ * Although Phaser will not prevent you from adding other types, they will not render and are likely to throw runtime errors.
  *
  * To create one in a Scene, use the factory methods:
  *
@@ -28,6 +28,10 @@ var SpineContainerRender = require('./SpineContainerRender');
  * this.make.spinecontainer();
  * ```
  *
+ * Note that you should not nest Spine Containers inside regular Containers if you wish to use masks on the
+ * container children. You can, however, mask children of Spine Containers if they are embedded within other
+ * Spine Containers. In short, if you need masking, don't mix and match the types.
+ *
  * See the Container documentation for further details about what Containers can do.
  *
  * @class SpineContainer

plugins/spine/src/container/SpineContainerCanvasRenderer.js

@@ -15,11 +15,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 SpineContainerCanvasRenderer = function (renderer, container, interpolationPercentage, camera, parentMatrix)
+var SpineContainerCanvasRenderer = function (renderer, container, camera, parentMatrix)
 {
     var children = container.list;
 
@@ -84,7 +83,7 @@ var SpineContainerCanvasRenderer = function (renderer, container, interpolationP
         child.setAlpha(childAlpha * alpha);
 
         //  Render
-        child.renderCanvas(renderer, child, interpolationPercentage, camera, transformMatrix);
+        child.renderCanvas(renderer, child, camera, transformMatrix);
 
         //  Restore original values
         child.setAlpha(childAlpha);

plugins/spine/src/container/SpineContainerWebGLRenderer.js

@@ -4,11 +4,6 @@
  * @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.
@@ -20,11 +15,10 @@ var Wrap = require('../../../../src/math/Wrap');
  *
  * @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 SpineContainerWebGLRenderer = function (renderer, container, camera, parentMatrix)
 {
     var plugin = container.plugin;
     var sceneRenderer = plugin.sceneRenderer;
@@ -57,12 +51,6 @@ var SpineContainerWebGLRenderer = function (renderer, container, interpolationPe
         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
@@ -71,91 +59,53 @@ var SpineContainerWebGLRenderer = function (renderer, container, interpolationPe
         sceneRenderer.begin();
     }
 
+    var rendererNextType = renderer.nextTypeMatch;
+
+    //  Force these to avoid batch flushing during SpineGameObject.renderWebGL
+    renderer.nextTypeMatch = true;
+    renderer.newType = false;
+
     for (var i = 0; i < children.length; i++)
     {
-        var src = children[i];
+        var child = 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)
+        if (child.willRender(camera))
         {
-            continue;
-        }
+            var mask = child.mask;
 
-        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)
+            if (mask)
             {
-            skeleton.scaleX *= -1;
+                sceneRenderer.end();
 
-            src.root.rotation = RadToDeg(calcMatrix.rotationNormalized);
+                renderer.pipelines.rebind();
+
+                mask.preRenderWebGL(renderer, child, camera);
+
+                renderer.pipelines.clear();
+
+                sceneRenderer.begin();
             }
-        else
+
+            child.renderWebGL(renderer, child, camera, transformMatrix, container);
+
+            if (mask)
             {
-            //  +90 degrees to account for the difference in Spine vs. Phaser rotation
-            src.root.rotation = Wrap(RadToDeg(CounterClockwise(calcMatrix.rotationNormalized)) + 90, 0, 360);
-        }
+                sceneRenderer.end();
 
-        if (src.scaleY < 0)
-        {
-            skeleton.scaleY *= -1;
+                renderer.pipelines.rebind();
 
-            if (src.scaleX < 0)
-            {
-                src.root.rotation -= (RadToDeg(calcMatrix.rotationNormalized) * 2);
+                mask.postRenderWebGL(renderer, camera);
+
+                renderer.pipelines.clear();
+
+                sceneRenderer.begin();
             }
-            else
-            {
-                src.root.rotation += (RadToDeg(calcMatrix.rotationNormalized) * 2);
         }
     }
 
-        if (camera.renderToTexture || renderer.currentFramebuffer !== null)
-        {
-            skeleton.y = calcMatrix.ty;
-            skeleton.scaleY *= -1;
-        }
+    renderer.nextTypeMatch = rendererNextType;
 
-        //  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)
+    if (!rendererNextType)
     {
         //  The next object in the display list is not a Spine Game Object or Spine Container, so we end the batch
         sceneRenderer.end();

plugins/spine/src/gameobject/SpineGameObject.js

@@ -242,17 +242,24 @@ var SpineGameObject = new Class({
     },
 
     /**
-     * Overrides the default Game Object method and always returns true.
-     * Rendering is decided in the renderer functions.
+     * Returns `true` if this Spine Game Object both has a skeleton and
+     * also passes the render tests for the given Camera.
      *
      * @method SpineGameObject#willRender
      * @since 3.19.0
      *
-     * @return {boolean} Always returns `true`.
+     * @return {boolean} `true` if this Game Object should be rendered, otherwise `false`.
      */
-    willRender: function ()
+    willRender: function (camera)
     {
-        return true;
+        if (!this.skeleton)
+        {
+            return false;
+        }
+
+        var GameObjectRenderMask = 15;
+
+        return !(GameObjectRenderMask !== this.renderFlags || (this.cameraFilter !== 0 && (this.cameraFilter & camera.id)));
     },
 
     /**

plugins/spine/src/gameobject/SpineGameObjectCanvasRenderer.js

@@ -19,11 +19,10 @@ var Wrap = require('../../../../src/math/Wrap');
  *
  * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
  * @param {SpineGameObject} 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 SpineGameObjectCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var SpineGameObjectCanvasRenderer = function (renderer, src, camera, parentMatrix)
 {
     var context = renderer.currentContext;
 
@@ -31,15 +30,6 @@ var SpineGameObjectCanvasRenderer = function (renderer, src, interpolationPercen
     var skeleton = src.skeleton;
     var skeletonRenderer = plugin.skeletonRenderer;
 
-    var GameObjectRenderMask = 15;
-
-    var willRender = !(GameObjectRenderMask !== src.renderFlags || (src.cameraFilter !== 0 && (src.cameraFilter & camera.id)));
-
-    if (!skeleton || !willRender)
-    {
-        return;
-    }
-
     var camMatrix = renderer._tempMatrix1;
     var spriteMatrix = renderer._tempMatrix2;
     var calcMatrix = renderer._tempMatrix3;
@@ -109,7 +99,6 @@ var SpineGameObjectCanvasRenderer = function (renderer, src, interpolationPercen
         skeleton.scaleY *= -1;
     }
 
-    //  Add autoUpdate option
     skeleton.updateWorldTransform();
 
     skeletonRenderer.ctx = context;

plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js

@@ -4,7 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var Clamp = require('../../../../src/math/Clamp');
 var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+var GetCalcMatrix = require('../../../../src/gameobjects/GetCalcMatrix');
 var RadToDeg = require('../../../../src/math/RadToDeg');
 var Wrap = require('../../../../src/math/Wrap');
 
@@ -19,76 +21,36 @@ var Wrap = require('../../../../src/math/Wrap');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {SpineGameObject} 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 SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+var SpineGameObjectWebGLRenderer = function (renderer, src, camera, parentMatrix, container)
 {
     var plugin = src.plugin;
     var skeleton = src.skeleton;
-    var childAlpha = skeleton.color.a;
     var sceneRenderer = plugin.sceneRenderer;
 
-    var GameObjectRenderMask = 15;
-
-    var willRender = !(GameObjectRenderMask !== src.renderFlags || (src.cameraFilter !== 0 && (src.cameraFilter & camera.id)) || childAlpha === 0);
-
-    if (!skeleton || !willRender)
-    {
-        //  If there is already a batch running, and the next type isn't a Spine object, or this is the end, we need to close it
-
-        if (sceneRenderer.batcher.isDrawing && (!renderer.nextTypeMatch || renderer.finalType))
-        {
-            //  The next object in the display list is not a Spine object, so we end the batch
-            sceneRenderer.end();
-
-            renderer.pipelines.rebind();
-        }
-
-        if (!renderer.finalType)
-        {
-            //  Reset the current type
-            renderer.currentType = '';
-        }
-
-        return;
-    }
-
     if (renderer.newType)
     {
         //  flush + clear previous pipeline if this is a new type
         renderer.pipelines.clear();
+
+        sceneRenderer.begin();
     }
 
-    var camMatrix = renderer._tempMatrix1;
-    var spriteMatrix = renderer._tempMatrix2;
-    var calcMatrix = renderer._tempMatrix3;
+    var scrollFactorX = src.scrollFactorX;
+    var scrollFactorY = src.scrollFactorY;
+    var alpha = skeleton.color.a;
 
-    spriteMatrix.applyITRS(src.x, src.y, src.rotation, Math.abs(src.scaleX), Math.abs(src.scaleY));
-
-    camMatrix.copyFrom(camera.matrix);
-
-    if (parentMatrix)
+    if (container)
     {
-        //  Multiply the camera by the parent matrix
-        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+        src.scrollFactorX = container.scrollFactorX;
+        src.scrollFactorY = container.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);
+        skeleton.color.a = Clamp(alpha * container.alpha, 0, 1);
     }
-    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 viewportHeight = renderer.height;
 
@@ -102,7 +64,8 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
     {
         skeleton.scaleX *= -1;
 
-        src.root.rotation = RadToDeg(calcMatrix.rotationNormalized);
+        //  -180 degrees to account for the difference in Spine vs. Phaser rotation when inversely scaled
+        src.root.rotation = Wrap(RadToDeg(calcMatrix.rotationNormalized) - 180, 0, 360);
     }
     else
     {
@@ -130,17 +93,18 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
         skeleton.scaleY *= -1;
     }
 
-    //  Add autoUpdate option
     skeleton.updateWorldTransform();
 
-    if (renderer.newType)
-    {
-        sceneRenderer.begin();
-    }
-
     //  Draw the current skeleton
     sceneRenderer.drawSkeleton(skeleton, src.preMultipliedAlpha);
 
+    if (container)
+    {
+        src.scrollFactorX = scrollFactorX;
+        src.scrollFactorY = scrollFactorY;
+        skeleton.color.a = alpha;
+    }
+
     if (plugin.drawDebug || src.drawDebug)
     {
         //  Because if we don't, the bones render positions are completely wrong (*sigh*)

plugins/spine/src/runtimes/spine-both.d.ts

@@ -636,7 +636,7 @@ declare module spine {
         private queueAsset;
         loadText(clientId: string, path: string): void;
         loadJson(clientId: string, path: string): void;
-        loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+        loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
         get(clientId: string, path: string): any;
         private updateClientAssets;
         isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
     abstract class Texture {
-        protected _image: HTMLImageElement;
-        constructor(image: HTMLImageElement);
-        getImage(): HTMLImageElement;
+        protected _image: HTMLImageElement | ImageBitmap;
+        constructor(image: HTMLImageElement | ImageBitmap);
+        getImage(): HTMLImageElement | ImageBitmap;
         abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
         abstract dispose(): void;
@@ -1400,7 +1400,7 @@ declare module spine.webgl {
         private boundUnit;
         private useMipMaps;
         static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
-        constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+        constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
         setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
         setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -1738,7 +1738,8 @@ declare module spine.webgl {
         canvas: HTMLCanvasElement | OffscreenCanvas;
         gl: WebGLRenderingContext;
         private restorables;
-        constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+        constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig?: any);
+        private setupCanvas;
         addRestorable(restorable: Restorable): void;
         removeRestorable(restorable: Restorable): void;
     }

plugins/spine/src/runtimes/spine-both.js

@@ -3572,15 +3572,35 @@ var spine;
             path = this.pathPrefix + path;
             if (!this.queueAsset(clientId, textureLoader, path))
                 return;
-            var img = new Image();
-            img.crossOrigin = "anonymous";
-            img.onload = function (ev) {
-                _this.rawAssets[path] = img;
+            var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+            var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
+            if (isWebWorker) {
+                var options = { mode: "cors" };
+                fetch(path, options).then(function (response) {
+                    if (!response.ok) {
+                        _this.errors[path] = "Couldn't load image " + path;
+                    }
+                    return response.blob();
+                }).then(function (blob) {
+                    return createImageBitmap(blob, {
+                        premultiplyAlpha: 'none',
+                        colorSpaceConversion: 'none'
+                    });
+                }).then(function (bitmap) {
+                    _this.rawAssets[path] = bitmap;
+                });
+            }
+            else {
+                var img_1 = new Image();
+                img_1.crossOrigin = "anonymous";
+                img_1.onload = function (ev) {
+                    _this.rawAssets[path] = img_1;
                 };
-            img.onerror = function (ev) {
+                img_1.onerror = function (ev) {
                     _this.errors[path] = "Couldn't load image " + path;
                 };
-            img.src = path;
+                img_1.src = path;
+            }
         };
         SharedAssetManager.prototype.get = function (clientId, path) {
             path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
             return clientAssets.assets[path];
         };
         SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+            var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+            var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
             for (var i = 0; i < clientAssets.toLoad.length; i++) {
                 var path = clientAssets.toLoad[i];
                 var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
                     var rawAsset = this.rawAssets[path];
                     if (rawAsset === null || rawAsset === undefined)
                         continue;
+                    if (isWebWorker) {
+                        if (rawAsset instanceof ImageBitmap) {
+                            clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+                        }
+                        else {
+                            clientAssets.assets[path] = rawAsset;
+                        }
+                    }
+                    else {
                         if (rawAsset instanceof HTMLImageElement) {
                             clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
                         }
@@ -3605,6 +3636,7 @@ var spine;
                         }
                     }
                 }
+            }
         };
         SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
             var clientAssets = this.clientAssets[clientId];
@@ -7749,7 +7781,7 @@ var spine;
             return _this;
         }
         BoundingBoxAttachment.prototype.copy = function () {
-            var copy = new BoundingBoxAttachment(name);
+            var copy = new BoundingBoxAttachment(this.name);
             this.copyTo(copy);
             copy.color.setFromColor(this.color);
             return copy;
@@ -7768,7 +7800,7 @@ var spine;
             return _this;
         }
         ClippingAttachment.prototype.copy = function () {
-            var copy = new ClippingAttachment(name);
+            var copy = new ClippingAttachment(this.name);
             this.copyTo(copy);
             copy.endSlot = this.endSlot;
             copy.color.setFromColor(this.color);
@@ -7912,7 +7944,7 @@ var spine;
             return _this;
         }
         PathAttachment.prototype.copy = function () {
-            var copy = new PathAttachment(name);
+            var copy = new PathAttachment(this.name);
             this.copyTo(copy);
             copy.lengths = new Array(this.lengths.length);
             spine.Utils.arrayCopy(this.lengths, 0, copy.lengths, 0, this.lengths.length);
@@ -7946,7 +7978,7 @@ var spine;
             return Math.atan2(y, x) * spine.MathUtils.radDeg;
         };
         PointAttachment.prototype.copy = function () {
-            var copy = new PointAttachment(name);
+            var copy = new PointAttachment(this.name);
             copy.x = this.x;
             copy.y = this.y;
             copy.rotation = this.rotation;
@@ -10706,30 +10738,32 @@ var spine;
     (function (webgl) {
         var ManagedWebGLRenderingContext = (function () {
             function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
-                var _this = this;
                 if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
                 this.restorables = new Array();
-                if (canvasOrContext instanceof HTMLCanvasElement) {
-                    var canvas_1 = canvasOrContext;
-                    this.gl = (canvas_1.getContext("webgl2", contextConfig) || canvas_1.getContext("webgl", contextConfig));
-                    this.canvas = canvas_1;
-                    canvas_1.addEventListener("webglcontextlost", function (e) {
-                        var event = e;
-                        if (e) {
-                            e.preventDefault();
-                        }
-                    });
-                    canvas_1.addEventListener("webglcontextrestored", function (e) {
-                        for (var i = 0, n = _this.restorables.length; i < n; i++) {
-                            _this.restorables[i].restore();
-                        }
-                    });
+                if (canvasOrContext instanceof HTMLCanvasElement || canvasOrContext instanceof EventTarget) {
+                    this.setupCanvas(canvasOrContext, contextConfig);
                 }
                 else {
                     this.gl = canvasOrContext;
                     this.canvas = this.gl.canvas;
                 }
             }
+            ManagedWebGLRenderingContext.prototype.setupCanvas = function (canvas, contextConfig) {
+                var _this = this;
+                this.gl = (canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
+                this.canvas = canvas;
+                canvas.addEventListener("webglcontextlost", function (e) {
+                    var event = e;
+                    if (e) {
+                        e.preventDefault();
+                    }
+                });
+                canvas.addEventListener("webglcontextrestored", function (e) {
+                    for (var i = 0, n = _this.restorables.length; i < n; i++) {
+                        _this.restorables[i].restore();
+                    }
+                });
+            };
             ManagedWebGLRenderingContext.prototype.addRestorable = function (restorable) {
                 this.restorables.push(restorable);
             };

plugins/spine/src/runtimes/spine-canvas.d.ts

@@ -636,7 +636,7 @@ declare module spine {
         private queueAsset;
         loadText(clientId: string, path: string): void;
         loadJson(clientId: string, path: string): void;
-        loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+        loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
         get(clientId: string, path: string): any;
         private updateClientAssets;
         isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
     abstract class Texture {
-        protected _image: HTMLImageElement;
-        constructor(image: HTMLImageElement);
-        getImage(): HTMLImageElement;
+        protected _image: HTMLImageElement | ImageBitmap;
+        constructor(image: HTMLImageElement | ImageBitmap);
+        getImage(): HTMLImageElement | ImageBitmap;
         abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
         abstract dispose(): void;

plugins/spine/src/runtimes/spine-canvas.js

@@ -3572,15 +3572,35 @@ var spine;
             path = this.pathPrefix + path;
             if (!this.queueAsset(clientId, textureLoader, path))
                 return;
-            var img = new Image();
-            img.crossOrigin = "anonymous";
-            img.onload = function (ev) {
-                _this.rawAssets[path] = img;
+            var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+            var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
+            if (isWebWorker) {
+                var options = { mode: "cors" };
+                fetch(path, options).then(function (response) {
+                    if (!response.ok) {
+                        _this.errors[path] = "Couldn't load image " + path;
+                    }
+                    return response.blob();
+                }).then(function (blob) {
+                    return createImageBitmap(blob, {
+                        premultiplyAlpha: 'none',
+                        colorSpaceConversion: 'none'
+                    });
+                }).then(function (bitmap) {
+                    _this.rawAssets[path] = bitmap;
+                });
+            }
+            else {
+                var img_1 = new Image();
+                img_1.crossOrigin = "anonymous";
+                img_1.onload = function (ev) {
+                    _this.rawAssets[path] = img_1;
                 };
-            img.onerror = function (ev) {
+                img_1.onerror = function (ev) {
                     _this.errors[path] = "Couldn't load image " + path;
                 };
-            img.src = path;
+                img_1.src = path;
+            }
         };
         SharedAssetManager.prototype.get = function (clientId, path) {
             path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
             return clientAssets.assets[path];
         };
         SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+            var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+            var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
             for (var i = 0; i < clientAssets.toLoad.length; i++) {
                 var path = clientAssets.toLoad[i];
                 var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
                     var rawAsset = this.rawAssets[path];
                     if (rawAsset === null || rawAsset === undefined)
                         continue;
+                    if (isWebWorker) {
+                        if (rawAsset instanceof ImageBitmap) {
+                            clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+                        }
+                        else {
+                            clientAssets.assets[path] = rawAsset;
+                        }
+                    }
+                    else {
                         if (rawAsset instanceof HTMLImageElement) {
                             clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
                         }
@@ -3605,6 +3636,7 @@ var spine;
                         }
                     }
                 }
+            }
         };
         SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
             var clientAssets = this.clientAssets[clientId];
@@ -7749,7 +7781,7 @@ var spine;
             return _this;
         }
         BoundingBoxAttachment.prototype.copy = function () {
-            var copy = new BoundingBoxAttachment(name);
+            var copy = new BoundingBoxAttachment(this.name);
             this.copyTo(copy);
             copy.color.setFromColor(this.color);
             return copy;
@@ -7768,7 +7800,7 @@ var spine;
             return _this;
         }
         ClippingAttachment.prototype.copy = function () {
-            var copy = new ClippingAttachment(name);
+            var copy = new ClippingAttachment(this.name);
             this.copyTo(copy);
             copy.endSlot = this.endSlot;
             copy.color.setFromColor(this.color);
@@ -7912,7 +7944,7 @@ var spine;
             return _this;
         }
         PathAttachment.prototype.copy = function () {
-            var copy = new PathAttachment(name);
+            var copy = new PathAttachment(this.name);
             this.copyTo(copy);
             copy.lengths = new Array(this.lengths.length);
             spine.Utils.arrayCopy(this.lengths, 0, copy.lengths, 0, this.lengths.length);
@@ -7946,7 +7978,7 @@ var spine;
             return Math.atan2(y, x) * spine.MathUtils.radDeg;
         };
         PointAttachment.prototype.copy = function () {
-            var copy = new PointAttachment(name);
+            var copy = new PointAttachment(this.name);
             copy.x = this.x;
             copy.y = this.y;
             copy.rotation = this.rotation;

plugins/spine/src/runtimes/spine-webgl.d.ts

@@ -636,7 +636,7 @@ declare module spine {
         private queueAsset;
         loadText(clientId: string, path: string): void;
         loadJson(clientId: string, path: string): void;
-        loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+        loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
         get(clientId: string, path: string): any;
         private updateClientAssets;
         isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
     abstract class Texture {
-        protected _image: HTMLImageElement;
-        constructor(image: HTMLImageElement);
-        getImage(): HTMLImageElement;
+        protected _image: HTMLImageElement | ImageBitmap;
+        constructor(image: HTMLImageElement | ImageBitmap);
+        getImage(): HTMLImageElement | ImageBitmap;
         abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
         abstract dispose(): void;
@@ -1369,7 +1369,7 @@ declare module spine.webgl {
         private boundUnit;
         private useMipMaps;
         static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
-        constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+        constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
         setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
         static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
         setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -1707,7 +1707,8 @@ declare module spine.webgl {
         canvas: HTMLCanvasElement | OffscreenCanvas;
         gl: WebGLRenderingContext;
         private restorables;
-        constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+        constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig?: any);
+        private setupCanvas;
         addRestorable(restorable: Restorable): void;
         removeRestorable(restorable: Restorable): void;
     }

plugins/spine/src/runtimes/spine-webgl.js

@@ -3572,15 +3572,35 @@ var spine;
             path = this.pathPrefix + path;
             if (!this.queueAsset(clientId, textureLoader, path))
                 return;
-            var img = new Image();
-            img.crossOrigin = "anonymous";
-            img.onload = function (ev) {
-                _this.rawAssets[path] = img;
+            var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+            var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
+            if (isWebWorker) {
+                var options = { mode: "cors" };
+                fetch(path, options).then(function (response) {
+                    if (!response.ok) {
+                        _this.errors[path] = "Couldn't load image " + path;
+                    }
+                    return response.blob();
+                }).then(function (blob) {
+                    return createImageBitmap(blob, {
+                        premultiplyAlpha: 'none',
+                        colorSpaceConversion: 'none'
+                    });
+                }).then(function (bitmap) {
+                    _this.rawAssets[path] = bitmap;
+                });
+            }
+            else {
+                var img_1 = new Image();
+                img_1.crossOrigin = "anonymous";
+                img_1.onload = function (ev) {
+                    _this.rawAssets[path] = img_1;
                 };
-            img.onerror = function (ev) {
+                img_1.onerror = function (ev) {
                     _this.errors[path] = "Couldn't load image " + path;
                 };
-            img.src = path;
+                img_1.src = path;
+            }
         };
         SharedAssetManager.prototype.get = function (clientId, path) {
             path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
             return clientAssets.assets[path];
         };
         SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+            var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+            var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
             for (var i = 0; i < clientAssets.toLoad.length; i++) {
                 var path = clientAssets.toLoad[i];
                 var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
                     var rawAsset = this.rawAssets[path];
                     if (rawAsset === null || rawAsset === undefined)
                         continue;
+                    if (isWebWorker) {
+                        if (rawAsset instanceof ImageBitmap) {
+                            clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+                        }
+                        else {
+                            clientAssets.assets[path] = rawAsset;
+                        }
+                    }
+                    else {
                         if (rawAsset instanceof HTMLImageElement) {
                             clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
                         }
@@ -3605,6 +3636,7 @@ var spine;
                         }
                     }
                 }
+            }
         };
         SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
             var clientAssets = this.clientAssets[clientId];
@@ -7749,7 +7781,7 @@ var spine;
             return _this;
         }
         BoundingBoxAttachment.prototype.copy = function () {
-            var copy = new BoundingBoxAttachment(name);
+            var copy = new BoundingBoxAttachment(this.name);
             this.copyTo(copy);
             copy.color.setFromColor(this.color);
             return copy;
@@ -7768,7 +7800,7 @@ var spine;
             return _this;
         }
         ClippingAttachment.prototype.copy = function () {
-            var copy = new ClippingAttachment(name);
+            var copy = new ClippingAttachment(this.name);
             this.copyTo(copy);
             copy.endSlot = this.endSlot;
             copy.color.setFromColor(this.color);
@@ -7912,7 +7944,7 @@ var spine;
             return _this;
         }
         PathAttachment.prototype.copy = function () {
-            var copy = new PathAttachment(name);
+            var copy = new PathAttachment(this.name);
             this.copyTo(copy);
             copy.lengths = new Array(this.lengths.length);
             spine.Utils.arrayCopy(this.lengths, 0, copy.lengths, 0, this.lengths.length);
@@ -7946,7 +7978,7 @@ var spine;
             return Math.atan2(y, x) * spine.MathUtils.radDeg;
         };
         PointAttachment.prototype.copy = function () {
-            var copy = new PointAttachment(name);
+            var copy = new PointAttachment(this.name);
             copy.x = this.x;
             copy.y = this.y;
             copy.rotation = this.rotation;
@@ -10438,11 +10470,18 @@ var spine;
     (function (webgl) {
         var ManagedWebGLRenderingContext = (function () {
             function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
-                var _this = this;
                 if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
                 this.restorables = new Array();
-                if (canvasOrContext instanceof HTMLCanvasElement) {
-                    var canvas = canvasOrContext;
+                if (canvasOrContext instanceof HTMLCanvasElement || canvasOrContext instanceof EventTarget) {
+                    this.setupCanvas(canvasOrContext, contextConfig);
+                }
+                else {
+                    this.gl = canvasOrContext;
+                    this.canvas = this.gl.canvas;
+                }
+            }
+            ManagedWebGLRenderingContext.prototype.setupCanvas = function (canvas, contextConfig) {
+                var _this = this;
                 this.gl = (canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
                 this.canvas = canvas;
                 canvas.addEventListener("webglcontextlost", function (e) {
@@ -10456,12 +10495,7 @@ var spine;
                         _this.restorables[i].restore();
                     }
                 });
-                }
-                else {
-                    this.gl = canvasOrContext;
-                    this.canvas = this.gl.canvas;
-                }
-            }
+            };
             ManagedWebGLRenderingContext.prototype.addRestorable = function (restorable) {
                 this.restorables.push(restorable);
             };

plugins/spine/tsconfig.both.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "moduleResolution": "node",
         "module": "none",
         "noImplicitAny": true,
         "removeComments": true,

plugins/spine/tsconfig.canvas.json

@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+        "moduleResolution": "node",
 		"module": "none",
 		"noImplicitAny": true,
 		"removeComments": true,

plugins/spine/tsconfig.webgl.json

@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+        "moduleResolution": "node",
 		"module": "none",
 		"noImplicitAny": true,
 		"removeComments": true,

scripts/bundle-layer3d-shaders.js

@@ -0,0 +1,46 @@
+let fs = require('fs-extra');
+
+let srcdir = './src/layer3d/shaders/chunks/glsl/';
+let destdir = './src/layer3d/shaders/chunks/';
+
+let files = fs.readdirSync(srcdir);
+
+files.forEach(function (file) {
+
+    let shaderSource = fs.readFileSync(srcdir + file, 'utf8');
+    let shaderFilename = file.substr(0, file.lastIndexOf('.')) + '.js';
+
+    let outputSource = 'module.exports = [\n';
+
+    let lines = shaderSource.split('\n');
+
+    for (var i = 0; i < lines.length; i++)
+    {
+        let line = lines[i].trimRight();
+
+        if (i < lines.length - 1)
+        {
+            outputSource = outputSource.concat("    '" + line + "',\n");
+        }
+        else
+        {
+            outputSource = outputSource.concat("    '" + line + "'\n");
+        }
+    }
+
+    outputSource = outputSource.concat('].join(\'\\n\');\n');
+
+    fs.writeFile(destdir + shaderFilename, outputSource, function (error) {
+
+        if (error)
+        {
+            throw error;
+        }
+        else
+        {
+            console.log('Saved', shaderFilename);
+        }
+
+    });
+
+});

scripts/help.js

@@ -11,12 +11,21 @@ v.log('{bgYellow}{black} Available commands:
 v.log('{white} npm run {green}build {cyan}   Build dev version of Phaser with Webpack');
 v.log('{white} npm run {green}watch {cyan}      Build dev & put Webpack in watch mode');
 v.log('{white} npm run {green}dist {cyan}               Build dist versions of Phaser');
+v.log('{white} npm run {green}dist3d {cyan}          Build dist versions of Phaser 3D');
 v.log('{white} npm run {green}lint {cyan}                  ESLint check Phaser source');
 v.log('{white} npm run {green}lintfix {cyan}       ESLint check and fix Phaser source');
 v.log('{white} npm run {green}sloc {cyan}       Get source code & comments line count');
 v.log('{white} npm run {green}bundleshaders {cyan}    Convert vert/frag shaders to js');
 v.log('{white} npm run {green}plugin.cam3d {cyan}               Build Camera3D Plugin');
 v.log('');
+v.log(' {white}{bold}Spine Plugin{/bold}');
+v.log('');
+v.log('{white} npm run {green}plugin.spine.watch {cyan}       Spine Plugin Watch Mode');
+v.log('{white} npm run {green}plugin.spine.dev {cyan}        Build Debug Spine Plugin');
+v.log('{white} npm run {green}plugin.spine.runtimes {cyan}       Build Spine Runtimes');
+v.log('{white} npm run {green}plugin.spine.dist {cyan}             Build Spine Plugin');
+v.log('{white} npm run {green}plugin.spine.full.dist {cyan}         Build Full Plugin');
+v.log('');
 v.log(' {white}{bold}Facebook Instant Games{/bold}');
 v.log('');
 v.log('{white} npm run {green}buildfb {cyan}         Build dev Phaser FB with Webpack');

scripts/tsgen/bin/Parser.js

@@ -36,9 +36,11 @@ class Parser {
         return result;
     }
     parseObjects(docs) {
+        console.log('------------------------------------------------------------------');
+        console.log('Parse Objects');
+        console.log('------------------------------------------------------------------');
         for (let i = 0; i < docs.length; i++) {
             let doclet = docs[i];
-            // TODO: Custom temporary rules
             switch (doclet.longname) {
                 case 'Phaser.GameObjects.Components.Alpha':
                 case 'Phaser.GameObjects.Components.AlphaSingle':
@@ -61,7 +63,6 @@ class Parser {
                 case 'Phaser.GameObjects.Components.ToJSON':
                 case 'Phaser.GameObjects.Components.Transform':
                 case 'Phaser.GameObjects.Components.Visible':
-                case 'Phaser.Renderer.WebGL.Pipelines.ModelViewProjection':
                     doclet.kind = 'mixin';
                     break;
                 //  Because, sod you TypeScript
@@ -74,6 +75,7 @@ class Parser {
                 case 'Phaser.Scale.ScaleModes':
                 case 'Phaser.Scale.Zoom':
                 case 'Phaser.Textures.FilterMode':
+                case 'Phaser.Tilemaps.Orientation':
                     // console.log('Forcing enum for ' + doclet.longname);
                     doclet.kind = 'member';
                     doclet.isEnum = true;
@@ -82,6 +84,7 @@ class Parser {
             if ((doclet.longname.indexOf('Phaser.Physics.Arcade.Components.') == 0 || doclet.longname.indexOf('Phaser.Physics.Impact.Components.') == 0 || doclet.longname.indexOf('Phaser.Physics.Matter.Components.') == 0) && doclet.longname.indexOf('#') == -1) {
                 doclet.kind = 'mixin';
             }
+            // console.log(`Name: ${doclet.longname} - Kind: ${doclet.kind}`);
             let obj;
             let container = this.objects;
             switch (doclet.kind) {
@@ -131,12 +134,15 @@ class Parser {
         }
     }
     resolveObjects(docs) {
+        console.log('------------------------------------------------------------------');
+        console.log('Resolve Objects');
+        console.log('------------------------------------------------------------------');
         let allTypes = new Set();
         for (let doclet of docs) {
-            let obj = doclet.kind === 'namespace' ? this.namespaces[doclet.longname] : this.objects[doclet.longname];
+            let obj = (doclet.kind === 'namespace') ? this.namespaces[doclet.longname] : this.objects[doclet.longname];
             if (!obj) {
-                //  TODO
-                console.log(`Warning: Didn't find object for ${doclet.longname}`);
+                console.log(`${doclet.longname} - Kind: ${doclet.kind}`);
+                console.log(`Warning: Didn't find object`);
                 continue;
             }
             if (!doclet.memberof) {
@@ -145,67 +151,50 @@ class Parser {
             else {
                 let isNamespaceMember = doclet.kind === 'class' || doclet.kind === 'typedef' || doclet.kind == 'namespace' || doclet.isEnum;
                 let parent = isNamespaceMember ? this.namespaces[doclet.memberof] : (this.objects[doclet.memberof] || this.namespaces[doclet.memberof]);
-                //TODO: this whole section should be removed once stable
                 if (!parent) {
-                    console.log(`${doclet.longname} in ${doclet.meta.filename}@${doclet.meta.lineno} has parent '${doclet.memberof}' that is not defined.`);
-                    let parts = doclet.memberof.split('.');
-                    let newParts = [parts.pop()];
-                    while (parts.length > 0 && this.objects[parts.join('.')] == null)
-                        newParts.unshift(parts.pop());
-                    parent = this.objects[parts.join('.')];
-                    if (parent == null) {
-                        parent = dom.create.namespace(doclet.memberof);
-                        this.namespaces[doclet.memberof] = parent;
-                        this.topLevel.push(parent);
+                    console.log(`${doclet.longname} - Kind: ${doclet.kind}`);
+                    console.log(`PARENT WARNING: ${doclet.longname} in ${doclet.meta.filename}@${doclet.meta.lineno} has parent '${doclet.memberof}' that is not defined.`);
                 }
-                    else {
-                        while (newParts.length > 0) {
-                            let oldParent = parent;
-                            parent = dom.create.namespace(newParts.shift());
-                            parts.push(parent.name);
-                            this.namespaces[parts.join('.')] = parent;
-                            oldParent.members.push(parent);
-                            parent._parent = oldParent;
-                        }
-                    }
-                }
-                ///////////////////////////////////////////////////////
                 if (parent.members) {
                     parent.members.push(obj);
                 }
                 else {
-                    console.log('Cannot find members array for:');
+                    console.log(`${doclet.longname} - Kind: ${doclet.kind}`);
+                    console.log('Could not find members array');
                     console.log(parent);
                 }
                 obj._parent = parent;
-                // class/interface members have methods, not functions
-                if ((parent.kind === 'class' || parent.kind === 'interface')
-                    && obj.kind === 'function')
+                // class / interface members have methods, not functions
+                if ((parent.kind === 'class' || parent.kind === 'interface') && obj.kind === 'function') {
                     obj.kind = 'method';
+                }
                 // namespace members are vars or consts, not properties
                 if (parent.kind === 'namespace' && obj.kind === 'property') {
-                    if (doclet.kind == 'constant')
+                    if (doclet.kind == 'constant') {
                         obj.kind = 'const';
-                    else
+                    }
+                    else {
                         obj.kind = 'var';
                     }
                 }
             }
         }
+    }
     resolveInheritance(docs) {
         for (let doclet of docs) {
             let obj = doclet.kind === 'namespace' ? this.namespaces[doclet.longname] : this.objects[doclet.longname];
             if (!obj) {
-                //  TODO
                 console.log(`Didn't find type ${doclet.longname} ???`);
                 continue;
             }
             if (!obj._parent)
                 continue;
-            if (doclet.inherited) { // remove inherited members if they aren't from an interface
+            if (doclet.inherited) {
+                // remove inherited members if they aren't from an interface
                 let from = this.objects[doclet.inherits];
-                if (!from || !from._parent)
+                if (!from || !from._parent) {
                     throw `'${doclet.longname}' should inherit from '${doclet.inherits}', which is not defined.`;
+                }
                 if (from._parent.kind != 'interface') {
                     obj._parent.members.splice(obj._parent.members.indexOf(obj), 1);
                     obj._parent = null;
@@ -348,7 +337,10 @@ class Parser {
             let optional = false;
             obj.jsDocComment = '';
             for (let paramDoc of doclet.params) {
-                // TODO REMOVE TEMP FIX
+                if (!paramDoc.name) {
+                    console.log(`Docs Error in '${doclet.longname}' in ${doclet.meta.filename}@${doclet.meta.lineno}`);
+                    console.info(paramDoc);
+                }
                 if (paramDoc.name.indexOf('.') != -1) {
                     console.log(`Warning: ignoring param with '.' for '${doclet.longname}' in ${doclet.meta.filename}@${doclet.meta.lineno}`);
                     let defaultVal = paramDoc.defaultvalue !== undefined ? ` Default ${String(paramDoc.defaultvalue)}.` : '';
@@ -358,7 +350,6 @@ class Parser {
                         obj.jsDocComment += `\n@param ${paramDoc.name} ` + defaultVal;
                     continue;
                 }
-                ///////////////////////
                 let param = dom.create.parameter(paramDoc.name, this.parseType(paramDoc));
                 parameters.push(param);
                 if (optional && paramDoc.optional != true) {

scripts/tsgen/jsdoc-tsd.conf.json

@@ -12,7 +12,8 @@
             "../../src/phaser-core.js",
             "../../src/physics/matter-js/poly-decomp/",
             "../../src/physics/matter-js/lib",
-            "../../src/polyfills"
+            "../../src/polyfills",
+            "../../src/layer3d"
         ],
         "includePattern": ".+\\.js?$",
         "excludePattern": "(^|\\/|\\\\)_"

scripts/tsgen/src/Parser.ts

@@ -31,7 +31,9 @@ export class Parser {
 
         // add declare module
         const phaserPkgModuleDOM = dom.create.module('phaser');
+
         phaserPkgModuleDOM.members.push(dom.create.exportEquals('Phaser'));
+
         this.topLevel.push(phaserPkgModuleDOM);
     }
 
@@ -55,11 +57,15 @@ export class Parser {
     }
 
     private parseObjects(docs: any[]) {
+
+        console.log('------------------------------------------------------------------');
+        console.log('Parse Objects');
+        console.log('------------------------------------------------------------------');
+
         for (let i = 0; i < docs.length; i++) {
 
             let doclet = docs[i];
 
-            // TODO: Custom temporary rules
             switch (doclet.longname)
             {
                 case 'Phaser.GameObjects.Components.Alpha':
@@ -83,7 +89,6 @@ export class Parser {
                 case 'Phaser.GameObjects.Components.ToJSON':
                 case 'Phaser.GameObjects.Components.Transform':
                 case 'Phaser.GameObjects.Components.Visible':
-                case 'Phaser.Renderer.WebGL.Pipelines.ModelViewProjection':
                     doclet.kind = 'mixin';
                     break;
 
@@ -97,6 +102,7 @@ export class Parser {
                 case 'Phaser.Scale.ScaleModes':
                 case 'Phaser.Scale.Zoom':
                 case 'Phaser.Textures.FilterMode':
+                case 'Phaser.Tilemaps.Orientation':
                     // console.log('Forcing enum for ' + doclet.longname);
                     doclet.kind = 'member';
                     doclet.isEnum = true;
@@ -108,6 +114,8 @@ export class Parser {
                 doclet.kind = 'mixin';
             }
 
+            // console.log(`Name: ${doclet.longname} - Kind: ${doclet.kind}`);
+
             let obj: dom.DeclarationBase;
             let container = this.objects;
 
@@ -144,14 +152,19 @@ export class Parser {
                     break;
             }
 
-            if (obj) {
-                if (container[doclet.longname]) {
+            if (obj)
+            {
+                if (container[doclet.longname])
+                {
                     console.log('Warning: ignoring duplicate doc name: ' + doclet.longname);
                     docs.splice(i--, 1);
                     continue;
                 }
+
                 container[doclet.longname] = obj;
-                if (doclet.description) {
+
+                if (doclet.description)
+                {
                     let otherDocs = obj.jsDocComment || '';
                     obj.jsDocComment = doclet.description.replace(regexEndLine, '$1\n') + otherDocs;
                 }
@@ -159,89 +172,103 @@ export class Parser {
         }
     }
 
-    private resolveObjects(docs: any[]) {
+    private resolveObjects(docs: any[])
+    {
+        console.log('------------------------------------------------------------------');
+        console.log('Resolve Objects');
+        console.log('------------------------------------------------------------------');
+
         let allTypes = new Set<string>();
-        for (let doclet of docs) {
-            let obj = doclet.kind === 'namespace' ? this.namespaces[doclet.longname] : this.objects[doclet.longname];
 
-            if (!obj) {
+        for (let doclet of docs)
+        {
+            let obj = (doclet.kind === 'namespace') ? this.namespaces[doclet.longname] : this.objects[doclet.longname];
 
-                //  TODO
-                console.log(`Warning: Didn't find object for ${doclet.longname}`);
+            if (!obj)
+            {
+                console.log(`${doclet.longname} - Kind: ${doclet.kind}`);
+                console.log(`Warning: Didn't find object`);
 
                 continue;
             }
 
-            if (!doclet.memberof) {
+            if (!doclet.memberof)
+            {
                 this.topLevel.push(obj as dom.TopLevelDeclaration);
-            } else {
+            }
+            else
+            {
                 let isNamespaceMember = doclet.kind === 'class' || doclet.kind === 'typedef' || doclet.kind == 'namespace' || doclet.isEnum;
+
                 let parent = isNamespaceMember ? this.namespaces[doclet.memberof] : (this.objects[doclet.memberof] || this.namespaces[doclet.memberof]);
 
-                //TODO: this whole section should be removed once stable
-                if (!parent) {
-                    console.log(`${doclet.longname} in ${doclet.meta.filename}@${doclet.meta.lineno} has parent '${doclet.memberof}' that is not defined.`);
-                    let parts: string[] = doclet.memberof.split('.');
-                    let newParts = [parts.pop()];
-                    while (parts.length > 0 && this.objects[parts.join('.')] == null) newParts.unshift(parts.pop());
-                    parent = this.objects[parts.join('.')] as dom.NamespaceDeclaration;
-                    if (parent == null) {
-                        parent = dom.create.namespace(doclet.memberof);
-                        this.namespaces[doclet.memberof] = <dom.NamespaceDeclaration>parent;
-                        this.topLevel.push(<dom.NamespaceDeclaration>parent);
-                    } else {
-                        while (newParts.length > 0) {
-                            let oldParent = <dom.NamespaceDeclaration>parent;
-                            parent = dom.create.namespace(newParts.shift());
-                            parts.push((<dom.NamespaceDeclaration>parent).name);
-                            this.namespaces[parts.join('.')] = <dom.NamespaceDeclaration>parent;
-                            oldParent.members.push(<dom.NamespaceDeclaration>parent);
-                            (<any>parent)._parent = oldParent;
+                if (!parent)
+                {
+                    console.log(`${doclet.longname} - Kind: ${doclet.kind}`);
+                    console.log(`PARENT WARNING: ${doclet.longname} in ${doclet.meta.filename}@${doclet.meta.lineno} has parent '${doclet.memberof}' that is not defined.`);
                 }
-                    }
-                }
-                ///////////////////////////////////////////////////////
 
-                if ((<any>parent).members) {
+                if ((<any>parent).members)
+                {
                     (<any>parent).members.push(obj);
-                } else {
-                    console.log('Cannot find members array for:');
+                }
+                else
+                {
+                    console.log(`${doclet.longname} - Kind: ${doclet.kind}`);
+                    console.log('Could not find members array');
                     console.log(parent);
                 }
 
                 (<any>obj)._parent = parent;
 
-                // class/interface members have methods, not functions
-                if (((parent as any).kind === 'class' || (parent as any).kind === 'interface')
-                    && (obj as any).kind === 'function')
+                // class / interface members have methods, not functions
+                if (((parent as any).kind === 'class' || (parent as any).kind === 'interface') && (obj as any).kind === 'function')
+                {
                     (obj as any).kind = 'method';
+                }
+
                 // namespace members are vars or consts, not properties
-                if ((parent as any).kind === 'namespace' && (obj as any).kind === 'property') {
-                    if (doclet.kind == 'constant') (obj as any).kind = 'const';
-                    else (obj as any).kind = 'var';
+                if ((parent as any).kind === 'namespace' && (obj as any).kind === 'property')
+                {
+                    if (doclet.kind == 'constant')
+                    {
+                        (obj as any).kind = 'const';
+                    }
+                    else
+                    {
+                        (obj as any).kind = 'var';
+                    }
                 }
             }
         }
     }
 
-    private resolveInheritance(docs: any[]) {
-        for (let doclet of docs) {
+    private resolveInheritance(docs: any[])
+    {
+        for (let doclet of docs)
+        {
             let obj = doclet.kind === 'namespace' ? this.namespaces[doclet.longname] : this.objects[doclet.longname];
-            if (!obj) {
 
-                //  TODO
+            if (!obj)
+            {
                 console.log(`Didn't find type ${doclet.longname} ???`);
-
                 continue;
             }
+
             if (!(<any>obj)._parent) continue;
 
-            if (doclet.inherited) {// remove inherited members if they aren't from an interface
+            if (doclet.inherited)
+            {
+                // remove inherited members if they aren't from an interface
                 let from = this.objects[doclet.inherits];
-                if (!from || !(<any>from)._parent)
-                    throw `'${doclet.longname}' should inherit from '${doclet.inherits}', which is not defined.`;
 
-                if ((<any>from)._parent.kind != 'interface') {
+                if (!from || !(<any>from)._parent)
+                {
+                    throw `'${doclet.longname}' should inherit from '${doclet.inherits}', which is not defined.`;
+                }
+
+                if ((<any>from)._parent.kind != 'interface')
+                {
                     (<any>obj)._parent.members.splice((<any>obj)._parent.members.indexOf(obj), 1);
                     (<any>obj)._parent = null;
                 }
@@ -430,18 +457,25 @@ export class Parser {
 
             for (let paramDoc of doclet.params) {
 
-                // TODO REMOVE TEMP FIX
+                if (!paramDoc.name)
+                {
+                    console.log(`Docs Error in '${doclet.longname}' in ${doclet.meta.filename}@${doclet.meta.lineno}`);
+
+                    console.info(paramDoc);
+                }
+
                 if (paramDoc.name.indexOf('.') != -1) {
+
                     console.log(`Warning: ignoring param with '.' for '${doclet.longname}' in ${doclet.meta.filename}@${doclet.meta.lineno}`);
 
                     let defaultVal = paramDoc.defaultvalue !== undefined ? ` Default ${String(paramDoc.defaultvalue)}.` : '';
+
                     if (paramDoc.description)
                         obj.jsDocComment += `\n@param ${paramDoc.name} ${paramDoc.description.replace(regexEndLine, '$1\n')}` + defaultVal;
                     else if (defaultVal.length)
                         obj.jsDocComment += `\n@param ${paramDoc.name} ` + defaultVal;
                     continue;
                 }
-                ///////////////////////
 
                 let param = dom.create.parameter(paramDoc.name, this.parseType(paramDoc));
                 parameters.push(param);

scripts/tsgen/test/bin/game.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {

src/actions/AlignTo.js

@@ -17,7 +17,7 @@ var QuickSet = require('../display/align/to/QuickSet');
  * @generic {Phaser.GameObjects.GameObject[]} G - [items,$return]
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
- * @param {integer} position - The position to align the items with. This is an align constant, such as `Phaser.Display.Align.LEFT_CENTER`.
+ * @param {number} position - The position to align the items with. This is an align constant, such as `Phaser.Display.Align.LEFT_CENTER`.
  * @param {number} [offsetX=0] - Optional horizontal offset from the position.
  * @param {number} [offsetY=0] - Optional vertical offset from the position.
  *

src/actions/Angle.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `angle` property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/GetFirst.js

@@ -18,7 +18,7 @@
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be searched by this action.
  * @param {object} compare - The comparison object. Each property in this object will be checked against the items of the array.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
  *
  * @return {?(object|Phaser.GameObjects.GameObject)} The first object in the array that matches the comparison object, or `null` if no match was found.
  */

src/actions/GetLast.js

@@ -18,7 +18,7 @@
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be searched by this action.
  * @param {object} compare - The comparison object. Each property in this object will be checked against the items of the array.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
  *
  * @return {?(object|Phaser.GameObjects.GameObject)} The last object in the array that matches the comparison object, or `null` if no match was found.
  */

src/actions/IncAlpha.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `alpha` property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/IncX.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `x` property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/IncXY.js

@@ -24,8 +24,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {number} [y=x] - The amount to be added to the `y` property. If `undefined` or `null` it uses the `x` value.
  * @param {number} [stepX=0] - This is added to the `x` amount, multiplied by the iteration counter.
  * @param {number} [stepY=0] - This is added to the `y` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/IncY.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `y` property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/PlaceOnRectangle.js

@@ -21,7 +21,7 @@ var RotateRight = require('../utils/array/RotateRight');
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - An array of Game Objects. The contents of this array are updated by this Action.
  * @param {Phaser.Geom.Rectangle} rect - The Rectangle to position the Game Objects on.
- * @param {integer} [shift=1] - An optional positional offset.
+ * @param {number} [shift=1] - An optional positional offset.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of Game Objects that was passed to this Action.
  */

src/actions/PlayAnimation.js

@@ -14,7 +14,7 @@
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - An array of Game Objects. The contents of this array are updated by this Action.
  * @param {string} key - The name of the animation to play.
- * @param {(string|integer)} [startFrame] - The starting frame of the animation with the given key.
+ * @param {(string|number)} [startFrame] - The starting frame of the animation with the given key.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of Game Objects that was passed to this Action.
  */

src/actions/PropertyValueInc.js

@@ -21,8 +21,8 @@
  * @param {string} key - The property to be updated.
  * @param {number} value - The amount to be added to the property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/PropertyValueSet.js

@@ -21,8 +21,8 @@
  * @param {string} key - The property to be updated.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/Rotate.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `rotation` property (in radians).
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/ScaleX.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `scaleX` property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/ScaleXY.js

@@ -24,8 +24,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {number} [scaleY] - The amount to be added to the `scaleY` property. If `undefined` or `null` it uses the `scaleX` value.
  * @param {number} [stepX=0] - This is added to the `scaleX` amount, multiplied by the iteration counter.
  * @param {number} [stepY=0] - This is added to the `scaleY` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/ScaleY.js

@@ -22,8 +22,8 @@ var PropertyValueInc = require('./PropertyValueInc');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to be added to the `scaleY` property.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetAlpha.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetBlendMode.js

@@ -21,8 +21,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetDepth.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetOrigin.js

@@ -24,8 +24,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {number} [originY] - The amount to set the `originY` property to. If `undefined` or `null` it uses the `originX` value.
  * @param {number} [stepX=0] - This is added to the `originX` amount, multiplied by the iteration counter.
  * @param {number} [stepY=0] - This is added to the `originY` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetRotation.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetScale.js

@@ -24,8 +24,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {number} [scaleY] - The amount to set the `scaleY` property to. If `undefined` or `null` it uses the `scaleX` value.
  * @param {number} [stepX=0] - This is added to the `scaleX` amount, multiplied by the iteration counter.
  * @param {number} [stepY=0] - This is added to the `scaleY` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetScaleX.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetScaleY.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetScrollFactor.js

@@ -24,8 +24,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {number} [scrollFactorY] - The amount to set the `scrollFactorY` property to. If `undefined` or `null` it uses the `scrollFactorX` value.
  * @param {number} [stepX=0] - This is added to the `scrollFactorX` amount, multiplied by the iteration counter.
  * @param {number} [stepY=0] - This is added to the `scrollFactorY` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetScrollFactorX.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetScrollFactorY.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetVisible.js

@@ -19,8 +19,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  *
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {boolean} value - The value to set the property to.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetX.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetXY.js

@@ -24,8 +24,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {number} [y=x] - The amount to set the `y` property to. If `undefined` or `null` it uses the `x` value.
  * @param {number} [stepX=0] - This is added to the `x` amount, multiplied by the iteration counter.
  * @param {number} [stepY=0] - This is added to the `y` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/SetY.js

@@ -22,8 +22,8 @@ var PropertyValueSet = require('./PropertyValueSet');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - The array of items to be updated by this action.
  * @param {number} value - The amount to set the property to.
  * @param {number} [step=0] - This is added to the `value` amount, multiplied by the iteration counter.
- * @param {integer} [index=0] - An optional offset to start searching from within the items array.
- * @param {integer} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
+ * @param {number} [index=0] - An optional offset to start searching from within the items array.
+ * @param {number} [direction=1] - The direction to iterate through the array. 1 is from beginning to end, -1 from end to beginning.
  *
  * @return {(array|Phaser.GameObjects.GameObject[])} The array of objects that were passed to this Action.
  */

src/actions/ShiftPosition.js

@@ -23,7 +23,7 @@ var Vector2 = require('../math/Vector2');
  * @param {(array|Phaser.GameObjects.GameObject[])} items - An array of Game Objects. The contents of this array are updated by this Action.
  * @param {number} x - The x coordinate to place the first item in the array at.
  * @param {number} y - The y coordinate to place the first item in the array at.
- * @param {integer} [direction=0] - The iteration direction. 0 = first to last and 1 = last to first.
+ * @param {number} [direction=0] - The iteration direction. 0 = first to last and 1 = last to first.
  * @param {(Phaser.Math.Vector2|object)} [output] - An optional objec to store the final objects position in.
  *
  * @return {Phaser.Math.Vector2} The output vector.

src/actions/typedefs/GridAlignConfig.js

@@ -2,13 +2,13 @@
  * @typedef {object} Phaser.Types.Actions.GridAlignConfig
  * @since 3.0.0
  *
- * @property {integer} [width=-1] - The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.
+ * @property {number} [width=-1] - The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity.
  *                                  If both this value and height are set to -1 then this value overrides it and the `height` value is ignored.
- * @property {integer} [height=-1] - The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.
+ * @property {number} [height=-1] - The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity.
  *                                   If both this value and `width` are set to -1 then `width` overrides it and this value is ignored.
- * @property {integer} [cellWidth=1] - The width of the cell, in pixels, in which the item is positioned.
- * @property {integer} [cellHeight=1] - The height of the cell, in pixels, in which the item is positioned.
- * @property {integer} [position=0] - The alignment position. One of the Phaser.Display.Align consts such as `TOP_LEFT` or `RIGHT_CENTER`.
+ * @property {number} [cellWidth=1] - The width of the cell, in pixels, in which the item is positioned.
+ * @property {number} [cellHeight=1] - The height of the cell, in pixels, in which the item is positioned.
+ * @property {number} [position=0] - The alignment position. One of the Phaser.Display.Align consts such as `TOP_LEFT` or `RIGHT_CENTER`.
  * @property {number} [x=0] - Optionally place the top-left of the final grid at this coordinate.
  * @property {number} [y=0] - Optionally place the top-left of the final grid at this coordinate.
  */

src/animations/Animation.js

@@ -88,7 +88,7 @@ var Animation = new Class({
          * The frame rate of playback in frames per second (default 24 if duration is null)
          *
          * @name Phaser.Animations.Animation#frameRate
-         * @type {integer}
+         * @type {number}
          * @default 24
          * @since 3.0.0
          */
@@ -100,7 +100,7 @@ var Animation = new Class({
          * otherwise the `frameRate` is derived from `duration`.
          *
          * @name Phaser.Animations.Animation#duration
-         * @type {integer}
+         * @type {number}
          * @since 3.0.0
          */
         this.duration = GetValue(config, 'duration', null);
@@ -109,7 +109,7 @@ var Animation = new Class({
          * How many ms per frame, not including frame specific modifiers.
          *
          * @name Phaser.Animations.Animation#msPerFrame
-         * @type {integer}
+         * @type {number}
          * @since 3.0.0
          */
         this.msPerFrame;
@@ -128,7 +128,7 @@ var Animation = new Class({
          * The delay in ms before the playback will begin.
          *
          * @name Phaser.Animations.Animation#delay
-         * @type {integer}
+         * @type {number}
          * @default 0
          * @since 3.0.0
          */
@@ -138,7 +138,7 @@ var Animation = new Class({
          * Number of times to repeat the animation. Set to -1 to repeat forever.
          *
          * @name Phaser.Animations.Animation#repeat
-         * @type {integer}
+         * @type {number}
          * @default 0
          * @since 3.0.0
          */
@@ -148,7 +148,7 @@ var Animation = new Class({
          * The delay in ms before the a repeat play starts.
          *
          * @name Phaser.Animations.Animation#repeatDelay
-         * @type {integer}
+         * @type {number}
          * @default 0
          * @since 3.0.0
          */
@@ -222,7 +222,7 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#calculateDuration
      * @since 3.50.0
      *
-     * @param {(Phaser.Animations.Animation|Phaser.GameObjects.Components.Animation)} target - The target to set the values on.
+     * @param {Phaser.Animations.Animation} target - The target to set the values on.
      * @param {number} totalFrames - The total number of frames in the animation.
      * @param {number} duration - The duration to calculate the frame rate from.
      * @param {number} frameRate - The frame ate to calculate the duration from.
@@ -276,7 +276,7 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#addFrameAt
      * @since 3.0.0
      *
-     * @param {integer} index - The index to insert the frame at within the animation.
+     * @param {number} index - The index to insert the frame at within the animation.
      * @param {(string|Phaser.Types.Animations.AnimationFrame[])} config - Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.
      *
      * @return {this} This Animation object.
@@ -315,7 +315,7 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#checkFrame
      * @since 3.0.0
      *
-     * @param {integer} index - The index to be checked.
+     * @param {number} index - The index to be checked.
      *
      * @return {boolean} `true` if the index is valid, otherwise `false`.
      */
@@ -332,14 +332,14 @@ var Animation = new Class({
      * @protected
      * @since 3.0.0
      *
-     * @param {Phaser.GameObjects.Components.Animation} component - The Animation Component belonging to the Game Object invoking this call.
+     * @param {Phaser.Animations.AnimationState} state - The Animation State belonging to the Game Object invoking this call.
      */
-    getFirstTick: function (component)
+    getFirstTick: function (state)
     {
         //  When is the first update due?
-        component.accumulator = 0;
+        state.accumulator = 0;
 
-        component.nextTick = component.msPerFrame + component.currentFrame.duration;
+        state.nextTick = state.msPerFrame + state.currentFrame.duration;
     },
 
     /**
@@ -349,7 +349,7 @@ var Animation = new Class({
      * @protected
      * @since 3.0.0
      *
-     * @param {integer} index - The index in the AnimationFrame array
+     * @param {number} index - The index in the AnimationFrame array
      *
      * @return {Phaser.Animations.AnimationFrame} The frame at the index provided from the animation sequence
      */
@@ -473,13 +473,13 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#getNextTick
      * @since 3.0.0
      *
-     * @param {Phaser.GameObjects.Components.Animation} component - The Animation Component belonging to the Game Object invoking this call.
+     * @param {Phaser.Animations.AnimationState} state - The Animation State belonging to the Game Object invoking this call.
      */
-    getNextTick: function (component)
+    getNextTick: function (state)
     {
-        component.accumulator -= component.nextTick;
+        state.accumulator -= state.nextTick;
 
-        component.nextTick = component.msPerFrame + component.currentFrame.duration;
+        state.nextTick = state.msPerFrame + state.currentFrame.duration;
     },
 
     /**
@@ -505,42 +505,42 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#nextFrame
      * @since 3.0.0
      *
-     * @param {Phaser.GameObjects.Components.Animation} component - The Animation Component to advance.
+     * @param {Phaser.Animations.AnimationState} state - The Animation State to advance.
      */
-    nextFrame: function (component)
+    nextFrame: function (state)
     {
-        var frame = component.currentFrame;
+        var frame = state.currentFrame;
 
         if (frame.isLast)
         {
             //  We're at the end of the animation
 
             //  Yoyo? (happens before repeat)
-            if (component.yoyo)
+            if (state.yoyo)
             {
-                this.handleYoyoFrame(component, false);
+                this.handleYoyoFrame(state, false);
             }
-            else if (component.repeatCounter > 0)
+            else if (state.repeatCounter > 0)
             {
                 //  Repeat (happens before complete)
 
-                if (component.inReverse && component.forward)
+                if (state.inReverse && state.forward)
                 {
-                    component.forward = false;
+                    state.forward = false;
                 }
                 else
                 {
-                    this.repeatAnimation(component);
+                    this.repeatAnimation(state);
                 }
             }
             else
             {
-                component.complete();
+                state.complete();
             }
         }
         else
         {
-            this.updateAndGetNextTick(component, frame.nextFrame);
+            this.updateAndGetNextTick(state, frame.nextFrame);
         }
     },
 
@@ -551,37 +551,37 @@ var Animation = new Class({
      * @private
      * @since 3.12.0
      *
-     * @param {Phaser.GameObjects.Components.Animation} component - The Animation Component to advance.
+     * @param {Phaser.Animations.AnimationState} state - The Animation State to advance.
      * @param {boolean} isReverse - Is animation in reverse mode? (Default: false)
      */
-    handleYoyoFrame: function (component, isReverse)
+    handleYoyoFrame: function (state, isReverse)
     {
         if (!isReverse) { isReverse = false; }
 
-        if (component.inReverse === !isReverse && component.repeatCounter > 0)
+        if (state.inReverse === !isReverse && state.repeatCounter > 0)
         {
-            if (component.repeatDelay === 0 || component.pendingRepeat)
+            if (state.repeatDelay === 0 || state.pendingRepeat)
             {
-                component.forward = isReverse;
+                state.forward = isReverse;
             }
 
-            this.repeatAnimation(component);
+            this.repeatAnimation(state);
 
             return;
         }
 
-        if (component.inReverse !== isReverse && component.repeatCounter === 0)
+        if (state.inReverse !== isReverse && state.repeatCounter === 0)
         {
-            component.complete();
+            state.complete();
 
             return;
         }
 
-        component.forward = isReverse;
+        state.forward = isReverse;
 
-        var frame = (isReverse) ? component.currentFrame.nextFrame : component.currentFrame.prevFrame;
+        var frame = (isReverse) ? state.currentFrame.nextFrame : state.currentFrame.prevFrame;
 
-        this.updateAndGetNextTick(component, frame);
+        this.updateAndGetNextTick(state, frame);
     },
 
     /**
@@ -590,7 +590,7 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#getLastFrame
      * @since 3.12.0
      *
-     * @return {Phaser.Animations.AnimationFrame} component - The Animation Last Frame.
+     * @return {Phaser.Animations.AnimationFrame} The last Animation Frame.
      */
     getLastFrame: function ()
     {
@@ -604,41 +604,41 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#previousFrame
      * @since 3.0.0
      *
-     * @param {Phaser.GameObjects.Components.Animation} component - The Animation Component belonging to the Game Object invoking this call.
+     * @param {Phaser.Animations.AnimationState} state - The Animation State belonging to the Game Object invoking this call.
      */
-    previousFrame: function (component)
+    previousFrame: function (state)
     {
-        var frame = component.currentFrame;
+        var frame = state.currentFrame;
 
         if (frame.isFirst)
         {
             //  We're at the start of the animation
-            if (component.yoyo)
+            if (state.yoyo)
             {
-                this.handleYoyoFrame(component, true);
+                this.handleYoyoFrame(state, true);
             }
-            else if (component.repeatCounter > 0)
+            else if (state.repeatCounter > 0)
             {
-                if (component.inReverse && !component.forward)
+                if (state.inReverse && !state.forward)
                 {
-                    this.repeatAnimation(component);
+                    this.repeatAnimation(state);
                 }
                 else
                 {
                     //  Repeat (happens before complete)
-                    component.forward = true;
+                    state.forward = true;
 
-                    this.repeatAnimation(component);
+                    this.repeatAnimation(state);
                 }
             }
             else
             {
-                component.complete();
+                state.complete();
             }
         }
         else
         {
-            this.updateAndGetNextTick(component, frame.prevFrame);
+            this.updateAndGetNextTick(state, frame.prevFrame);
         }
     },
 
@@ -649,13 +649,14 @@ var Animation = new Class({
      * @private
      * @since 3.12.0
      *
+     * @param {Phaser.Animations.AnimationState} state - The Animation State.
      * @param {Phaser.Animations.AnimationFrame} frame - An Animation frame.
      */
-    updateAndGetNextTick: function (component, frame)
+    updateAndGetNextTick: function (state, frame)
     {
-        component.setCurrentFrame(frame);
+        state.setCurrentFrame(frame);
 
-        this.getNextTick(component);
+        this.getNextTick(state);
     },
 
     /**
@@ -688,7 +689,7 @@ var Animation = new Class({
      * @method Phaser.Animations.Animation#removeFrameAt
      * @since 3.0.0
      *
-     * @param {integer} index - The index in the AnimationFrame array
+     * @param {number} index - The index in the AnimationFrame array
      *
      * @return {this} This Animation object.
      */
@@ -711,46 +712,46 @@ var Animation = new Class({
      * @fires Phaser.Animations.Events#SPRITE_ANIMATION_KEY_REPEAT
      * @since 3.0.0
      *
-     * @param {Phaser.GameObjects.Components.Animation} component - The Animation Component belonging to the Game Object invoking this call.
+     * @param {Phaser.Animations.AnimationState} state - The Animation State belonging to the Game Object invoking this call.
      */
-    repeatAnimation: function (component)
+    repeatAnimation: function (state)
     {
-        if (component._pendingStop === 2)
+        if (state._pendingStop === 2)
         {
-            if (component._pendingStopValue === 0)
+            if (state._pendingStopValue === 0)
             {
-                return component.stop();
+                return state.stop();
             }
             else
             {
-                component._pendingStopValue--;
+                state._pendingStopValue--;
             }
         }
 
-        if (component.repeatDelay > 0 && !component.pendingRepeat)
+        if (state.repeatDelay > 0 && !state.pendingRepeat)
         {
-            component.pendingRepeat = true;
-            component.accumulator -= component.nextTick;
-            component.nextTick += component.repeatDelay;
+            state.pendingRepeat = true;
+            state.accumulator -= state.nextTick;
+            state.nextTick += state.repeatDelay;
         }
         else
         {
-            component.repeatCounter--;
+            state.repeatCounter--;
 
-            if (component.forward)
+            if (state.forward)
             {
-                component.setCurrentFrame(component.currentFrame.nextFrame);
+                state.setCurrentFrame(state.currentFrame.nextFrame);
             }
             else
             {
-                component.setCurrentFrame(component.currentFrame.prevFrame);
+                state.setCurrentFrame(state.currentFrame.prevFrame);
             }
 
-            if (component.isPlaying)
+            if (state.isPlaying)
             {
-                this.getNextTick(component);
+                this.getNextTick(state);
 
-                component.handleRepeat();
+                state.handleRepeat();
             }
         }
     },

src/animations/AnimationFrame.js

@@ -21,16 +21,19 @@ var Class = require('../utils/Class');
  * @since 3.0.0
  *
  * @param {string} textureKey - The key of the Texture this AnimationFrame uses.
- * @param {(string|integer)} textureFrame - The key of the Frame within the Texture that this AnimationFrame uses.
- * @param {integer} index - The index of this AnimationFrame within the Animation sequence.
+ * @param {(string|number)} textureFrame - The key of the Frame within the Texture that this AnimationFrame uses.
+ * @param {number} index - The index of this AnimationFrame within the Animation sequence.
  * @param {Phaser.Textures.Frame} frame - A reference to the Texture Frame this AnimationFrame uses for rendering.
+ * @param {boolean} [isKeyFrame=false] - Is this Frame a Keyframe within the Animation?
  */
 var AnimationFrame = new Class({
 
     initialize:
 
-    function AnimationFrame (textureKey, textureFrame, index, frame)
+    function AnimationFrame (textureKey, textureFrame, index, frame, isKeyFrame)
     {
+        if (isKeyFrame === undefined) { isKeyFrame = false; }
+
         /**
          * The key of the Texture this AnimationFrame uses.
          *
@@ -44,7 +47,7 @@ var AnimationFrame = new Class({
          * The key of the Frame within the Texture that this AnimationFrame uses.
          *
          * @name Phaser.Animations.AnimationFrame#textureFrame
-         * @type {(string|integer)}
+         * @type {(string|number)}
          * @since 3.0.0
          */
         this.textureFrame = textureFrame;
@@ -53,7 +56,7 @@ var AnimationFrame = new Class({
          * The index of this AnimationFrame within the Animation sequence.
          *
          * @name Phaser.Animations.AnimationFrame#index
-         * @type {integer}
+         * @type {number}
          * @since 3.0.0
          */
         this.index = index;
@@ -133,6 +136,15 @@ var AnimationFrame = new Class({
          * @since 3.0.0
          */
         this.progress = 0;
+
+        /**
+         * Is this Frame a KeyFrame within the Animation?
+         *
+         * @name Phaser.Animations.AnimationFrame#isKeyFrame
+         * @type {boolean}
+         * @since 3.50.0
+         */
+        this.isKeyFrame = isKeyFrame;
     },
 
     /**
@@ -148,7 +160,8 @@ var AnimationFrame = new Class({
         return {
             key: this.textureKey,
             frame: this.textureFrame,
-            duration: this.duration
+            duration: this.duration,
+            keyframe: this.isKeyFrame
         };
     },
 

src/animations/AnimationManager.js

@@ -93,7 +93,7 @@ var AnimationManager = new Class({
          * See the {@link #setMix} method for more details.
          *
          * @name Phaser.Animations.AnimationManager#mixes
-         * @type {Phaser.Structs.Map.<string>}
+         * @type {Phaser.Structs.Map.<string, Phaser.Animations.Animation>}
          * @since 3.50.0
          */
         this.mixes = new CustomMap();
@@ -354,17 +354,17 @@ var AnimationManager = new Class({
      *
      * This was tested with Aseprite 1.2.25.
      *
-     * This will export a png and json file which you can load using the Atlas Loader, i.e.:
+     * This will export a png and json file which you can load using the Aseprite Loader, i.e.:
      *
      * ```javascript
      * function preload ()
      * {
      *     this.load.path = 'assets/animations/aseprite/';
-     *     this.load.atlas('paladin', 'paladin.png', 'paladin.json');
+     *     this.load.aseprite('paladin', 'paladin.png', 'paladin.json');
      * }
      * ```
      *
-     * Once exported, you can call this method from within a Scene with the 'atlas' key:
+     * Once loaded, you can call this method from within a Scene with the 'atlas' key:
      *
      * ```javascript
      * this.anims.createFromAseprite('paladin');
@@ -683,6 +683,36 @@ var AnimationManager = new Class({
      *
      * If you're working with a texture atlas, see the `generateFrameNames` method instead.
      *
+     * It's a helper method, designed to make it easier for you to extract frames from sprite sheets.
+     * If you're working with a texture atlas, see the `generateFrameNames` method instead.
+     *
+     * Example:
+     *
+     * If you have a sprite sheet loaded called `explosion` and it contains 12 frames, then you can call this method using:
+     * `this.anims.generateFrameNumbers('explosion', { start: 0, end: 12 })`.
+     *
+     * The `end` value tells it to stop after 12 frames. To create an animation using this method, you can do:
+     *
+     * ```javascript
+     * this.anims.create({
+     *   key: 'boom',
+     *   frames: this.anims.generateFrameNames('explosion', {
+     *     start: 0,
+     *     end: 12
+     *   })
+     * });
+     * ```
+     *
+     * Note that `start` is optional and you don't need to include it if the animation starts from frame 0.
+     *
+     * To specify an animation in reverse, swap the `start` and `end` values.
+     *
+     * If the frames are not sequential, you may pass an array of frame numbers instead, for example:
+     *
+     * `this.anims.generateFrameNumbers('explosion', { frames: [ 0, 1, 2, 1, 2, 3, 4, 0, 1, 2 ] })`
+     *
+     * Please see the animation examples and `GenerateFrameNumbers` config docs for further details.
+     *
      * @method Phaser.Animations.AnimationManager#generateFrameNumbers
      * @since 3.0.0
      *

src/animations/AnimationState.js

@@ -438,7 +438,7 @@ var AnimationState = new Class({
          * 3 = Waiting for specific frame
          *
          * @name Phaser.Animations.AnimationState#_pendingStop
-         * @type {integer}
+         * @type {number}
          * @private
          * @since 3.4.0
          */
@@ -680,7 +680,7 @@ var AnimationState = new Class({
      * @since 3.50.0
      *
      * @param {(string|Phaser.Animations.Animation|Phaser.Types.Animations.PlayAnimationConfig)} key - The string-based key of the animation to play, or an Animation instance, or a `PlayAnimationConfig` object.
-     * @param {integer} delay - The delay, in milliseconds, to wait before starting the animation playing.
+     * @param {number} delay - The delay, in milliseconds, to wait before starting the animation playing.
      *
      * @return {Phaser.GameObjects.GameObject} The Game Object that owns this Animation Component.
      */
@@ -726,7 +726,7 @@ var AnimationState = new Class({
      * @since 3.50.0
      *
      * @param {(string|Phaser.Animations.Animation|Phaser.Types.Animations.PlayAnimationConfig)} key - The string-based key of the animation to play, or an Animation instance, or a `PlayAnimationConfig` object.
-     * @param {integer} [repeatCount=1] - How many times should the animation repeat before the next one starts?
+     * @param {number} [repeatCount=1] - How many times should the animation repeat before the next one starts?
      *
      * @return {Phaser.GameObjects.GameObject} The Game Object that owns this Animation Component.
      */
@@ -1175,7 +1175,7 @@ var AnimationState = new Class({
      * @method Phaser.Animations.AnimationState#setRepeat
      * @since 3.4.0
      *
-     * @param {integer} value - The number of times that the animation should repeat.
+     * @param {number} value - The number of times that the animation should repeat.
      *
      * @return {Phaser.GameObjects.GameObject} The Game Object that owns this Animation Component.
      */
@@ -1351,7 +1351,7 @@ var AnimationState = new Class({
      * @fires Phaser.Animations.Events#ANIMATION_STOP
      * @since 3.4.0
      *
-     * @param {integer} delay - The number of milliseconds to wait before stopping this animation.
+     * @param {number} delay - The number of milliseconds to wait before stopping this animation.
      *
      * @return {Phaser.GameObjects.GameObject} The Game Object that owns this Animation Component.
      */
@@ -1379,7 +1379,7 @@ var AnimationState = new Class({
      * @fires Phaser.Animations.Events#ANIMATION_STOP
      * @since 3.50.0
      *
-     * @param {integer} [repeatCount=1] - How many times should the animation repeat before stopping?
+     * @param {number} [repeatCount=1] - How many times should the animation repeat before stopping?
      *
      * @return {Phaser.GameObjects.GameObject} The Game Object that owns this Animation Component.
      */
@@ -1432,7 +1432,7 @@ var AnimationState = new Class({
      * @method Phaser.Animations.AnimationState#getTotalFrames
      * @since 3.4.0
      *
-     * @return {integer} The total number of frames in the current animation, or zero if no animation has been loaded.
+     * @return {number} The total number of frames in the current animation, or zero if no animation has been loaded.
      */
     getTotalFrames: function ()
     {
@@ -1629,11 +1629,11 @@ var AnimationState = new Class({
      *
      * @param {string} key - The key of the Animation to retrieve.
      *
-     * @return {Phaser.Animations.Animation} The Animation, or `undefined` if the key is invalid.
+     * @return {Phaser.Animations.Animation} The Animation, or `null` if the key is invalid.
      */
     get: function (key)
     {
-        return (this.anims && this.anims.get(key));
+        return (this.anims) ? this.anims.get(key) : null;
     },
 
     /**
@@ -1644,11 +1644,11 @@ var AnimationState = new Class({
      *
      * @param {string} key - The key of the Animation to check.
      *
-     * @return {boolean} `true` if the Animation exists locally, or `false` if the key is available.
+     * @return {boolean} `true` if the Animation exists locally, or `false` if the key is available, or there are no local animations.
      */
     exists: function (key)
     {
-        return (this.anims && this.anims.has(key));
+        return (this.anims) ? this.anims.has(key) : false;
     },
 
     /**
@@ -1701,6 +1701,99 @@ var AnimationState = new Class({
         return anim;
     },
 
+    /**
+     * Generate an array of {@link Phaser.Types.Animations.AnimationFrame} objects from a texture key and configuration object.
+     *
+     * Generates objects with string based frame names, as configured by the given {@link Phaser.Types.Animations.GenerateFrameNames}.
+     *
+     * It's a helper method, designed to make it easier for you to extract all of the frame names from texture atlases.
+     * If you're working with a sprite sheet, see the `generateFrameNumbers` method instead.
+     *
+     * Example:
+     *
+     * If you have a texture atlases loaded called `gems` and it contains 6 frames called `ruby_0001`, `ruby_0002`, and so on,
+     * then you can call this method using: `this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 })`.
+     *
+     * The `end` value tells it to look for 6 frames, incrementally numbered, all starting with the prefix `ruby_`. The `zeroPad`
+     * value tells it how many zeroes pad out the numbers. To create an animation using this method, you can do:
+     *
+     * ```javascript
+     * this.anims.create({
+     *   key: 'ruby',
+     *   repeat: -1,
+     *   frames: this.anims.generateFrameNames('gems', {
+     *     prefix: 'ruby_',
+     *     end: 6,
+     *     zeroPad: 4
+     *   })
+     * });
+     * ```
+     *
+     * Please see the animation examples for further details.
+     *
+     * @method Phaser.Animations.AnimationState#generateFrameNames
+     * @since 3.50.0
+     *
+     * @param {string} key - The key for the texture containing the animation frames.
+     * @param {Phaser.Types.Animations.GenerateFrameNames} [config] - The configuration object for the animation frame names.
+     *
+     * @return {Phaser.Types.Animations.AnimationFrame[]} The array of {@link Phaser.Types.Animations.AnimationFrame} objects.
+     */
+    generateFrameNames: function (key, config)
+    {
+        return this.animationManager.generateFrameNames(key, config);
+    },
+
+    /**
+     * Generate an array of {@link Phaser.Types.Animations.AnimationFrame} objects from a texture key and configuration object.
+     *
+     * Generates objects with numbered frame names, as configured by the given {@link Phaser.Types.Animations.GenerateFrameNumbers}.
+     *
+     * If you're working with a texture atlas, see the `generateFrameNames` method instead.
+     *
+     * It's a helper method, designed to make it easier for you to extract frames from sprite sheets.
+     * If you're working with a texture atlas, see the `generateFrameNames` method instead.
+     *
+     * Example:
+     *
+     * If you have a sprite sheet loaded called `explosion` and it contains 12 frames, then you can call this method using:
+     * `this.anims.generateFrameNumbers('explosion', { start: 0, end: 12 })`.
+     *
+     * The `end` value tells it to stop after 12 frames. To create an animation using this method, you can do:
+     *
+     * ```javascript
+     * this.anims.create({
+     *   key: 'boom',
+     *   frames: this.anims.generateFrameNames('explosion', {
+     *     start: 0,
+     *     end: 12
+     *   })
+     * });
+     * ```
+     *
+     * Note that `start` is optional and you don't need to include it if the animation starts from frame 0.
+     *
+     * To specify an animation in reverse, swap the `start` and `end` values.
+     *
+     * If the frames are not sequential, you may pass an array of frame numbers instead, for example:
+     *
+     * `this.anims.generateFrameNumbers('explosion', { frames: [ 0, 1, 2, 1, 2, 3, 4, 0, 1, 2 ] })`
+     *
+     * Please see the animation examples and `GenerateFrameNumbers` config docs for further details.
+     *
+     * @method Phaser.Animations.AnimationState#generateFrameNumbers
+     * @since 3.50.0
+     *
+     * @param {string} key - The key for the texture containing the animation frames.
+     * @param {Phaser.Types.Animations.GenerateFrameNumbers} config - The configuration object for the animation frames.
+     *
+     * @return {Phaser.Types.Animations.AnimationFrame[]} The array of {@link Phaser.Types.Animations.AnimationFrame} objects.
+     */
+    generateFrameNumbers: function (key, config)
+    {
+        return this.animationManager.generateFrameNumbers(key, config);
+    },
+
     /**
      * Removes a locally created Animation from this Sprite, based on the given key.
      *