Releases: phaserjs/phaser
Phaser v3.14.0 Release
Version 3.14.0 - Tachikoma - 1st October 2018
Tilemap New Features, Updates and Fixes
- Both Static and Dynamic Tilemap layers now support rendering multiple tilesets per layer in both Canvas and WebGL. To use multiple tilesets pass in an array of Tileset objects, or strings, to the
createStaticLayer
andcreateDynamicLayer
methods respectively. Tilemap.createStaticLayer
now supports passing either a Tileset reference, or a string, or an array of them as the 2nd argument. If strings, the string should be the Tileset name (usually defined in Tiled).Tilemap.createDynamicLayer
now supports passing either a Tileset reference, or a string, or an array of them as the 2nd argument. If strings, the string should be the Tileset name (usually defined in Tiled).Tilemap.createBlankDynamicLayer
now supports passing either a Tileset reference, or a string, or an array of them as the 2nd argument. If strings, the string should be the Tileset name (usually defined in Tiled).- Static Tilemap Layers now support tile rotation and flipping. Previously this was a feature only for Dynamic Tilemap Layers, but now both have it. Close #4037 (thanks @thisredone)
Tilemap.getTileset
is a new method that will return a Tileset based on its name.ParseTilesets
has been rewritten so it will convert the new data structures of Tiled 1.2 into the format expected by Phaser, allowing you to use either Tiled 1.2.x or Tiled 1.1 JSON exports. Fix #3998 (thanks @martin-pabst @halgorithm)Tilemap.setBaseTileSize
now sets the size into the LayerDatabaseTileWidth
andbaseTileHeight
properties accordingly. Fix #4057 (thanks @Imilo)- Calling
Tilemap.renderDebug
ignored the layer world position when drawing to the Graphics object. It will now translate to the layer position before drawing. Fix #4061 (thanks @Zax37) - Calling
Tilemap.renderDebug
ignored the layer scale when drawing to the Graphics object. It will now scale the layer before drawing. Fix #4026 (thanks @JasonHK) - The Static Tilemap Layer would stop drawing all tiles from that point on, if it encountered a tile which had invalid texture coordinates (such as a tile from another tileset). It now skips invalid tiles properly again. Fix #4002 (thanks @jdotrjs)
- If you used a RenderTexture as a tileset then Dynamic Tilemap Layers would render the tiles inversed on the y-axis in WebGL. Fix #4017 (thanks @s-s)
- If you used a scaled Dynamic Tilemap Layer and rotated or flipped tiles, the tiles that were rotated or flipped would be positioned incorrectly in WebGL. Fix #3778 (thanks @nkholski)
StaticTilemapLayer.tileset
is now an array of Tileset objects, where-as before it was a single reference.StaticTilemapLayer.vertexBuffer
is now an array of WebGLBuffer objects, where-as before it was a single instance.StaticTilemapLayer.bufferData
is now an array of ArrayBuffer objects, where-as before it was a single instance.StaticTilemapLayer.vertexViewF32
is now an array of Float3Array objects, where-as before it was a single instance.StaticTilemapLayer.vertexViewU32
is now an array of Uint32Array objects, where-as before it was a single instance.StaticTilemapLayer.dirty
is now an array of booleans, where-as before it was a single boolean.StaticTilemapLayer.vertextCount
is now an array of integers, where-as before it was a single integer.StaticTilemapLayer.updateVBOData()
is a new private method that creates the internal VBO data arrays for the WebGL renderer.- The
StaticTilemapLayer.upload()
method has a new parametertilesetIndex
which controls which tileset to prepare the VBO data for. - The
StaticTilemapLayer.batchTile()
method has a new parametertilesetIndex
which controls which tileset to batch the tile for. StaticTilemapLayer.setTilesets()
is a new private method that creates the internal tileset references array.DynamicTilemapLayer.tileset
is now an array of Tileset objects, where-as before it was a single reference.DynamicTilemapLayer.setTilesets()
is a new private method that creates the internal tileset references array.
New Features
bodyDebugFillColor
is a new Matter Physics debug option that allows you to set a color used when drawing filled bodies to the debug Graphic.debugWireframes
is a new Matter Physics debug option that allows you to control if the wireframes of the bodies are used when drawing to the debug Graphic. The default istrue
. If enabled bodies are not filled.debugShowInternalEdges
is a new Matter Physics debug option that allows you to set if the internal edges of a body are rendered to the debug Graphic.debugShowConvexHulls
is a new Matter Physics debug option that allows you to control if the convex hull of a body is drawn to the debug Graphic. The default isfalse
.debugConvexHullColor
is a new Matter Physics debug option that lets you set the color of the convex hull, if being drawn to the debug Graphic.debugShowSleeping
is a new Matter Physics debug option that lets you draw sleeping bodies at 50% opacity.Curves.Ellipse.angle
is a new getter / setter that handles the rotation of the curve in degrees instead of radians.
Updates
- The Loader has been updated to handle the impact of you destroying the game instance while still processing files. It will no longer throw cache and texture related errors. Fix #4049 (thanks @pantoninho)
Polygon.setTo
can now take a string of space separated numbers when creating the polygon data, i.e.:'40 0 40 20 100 20 100 80 40 80 40 100 0 50'
. This update also impacts the Polygon Shape object, which can now also take this format as well.- The
poly-decomp
library, as used by Matter.js, has been updated to 0.3.0. Matter.verts
, available viathis.matter.verts
from within a Scene, is a quick way of accessing the Matter Vertices functions.- You can now specify the vertices for a Matter
fromVerts
body as a string. TextureTintPipeline.batchTexture
has a new optional argumentskipFlip
which allows you to control the internal render texture flip Y check.- The Device.OS check for
node
will now do atypeof
first to avoid issues with rollup packaged builds needing to shim the variable out. Fix #4058 (thanks @hollowdoor) - Arcade Physics Bodies will now sync the display origin of the parent Game Object to the body properties as part of the
updateBounds
call. This means if you change the origin of an AP enabled Game Object, after creation of the body, it will be reflected in the body position. This may or may not be a breaking change for your game. Previously it was expected that the origin should always be 0.5 and you adjust the body usingsetOffset
, but this change makes a bit more sense logically. If you find that your bodies are offset after upgrading to this version then this is likely why. Close #4052 (thanks @SolarOmni) - The
Texture.getFramesFromTextureSource
method has a new boolean argumentincludeBase
, which defaults tofalse
and allows you to set if the base frame should be returned into the array or not. - There is a new Animation Event that is dispatched when an animation restarts. Listen for it via
Sprite.on('animationrestart')
. - All of the Animation Events now pass the Game Object as the final argument, this includes
animationstart
,animationrestart
,animationrepeat
,animationupdate
andanimationcomplete
. Curves.Ellipse.rotation
is a getter / setter that holds the rotation of the curve. Previously it expected the value in degrees and when getting it returned the value in radians. It now expects the value in radians and returns radians to keep it logical.Set.size
will now only set the new size if the value is smaller than the current size, truncating the Set in the process. Values larger than the current size are ignored.- Arcade Physics
shutdown
will check to see if the world instance still exists and only try removing it if so. This prevents errors when stopping a world and then destroying it at a later date. Text.setFont
,Text.setFontFamily
,Text.setFontStyle
andText.setStroke
will no longer re-measure the parent Text object if their values have not changed.
Bug Fixes
- GameObjects added to and removed from Containers no longer listen for the
shutdown
event at all (thanks Vitali) - Sprites now have
preDestroy
method, which is called automatically bydestroy
. The method destroys the Animation component, unregistering theremove
event in the process and freeing-up resources. Fix #4051 (thanks @Aveyder) UpdateList.shutdown
wasn't correctly iterating over the pending lists (thanks @felipeprov)- Input detection was known to be broken when the game resolution was !== 1 and the Camera zoom level was !== 1. Fix #4010 (thanks @s-s)
- The
Shape.Line
object was missing alineWidth
property unless you called thesetLineWidth
method, causing the line to not render in Canvas only. Fix #4068 (thanks @netgfx) - All parts of Matter Body now have the
gameObject
property set correctly. Previously only the first part of the Body did. - When using
MatterGameObject
andfromVerts
as the shape type it wouldn't pass the values toBodies.fromVertices
because of a previous conditional. It now passes them over correctly and the body is only set if the result is valid. - The
Texture.getFramesFromTextureSource
method was returning an array of Frame names by mistake, instead of Frame references. It now returns the Frames themselves. - When using
CanvasTexture.refresh
orGraphics.generateTexture
it would throw WebGL warnings like 'bindTexture: Attempt to bind a deleted texture'. This was due to the Frames losing sync with the glTexture reference used by their TextureSource. Fix #4050 (thanks @kanthi0802) - Fixed an error in the
batchSprite
methods in the Canvas and WebGL Renderers that would incorrectly set the frame dimensions...
Phaser v3.13.0
Facebook Instant Games Plugin
Phaser 3.13 introduces the new Facebook Instant Games Plugin. The plugin provides a seamless bridge between Phaser and version 6.2 of the Facebook Instant Games SDK. Every single SDK function is available via the plugin and we will keep track of the official SDK to make sure they stay in sync.
The plugin offers the following features:
- Easy integration with the Phaser Loader so load events update the Facebook progress circle.
- Events for every plugin method, allowing the async calls of the SDK to be correctly inserted into the Phaser game flow. When SDK calls resolve they will surface naturally as a Phaser event and you'll know you can safely act upon them without potentially doing something mid-way through the game step.
- All Plugin methods check if the call is part of the supported APIs available in the SDK, without needing to launch an async request first.
- Instant access to platform, player and locale data.
- Easily load player photos directly into the Texture Manager, ready for use with a Game Object.
- Subscribe to game bots.
- The plugin has a built-in Data Manager which makes dealing with data stored on Facebook seamless. Just create whatever data properties you need and they are automatically synced.
- Support for FB stats, to retrieve, store and increment stats into cloud storage.
- Save Session data with built-in session length validation.
- Easy context switching, to swap between game instances and session data retrieval.
- Easily open a Facebook share, invite, request or game challenge window and populate the text and image content using any image stored in the Texture cache.
- Full Leaderboard support. Retrieve, scan and update leaderboard entries, as well as player matching.
- Support for in-app purchases, with product catalogs, the ability to handle purchases, get past purchases and consume previously unlocked purchases.
- Easily preload a set of interstitial ads, in both banner and video form, then display the ad at any point in your game, with in-built tracking of ads displayed and inventory available.
- Plus other features, such as logging to FB Analytics, creating short cuts, switching games, etc.
The plugin is fully documented and official tutorials and project templates will follow shortly.
New Shape Game Objects
Phaser 3.13 has a new Game Object called Shape
, which by itself isn't much use because it's a base class. However, extending that class are 11 different types of Shape (with more to come) and you can use it to create your own custom Shapes as well. Shapes are added to the display list in the exact same way as any other Game Object. For example:
this.add.rectangle(400, 300, 500, 120, 0x00ff00);
Here we're creating a new Rectangle shape. It's positioned at 400 x 300 in the Scene and has a size of 500 x 120 pixels. The final value is the fill color.
The thing to remember is that you can treat this Shape just like you'd treat any other Game Object. You can scale it, rotate it, alpha it, blend mode it, change its origin, give it a Camera scroll factor, put it inside a Container or Group, give it input abilities or even give it a physics body. It is, to all intents and purposes, a normal Game Object. The only difference is that when rendering it uses its own special bit of display code.
The shapes available are as follows:
GameObject.Arc
- The arc allows you to draw either a circle, or part of a circle. You can set the start and end angle, if the rotation is clockwise or not, and even set the number of iterations the arc will use during rendering.GameObject.Curve
- The Curve Shape can take any Phaser Curve object, such as a Spline or Bezier Curve, and add it to the display list.GameObject.Ellipse
- An ellipse shape, which is essentially a circle with a differing width and height. It can be filled or stroked (or both!) and as with the arc you can set the 'smoothness' of it, allowing you to decrease the number of points used when creating its polygon data.GameObject.Grid
- The Grid Shape object allows you to generate them. You can set the width and height of the grid itself, as well as for the grid cells. The grid can either have a single color, or alternating cell colors and even have outline spacing between the cells, or not.GameObject.Line
- Create a Line Shape drawn between any two points, with a color and thickness. In WebGL you can also specify a different thickness for the start and end of the line.GameObject.Polygon
- A Polygon is effectively a list of points that is drawn between. The points can be provided in a number of different ways (as Vec2 objects, as an array, etc) and then you can either fill or stroke the resulting shape, or both.GameObject.Rectangle
- Simple, but powerful and endlessly useful. Set a width and height and it'll display a Rectangle, with control over the size, fill color and stroke color.GameObject.Star
- The Star shape does as its name suggests: it displays a star. You can control the number of points in the star as well as the inner and outer radius of it.GameObject.Triangle
- A Triangular shape with full control over the points used to make it and its fill and stroke colors. Internally it uses thebatchFillTriangle
method in WebGL, making it actually faster to draw than a Quad! Use them happily for bullets or abstract space ships, or anything else you feel like.GameObject.IsoTriangle
- This draws an isometric triangle, like a pyramid. You can control the colors of each face, if the pyramid is upside down or not and the width and height of it.GameObject.IsoBox
- This draws an isometric box. You can set the colors for each face of the box, as well as the projection angle and also which of the 3 faces are drawn.
All of the Shape objects render in both Canvas and WebGL and are available via the Game Object Factory.
Pointer and Input Event Updates
The specificity if the input events has been changed to allow you more control over event handling. Previously, the InputPlugin would emit the global pointerdown
event first, and then the Game Object itself would emit the pointerdown
event and finally the InputPlugin would emit the gameobjectdown
event.
The order has now changed. The Game Object will dispatch its pointerdown
event first. The InputPlugin will then dispatch gameobjectdown
and finally the less specific of them all, pointerdown
will be dispatched.
New in 3.13 is the ability to cancel this at any stage. All events are now sent an event object which you can call event.stopPropagation()
on. This will immediately stop any further listeners from being invoked. If you call stopPropagation()
after the first Game Object pointerdown
event, then no more Game Object's will receive their callbacks and the InputPlugin will not dispatch either of its events.
This change has been introduced for pointerdown
, pointerup
, pointermove
, pointerover
and pointerout
. No other data is included in the event
object in this release.
- The Game Object
pointerdown
callback signature has changed. It used to sendpointer, x, y, camera
to the listener. It now sendspointer, x, y, event
to the listener. If you still need thecamera
property you can get it frompointer.camera
. - The Game Object
gameobjectdown
callback signature has a new argument. It now sendsevent
as the 3rd argument. - The
pointerdown
event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerdown
andgameobjectdown
). This gives you the chance to cancel the event before the global listener receives it. - The Game Object
pointerup
callback signature has a new argument. It now sends theevent
as the 4th argument. - The Game Object
gameobjectup
callback signature has a new argument. It now sendsevent
as the 3rd argument. - The
pointerup
event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerup
andgameobjectup
). This gives you the chance to cancel the event before the global listener receives it. - The Game Object
pointermove
callback signature has a new argument. It now sends theevent
as the 4th argument. - The Game Object
gameobjectmove
callback signature has a new argument. It now sendsevent
as the 3rd argument. - The
pointermove
event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointermove
andgameobjectmove
). This gives you the chance to cancel the event before the global listener receives it. - The Game Object
pointerover
callback signature has a new argument. It now sends theevent
as the 4th argument. - The Game Object
gameobjectover
callback signature has a new argument. It now sendsevent
as the 3rd argument. - The
pointerover
event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerover
andgameobjectover
). This gives you the chance to cancel the event before the global listener receives it. - The Game Object
pointerout
callback signature has a new argument. It now sends theevent
as the 2nd argument. - The Game Object
gameobjectout
callback signature has a new argument. It now sendsevent
as the 3rd argument. - The
pointerout
event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerout
andgameobjectout
). This gives you the chance to cancel the event before the global listener receives it.
Game Object List Updates
When Sprite's are created they are added to two lists within the Scene - the Display List and the Update List. Under 3.12 when a Scene was shut down it would emit a shutdown
event, which Sprites listened out for. When they received it, they would destroy themselves.
After [profiling and testing](https://...
Phaser v3.12.0
Version 3.12.0 - Silica - 4th September 2018
FlatTintPipeline Updates
In 3.11 I overhauled the TextureTintPipeline, the WebGL batch used to render all texture based Game Objects, such as Sprites. In this release I did the same to the FlatTintPipeline. This pipeline was used exclusively by the Graphics Game Object to draw filled and stroked primitives in WebGL. It was also used by classes such as the Camera in order to draw their colored backgrounds and flash / fade effects.
When I looked closely at the shaders being used by the texture and graphics pipelines I noticed they were virtually identical. Yet if you were to mix Graphics objects and Sprites in your game, it would cause a complete batch flush as it switched between the them as it rebound the shaders, adding to both the draw calls and gl ops per frame.
The more I looked through the graphics pipeline, the more I saw the same kind of things the texture one previously had: duplicate vars, in-line matrix operations and so on. So I worked through the process of refactoring it, boiling it down to just a handful of core methods and re-using methods the texture pipeline already had. The end result is that I've been able to remove the FlatTintPipeline entirely. This saves 42.3KB (unminifed) and removes 1000 lines of code from the build. Of course, lots of the methods were added to the texture pipeline, but that only increased from 730 sloc to 1087 sloc, a fraction of the amount before! And the benefits don't end there.
If you had any custom pipelines that extended the FlatTintPipeline please update them to extend the TextureTintPipeline instead. You'll likely need to remap a few methods, but most of them remain the same. Double-check the method signatures though.
The same pipeline can now draw both graphics and sprites, with the same shader and no texture swapping either. This means you can happily mix Graphics objects alongside Sprites and it won't cost any extra overhead at all. There are more benefits too, which are outlined in the list below.
- The TextureTintPipeline now has 100% jsdoc coverage.
- The removal of the FlatTintPipeline shaves 42.3KB and 1000 sloc from the bundle size.
- The Graphics fill and line styles are now cached in the pipeline, rather than being re-calculated for every primitive drawn.
- The new
batchTri
method will add a triangle to the vertex batch, either textured or filled. drawFillRect
is a new method that will add an untransformed rectangle to the batch. These are used by things like Cameras to fill in background colors.batchFillRect
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillTriangle
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillPath
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchLine
has been moved to the TextureTintPipeline.- When drawing Graphics paths with a line width of 1 it will no longer spend any time drawing the line joins, speeding-up the rendering of 1px lines.
WebGL Scissor Update
The process of managing scissors in the WebGLRenderer has been completely rewritten. Previously, the gl scissor was being constantly enabled and disabled for every Camera in your game, leading to pointless gl operations.
- Cameras have a new internal method
updateSystem
which is automatically called if you change any Camera viewport values. This in turn tells the Scene Manager if there are any cameras with custom viewports, in any Scene of your game. If there are not then the scissor is never even enabled or set, meaning zero gl ops! If your game uses full sized Cameras it now doesn't cost anything at all with regard to scissoring. - If a new scissor is set it will now check to see if it's the same size and position as the current scissor, and if so, it'll skip setting it at all.
Render Texture New Features and Updates
The Render Texture class has been rewritten from scratch and all Game Objects have been updated to support it. Previously it was very restricted in what you could do with it. It used to have a matrix stack for internal transforms, but this has been replaced with a Camera instead. This means you have the full power of a Camera system (scrolling, zooming, rotation) but it only impacts the contents of the Render Texture.
-
The biggest update is the change in what the
draw
method can accept. Previously you had to pass in a texture and frame reference. This has changed, as has the method signature. It can now accept any of the following:- Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.
- Dynamic and Static Tilemap Layers.
- A Group. The contents of which will be iterated and drawn in turn.
- A Container. The contents of which will be iterated fully, and drawn in turn.
- A Scene. Pass in
Scene.children
to draw the whole display list. - Another Render Texture.
- A Texture Frame instance.
- A string. This is used to look-up a texture from the Texture Manager.
-
There is a new method
drawFrame
which allows you to pass in a string-based texture and frame key and have it drawn to the Render Texture. -
The new method
saveTexture
allows you to save the Render Texture into the Texture Manager using your own key. You can then use the Render Texture for any Game Object that accepts textures as a source, such as Sprites or even Tilemap Layers. You can add frame data to a Render Texture using theRenderTexture.texture.add
method. -
The new
camera
property is an instance of a complete 2D Camera. You can use it to change the view into your Render Texture. Scroll, rotate, zoom, just like you would with a normal Camera, except it will only influence the objects being drawn to the Render Texture. -
All of the matrix-style methods have been removed:
save
,translate
,restore
,scale
,rotate
. You can now achieve the same thing by either transforming the object you want to draw to the Render Texture, or using the built-in Camera. -
You can now crop a Render Texture. Use the
setCrop
method to define the crop region.
See the fully complete documentation for more details and the extensive examples and tests created.
Text Game Object New Features and Updates
The Text Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Text can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the text. - Text now keeps a reference to the renderer in the
renderer
property. - The
canvasTexture
property has been removed. - Text now has internal
texture
andframe
properties. These replace the oldcanvasTexture
but perform the same task, while allowing for texture cropping and much smaller renderer code. - Previously, changing a Text object by setting its
text
property directly wouldn't change the text being rendered as usingsetText
was the expected way to change what was being displayed. Internally thetext
property has been renamed to_text
and flagged as private, and a new getter / setter fortext
has been added, which hands over to thesetText
method, meaning you can now use both ways of setting the text. Fix #3919 (thanks @hackhat @samid737)
Tile Sprite Object New Features and Updates
The Tile Sprite Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Tile Sprites can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the tile sprite. - There is a new method
setTileScale
which will set the tile scale in a chainable call. - There is a new internal
canvas
property. Tile Sprites work differently than before in Canvas mode: Previously they would use thefillRect
command on the game canvas to draw themselves every frame, even if they hadn't changed. They now draw to an internal canvas only when their position or scale changes. This canvas is then drawn to the game canvas instead. It's faster, as it doesn't fillRect every frame and also allows you to draw them to other contexts, such as Render Textures. - There are two new internal properties
_tilePosition
and_tileScale
which are Vector 2s that hold the position and scale. Getters have been added, so use the same properties as before in your code. - There are two new properties
displayTexture
anddisplayFrame
. These replace the previoustexture
andframe
properties and hold references to the source texture the Tile Sprite is using. - The
canvasPattern
property has been renamed tofillPattern
. - The
oldFrame
property has been removed. - The
canvasBuffer
property has been renamed tofillCanvas
. - The
canvasBufferCtx
property has been renamed tofillContext
.
Tilemap New Features and Updates
The Tilemap and Dynamic and Static Tilemap Layer classes now all support 4 different modes of render order for drawing the tiles. This allows you to control the z-order of the tiles during render. This feature was requested by @etienne (who provided the test maps too) - see the new examples in the Labs for better understand the impact this has.
The default is 'right-down', meaning it will order the tiles starting from the top-left, drawing to the right and then moving down to the next row.
The four draw orders are:
0 = right-down
1 = left-down
2 = right-up
3 = left-up
- Tilemap has a new property
renderOrder
which is a string based version of the render order, as used when new layers are created via the map. If the map is created from Tiled JSON data, it will use whatever render order has been specified in the map data. - Tilemap has a new method
setRenderOrder
. This takes either an integer or a string-based version of the render order and stores it local...
Phaser v3.12.0 Beta 3 Release
FlatTintPipeline Updates
In 3.11 I overhauled the TextureTintPipeline, the WebGL batch used to render all texture based Game Objects, such as Sprites. In this release I did the same to the FlatTintPipeline. This pipeline was used exclusively by the Graphics Game Object to draw filled and stroked primitives in WebGL. It was also used by classes such as the Camera in order to draw their colored backgrounds and flash / fade effects.
When I looked closely at the shaders being used by the texture and graphics pipelines I noticed they were virtually identical. Yet if you were to mix Graphics objects and Sprites in your game, it would cause a complete batch flush as it switched between the them as it rebound the shaders, adding to both the draw calls and gl ops per frame.
The more I looked through the graphics pipeline, the more I saw the same kind of things the texture one previously had: duplicate vars, in-line matrix operations and so on. So I worked through the process of refactoring it, boiling it down to just a handful of core methods and re-using methods the texture pipeline already had. The end result is that I've been able to remove the FlatTintPipeline entirely. This saves 42.3KB (unminifed) and removes 1000 lines of code from the build. Of course, lots of the methods were added to the texture pipeline, but that only increased from 730 sloc to 1087 sloc, a fraction of the amount before! And the benefits don't end there.
If you had any custom pipelines that extended the FlatTintPipeline please update them to extend the TextureTintPipeline instead. You'll likely need to remap a few methods, but most of them remain the same. Double-check the method signatures though.
The same pipeline can now draw both graphics and sprites, with the same shader and no texture swapping either. This means you can happily mix Graphics objects alongside Sprites and it won't cost any extra overhead at all. There are more benefits too, which are outlined in the list below.
- The TextureTintPipeline now has 100% jsdoc coverage.
- The removal of the FlatTintPipeline shaves 42.3KB and 1000 sloc from the bundle size.
- The Graphics fill and line styles are now cached in the pipeline, rather than being re-calculated for every primitive drawn.
- The new
batchTri
method will add a triangle to the vertex batch, either textured or filled. drawFillRect
is a new method that will add an untransformed rectangle to the batch. These are used by things like Cameras to fill in background colors.batchFillRect
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillTriangle
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillPath
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchLine
has been moved to the TextureTintPipeline.- When drawing Graphics paths with a line width of 1 it will no longer spend any time drawing the line joins, speeding-up the rendering of 1px lines.
WebGL Scissor Update
The process of managing scissors in the WebGLRenderer has been completely rewritten. Previously, the gl scissor was being constantly enabled and disabled for every Camera in your game, leading to pointless gl operations.
- Cameras have a new internal method
updateSystem
which is automatically called if you change any Camera viewport values. This in turn tells the Scene Manager if there are any cameras with custom viewports, in any Scene of your game. If there are not then the scissor is never even enabled or set, meaning zero gl ops! If your game uses full sized Cameras it now doesn't cost anything at all with regard to scissoring. - If a new scissor is set it will now check to see if it's the same size and position as the current scissor, and if so, it'll skip setting it at all.
Render Texture New Features and Updates
The Render Texture class has been rewritten from scratch and all Game Objects have been updated to support it. Previously it was very restricted in what you could do with it. It used to have a matrix stack for internal transforms, but this has been replaced with a Camera instead. This means you have the full power of a Camera system (scrolling, zooming, rotation) but it only impacts the contents of the Render Texture.
-
The biggest update is the change in what the
draw
method can accept. Previously you had to pass in a texture and frame reference. This has changed, as has the method signature. It can now accept any of the following:- Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.
- Dynamic and Static Tilemap Layers.
- A Group. The contents of which will be iterated and drawn in turn.
- A Container. The contents of which will be iterated fully, and drawn in turn.
- A Scene. Pass in
Scene.children
to draw the whole display list. - Another Render Texture.
- A Texture Frame instance.
- A string. This is used to look-up a texture from the Texture Manager.
-
There is a new method
drawFrame
which allows you to pass in a string-based texture and frame key and have it drawn to the Render Texture. -
The new method
saveTexture
allows you to save the Render Texture into the Texture Manager using your own key. You can then use the Render Texture for any Game Object that accepts textures as a source, such as Sprites or even Tilemap Layers. You can add frame data to a Render Texture using theRenderTexture.texture.add
method. -
The new
camera
property is an instance of a complete 2D Camera. You can use it to change the view into your Render Texture. Scroll, rotate, zoom, just like you would with a normal Camera, except it will only influence the objects being drawn to the Render Texture. -
All of the matrix-style methods have been removed:
save
,translate
,restore
,scale
,rotate
. You can now achieve the same thing by either transforming the object you want to draw to the Render Texture, or using the built-in Camera. -
You can now crop a Render Texture. Use the
setCrop
method to define the crop region.
See the fully complete documentation for more details and the extensive examples and tests created.
Text Game Object New Features and Updates
The Text Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Text can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the text. - Text now keeps a reference to the renderer in the
renderer
property. - The
canvasTexture
property has been removed. - Text now has internal
texture
andframe
properties. These replace the oldcanvasTexture
but perform the same task, while allowing for texture cropping and much smaller renderer code. - Previously, changing a Text object by setting its
text
property directly wouldn't change the text being rendered as usingsetText
was the expected way to change what was being displayed. Internally thetext
property has been renamed to_text
and flagged as private, and a new getter / setter fortext
has been added, which hands over to thesetText
method, meaning you can now use both ways of setting the text. Fix #3919 (thanks @hackhat @samid737)
Tile Sprite Object New Features and Updates
The Tile Sprite Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Tile Sprites can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the tile sprite. - There is a new method
setTileScale
which will set the tile scale in a chainable call. - There is a new internal
canvas
property. Tile Sprites work differently than before in Canvas mode: Previously they would use thefillRect
command on the game canvas to draw themselves every frame, even if they hadn't changed. They now draw to an internal canvas only when their position or scale changes. This canvas is then drawn to the game canvas instead. It's faster, as it doesn't fillRect every frame and also allows you to draw them to other contexts, such as Render Textures. - There are two new internal properties
_tilePosition
and_tileScale
which are Vector 2s that hold the position and scale. Getters have been added, so use the same properties as before in your code. - There are two new properties
displayTexture
anddisplayFrame
. These replace the previoustexture
andframe
properties and hold references to the source texture the Tile Sprite is using. - The
canvasPattern
property has been renamed tofillPattern
. - The
oldFrame
property has been removed. - The
canvasBuffer
property has been renamed tofillCanvas
. - The
canvasBufferCtx
property has been renamed tofillContext
.
Tilemap New Features and Updates
The Tilemap and Dynamic and Static Tilemap Layer classes now all support 4 different modes of render order for drawing the tiles. This allows you to control the z-order of the tiles during render. This feature was requested by @etienne (who provided the test maps too) - see the new examples in the Labs for better understand the impact this has.
The default is 'right-down', meaning it will order the tiles starting from the top-left, drawing to the right and then moving down to the next row.
The four draw orders are:
0 = right-down
1 = left-down
2 = right-up
3 = left-up
- Tilemap has a new property
renderOrder
which is a string based version of the render order, as used when new layers are created via the map. If the map is created from Tiled JSON data, it will use whatever render order has been specified in the map data. - Tilemap has a new method
setRenderOrder
. This takes either an integer or a string-based version of the render order and stores it locally. It's then used during the creation of any layer...
Phaser v3.12.0 Beta 2 Release
FlatTintPipeline Updates
In 3.11 I overhauled the TextureTintPipeline, the WebGL batch used to render all texture based Game Objects, such as Sprites. In this release I did the same to the FlatTintPipeline. This pipeline was used exclusively by the Graphics Game Object to draw filled and stroked primitives in WebGL. It was also used by classes such as the Camera in order to draw their colored backgrounds and flash / fade effects.
When I looked closely at the shaders being used by the texture and graphics pipelines I noticed they were virtually identical. Yet if you were to mix Graphics objects and Sprites in your game, it would cause a complete batch flush as it switched between the them as it rebound the shaders, adding to both the draw calls and gl ops per frame.
The more I looked through the graphics pipeline, the more I saw the same kind of things the texture one previously had: duplicate vars, in-line matrix operations and so on. So I worked through the process of refactoring it, boiling it down to just a handful of core methods and re-using methods the texture pipeline already had. The end result is that I've been able to remove the FlatTintPipeline entirely. This saves 42.3KB (unminifed) and removes 1000 lines of code from the build. Of course, lots of the methods were added to the texture pipeline, but that only increased from 730 sloc to 1087 sloc, a fraction of the amount before! And the benefits don't end there.
If you had any custom pipelines that extended the FlatTintPipeline please update them to extend the TextureTintPipeline instead. You'll likely need to remap a few methods, but most of them remain the same. Double-check the method signatures though.
The same pipeline can now draw both graphics and sprites, with the same shader and no texture swapping either. This means you can happily mix Graphics objects alongside Sprites and it won't cost any extra overhead at all. There are more benefits too, which are outlined in the list below.
- The TextureTintPipeline now has 100% jsdoc coverage.
- The removal of the FlatTintPipeline shaves 42.3KB and 1000 sloc from the bundle size.
- The Graphics fill and line styles are now cached in the pipeline, rather than being re-calculated for every primitive drawn.
- The new
batchTri
method will add a triangle to the vertex batch, either textured or filled. drawFillRect
is a new method that will add an untransformed rectangle to the batch. These are used by things like Cameras to fill in background colors.batchFillRect
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillTriangle
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillPath
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchLine
has been moved to the TextureTintPipeline.- When drawing Graphics paths with a line width of 1 it will no longer spend any time drawing the line joins, speeding-up the rendering of 1px lines.
WebGL Scissor Update
The process of managing scissors in the WebGLRenderer has been completely rewritten. Previously, the gl scissor was being constantly enabled and disabled for every Camera in your game, leading to pointless gl operations.
- Cameras have a new internal method
updateSystem
which is automatically called if you change any Camera viewport values. This in turn tells the Scene Manager if there are any cameras with custom viewports, in any Scene of your game. If there are not then the scissor is never even enabled or set, meaning zero gl ops! If your game uses full sized Cameras it now doesn't cost anything at all with regard to scissoring. - If a new scissor is set it will now check to see if it's the same size and position as the current scissor, and if so, it'll skip setting it at all.
Render Texture New Features and Updates
The Render Texture class has been rewritten from scratch and all Game Objects have been updated to support it. Previously it was very restricted in what you could do with it. It used to have a matrix stack for internal transforms, but this has been replaced with a Camera instead. This means you have the full power of a Camera system (scrolling, zooming, rotation) but it only impacts the contents of the Render Texture.
-
The biggest update is the change in what the
draw
method can accept. Previously you had to pass is a texture and frame reference. This has changed, as has the method signature. It can now accept any of the following:- Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.
- Dynamic and Static Tilemap Layers.
- A Group. The contents of which will be iterated and drawn in turn.
- A Container. The contents of which will be iterated fully, and drawn in turn.
- A Scene. Pass in
Scene.children
to draw the whole display list. - Another Render Texture.
- A Texture Frame instance.
- A string. This is used to look-up a texture from the Texture Manager.
-
There is a new method
drawFrame
which allows you to pass in a string-based texture and frame key and have it drawn to the Render Texture. -
The new method
saveTexture
allows you to save the Render Texture into the Texture Manager using your own key. You can then use the Render Texture for any Game Object that accepts textures as a source, such as Sprites or even Tilemap Layers. You can add frame data to a Render Texture using theRenderTexture.texture.add
method. -
The new
camera
property is an instance of a complete 2D Camera. You can use it to change the view into your Render Texture. Scroll, rotate, zoom, just like you would with a normal Camera, except it will only influence is the objects being drawn to the Render Texture. -
All of the matrix-style methods have been removed:
save
,translate
,restore
,scale
,rotate
. You can now achieve the same thing by either transforming the object you want to draw to the Render Texture, or using the built-in Camera. -
You can now crop a Render Texture. Use the
setCrop
method to define the crop region.
See the fully complete documentation for more details and the extensive examples and tests created.
Text Game Object New Features and Updates
The Text Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Text can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the text. - Text now keeps a reference to the renderer in the
renderer
property. - The
canvasTexture
property has been removed. - Text now has internal
texture
andframe
properties. These replace the oldcanvasTexture
but perform the same task, while allowing for texture cropping and much smaller renderer code.
Tile Sprite Object New Features and Updates
The Tile Sprite Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Tile Sprites can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the tile sprite. - There is a new method
setTileScale
which will set the tile scale in a chainable call. - There is a new internal
canvas
property. Tile Sprites work differently than before in Canvas mode: Previously they would use thefillRect
command on the game canvas to draw themselves every frame, even if they hadn't changed. They now draw to an internal canvas only when their position or scale changes. This canvas is then drawn to the game canvas instead. It's faster, as it doesn't fillRect every frame and also allows you to draw them to other contexts, such as Render Textures. - There are two new internal properties
_tilePosition
and_tileScale
which are Vector 2s that hold the position and scale. Getters have been added, so use the same properties as before in your code. - There are two new properties
displayTexture
anddisplayFrame
. These replace the previoustexture
andframe
properties and hold references to the source texture the Tile Sprite is using. - The
canvasPattern
property has been renamed tofillPattern
. - The
oldFrame
property has been removed. - The
canvasBuffer
property has been renamed tofillCanvas
. - The
canvasBufferCtx
property has been renamed tofillContext
.
New Features
Camera.resolution
is a new read-only property that holds the current game config resolution that the camera is using. This is used internally for viewport calculations.Text.resolution
and the methodText.setResolution
allows you to control the resolution of a Static Text Game Object. By default it will be set to match the resolution set in the Game Config, but you can override it yourself via the TextStyle. It allows for much clearer text on High DPI devices, at the cost of larger internal Canvas textures for the Text - so please use with caution, as the more high res Text you have, the more memory it uses up. Fix #3528 (thanks @kirillbunin)TransformMatrix.getCSSMatrix
will return a CSS transform matrix formatted string from the current matrix values.CacheManager
now creates a new cache calledhtml
which is used to store all loaded HTML snippets.FileType.HTML
is a new file type loader that will load an HTML snippet and store it in the newhtml
cache. Access it viaload.html
(this method was previously used to load html to textures, please seeload.htmlTexture
for this feature now)TransformMatrix.getX
is a new method that return the x component from the given x and y values based on the current matrix. This is used heavily in the pipelines.TransformMatrix.getY
is a new method that return the y component from the given x and y values based on the current matrix. This is used heavily in the pipelines.TransformMatrix.copyToArray
is a new method t...
Phaser v3.12.0 Beta 1 Release
FlatTintPipeline Updates
In 3.11 I overhauled the TextureTintPipeline, the WebGL batch used to render all texture based Game Objects, such as Sprites. In this release I did the same to the FlatTintPipeline. This pipeline was used exclusively by the Graphics Game Object to draw filled and stroked primitives in WebGL. It was also used by classes such as the Camera in order to draw their colored backgrounds and flash / fade effects.
When I looked closely at the shaders being used by the texture and graphics pipelines I noticed they were virtually identical. Yet if you were to mix Graphics objects and Sprites in your game, it would cause a complete batch flush as it switched between the them as it rebound the shaders, adding to both the draw calls and gl ops per frame.
The more I looked through the graphics pipeline, the more I saw the same kind of things the texture one previously had: duplicate vars, in-line matrix operations and so on. So I worked through the process of refactoring it, boiling it down to just a handful of core methods and re-using methods the texture pipeline already had. The end result is that I've been able to remove the FlatTintPipeline entirely. This saves 42.3KB (unminifed) and removes 1000 lines of code from the build. Of course, lots of the methods were added to the texture pipeline, but that only increased from 730 sloc to 1087 sloc, a fraction of the amount before! And the benefits don't end there.
If you had any custom pipelines that extended the FlatTintPipeline please update them to extend the TextureTintPipeline instead. You'll likely need to remap a few methods, but most of them remain the same. Double-check the method signatures though.
The same pipeline can now draw both graphics and sprites, with the same shader and no texture swapping either. This means you can happily mix Graphics objects alongside Sprites and it won't cost any extra overhead at all. There are more benefits too, which are outlined in the list below.
- The TextureTintPipeline now has 100% jsdoc coverage.
- The removal of the FlatTintPipeline shaves 42.3KB and 1000 sloc from the bundle size.
- The Graphics fill and line styles are now cached in the pipeline, rather than being re-calculated for every primitive drawn.
- The new
batchTri
method will add a triangle to the vertex batch, either textured or filled. drawFillRect
is a new method that will add an untransformed rectangle to the batch. These are used by things like Cameras to fill in background colors.batchFillRect
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillTriangle
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchFillPath
has been moved to the TextureTintPipeline and has a new much more concise method signature.batchLine
has been moved to the TextureTintPipeline.- When drawing Graphics paths with a line width of 1 it will no longer spend any time drawing the line joins, speeding-up the rendering of 1px lines.
WebGL Scissor Update
The process of managing scissors in the WebGLRenderer has been completely rewritten. Previously, the gl scissor was being constantly enabled and disabled for every Camera in your game, leading to pointless gl operations.
- Cameras have a new internal method
updateSystem
which is automatically called if you change any Camera viewport values. This in turn tells the Scene Manager if there are any cameras with custom viewports, in any Scene of your game. If there are not then the scissor is never even enabled or set, meaning zero gl ops! If your game uses full sized Cameras it now doesn't cost anything at all with regard to scissoring. - If a new scissor is set it will now check to see if it's the same size and position as the current scissor, and if so, it'll skip setting it at all.
Render Texture New Features and Updates
The Render Texture class has been rewritten from scratch and all Game Objects have been updated to support it. Previously it was very restricted in what you could do with it. It used to have a matrix stack for internal transforms, but this has been replaced with a Camera instead. This means you have the full power of a Camera system (scrolling, zooming, rotation) but it only impacts the contents of the Render Texture.
-
The biggest update is the change in what the
draw
method can accept. Previously you had to pass is a texture and frame reference. This has changed, as has the method signature. It can now accept any of the following:- Any renderable Game Object, such as a Sprite, Text, Graphics or TileSprite.
- Dynamic and Static Tilemap Layers.
- A Group. The contents of which will be iterated and drawn in turn.
- A Container. The contents of which will be iterated fully, and drawn in turn.
- A Scene. Pass in
Scene.children
to draw the whole display list. - Another Render Texture.
- A Texture Frame instance.
- A string. This is used to look-up a texture from the Texture Manager.
-
There is a new method
drawFrame
which allows you to pass in a string-based texture and frame key and have it drawn to the Render Texture. -
The new method
saveTexture
allows you to save the Render Texture into the Texture Manager using your own key. You can then use the Render Texture for any Game Object that accepts textures as a source, such as Sprites or even Tilemap Layers. You can add frame data to a Render Texture using theRenderTexture.texture.add
method. -
The new
camera
property is an instance of a complete 2D Camera. You can use it to change the view into your Render Texture. Scroll, rotate, zoom, just like you would with a normal Camera, except it will only influence is the objects being drawn to the Render Texture. -
All of the matrix-style methods have been removed:
save
,translate
,restore
,scale
,rotate
. You can now achieve the same thing by either transforming the object you want to draw to the Render Texture, or using the built-in Camera. -
You can now crop a Render Texture. Use the
setCrop
method to define the crop region.
See the fully complete documentation for more details and the extensive examples and tests created.
Text Game Object New Features and Updates
The Text Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Text can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the text. - Text now keeps a reference to the renderer in the
renderer
property. - The
canvasTexture
property has been removed. - Text now has internal
texture
andframe
properties. These replace the oldcanvasTexture
but perform the same task, while allowing for texture cropping and much smaller renderer code.
Tile Sprite Object New Features and Updates
The Tile Sprite Game Object has been given an internal overhaul to make it more flexible. Some properties have been renamed or moved and new features added:
- Tile Sprites can now be cropped in WebGL and Canvas! Use the
setCrop
method to crop the tile sprite. - There is a new method
setTileScale
which will set the tile scale in a chainable call. - There is a new internal
canvas
property. Tile Sprites work differently than before in Canvas mode: Previously they would use thefillRect
command on the game canvas to draw themselves every frame, even if they hadn't changed. They now draw to an internal canvas only when their position or scale changes. This canvas is then drawn to the game canvas instead. It's faster, as it doesn't fillRect every frame and also allows you to draw them to other contexts, such as Render Textures. - There are two new internal properties
_tilePosition
and_tileScale
which are Vector 2s that hold the position and scale. Getters have been added, so use the same properties as before in your code. - There are two new properties
displayTexture
anddisplayFrame
. These replace the previoustexture
andframe
properties and hold references to the source texture the Tile Sprite is using. - The
canvasPattern
property has been renamed tofillPattern
. - The
oldFrame
property has been removed. - The
canvasBuffer
property has been renamed tofillCanvas
. - The
canvasBufferCtx
property has been renamed tofillContext
.
New Features
Camera.resolution
is a new read-only property that holds the current game config resolution that the camera is using. This is used internally for viewport calculations.Text.resolution
and the methodText.setResolution
allows you to control the resolution of a Static Text Game Object. By default it will be set to match the resolution set in the Game Config, but you can override it yourself via the TextStyle. It allows for much clearer text on High DPI devices, at the cost of larger internal Canvas textures for the Text - so please use with caution, as the more high res Text you have, the more memory it uses up. Fix #3528 (thanks @kirillbunin)TransformMatrix.getCSSMatrix
will return a CSS transform matrix formatted string from the current matrix values.CacheManager
now creates a new cache calledhtml
which is used to store all loaded HTML snippets.FileType.HTML
is a new file type loader that will load an HTML snippet and store it in the newhtml
cache. Access it viaload.html
(this method was previously used to load html to textures, please seeload.htmlTexture
for this feature now)TransformMatrix.getX
is a new method that return the x component from the given x and y values based on the current matrix. This is used heavily in the pipelines.TransformMatrix.getY
is a new method that return the y component from the given x and y values based on the current matrix. This is used heavily in the pipelines.TransformMatrix.copyToArray
is a new method t...
Phaser v3.11.0 Release
Version 3.11.0 - Leafa - 13th July 2018
Camera - New Features, Updates and Fixes
- All of the 2D Camera classes are now 100% covered by JSDocs!
- All of the 3D Camera classes are now deprecated and will be removed in the next version. They will be moved to a stand-alone plugin.
Camera.alpha
(and its related methodCamera.setAlpha
) allows you to set an alpha level for the entire camera. This impacts everything it is rendering, even if those objects also have their own alpha values too. You can tween the property to make the camera contents fade in / out, or otherwise set it as needed in your game.Camera.deadzone
(and its related methodCamera.setDeadzone
) allows you to specify the deadzone for a camera. The deadzone is a rectangular region used when a camera is following a target. If the target is within the deadzone then the camera will not scroll. As soon as the target leaves the deadzone, the camera will begin tracking it (applying lerp if needed.) It allows you to set a region of the camera in which a player can move freely before tracking begins. The deadzone is re-centered on the camera mid point every frame, meaning you can also use the rectangle for other in-game checks as needed.Camera.pan
is a new Camera Effect that allows you to control automatic camera pans between points in your game world. You can specify a duration and ease type for the pan, and it'll emit events just like all other camera effects, so you can hook into the start, update and completion of the pan. See the examples and docs for more details.Camera.zoom
is a new Camera Effect that allows you to control automatic camera zooming. You can specify a duration and ease type for the zoom, as well as the zoom factor of course, and it'll emit events just like all other camera effects, so you can hook into the start, update and completion of the zoom. Used in combination with the new Pan effect you can zoom and pan around with ease. See the examples and docs for more details.Camera.midPoint
is a new Vec2 property that is updated every frame. Use it to obtain exactly where in the world the center of the camera is currently looking.Camera.displayWidth
is a new property that returns the display width of the camera, factoring in the current zoom level.Camera.displayHeight
is a new property that returns the display height of the camera, factoring in the current zoom level.Camera.worldView
is a new property, an instance of a Rectangle, that contains the dimensions of the area of the world currently visible by the camera. You can use it for intersection or culling tests that don't need to factor in camera rotation.Camera.dirty
is a new boolean property. A dirty Camera has had either its viewport size, bounds, scroll, rotation or zoom levels changed since the last frame. The flag is reset in thepostCameraRender
method, but until that point can be checked and used.Camera.centerOn
is a new method that will move the camera so its viewport is centered on the given coordinates. A handy way of jumping to different points around a map without needing to calculate the scroll offsets.- The Camera bounds didn't factor in the camera zoom properly, meaning you would often not be able to reach the corners of a camera bound world at a zoom level other than 1. The bounds are now calculated each frame to ensure they match the zoom level and it will no longer allow you to scroll off the edge of the bounds. Fix #3547 (thanks @nkholski)
Camera.centerToBounds
didn't take the bounds offset into account, so bounds at non-zero positions wouldn't center properly. All bounds now center correctly. Fix #3706 (thanks @cyantree)Camera.setBounds
has a new optional argumentcenterOn
. If specified it will automatically center the camera on the new bounds given.- The Camera will no longer stutter when following Game Objects at high zoom levels.
Camera._id
has been renamed toCamera.id
, a read-only bitmask used for camera exclusion from Game Objects.- The Camera Manager
cameraPool
has been removed entirely. It was mostly pointless in practice as Cameras are not regenerated frequently enough to need pooling. It also didn't maintain the bitmask list correctly before. CameraManager.resetAll
now destroys all current Cameras, resets the camera ID marker to 1 and adds a single new Camera.CameraManager.currentCameraId
has been removed. IDs are assigned more intelligently now, via thegetNextID
internal method.CameraManager.addExisting
no longer needs to be passed a Camera that already exists in the pool (as the pool has been removed), meaning you can now create your own Cameras and pass them toaddExisting
and have them treated as normal cameras and not be ignored by the manager. They are also assigned a proper ID when added.CameraManager.addExisting
has a new boolean argumentmakeMain
which will make the new camera the main one.CameraManager.getTotal
is a new method that will return the total number of Cameras being managed, with an optionalisVisible
argument, that only counts visible cameras if set.CameraManager.remove
can now take an array of cameras to be removed from the manager, as well as a single camera.CameraManager.remove
would previously not allow you to remove a camera if it meant there would be no cameras left in the Camera Manager. This restriction has been removed. A Camera Manager can now run even with zero cameras. Your game obviously won't display anything, but it's still now possible.CameraManager.remove
will now return the total number of Cameras removed.
Round Pixels Changes
Before explaining the changes it's worth covering what the three different game config properties do:
roundPixels
- this will cause the renderer to draw most Game Objects at whole integer positions. Their actual positions can be anything, but the renderer will floor the values to ensure they are integers immediately before drawing. It only works on texture based Game Objects. Graphics objects, for instance, ignore this property.
antialias
- when set to true
WebGL textures are created using gl.LINEAR
, which allows WebGL to try its best to interpolate the texture when rendered at non-texture frame sizes. This can happen if you scale a Game Object, or zoom a Camera. In both cases it will need to interpolate the pixel values to accommodate the new size. If this property is set to false
then it will use gl.NEAREST
instead. This uses a nearest neighbor method of interpolation, and is nearly always the better option if you need to keep the textures crisp, such as when using scaled pixel art. Disabling antialias
invokes nearest-neighbor interpolation on the game canvas itself as well. If you need a mixture of aliased and anti-aliased textures in your game, then you can change them on a per-texture basis by using Texture.setFilter
.
There is a third game config property called pixelArt
. If set to true
it's the same thing as enabling roundPixels
and disabling antialias
. This is the optimum setting for pixel art games.
- Both renderers will now check for
pixelArt
ORantialias
before setting the canvas scale mode. Both values are checked during texture creation as well. - If in your game config you have enabled either pixel art mode or roundPixels, then all Cameras will have their
roundPixels
values set totrue
by default. You can toggle this by changing theCameraManager.roundPixels
property, or change it on a camera-by-camera basis, as needed. Camera.roundPixels
is now used across all rendering code for both Canvas and WebGL. Previously, it would check the renderer config value, but now all renderer code uses the camera value to decide if it should floor the drawing position or not.
Texture Tint Pipeline - New Features, Updates and Fixes
The Texture Tint Pipeline has been rewritten to tidy up hundreds of lines of duplicate code and to move the responsibility of drawing to the Game Objects themselves. Previously, had you excluded say Tilemaps from your build of Phaser, the renderer would still include masses of code dealing with the drawing of them. This task has been moved to the Game Objects and the pipeline just provides a set of clean utility functions for batching, flushing and drawing.
The decision to make this change was not taken lightly. However, I felt that none of the pipelines actually lived up to their name. You could never actually pass objects through one pipeline to another as they didn't have entry and exit points and were instead just glorified singular batches. Although you could change the pipeline being used on a Game Object this action meant that every pipeline had to be responsible for every single type of Game Object, both now and in the future, and they were full of redundant stub functions as a result. The payload size was also considerable. It has now gone from 1,961 lines of code at 76 KB down to 729 lines of code and 27 KB. It's not the only file to benefit either. The ForwardDiffuseLightPipeline
also reduced from 402 lines (15.7 KB) down to 159 lines and 6 KB. Sizes include comments and are un-minified. In a production bundle the difference will be even greater. This is work we will continue in the next release as we do the same updates to the FlatTintPipeline, responsible for rendering Graphics objects, and look at consolidating the shaders allowing you to use Graphics and Sprites mixed in the display list with no shader swapping cost.
- You can now set the WebGL batch size in the Game Config via the property
batchSize
. The default is 2000 before the batch will flush, which is a happy average between desktop and mobile. If targeting desktop specifically, you may wish to increase this value to reduce draw calls. - There is a new method
batchVertices
which will add a vertices block to the current batch. This is now used internally by ...
Phaser v3.10.1 Release
Version 3.10.1 - Hayashi - 13th June 2018
Bug Fixes
- The InputManager would only create 1 Pointer, even if Touch input was enabled in the config, which meant you couldn't use touch events unless you first called
addPointer
or specified one in the config. Now, it Touch is enabled in the config, it'll always create 2 pointers by default.
Version 3.10.0 - Hayashi - 13th June 2018
Input System New Features + Updates
- All Input classes are now covered 100% by JSDocs.
- The Input Manager and Input Plugin have been updated to support multiple simultaneous Pointers. Before, only one active pointer (mouse or touch) was supported. Now, you can have as many active pointers as you need, allowing for complex multi-touch games. These are stored in the Input Manager
pointers
array. addPointer
allows you to add one, or more, new pointers to the Input Manager. There is no hard-coded limit to the amount you can have, although realistically you should never need more than 10. This method is available on both the Input Manager and Plugin, allowing you to usethis.input.addPointer
from within your game code.- InputManager
pointersTotal
contains the total number of active pointers, which can be set in the Game Config using theinput.activePointers
property. Phaser will create 2 pointers on start unless a different value is given in the config, or you can add them at run-time. mousePointer
is a new property that is specifically allocated for mouse use only. This is perfect for desktop only games but should be ignored if you're creating a mouse + touch game (use activePointer instead).activePointer
will now reflect the most recently active pointer on the game, which is considered as being the pointer to have interacted with the game canvas most recently.- The InputManager and InputPlugin have three new methods:
addUpCallback
,addDownCallback
andaddMoveCallback
. These methods allow you to add callbacks to be invoked whenever native DOM mouse or touch events are received. Callbacks passed to this method are invoked immediately when the DOM event happens, within the scope of the DOM event handler. Therefore, they are considered as 'native' from the perspective of the browser. This means they can be used for tasks such as opening new browser windows, or anything which explicitly requires user input to activate. However, as a result of this, they come with their own risks, and as such should not be used for general game input, but instead be reserved for special circumstances. The callbacks can be set asisOnce
so you can control if the callback is called once then removed, or every time the DOM event occurs. - Pointer has two new properties
worldX
andworldY
which contain the position of the Pointer, translated into the coordinate space of the most recent Camera it interacted with. - When checking to see if a Pointer has interacted with any objects it will now iterate through the Camera list. Previously, it would only check against the top-most Camera in the list, but now if the top-most camera doesn't return anything, it will move to the next camera and so on. This also addresses #3631 (thanks @samid737)
InputManager.dirty
is a new internal property that reflects if any of the Pointers have updated this frame.InputManager.update
now uses constants internally for the event type checking, rather than string-based like before.InputManager.startPointer
is a new internal method, called automatically by the update loop, that handles touch start events.InputManager.updatePointer
is a new internal method, called automatically by the update loop, that handles touch move events.InputManager.stopPointer
is a new internal method, called automatically by the update loop, that handles touch end events.InputManager.hitTest
has had its arguments changed. It no longer takes x/y properties as the first two arguments, but instead takes a Pointer object (from which the x/y coordinates are extracted).TouchManager.handler
has been removed as it's no longer used internally.TouchManager.onTouchStart
,onTouchMove
andonTouchEnd
are the new DOM Touch Event handlers. They pass the events on to the InputManagersqueueTouchStart
,queueTouchMove
andqueueTouchEnd
methods respectively.MouseManager.handler
has been removed as it's no longer used internally.MouseManager.onMouseDown
,onMouseMove
andonMouseUp
are the new DOM Mouse Event handlers. They pass the events on to the InputManagersqueueMouseDown
,queueMouseMove
andqueueMouseUp
methods respectively.- Setting
enabled
to false on either the TouchManager, MouseManager or KeyboardManager will prevent it from handling any native DOM events until you set it back again. - InputPlugin has the following new read-only properties:
mousePointer
,pointer1
,pointer2
,pointer3
,pointer4
,pointer5
,pointer6
,pointer7
,pointer8
,pointer9
andpointer10
. Most of these will be undefined unless you calladdPointer
first, or set the active pointers quantity in your Game Config. - InputManager has a new method
transformPointer
which will set the transformed x and y properties of a Pointer in one call, rather than the 2 calls it took before. This is now used by all Pointer event handlers. - InputPlugin has a new method
makePixelPerfect
which allows you to specify a texture-based Game Object as being pixel perfect when performing all input checks against it. You use it like this:this.add.sprite(x, y, key).setInteractive(this.input.makePixelPerfect())
, or the easier:setInteractive({ pixelPerfect: true })
- you can also pass or set an optional alpha tolerance level. See the method docs for full details and the new examples to see it in action. Note that as a pointer interacts with the Game Object it will constantly poll the texture, extracting a single pixel from the given coordinates and checking its color values. This is an expensive process, so should only be enabled on Game Objects that really need it.
Input - Custom Cursors
- You can now set a custom cursor for your game via
this.input.setDefaultCursor()
. This will take any valid CSS cursor string, including URLs to cursor image files. - You can now set a custom cursor for specific Game Objects. This will take any valid CSS cursor string, including URLs to cursor image files, and is used when-ever a pointer is over that Game Object. For example, to have a hand cursor appear when over a button Sprite, you can do:
button.input.cursor = 'pointer'
, or to have a help cursor appear:button.input.cursor = 'help'
, or to have a custom image:button.input.cursor = 'url(assets/cursors/sword.cur), pointer'
. - You can also set a custom cursor in the new Input Configuration Object. To use the
pointer
(hand cursor) there is a new short-cut:setInteractive({ useHandCursor: true })
. To use anything else:setInteractive({ cursor: CSSString })
whereCSSString
is any valid CSS for setting a cursor. - Please be aware of limitations when it comes to image based cursors between browsers. It's up to you to find a suitable format and size that fits the browsers you wish to support (note: virtually all modern browsers no longer support animated CSS cursors.)
Input - Configuration Objects
- The
setInteractive
method can now take an Input Configuration object as its only argument. This allows you to set multiple input related properties in a single call, i.e.:setInteractive({ draggable: true, pixelPerfect: true })
. The available properties are: hitArea
- The object / shape to use as the Hit Area. If not given it will try to create a Rectangle based on the texture frame.hitAreaCallback
- The callback that determines if the pointer is within the Hit Area shape or not.draggable
- Iftrue
the Interactive Object will be set to be draggable and emit drag events.dropZone
- Iftrue
the Interactive Object will be set to be a drop zone for draggable objects.useHandCursor
- Iftrue
the Interactive Object will set thepointer
hand cursor when a pointer is over it. This is a short-cut for settingcursor: 'pointer'
.cursor
- The CSS string to be used when the cursor is over this Interactive Object.pixelPerfect
- Iftrue
the a pixel perfect function will be set for the hit area callback. Only works with texture based Game Objects.alphaTolerance
- IfpixelPerfect
is set, this is the alpha tolerance threshold value used in the callback.
Input - Keyboard Manager Updates
- The
KeyboardManager
class has been removed. It has been replaced withKeyboardPlugin
which is now an Input level plugin, that registers itself with the newInputPluginCache
. The Input Plugin class (which belongs to a Scene) will now automatically inject registered plugins into itself on boot. Every Scene has its own instance of the Input Plugin (if enabled in the scene plugins), which in turn has its own instance of the KeyboardPlugin. TheInputManager
no longer has any reference to the Keyboard class at all. The benefits of this are two-fold: First, it allows you to now entirely exclude all of the keyboard classes from a custom build, saving a lot of space if not required. Secondly, it means that the Scenes themselves are now responsible for keyboard events, where-as before they were entirely global. This means a Scene can be paused and stop processing keyboard events, and stop having its Key objects updated, while another Scene can still carry on doing this. It also prevents key related callbacks in sleeping Scenes from being fired (which resolves issue #3733, thanks @JoeMoov2) KeyboardManager.handler
has been renamed toonKeyHandler
.- The
KeyboardManager.captures
property has been removed as it can be more effectively handled by polling thekeys
object instead. - The Keyboard Manager will no longer process key down or up e...
Phaser v3.10.0 Release
Version 3.10.0 - Hayashi - 13th June 2018
Input System New Features + Updates
- All Input classes are now covered 100% by JSDocs.
- The Input Manager and Input Plugin have been updated to support multiple simultaneous Pointers. Before, only one active pointer (mouse or touch) was supported. Now, you can have as many active pointers as you need, allowing for complex multi-touch games. These are stored in the Input Manager
pointers
array. addPointer
allows you to add one, or more, new pointers to the Input Manager. There is no hard-coded limit to the amount you can have, although realistically you should never need more than 10. This method is available on both the Input Manager and Plugin, allowing you to usethis.input.addPointer
from within your game code.- InputManager
pointersTotal
contains the total number of active pointers, which can be set in the Game Config using theinput.activePointers
property. Phaser will create 2 pointers on start unless a different value is given in the config, or you can add them at run-time. mousePointer
is a new property that is specifically allocated for mouse use only. This is perfect for desktop only games but should be ignored if you're creating a mouse + touch game (use activePointer instead).activePointer
will now reflect the most recently active pointer on the game, which is considered as being the pointer to have interacted with the game canvas most recently.- The InputManager and InputPlugin have three new methods:
addUpCallback
,addDownCallback
andaddMoveCallback
. These methods allow you to add callbacks to be invoked whenever native DOM mouse or touch events are received. Callbacks passed to this method are invoked immediately when the DOM event happens, within the scope of the DOM event handler. Therefore, they are considered as 'native' from the perspective of the browser. This means they can be used for tasks such as opening new browser windows, or anything which explicitly requires user input to activate. However, as a result of this, they come with their own risks, and as such should not be used for general game input, but instead be reserved for special circumstances. The callbacks can be set asisOnce
so you can control if the callback is called once then removed, or every time the DOM event occurs. - Pointer has two new properties
worldX
andworldY
which contain the position of the Pointer, translated into the coordinate space of the most recent Camera it interacted with. - When checking to see if a Pointer has interacted with any objects it will now iterate through the Camera list. Previously, it would only check against the top-most Camera in the list, but now if the top-most camera doesn't return anything, it will move to the next camera and so on. This also addresses #3631 (thanks @samid737)
InputManager.dirty
is a new internal property that reflects if any of the Pointers have updated this frame.InputManager.update
now uses constants internally for the event type checking, rather than string-based like before.InputManager.startPointer
is a new internal method, called automatically by the update loop, that handles touch start events.InputManager.updatePointer
is a new internal method, called automatically by the update loop, that handles touch move events.InputManager.stopPointer
is a new internal method, called automatically by the update loop, that handles touch end events.InputManager.hitTest
has had its arguments changed. It no longer takes x/y properties as the first two arguments, but instead takes a Pointer object (from which the x/y coordinates are extracted).TouchManager.handler
has been removed as it's no longer used internally.TouchManager.onTouchStart
,onTouchMove
andonTouchEnd
are the new DOM Touch Event handlers. They pass the events on to the InputManagersqueueTouchStart
,queueTouchMove
andqueueTouchEnd
methods respectively.MouseManager.handler
has been removed as it's no longer used internally.MouseManager.onMouseDown
,onMouseMove
andonMouseUp
are the new DOM Mouse Event handlers. They pass the events on to the InputManagersqueueMouseDown
,queueMouseMove
andqueueMouseUp
methods respectively.- Setting
enabled
to false on either the TouchManager, MouseManager or KeyboardManager will prevent it from handling any native DOM events until you set it back again. - InputPlugin has the following new read-only properties:
mousePointer
,pointer1
,pointer2
,pointer3
,pointer4
,pointer5
,pointer6
,pointer7
,pointer8
,pointer9
andpointer10
. Most of these will be undefined unless you calladdPointer
first, or set the active pointers quantity in your Game Config. - InputManager has a new method
transformPointer
which will set the transformed x and y properties of a Pointer in one call, rather than the 2 calls it took before. This is now used by all Pointer event handlers. - InputPlugin has a new method
makePixelPerfect
which allows you to specify a texture-based Game Object as being pixel perfect when performing all input checks against it. You use it like this:this.add.sprite(x, y, key).setInteractive(this.input.makePixelPerfect())
, or the easier:setInteractive({ pixelPerfect: true })
- you can also pass or set an optional alpha tolerance level. See the method docs for full details and the new examples to see it in action. Note that as a pointer interacts with the Game Object it will constantly poll the texture, extracting a single pixel from the given coordinates and checking its color values. This is an expensive process, so should only be enabled on Game Objects that really need it.
Input - Custom Cursors
- You can now set a custom cursor for your game via
this.input.setDefaultCursor()
. This will take any valid CSS cursor string, including URLs to cursor image files. - You can now set a custom cursor for specific Game Objects. This will take any valid CSS cursor string, including URLs to cursor image files, and is used when-ever a pointer is over that Game Object. For example, to have a hand cursor appear when over a button Sprite, you can do:
button.input.cursor = 'pointer'
, or to have a help cursor appear:button.input.cursor = 'help'
, or to have a custom image:button.input.cursor = 'url(assets/cursors/sword.cur), pointer'
. - You can also set a custom cursor in the new Input Configuration Object. To use the
pointer
(hand cursor) there is a new short-cut:setInteractive({ useHandCursor: true })
. To use anything else:setInteractive({ cursor: CSSString })
whereCSSString
is any valid CSS for setting a cursor. - Please be aware of limitations when it comes to image based cursors between browsers. It's up to you to find a suitable format and size that fits the browsers you wish to support (note: virtually all modern browsers no longer support animated CSS cursors.)
Input - Configuration Objects
- The
setInteractive
method can now take an Input Configuration object as its only argument. This allows you to set multiple input related properties in a single call, i.e.:setInteractive({ draggable: true, pixelPerfect: true })
. The available properties are: hitArea
- The object / shape to use as the Hit Area. If not given it will try to create a Rectangle based on the texture frame.hitAreaCallback
- The callback that determines if the pointer is within the Hit Area shape or not.draggable
- Iftrue
the Interactive Object will be set to be draggable and emit drag events.dropZone
- Iftrue
the Interactive Object will be set to be a drop zone for draggable objects.useHandCursor
- Iftrue
the Interactive Object will set thepointer
hand cursor when a pointer is over it. This is a short-cut for settingcursor: 'pointer'
.cursor
- The CSS string to be used when the cursor is over this Interactive Object.pixelPerfect
- Iftrue
the a pixel perfect function will be set for the hit area callback. Only works with texture based Game Objects.alphaTolerance
- IfpixelPerfect
is set, this is the alpha tolerance threshold value used in the callback.
Input - Keyboard Manager Updates
- The
KeyboardManager
class has been removed. It has been replaced withKeyboardPlugin
which is now an Input level plugin, that registers itself with the newInputPluginCache
. The Input Plugin class (which belongs to a Scene) will now automatically inject registered plugins into itself on boot. Every Scene has its own instance of the Input Plugin (if enabled in the scene plugins), which in turn has its own instance of the KeyboardPlugin. TheInputManager
no longer has any reference to the Keyboard class at all. The benefits of this are two-fold: First, it allows you to now entirely exclude all of the keyboard classes from a custom build, saving a lot of space if not required. Secondly, it means that the Scenes themselves are now responsible for keyboard events, where-as before they were entirely global. This means a Scene can be paused and stop processing keyboard events, and stop having its Key objects updated, while another Scene can still carry on doing this. It also prevents key related callbacks in sleeping Scenes from being fired (which resolves issue #3733, thanks @JoeMoov2) KeyboardManager.handler
has been renamed toonKeyHandler
.- The
KeyboardManager.captures
property has been removed as it can be more effectively handled by polling thekeys
object instead. - The Keyboard Manager will no longer process key down or up events if its
enabled
property is set to false, or if the Scene to which it belongs is not active. - The Keyboard Manager will now call
event.preventDefault
on the native DOM event as long as the Key exists in the keys array and has itspreventDefault
property set totrue
(which is the default). This means you can now control specifically which ke...
Phaser v3.9.0 Release
New Features
- The command
npm run help
will display a friendly list of all the scripts available (runnpm install
first) - Game has a new property
hasFocus
which is a read-only boolean that lets you know if the window the game is embedded in (including in an iframe) currently has focus or not. - Game.Config has a new property
autoFocus
, which istrue
by default, and will automatically callwindow.focus()
when the game starts. - Clicking on the canvas will automatically call
window.focus
. This means in games that use keyboard controls if you tab or click away from the game, then click back on it again, the keys will carry on working (where-as before they would remain unfocused) - Arcade Physics Body has a new method
setAllowDrag
which toggles theallowDrag
property (thanks @samme) - Arcade Physics Body has a new method
setAllowGravity
which toggles theallowGravity
property (thanks @samme) - Arcade Physics Body has a new method
setAllowRotation
which toggles theallowRotation
property (thanks @samme) - Arcade Physics Group Config has 3 new properties you can use:
allowDrag
,allowGravity
andallowRotation
(thanks @samme) - PluginManager.registerFileType has a new property
addToScene
which allows you to inject the new file type into the LoaderPlugin of the given Scene. You could use this to add the file type into the Scene in which it was loaded. - PluginManager.install has a new property
mapping
. This allows you to give a Global Plugin a property key, so that it is automatically injected into any Scenes as a Scene level instance. This allows you to have a single global plugin running in the PluginManager, that is injected into every Scene automatically. - Camera.lerp has been implemented and allows you to specify the linear interpolation value used when following a target, to provide for smoothed camera tracking.
- Camera.setLerp is a chainable method to set the Camera.lerp property.
- Camera.followOffset is a new property that allows you to specify an offset from the target position that the camera is following (thanks @hermbit)
- Camera.setFollowOffset is a chainable method to set the Camera.followOffset property.
- Camera.startFollow has 4 new arguments:
lerpX
andlerpY
which allow you to set the interpolation value used when following the target. The default is 1 (no interpolation) andoffsetX
andoffsetY
which allow you to set the follow offset values. - Camera.startFollow will now immediately set the camera
scrollX
andscrollY
values to be that of the target position to avoid a large initial lerps during the first few preUpdates. - Math.Interpolation.SmoothStep is a new method that will return the smooth step interpolated value based on the given percentage and left and right edges.
- Math.Interpolation.SmootherStep is a new method that will return the smoother step interpolated value based on the given percentage and left and right edges.
Updates
- Container.setInteractive can now be called without any arguments as long as you have called Container.setSize first (thanks rex)
- Bob.reset will now reset the position, frame, flip, visible and alpha values of the Bob.
- VisibilityHandler now takes a game instance as its sole argument, instead of an event emitter.
- PluginManager.createEntry is a new private method to create a plugin entry and return it. This avoids code duplication in several other methods, which now use this instead.
- The Plugin File Type has a new optional argument
mapping
, which allows a global plugin to be injected into a Scene as a reference. - TileSprite.destroy has been renamed to
preDestroy
to take advantage of the preDestroy callback system. - RenderTexture.destroy has been renamed to
preDestroy
to take advantage of the preDestroy callback system. - Group.destroy now respects the
ignoreDestroy
property. - Graphics.preDestroy now clears the command buffer array.
- Container addHandler will now remove a child's Scene shutdown listener and only listens to
destroy
once. - Container removeHandler will re-instate a child's Scene shutdown listener.
- Container preDestroy now handles the pre-destroy calls, such as clearing the container.
- Blitter preDestroy will now clear the children List and renderList.
- The AudioContextMonkeyPatch has been updated to use an iife. Fix #3437 (thanks @NebSehemvi)
Bug Fixes
- PluginManager.destroy didn't reference the plugin correctly, throwing an Uncaught TypeError if you tried to destroy a game instance. Fix #3668 (thanks @Telokis)
- If a Container and its child were both input enabled they will now be sorted correctly in the InputPlugin (thanks rex)
- Fix TypeError when colliding a Group as the only argument in Arcade Physics. Fix #3665 (thanks @samme)
- The Particle tint value was incorrectly calculated, causing the color channels to be inversed. Fix #3643 (thanks @rgk)
- All Game Objects that were in Containers were being destroyed twice when a Scene was shutdown. Although not required it still worked in most cases, except with TileSprites. TileSprites specifically have been hardened against this now but all Game Objects inside Containers now have a different event flow, stopping them from being destroyed twice (thanks @laptou @PaNaVTEC)
- Camera.cull will now accurately return only the Game Objects in the camera view, instead of them all. Fix #3646 (thanks @KingCosmic @Yora)
- The
dragend
event would be broadcast even if the drag distance or drag time thresholds were not met. Fix #3686 (thanks @RollinSafary) - Restarting a Tween immediately after creating it, without it having first started, would cause it to get stuck permanently in the Tween Managers add queue (thanks @Antriel @zacharysarette)
- Setting an existing Game Object as a static Arcade Physics body would sometimes incorrectly pick-up the dimensions of the object, such as with TileSprites. Fix #3690 (thanks @fariazz)
- Interactive Objects were not fully removed from the Input Plugin when cleared, causing the internal list array to grow. Fix #3645 (thanks @tjb295 for the fix and @rexrainbow for the issue)
- Camera.shake would not effect dynamic tilemap layers. Fix #3669 (thanks @kainage)
Examples, Documentation and TypeScript
Thanks to the work of @hexus we have now documented nearly all of the Math namespace. This is hundreds of functions now covered by full docs and is work we'll continue in the coming weeks.
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: