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
andcontext
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 fromgl.MAX_TEXTURE_IMAGE_UNITS
, you can get it via the new methodgetMaxTextures()
.- WebGLRenderer.config has a new property
maxTextureSize
which is derived fromgl.MAX_TEXTURE_SIZE
, you can get it via the new methodgetMaxTextureSize()
- WebGLRenderer has a new property
compression
which holds the browser / devices compressed texture support gl extensions, which is populated duringinit
.- 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.Updates
- 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: