New State Manager and Camera System added
It's been another solid week of progress and development on Phaser 3. Work has been split into two main sections. I have been updating the State Manager, and Felipe has been adding in Camera support.
New State Manager
In Phaser 2 States run in isolation. You can swap from one to another, but essentially they're lonesome little beasts. They also don't have any real responsibilities beyond being containers for your code, and some global (game wide) properties. In Phaser 3 this has all changed. The first and most important change is that States can now run in parallel. As many of them as you like. This means you could have a State that just controls the UI, one for the game background effects, and another for all the player sprites. This should help keep your code really clean and more modular.
You can easily transition between States now, with a user defined duration and callbacks. So fading between two States is now thankfully trivial. States also have all of their own managers. For example in Phaser 2 there is one single Loader manager, and when you do 'this.load.image' from within a State, it's actually just using the single global Loader to handle that. In Phaser 3 the State owns the Loader. So you can have multiple States all loading their own assets in parallel, and the load events are now specific just to the State that owns the Loader.
States also now have a position and dimension. You can set a State to render to a specific x/y coordinate, and have a width and height as well. They can also optionally render to their own textures, or use the global canvas. When a State renders to its own texture it has its own local canvas, that all children are drawn to, and then this canvas is composited to the game canvas at the end of the render loop. With the new callbacks this means you can do post-processing effects, or alternatively only re-render infrequently changing States as needed, rather than every single frame (effectively allowing you to 'cache to texture' the entire State, not just a single display object).
State configuration is also now handled via a JSON object (see image below):
In the image above you can see some new properties, such as x, y and renderToTexture. You may also notice a new 'files' array. This is a new addition in Phaser 3 that allows a State to preload assets in advance of the State actually starting. In Phaser 2 for example if you had maybe a game config JSON, or some preloader assets (like a progress bar or logo), you'd have to load them in one State, then swap to another one to load the rest of the assets. Using the new files array approach you can now use that to preload your 'initial' assets, and then use the State preload function to load the main ones. Although States have their own Loaders, assets are still stored globally in the Cache, available from anywhere.
Multiple Camera Support
The camera in Phaser 2 is a bit of a hack job really. It's basically a Display Object that everything else is added to, and it gets a bit messy for example if you want to rotate or it scale it (things like input events can get confused, and it can mess the physics up in some cases). Also it's not possible to have more than one camera. It was essential we did cameras properly in Phaser 3, and we have :) They're all now in the codebase, with examples available too. You can have camera-in-camera effects, because each camera can be scaled, positioned and rotated:
And all those effects, like camera shake, fade and flash? No problem - they're also now camera specific too :)
There are a 6 new camera demos available on the Phaser Labs site, for you to test it out for yourself. When browsing the labs site if you click the icons, it loads the example into a stand-alone page. If you click the text link below it, it loads the example into an online editor, so you can see (and change) the source code.
It's been another fantastic week for development, and I've only scratched the surface here. I didn't even mention the new Color objects, all of the new Graphics functions, canvas functions and Simplex Noise functions! Again, thank you so much to those who back our developments on Patreon - it really means a lot, and is quite literally the only reason the two of us are able to work on this so much. I've got an internal 'checklist' of features I want added before I consider this Beta 1, and we're very close now. There's a bit of gnarly work next week with transform conversions for input hit checking, but otherwise we're finally closer than we've ever been.
If you've any questions about Phaser 3 then please ask either of us in the Slack or Discord channels, and we'll do our best to answer them.
Phaser 3 Mailing List and Developers Guide
If you're interested in helping evolve the shape of Phaser 3, then please join the Phaser 3 Google Group. Discussions this week have included varying render loops. The group is for anyone who wishes to help shape what the Phaser 3 API and feature-set will contain.
The Phaser 3 Developers Guide is available. Essential reading for anyone who'd like to help build Phaser 3.
It's been another solid week of progress and development on Phaser 3. Work has been split into two main sections. I have been updating the State Manager, and Felipe has been adding in Camera support.
New State Manager
In Phaser 2 States run in isolation. You can swap from one to another, but essentially they're lonesome little beasts. They also don't have any real responsibilities beyond being containers for your code, and some global (game wide) properties. In Phaser 3 this has all changed. The first and most important change is that States can now run in parallel. As many of them as you like. This means you could have a State that just controls the UI, one for the game background effects, and another for all the player sprites. This should help keep your code really clean and more modular.
You can easily transition between States now, with a user defined duration and callbacks. So fading between two States is now thankfully trivial. States also have all of their own managers. For example in Phaser 2 there is one single Loader manager, and when you do 'this.load.image' from within a State, it's actually just using the single global Loader to handle that. In Phaser 3 the State owns the Loader. So you can have multiple States all loading their own assets in parallel, and the load events are now specific just to the State that owns the Loader.
States also now have a position and dimension. You can set a State to render to a specific x/y coordinate, and have a width and height as well. They can also optionally render to their own textures, or use the global canvas. When a State renders to its own texture it has its own local canvas, that all children are drawn to, and then this canvas is composited to the game canvas at the end of the render loop. With the new callbacks this means you can do post-processing effects, or alternatively only re-render infrequently changing States as needed, rather than every single frame (effectively allowing you to 'cache to texture' the entire State, not just a single display object).
State configuration is also now handled via a JSON object (see image below):
In the image above you can see some new properties, such as x, y and renderToTexture. You may also notice a new 'files' array. This is a new addition in Phaser 3 that allows a State to preload assets in advance of the State actually starting. In Phaser 2 for example if you had maybe a game config JSON, or some preloader assets (like a progress bar or logo), you'd have to load them in one State, then swap to another one to load the rest of the assets. Using the new files array approach you can now use that to preload your 'initial' assets, and then use the State preload function to load the main ones. Although States have their own Loaders, assets are still stored globally in the Cache, available from anywhere.
Multiple Camera Support
The camera in Phaser 2 is a bit of a hack job really. It's basically a Display Object that everything else is added to, and it gets a bit messy for example if you want to rotate or it scale it (things like input events can get confused, and it can mess the physics up in some cases). Also it's not possible to have more than one camera. It was essential we did cameras properly in Phaser 3, and we have :) They're all now in the codebase, with examples available too. You can have camera-in-camera effects, because each camera can be scaled, positioned and rotated:
And all those effects, like camera shake, fade and flash? No problem - they're also now camera specific too :)
There are a 6 new camera demos available on the Phaser Labs site, for you to test it out for yourself. When browsing the labs site if you click the icons, it loads the example into a stand-alone page. If you click the text link below it, it loads the example into an online editor, so you can see (and change) the source code.
It's been another fantastic week for development, and I've only scratched the surface here. I didn't even mention the new Color objects, all of the new Graphics functions, canvas functions and Simplex Noise functions! Again, thank you so much to those who back our developments on Patreon - it really means a lot, and is quite literally the only reason the two of us are able to work on this so much. I've got an internal 'checklist' of features I want added before I consider this Beta 1, and we're very close now. There's a bit of gnarly work next week with transform conversions for input hit checking, but otherwise we're finally closer than we've ever been.
If you've any questions about Phaser 3 then please ask either of us in the Slack or Discord channels, and we'll do our best to answer them.
Phaser 3 Mailing List and Developers Guide
If you're interested in helping evolve the shape of Phaser 3, then please join the Phaser 3 Google Group. Discussions this week have included varying render loops. The group is for anyone who wishes to help shape what the Phaser 3 API and feature-set will contain.
The Phaser 3 Developers Guide is available. Essential reading for anyone who'd like to help build Phaser 3.