The January 2020 Phaser Backers Pack is here!
Greetings!
I'm happy to announce that the January Phaser Code Bundle is available for download. As before, I'm now using DropBox Transfer to handle the downloads, so please use the following link and password to grab the zip:
https://www.dropbox.com/transfer/AAAAANf0FvhbuUhXL-IhjRRNgcsA-4Cj2HSmyTmuMNOZcdf9crh-Kqw
Password: FBATV3s3PyYV6wmFGqvH
If you're new to the Phaser Code bundles, then it's worth mentioning that this bundle includes all previous months code, too. You don't have to download every one of them as this zip has the lot so far!
To get the bundle running, you can either use 'npm install' and then 'npm start' from within the unzipped folder. Or, if you already have a local web server set-up, unzip this somewhere in the webroot and access the public/index.html page. Whatever you do, make sure you run it via a web server, though. If you have any trouble, grab me on the Patreon Discord channel, and I can help.
It's important to mention that this bundle makes extensive use of new features from Phaser 3.23.0. This version hasn't been published to npm or GitHub releases yet, and won't be until late February at the earliest. However, you can use it right away. All of the code is in the GitHub master branch, so if you build a version from that, you'll get 3.23. Also, the zip file includes a 3.23 release in the 'build' folder (named 2020-01.js). Just remember, if you want to use any of this code in your projects, then build 3.23 first.
This bundle is dedicated to showing off the brand new Rope Game Object. You may be familiar with the Rope object from Phaser 2, and I've now added a far more powerful version into Phaser 3. A Rope is essentially a texture that is laid out across a strip of vertices, and you can adjust the position, color, and alpha of each vertice to create some quite spectacular effects. As Rope is a Game Object, you can also flip it, scale it, alpha it, add a blend mode, and do most the usual sorts of things you'd expect. Unlike the Phaser 2 Rope, though, you can do extra things with this version, including animating it (yes, it can play any Sprite animation directly across its vertices!). You can also set if the vertices should be arranged horizontally or vertically, which gives a lot more scope for effects. Ropes are much easier to create, more flexible than before, and when used correctly, look awesome.
You'll find lots of demos in this bundle. Starting with the basics of creating a Rope, right through to generating them dynamically, or from Path objects, showing the debug vertices, using them as masks, and plenty more.
There are also three new examples showing how to handle reflections. The first is a simple way to fake a sprite reflection using a smart mixture of quad alphas. The second, however, uses a camera rendering to a texture and two Scenes to show a reflection of the entire game. Finally, we do the same again, but this time the camera texture is fed into a rippling shader.
Creating both the reflection and Rope demos was really interesting as it led to a couple of subtle yet fundamental new features within Phaser 3. The first is that if you've got a camera rendering to a texture, before this update, it would always render to the game canvas, as well. Sometimes you want this. For example, if applying a post-processing effect on the whole camera. However, if you wanted to use the camera texture as a feed for, say, a shader, then very often, it doesn't need rendering to the game canvas as well. With the new 'renderToGame' boolean, it's now easy to control this.
Initially, I had no intention of adding the Rope Game Object to Phaser 3 at all. It was never on our roadmap as it felt like a bit of a limited-use feature. However, I decided to take a quick look at what would be involved and was surprised to see that we had nearly all the required components already in the shape of the Mesh Game Object. All it needed then was a tiny custom pipeline (the new TextureTintStripPipeline) and the creation of all of the usual helper methods that you'd expect from Phaser. I was delighted with the ease at which it all came together, and everyone benefits from a powerful new Game Object as a result.
It also got me thinking about Phaser 4. Fundamentally, a Rope is nothing more than a Sprite, with the ability to customize its vertices. A Sprite, quite rightly, uses a standard quad arrangement, but you've no control over that. The more I experimented and built the Rope Game Object, the more I thought that, in essence, it made sense that perhaps instead of all these different types of Game Object (Sprite, Image, Rope, TileSprite, etc.) that I should create one that can handle each specific requirement. If a Sprite could define its vertices, it could be a Rope. If it could support a repeating texture, it could be a TileSprite. Plus, you'd gain a Rope that can have repeating textures out of that, too. The more I thought about it, the more it made sense that rather than lots of different types of Game Objects in v4, we go in the opposite direction and create just a few of them, but with the features they need so that all previous effects were possible. I'll start work on this approach this week and will post my findings shortly.
In the meantime, please enjoy the January Backers Pack :)
Greetings!
I'm happy to announce that the January Phaser Code Bundle is available for download. As before, I'm now using DropBox Transfer to handle the downloads, so please use the following link and password to grab the zip:
https://www.dropbox.com/transfer/AAAAANf0FvhbuUhXL-IhjRRNgcsA-4Cj2HSmyTmuMNOZcdf9crh-Kqw
Password: FBATV3s3PyYV6wmFGqvH
If you're new to the Phaser Code bundles, then it's worth mentioning that this bundle includes all previous months code, too. You don't have to download every one of them as this zip has the lot so far!
To get the bundle running, you can either use 'npm install' and then 'npm start' from within the unzipped folder. Or, if you already have a local web server set-up, unzip this somewhere in the webroot and access the public/index.html page. Whatever you do, make sure you run it via a web server, though. If you have any trouble, grab me on the Patreon Discord channel, and I can help.
It's important to mention that this bundle makes extensive use of new features from Phaser 3.23.0. This version hasn't been published to npm or GitHub releases yet, and won't be until late February at the earliest. However, you can use it right away. All of the code is in the GitHub master branch, so if you build a version from that, you'll get 3.23. Also, the zip file includes a 3.23 release in the 'build' folder (named 2020-01.js). Just remember, if you want to use any of this code in your projects, then build 3.23 first.
This bundle is dedicated to showing off the brand new Rope Game Object. You may be familiar with the Rope object from Phaser 2, and I've now added a far more powerful version into Phaser 3. A Rope is essentially a texture that is laid out across a strip of vertices, and you can adjust the position, color, and alpha of each vertice to create some quite spectacular effects. As Rope is a Game Object, you can also flip it, scale it, alpha it, add a blend mode, and do most the usual sorts of things you'd expect. Unlike the Phaser 2 Rope, though, you can do extra things with this version, including animating it (yes, it can play any Sprite animation directly across its vertices!). You can also set if the vertices should be arranged horizontally or vertically, which gives a lot more scope for effects. Ropes are much easier to create, more flexible than before, and when used correctly, look awesome.
You'll find lots of demos in this bundle. Starting with the basics of creating a Rope, right through to generating them dynamically, or from Path objects, showing the debug vertices, using them as masks, and plenty more.
There are also three new examples showing how to handle reflections. The first is a simple way to fake a sprite reflection using a smart mixture of quad alphas. The second, however, uses a camera rendering to a texture and two Scenes to show a reflection of the entire game. Finally, we do the same again, but this time the camera texture is fed into a rippling shader.
Creating both the reflection and Rope demos was really interesting as it led to a couple of subtle yet fundamental new features within Phaser 3. The first is that if you've got a camera rendering to a texture, before this update, it would always render to the game canvas, as well. Sometimes you want this. For example, if applying a post-processing effect on the whole camera. However, if you wanted to use the camera texture as a feed for, say, a shader, then very often, it doesn't need rendering to the game canvas as well. With the new 'renderToGame' boolean, it's now easy to control this.
Initially, I had no intention of adding the Rope Game Object to Phaser 3 at all. It was never on our roadmap as it felt like a bit of a limited-use feature. However, I decided to take a quick look at what would be involved and was surprised to see that we had nearly all the required components already in the shape of the Mesh Game Object. All it needed then was a tiny custom pipeline (the new TextureTintStripPipeline) and the creation of all of the usual helper methods that you'd expect from Phaser. I was delighted with the ease at which it all came together, and everyone benefits from a powerful new Game Object as a result.
It also got me thinking about Phaser 4. Fundamentally, a Rope is nothing more than a Sprite, with the ability to customize its vertices. A Sprite, quite rightly, uses a standard quad arrangement, but you've no control over that. The more I experimented and built the Rope Game Object, the more I thought that, in essence, it made sense that perhaps instead of all these different types of Game Object (Sprite, Image, Rope, TileSprite, etc.) that I should create one that can handle each specific requirement. If a Sprite could define its vertices, it could be a Rope. If it could support a repeating texture, it could be a TileSprite. Plus, you'd gain a Rope that can have repeating textures out of that, too. The more I thought about it, the more it made sense that rather than lots of different types of Game Objects in v4, we go in the opposite direction and create just a few of them, but with the features they need so that all previous effects were possible. I'll start work on this approach this week and will post my findings shortly.
In the meantime, please enjoy the January Backers Pack :)