Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
9. August 2019

Phaser, the popular open source 2D HTML 5 game framework, just released version 3.19.  Phaser 3.19 brings several new features and improvements Phaser319including a new Spine (learn more about this bone based 2D animation system here) plugin offering greater performance in a smaller package, a complete new Tweening system and several other new features.

Details from the Phaser blog:

This version will properly batch Spine skeletons where possible, potentially saving hundreds of draw calls. The plugin is fully documented and exports both debug and minified files, suitable for ES6 'importing' or ES5 plugin inclusion. The whole plugin is just 68KB in size (min+gz), or a paltry 57KB if you only need the Canvas renderer! That's a really tiny payload for such a massive feature-set. You can find out more about Spine from the Esoteric Software website.

3.19 also introduces a huge overhaul to the Tween system. Tweens now have 100% documentation and we've extended their capabilities significantly. There are lots of new Tween Events to listen for, such as 'COMPLETE' or 'REPEAT' to allow you to trigger actions without needing to create callbacks. Tweens can now tween both 'from' and 'to' a value, with the ability to set a starting value for any tweened property. There are lots of new handy methods and properties, such as Tween.hasStarted and a rewrite of the Tween seeking function, so it now allows you to seek to any point in time across a tween.

Finally, we've added in the great new 'StaggerBuilder'. This allows you to easily add staggered offsets to a bunch of tween targets, including all kinds of options such as staggering across a grid layout, stagger directions, starting values and a lot more. Please see the docs and examples for more details.

Be sure to check the Phaser blog for complete details of this release.  Check the change log for an even more in-depth description of what is new and changed in the 3.19 release.  You can get an introduction and overview of Phaser 3 in our slightly dated Introduction To Phaser 3 video available here.

GameDev News

19. June 2019

The HTML5 2D game framework Phaser just released version 3.18.0.  This release includes large rewrites to the Input API, as well as adding Multitouch support, Mouse Wheel support and more.

Details of the release from the Phaser blog:

After another month of hard work, we're very happy to announce the release of Phaser 3.18. In this release we took the time to rewrite large chunks of the Input API. This allowed us to fix a number of issues that had arisen, as well as optimizing the internal event flow. Native support for complete Multi-Touch support, Mouse Wheels and more advanced Pointer Button handling are now available. The whole API is smaller and tidier after the clean-up, which is always a good thing.

We've also added lots of other features and updates, including better Matter physics constraint handling, Arcade Physics improvements, Audio decoding events, Text justification, new Bounds methods and a lot, lot more. As usual, it doesn't end there, though. You'll find hundreds of great new features, updates and fixes.

Phaser is available for download on GitHub.  Documentation has also been updated to the 3.18.0 standard and is available to read here.  There is more to the release than shown here, read the full release notes for complete details of this release.  If you are new to Phaser, be sure to check our introduction available here.

GameDev News

11. May 2019

The Phaser HTML game framework just released version 3.17.0.  Phaser is an excellent open source MIT licensed 2D game framework.  If you are interested in getting started with Phaser, we have a tutorial video to get you started available right here.

The headline features of the 3.17.0 release include:

  • New Shader and BaseShader game objects make it even easier to use shaders with Phaser
  • DOM element game object to integrate DOM UI elements into your game
  • Camera Masks, for creating easy camera special effects

There are of course dozens of other improvements so be sure to read the full release notes here.  The complete change log is available here.  Phaser is available here, while the source code is available here.

GameDev News

5. February 2019

Phaser 3.16 has just been replaced, and this is the biggest update in Phaser 3’s history, finally bringing the open source HTML5 game frame work 100% feature completion.  Major aspects of this release include a new ScaleManager for multi-resolution support, a complete overhaul to the input handling systems (keyboard, touch and mouse), the ability to dynamically load scenes, improved documentation and Typescript definitions, hundreds of fixes and much more.  This release also contains several breaking changes, so be sure to take a good long read through the changelog before upgrading your existing Phaser 3 application.

I'm pleased to announce that Phaser 3.16 is now available. This version represents a significant milestone in the project as Phaser 3 is now 100% feature complete with all of the initially planned systems now in place. The most significant additions in 3.16 is the overhaul of the Input event handling, the long-awaited introduction of the Scale Manager, and the Extern Game Object, which allows for 3rd party rendering support, as required by Spine. Spine animation support is being handled exclusively through a Phaser Plugin. The current build of the Spine plugin can be found in this repo in the plugins folder, along with examples in the Phaser Labs. The Spine plugin will be developed independently of Phaser in the coming weeks.

This is the single largest update of Phaser 3 yet, and as such, there are breaking changes. I have painstakingly listed all of them in the Change Log, so please do read it if you're upgrading from an earlier version. I know there is a lot to take in, so I'll be covering the new features in the Phaser World newsletter in the coming weeks.

The first post-3.16 release of Phaser World is out now and available here, with this episode discussing the new Input System and external scene loading functionality.  We did a complete Getting Started tutorial shortly after Phaser 3 was released, which is now quite out of date.  I am considering doing a Phaser tutorial series in the same vein as the recently completed Godot tutorial, would you like to see this?

GameDev News

1. October 2018

Since Phaser 3 was released back in February it has seen a rapid release schedule, bringing it to todays 3.14 (Happy Pie day!) release.  Phaser 3 is a complete HTML5 based game engine built on top of a redisigned modern renderer.  If you are interested in learning more about using Phaser 3, check out our getting started video, also embedded below.  One major part of the 3.14 release is support for the recently released Tiled 1.2 map editor.

Details of the release from the Phaser change log:

What's New in 3.14.0?

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.
  • 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 on Sprites with the crop component. This was particularly noticeable on Sprites with trimmed animation frames (thanks @sergeod9)
  • Fixed a bug where the gl scissor wasn't being reset during a renderer resize, causing it to appear as if the canvas didn't resize properly when autoResize was set to true in the game config. Fix #4066 (thanks @Quinten @hsan999)
  • If a Game instance is destroyed without using the removeCanvas argument, it would throw exceptions in the MouseManager after the destroy process has run, as the event listeners were not unbound. They're not unbound, regardless of if the parent canvas is removed or not. Fix #4015 (thanks @garethwhittaker)

GameDev News

GFS On YouTube

See More Tutorials on!

Month List