Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
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

16. May 2018

Since the release of Phaser 3.0 earlier this year, the HTML5 game framework has seen a rapid succession of updates.  Today Phaser 3.8.0 was released, this release focusing heavily on the plugin system, making it easier to acquire and ultimately use them in your game.  This release also enables you to provide your own already created WebGL context when initializing Phaser.  Of course the release is also packed with other smaller fixes, features and improvements.

Further details from the change log:

New Features
  • You can pass in your own canvas and context elements in your Game Config and Phaser will use those to render with instead of creating its own. This also allows you to pass in a WebGL 2 context. Fix #3653 (thanks @tgrajewski)
  • WebGLRenderer.config has a new property maxTextures which is derived from gl.MAX_TEXTURE_IMAGE_UNITS, you can get it via the new method getMaxTextures().
  • WebGLRenderer.config has a new property maxTextureSize which is derived from gl.MAX_TEXTURE_SIZE, you can get it via the new method getMaxTextureSize()
  • WebGLRenderer has a new property compression which holds the browser / devices compressed texture support gl extensions, which is populated during init.
  • When calling generateFrameNames to define an animation from a texture atlas you can now leave out all of the config properties and it will create an animation using every frame found in the atlas. Please understand you've no control over the sequence of these frames if you do this and it's entirely dictated by the json data (thanks @Aram19)
  • The keycodes for 0 to 9 on the numeric keypad have been added. You can now use them in events, i.e. this.input.keyboard.on('keydown_NUMPAD_ZERO') (thanks @Gaushao)
  • All Game Objects have a new method setRandomPosition which will randomly position them anywhere within the defined area, or if no area is given, anywhere within the game size.
  • Game.step now emits a prestep event, which some of the global systems hook in to, like Sound and Input. You can use it to perform pre-step tasks, ideally from plugins.
  • Game.step now emits a step event. This is emitted once per frame. You can hook into it from plugins or code that exists outside of a Scene.
  • Game.step now emits a poststep event. This is the last chance you get to do things before the render process begins.
  • Optimized TextureTintPipeline.drawBlitter so it skips bobs that have alpha of zero and only calls setTexture2D if the bob sourceIndex has changed, previously it called it for every single bob.
  • Game.context used to be undefined if running in WebGL. It is now set to be the WebGLRenderingContext during WebGLRenderer.init. If you provided your own custom context, it is set to this instead.
  • The Game onStepCallback has been removed. You can now listen for the new step events instead.
  • Phaser.EventEmitter was incorrectly namespaced, it's now only available under Phaser.Events.EventEmitter (thanks Tigran)
Bug Fixes
  • The Script File type in the Loader didn't create itself correctly as it was missing an argument (thanks @TadejZupancic)
  • The Plugin File type in the Loader didn't create itself correctly as it was missing an argument.
  • WebAudioSoundManager.unlock will now check if document.body is available before setting the listeners on it. Fixes old versions of Firefox, apparently. #3649 (thanks @squilibob)
  • Utils.Array.BringToTop failed to move the penultimate item in an array due to an index error. Fix #3658 (thanks @agar3s)
  • The Headless renderer was broken due to an invalid access during TextureSource.init.
  • Animation.yoyo was ignored when calculating the next frame to advance to, breaking the yoyo effect. It now yoyos properly (thanks Tomas)
  • Corrected an error in Container.getBoundsTransformMatrix that called a missing method, causing a getBounds on a nested container to fail. Fix #3624 (thanks @poasher)
  • Calling a creator, such as GraphicsCreator, without passing in a config object, would cause an error to be thrown. All Game Object creators now catch against this.

If you are interested in learning Phaser 3, be sure to check out our Getting Started video, also embedded below:

GameDev News

9. May 2018

Phaser 3.7.1 continues it’s rapid release schedule, the most recently released version being 3.7.1.  Phaser is a HTML5 2D game framework, with 3.x being the most recent branch.  If you are interested in learning more about Phaser, be sure to check out our Getting Started with Phaser 3 video, also embedded below.  This release focused heavily on API refinement, loading performance gains and improvements to the documentation.  This change also fixes Googles recent web audio idiocy in Chrome 66.

Details from the release blog:

New in this version is support for Loader Pack Files. These were a popular feature in Phaser 2 and allowed you define a list of resources in a JSON file that the Loader would consume and then load for you. They're back in Phaser 3 now and refined to be more powerful than before. Packs can even load other packs, and you can selectively run just a part of a pack if you wish.

Also improved is the ability to use Phaser outside of Webpack. I have removed the requirement for the Webpack raw-loader plugin entirely, and swapped the defines to use typeof checks, which means you should now be able to require Phaser into your package, no matter what bundler you're using, and without any special configuration needed. If you are using Webpack you can still benefit by using our config, but those outside of Webpack, or in environments like Electron are no longer penalized.

