Skip to content

Releases: phaserjs/phaser

Phaser v3.14.0 Release

01 Oct 13:53
Compare
Choose a tag to compare

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 and createDynamicLayer 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 LayerData baseTileWidth and baseTileHeight 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 parameter tilesetIndex which controls which tileset to prepare the VBO data for.
  • The StaticTilemapLayer.batchTile() method has a new parameter tilesetIndex 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 is true. 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 is false.
  • 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 via this.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 argument skipFlip which allows you to control the internal render texture flip Y check.
  • The Device.OS check for node will now do a typeof 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 using setOffset, 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 argument includeBase, which defaults to false 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 and animationcomplete.
  • 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 and Text.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 by destroy. The method destroys the Animation component, unregistering the remove 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 a lineWidth property unless you called the setLineWidth 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 and fromVerts as the shape type it wouldn't pass the values to Bodies.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 or Graphics.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...
Read more

Phaser v3.13.0

20 Sep 16:09
Compare
Choose a tag to compare

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 the batchFillTriangle 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 send pointer, x, y, camera to the listener. It now sends pointer, x, y, event to the listener. If you still need the camera property you can get it from pointer.camera.
  • The Game Object gameobjectdown callback signature has a new argument. It now sends event as the 3rd argument.
  • The pointerdown event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerdown and gameobjectdown). 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 the event as the 4th argument.
  • The Game Object gameobjectup callback signature has a new argument. It now sends event as the 3rd argument.
  • The pointerup event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerup and gameobjectup). 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 the event as the 4th argument.
  • The Game Object gameobjectmove callback signature has a new argument. It now sends event as the 3rd argument.
  • The pointermove event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointermove and gameobjectmove). 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 the event as the 4th argument.
  • The Game Object gameobjectover callback signature has a new argument. It now sends event as the 3rd argument.
  • The pointerover event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerover and gameobjectover). 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 the event as the 2nd argument.
  • The Game Object gameobjectout callback signature has a new argument. It now sends event as the 3rd argument.
  • The pointerout event, as dispatched by the InputPlugin, is now sent after the Game Object specific events (GameObject.pointerout and gameobjectout). 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://...

Read more

Phaser v3.12.0

04 Sep 14:50
Compare
Choose a tag to compare

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 the RenderTexture.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 and frame properties. These replace the old canvasTexture 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 using setText was the expected way to change what was being displayed. Internally the text property has been renamed to _text and flagged as private, and a new getter / setter for text has been added, which hands over to the setText 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 the fillRect 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 and displayFrame. These replace the previous texture and frame properties and hold references to the source texture the Tile Sprite is using.
  • The canvasPattern property has been renamed to fillPattern.
  • The oldFrame property has been removed.
  • The canvasBuffer property has been renamed to fillCanvas.
  • The canvasBufferCtx property has been renamed to fillContext.

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...
Read more

Phaser v3.12.0 Beta 3 Release

23 Aug 18:31
Compare
Choose a tag to compare
Pre-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 the RenderTexture.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 and frame properties. These replace the old canvasTexture 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 using setText was the expected way to change what was being displayed. Internally the text property has been renamed to _text and flagged as private, and a new getter / setter for text has been added, which hands over to the setText 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 the fillRect 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 and displayFrame. These replace the previous texture and frame properties and hold references to the source texture the Tile Sprite is using.
  • The canvasPattern property has been renamed to fillPattern.
  • The oldFrame property has been removed.
  • The canvasBuffer property has been renamed to fillCanvas.
  • The canvasBufferCtx property has been renamed to fillContext.

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...
Read more

Phaser v3.12.0 Beta 2 Release

