Graphics Transform Operations and Render to Texture Support
First things first, Phaser CE 2.4.8 was released this week And then quickly followed by a 2.4.9 hotfix :) (hey, I've been there, I've done it myself!) 2.7.8 includes a bunch of new features covering Groups, the Scale Manager, the Loader, and lots of work with the Creature animation runtimes. Also a stack of bug fixes. It's great to see CE grow and mature like this. Long may it continue :)
Phaser 3 Updates
Lots of people have been asking me recently "When will Phase 3 be released?". It's a good question. I actually have a quite detailed plan now, breaking down our work over the coming months, and what is required to get us to Beta, Alpha, Release Candidate and Final. However, I don't want to share it just yet. The reason is that it's based on the assumption that we are successful with our application for funding through the Mozilla Open Source scheme (MOSS).
Of course, there are many great OSS projects out there worthy of funding, and I know the competition will be tough for what is a finite amount of money. But I had to plan our schedule thinking positively. I have no idea if Phaser has been accepted into MOSS or not. I kid you not when I say it's making me quite anxious waiting to find out. What is worse, I don't even know when they are going to decide. So right now it's a case of a small moment of panic each time a new email arrives. The reality is that if we succeed, then I can share our schedule (and I'll be over the moon!). And if we don't I'll need to start looking for more contract work against to sustain development and adjust the dates accordingly. Either way, I should be able to share it soon.
Graphics-ho!
One of our Trello cards was to investigate if it would be possible to allow devs to inject transform operations into the command stack of a Graphics object. If you've had a look at previous Graphics examples you'll know they're built-up in much the same was as Canvas operations are. You can set a lineStyle, and use functions like moveTo, lineTo, drawRectangle, and so on. Internally these are added to a command queue, cached and then rendered.
The idea was to see if Graphics could also support functions like translate, scale and rotate, added into the command list. And lo and behold, Felipe took the challenge, vanished into the ether for a couple of days, and popped out the other end with a monster commit that did exactly that.
Sweetness and lightning, it makes such a difference as to what's possible. Here's an example (as usual, click the screen shot to run it in browser - desktop WebGL required for this one)
The Phaser text is created by nothing more than moveTo and lineTo commands. The new transform operations allow us to scale and rotate it. And the extra bells and whistles that build-up over the 60 seconds the demo runs for are all just variations of Graphics features, like line thickness, or stroke colors.
The background stars and Pacman ghosts effect is a combination of an EffectLayer using a hue shifting shader and some sprites with a little math. Nothing more complex than that.
As always you can play with the online code editor for this example and tweak it to your heart's content.
Render to Texture
Another new feature this week is the ability to render a Graphics object to a Texture. You can draw whatever you require to the Graphics, then turn it into a Texture suitable for any other texture based game object, such as the images in this demo:
Now, this is handy of course, as it means you can generate game assets at run-time. However, it also allows you to go one step further, by feeding the texture it creates into a Render Pass. Remember, a Render Pass is a way to inject a shader into the display list. Here is a Graphics object (our jaunty little star shape again) being fed into an illumination shader:
Sweet, right?! These two features alone open up a whole world of possibilities now, and I'm really excited to see them land in Phaser 3.
That's it for this issue, a bit shorter than usual, but remember you did get two issues this week! Lots of other work was completed. For example, I built the new Visibility Manager and hooked it into the Timestep and Game Loop. But you sadly can't extract much eye candy from a window focus event. Feel free to check the commit log for the gory details though.
Next time I'll explore the powerful new Tween Manager, and show you how to make the most of it. And hey, if Mozilla has responded by then, I'll either be unbearably ecstatic or weeping gently into my keyboard. Time will tell.
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. The group is for anyone who wishes to discuss what the Phaser 3 API will contain.
The Phaser 3 Developers Guide is available. Essential reading for anyone who'd like to help build Phaser 3.
First things first, Phaser CE 2.4.8 was released this week And then quickly followed by a 2.4.9 hotfix :) (hey, I've been there, I've done it myself!) 2.7.8 includes a bunch of new features covering Groups, the Scale Manager, the Loader, and lots of work with the Creature animation runtimes. Also a stack of bug fixes. It's great to see CE grow and mature like this. Long may it continue :)
Phaser 3 Updates
Lots of people have been asking me recently "When will Phase 3 be released?". It's a good question. I actually have a quite detailed plan now, breaking down our work over the coming months, and what is required to get us to Beta, Alpha, Release Candidate and Final. However, I don't want to share it just yet. The reason is that it's based on the assumption that we are successful with our application for funding through the Mozilla Open Source scheme (MOSS).
Of course, there are many great OSS projects out there worthy of funding, and I know the competition will be tough for what is a finite amount of money. But I had to plan our schedule thinking positively. I have no idea if Phaser has been accepted into MOSS or not. I kid you not when I say it's making me quite anxious waiting to find out. What is worse, I don't even know when they are going to decide. So right now it's a case of a small moment of panic each time a new email arrives. The reality is that if we succeed, then I can share our schedule (and I'll be over the moon!). And if we don't I'll need to start looking for more contract work against to sustain development and adjust the dates accordingly. Either way, I should be able to share it soon.
Graphics-ho!
One of our Trello cards was to investigate if it would be possible to allow devs to inject transform operations into the command stack of a Graphics object. If you've had a look at previous Graphics examples you'll know they're built-up in much the same was as Canvas operations are. You can set a lineStyle, and use functions like moveTo, lineTo, drawRectangle, and so on. Internally these are added to a command queue, cached and then rendered.
The idea was to see if Graphics could also support functions like translate, scale and rotate, added into the command list. And lo and behold, Felipe took the challenge, vanished into the ether for a couple of days, and popped out the other end with a monster commit that did exactly that.
Sweetness and lightning, it makes such a difference as to what's possible. Here's an example (as usual, click the screen shot to run it in browser - desktop WebGL required for this one)
The Phaser text is created by nothing more than moveTo and lineTo commands. The new transform operations allow us to scale and rotate it. And the extra bells and whistles that build-up over the 60 seconds the demo runs for are all just variations of Graphics features, like line thickness, or stroke colors.
The background stars and Pacman ghosts effect is a combination of an EffectLayer using a hue shifting shader and some sprites with a little math. Nothing more complex than that.
As always you can play with the online code editor for this example and tweak it to your heart's content.
Render to Texture
Another new feature this week is the ability to render a Graphics object to a Texture. You can draw whatever you require to the Graphics, then turn it into a Texture suitable for any other texture based game object, such as the images in this demo:
Now, this is handy of course, as it means you can generate game assets at run-time. However, it also allows you to go one step further, by feeding the texture it creates into a Render Pass. Remember, a Render Pass is a way to inject a shader into the display list. Here is a Graphics object (our jaunty little star shape again) being fed into an illumination shader:
Sweet, right?! These two features alone open up a whole world of possibilities now, and I'm really excited to see them land in Phaser 3.
That's it for this issue, a bit shorter than usual, but remember you did get two issues this week! Lots of other work was completed. For example, I built the new Visibility Manager and hooked it into the Timestep and Game Loop. But you sadly can't extract much eye candy from a window focus event. Feel free to check the commit log for the gory details though.
Next time I'll explore the powerful new Tween Manager, and show you how to make the most of it. And hey, if Mozilla has responded by then, I'll either be unbearably ecstatic or weeping gently into my keyboard. Time will tell.
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. The group is for anyone who wishes to discuss what the Phaser 3 API will contain.
The Phaser 3 Developers Guide is available. Essential reading for anyone who'd like to help build Phaser 3.