The Change Log for this release is massive and contains a few important updates. I would urge you to please read through it as there are some API breaking changes inside in certain areas. This release also fixes the issue Chrome v66 has bought into the mainstream with regard to unlocking Web Audio on desktop and their insane new Media Engagement Index.

You can read the complete change as well as download here.

GameDev News

22. March 2018

Phaser is a popular open source HTML5 2D game framework, that just released version 3.3.0.  Phaser has been on a rapid release schedule since Phaser 3 was released just last month.

Highlights of this release include:

  • Lots of new Game Configuration properties which are passed to Phaser330the renderer, including power preferences, anti-aliasing, drawing buffer preservation and more.
  • Arcade Physics can now wrap physics bodies around the world.
  • Camera shake, fade and flash all now have optional callbacks that can be invoked when the effect completes.
  • Camera fadeIn and Camera fadeOut are two new methods to help with scene transitions (also with callbacks)
  • Groups now listen for the destroy event coming from children and automatically purge them from the Group if received.
  • There is a new MatterGameObject which allows you to bind a Matter Physics body with any renderable Game Object, such as Text, Bitmap Text or TileSprite (see the labs for examples)
  • The Sound Manager has new chainable setRate and setDetune methods.

Additionally the documentation has seemed heavy focus which will hopefully result in Typescript definitions being available soon™.  In addition to the above features there were several other smaller improvements and bug fixes.  You can read the full change log here.

If you are interested in getting started with Phaser, be sure to check out our recently released Getting Started with Phaser 3 video tutorial, also embedded below.

GameDev News

13. March 2018

Another quick update for the recently released Phaser 3 game engine, this one bringing Phaser to version 3.2.1.   Phaser is a popular and full featured 2D framework for developing HTML5 games.  This release is almost entirely composed of bug fixes and quality of life improvements.

Details of the release from the release notes:

Bug Fixes
  • Fixed issue with Render Texture tinting. Fix #3336 (thanks @rexrainbow)
  • Fixed Utils.String.Format (thanks @samme)
  • The Matter Debug Layer wouldn't clear itself in canvas mode. Fix #3345 (thanks @samid737)
  • TimerEvent.remove would dispatch the Timer event immediately based on the opposite of the method argument, making it behave the opposite of what was expected. It now only fires when requested (thanks @migiyubi)
  • The TileSprite Canvas Renderer did not support rotation, scaling or flipping. Fix #3231 (thanks @TCatshoek)
  • Fixed Group doesn't remove children from Scene when cleared with the removeFromScene argument set (thanks @iamchristopher)
  • Fixed an error in the lights pipeline when no Light Manager has been defined (thanks @samme)
  • The ForwardDiffuseLightPipeline now uses sys.lights instead of the Scene variable to avoid errors due to injection removal.
  • Phaser.Display.Color.Interpolate would return NaN values because it was loading the wrong Linear function. Fix #3372 (thanks @samid737)
  • RenderTexture.draw was only drawing the base frame of a Texture. Fix #3374 (thanks @samid737)
  • TileSprite scaling differed between WebGL and Canvas. Fix #3338 (thanks @TCatshoek)
  • Text.setFixedSize was incorrectly setting the text property instead of the parent property. Fix #3375 (thanks @rexrainbow)
  • RenderTexture.clear on canvas was using the last transform state, instead of clearing the whole texture.
  • The SceneManager.render will now render a Scene as long as it's in a LOADING state or higher. Before it would only render RUNNING scenes, but this precluded those that were loading assets.
  • A Scene can now be restarted by calling scene.start() and providing no arguments (thanks @migiyubi)
  • The class GameObject has now been exposed, available via Phaser.GameObjects.GameObject (thanks @rexrainbow)
  • A Camera following a Game Object will now take the zoom factor of the camera into consideration when scrolling. Fix #3353 (thanks @brandonvdongen)
  • Calling setText on a BitmapText object will now recalculate its display origin values. Fix #3350 (thanks @migiyubi)
  • You can now pass an object to Loader.atlas, like you can with images. Fix #3268 (thanks @TCatshoek)
  • The onContextRestored callback won't be defined any more unless the WebGL Renderer is in use in the following objects: BitmapMask, Static Tilemap, TileSprite and Text. This should allow those objects to now work in HEADLESS mode. Fix #3368 (thanks @16patsle)
  • The SetFrame method now has two optional arguments: updateSize and updateOrigin (both true by default) which will update the size and origin of the Game Object respectively. Fix #3339 (thanks @Jerenaux)

Phaser is available for download here.  If you are interested in learning more about Phaser 3 development be sure to check out our getting started video available here and embedded below.

GameDev News

GFS On YouTube

See More Tutorials on!

Month List