09 Aug 13:18
Compare
Choose a tag to compare
Pre-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 the RenderTexture.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 and frame properties. These replace the old canvasTexture 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 the fillRect 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 and displayFrame. These replace the previous texture and frame properties and hold references to the source texture the Tile Sprite is using.
  • The canvasPattern property has been renamed to fillPattern.
  • The oldFrame property has been removed.
  • The canvasBuffer property has been renamed to fillCanvas.
  • The canvasBufferCtx property has been renamed to fillContext.

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 method Text.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 called html 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 new html cache. Access it via load.html (this method was previously used to load html to textures, please see load.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...
Read more

Phaser v3.12.0 Beta 1 Release

06 Aug 14:37
Compare
Choose a tag to compare
Pre-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 the RenderTexture.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 and frame properties. These replace the old canvasTexture 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 the fillRect 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 and displayFrame. These replace the previous texture and frame properties and hold references to the source texture the Tile Sprite is using.
  • The canvasPattern property has been renamed to fillPattern.
  • The oldFrame property has been removed.
  • The canvasBuffer property has been renamed to fillCanvas.
  • The canvasBufferCtx property has been renamed to fillContext.

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 method Text.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 called html 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 new html cache. Access it via load.html (this method was previously used to load html to textures, please see load.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...
Read more

Phaser v3.11.0 Release

13 Jul 11:14
Compare
Choose a tag to compare

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 method Camera.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 method Camera.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 the postCameraRender 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 argument centerOn. 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 to Camera.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 the getNextID 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 to addExisting 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 argument makeMain 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 optional isVisible 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 OR antialias 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 to true by default. You can toggle this by changing the CameraManager.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 ...
Read more

Phaser v3.10.1 Release

13 Jun 12:54
Compare
Choose a tag to compare

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 use this.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 the input.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 and addMoveCallback. 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 as isOnce 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 and worldY 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 and onTouchEnd are the new DOM Touch Event handlers. They pass the events on to the InputManagers queueTouchStart, queueTouchMove and queueTouchEnd methods respectively.
  • MouseManager.handler has been removed as it's no longer used internally.
  • MouseManager.onMouseDown, onMouseMove and onMouseUp are the new DOM Mouse Event handlers. They pass the events on to the InputManagers queueMouseDown, queueMouseMove and queueMouseUp 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 and pointer10. Most of these will be undefined unless you call addPointer 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 }) where CSSString 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 - If true the Interactive Object will be set to be draggable and emit drag events.
  • dropZone - If true the Interactive Object will be set to be a drop zone for draggable objects.
  • useHandCursor - If true the Interactive Object will set the pointer hand cursor when a pointer is over it. This is a short-cut for setting cursor: 'pointer'.
  • cursor - The CSS string to be used when the cursor is over this Interactive Object.
  • pixelPerfect - If true the a pixel perfect function will be set for the hit area callback. Only works with texture based Game Objects.
  • alphaTolerance - If pixelPerfect 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 with KeyboardPlugin which is now an Input level plugin, that registers itself with the new InputPluginCache. 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. The InputManager 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 to onKeyHandler.
  • The KeyboardManager.captures property has been removed as it can be more effectively handled by polling the keys object instead.
  • The Keyboard Manager will no longer process key down or up e...
Read more

Phaser v3.10.0 Release

13 Jun 08:07
Compare
Choose a tag to compare

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 use this.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 the input.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 and addMoveCallback. 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 as isOnce 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 and worldY 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 and onTouchEnd are the new DOM Touch Event handlers. They pass the events on to the InputManagers queueTouchStart, queueTouchMove and queueTouchEnd methods respectively.
  • MouseManager.handler has been removed as it's no longer used internally.
  • MouseManager.onMouseDown, onMouseMove and onMouseUp are the new DOM Mouse Event handlers. They pass the events on to the InputManagers queueMouseDown, queueMouseMove and queueMouseUp 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 and pointer10. Most of these will be undefined unless you call addPointer 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 }) where CSSString 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 - If true the Interactive Object will be set to be draggable and emit drag events.
  • dropZone - If true the Interactive Object will be set to be a drop zone for draggable objects.
  • useHandCursor - If true the Interactive Object will set the pointer hand cursor when a pointer is over it. This is a short-cut for setting cursor: 'pointer'.
  • cursor - The CSS string to be used when the cursor is over this Interactive Object.
  • pixelPerfect - If true the a pixel perfect function will be set for the hit area callback. Only works with texture based Game Objects.
  • alphaTolerance - If pixelPerfect 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 with KeyboardPlugin which is now an Input level plugin, that registers itself with the new InputPluginCache. 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. The InputManager 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 to onKeyHandler.
  • The KeyboardManager.captures property has been removed as it can be more effectively handled by polling the keys 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 its preventDefault property set to true (which is the default). This means you can now control specifically which ke...
Read more

Phaser v3.9.0 Release

24 May 22:46
Compare
Choose a tag to compare

New Features

  • The command npm run help will display a friendly list of all the scripts available (run npm 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 is true by default, and will automatically call window.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 the allowDrag property (thanks @samme)
  • Arcade Physics Body has a new method setAllowGravity which toggles the allowGravity property (thanks @samme)
  • Arcade Physics Body has a new method setAllowRotation which toggles the allowRotation property (thanks @samme)
  • Arcade Physics Group Config has 3 new properties you can use: allowDrag, allowGravity and allowRotation (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 and lerpY which allow you to set the interpolation value used when following the target. The default is 1 (no interpolation) and offsetX and offsetY which allow you to set the follow offset values.
  • Camera.startFollow will now immediately set the camera scrollX and scrollY 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:

@mikez @wtravO @thomastanck