WebGL Snapshots and new Mesh Game Object
Last week I told you how I was waiting to hear back from Mozilla about my funding application for Phaser 3. Well, an hour after sending the newsletter and I got a reply. The reply was basically asking for a detailed technical schedule and told me they would be making a decision at the next funding meeting in a months time. So, that's good news in a way. It means it hasn't been rejected, and I now also know roughly when to expect to hear. I'm going to remain positive and carry on working on v3, and cross the Mozilla shaped bridge when we come to it.
Phaser 3 Updates
This week both Felipe and I have managed to get a complete week of work in on v3. No public holidays, no DDoS attacks, just pure coding. I've been working on the Tween Manager, and Felipe has been creating a new Game Objected called a Mesh. As we're limited in space in the newsletter I'm going to cover the Mesh this week, and Tweens next week.
Make it Snappy
We've built into the renderers the ability for you to take a snapshot of the current canvas, and save it to an image object. No matter what is being rendered: Shaders, Graphics, sprites, text - it will happily grab it. You can then use the resulting image either within your game or even save it to the filesystem. For example, if you were creating an art package it would allow you to grab the image that has been drawn.
Taking a snapshot is very simple, it's just a single call that requires a callback function, which is invoked once the frame has finished rendering:
In the code above we take a snapshot of the canvas, then append it to the document. As always, click the screen shots to run the demos in browser:
The main reason we added the snapshot feature was so we can use it internally to provide you with smooth transitions from one State to another. But, we exposed it in the API so you can use it in other ways too. Always great to kill two birds with one stone!
New Mesh Game Object
The biggest update this week is the addition of the new Mesh Game Object. This is a WebGL only feature and an extremely powerful one. When you render a standard Sprite in WebGL it consists of 2 triangles drawn as a quad:
The texture is mapped using the UV coordinates, assigning half of the texture to each triangle. Because they are joined together the image appears as a whole. When you use Sprites in Phaser it manages all of this for you, so you just move a sprite around the screen and all the triangle vertices and UV mapping is handled internally.
What a Mesh allows you to do is break these rules. When creating a mesh you need to pass the vertex positions and texture mapping coordinates as two arrays. Each Mesh has its own transform, so you can position, rotate or scale it without the need to update every vertex yourself. Here is the code for creating a simple quad using the Mesh:
Writing out each vertex by hand can be tedious, especially when dealing with big meshes. That is why one of the properties of a Mesh are the indices. It allows developers to describe the triangles using indices that map to the vertex array. The code above can now be presented like this:
This will help you remove redundant vertex definitions. Here is a demo where each vertice is updated using a tween, creating a nice 'push / pull' effect on the image:
In the coming day's we will be adding a new Quad Game Object, which extends the base Mesh class and offers you an easier path in, with more friendly access to the vertices. This will be handy for effects such as a scrolling Space Harrier style floor, or a perhaps just adding a bit of perspective flair onto your game logo.
It's important to understand that although the example and code above are based around a single quad, you can actually do so much more than that. They're not just about manipulating quads. There are some really advanced things you can do with them. For example, a pseudo-3D environment, or a 2D terrain renderer are now entirely possible.
A Mesh can have up to 8000 vertices and you have complete control over the texture mapping. This means you could create an effect where an image 'shatters' into pieces, like a pane of glass exploding, all using a single mesh. They are also batched. A collection of consecutive Mesh objects on the display list, if sharing the same texture, will be a single draw call.
We look forward to bringing you some more Mesh examples soon, including texture scrolling, and going way beyond a simple quad. Keep your eyes peeled on the newsletter for more!
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.
Last week I told you how I was waiting to hear back from Mozilla about my funding application for Phaser 3. Well, an hour after sending the newsletter and I got a reply. The reply was basically asking for a detailed technical schedule and told me they would be making a decision at the next funding meeting in a months time. So, that's good news in a way. It means it hasn't been rejected, and I now also know roughly when to expect to hear. I'm going to remain positive and carry on working on v3, and cross the Mozilla shaped bridge when we come to it.
Phaser 3 Updates
This week both Felipe and I have managed to get a complete week of work in on v3. No public holidays, no DDoS attacks, just pure coding. I've been working on the Tween Manager, and Felipe has been creating a new Game Objected called a Mesh. As we're limited in space in the newsletter I'm going to cover the Mesh this week, and Tweens next week.
Make it Snappy
We've built into the renderers the ability for you to take a snapshot of the current canvas, and save it to an image object. No matter what is being rendered: Shaders, Graphics, sprites, text - it will happily grab it. You can then use the resulting image either within your game or even save it to the filesystem. For example, if you were creating an art package it would allow you to grab the image that has been drawn.
Taking a snapshot is very simple, it's just a single call that requires a callback function, which is invoked once the frame has finished rendering:
In the code above we take a snapshot of the canvas, then append it to the document. As always, click the screen shots to run the demos in browser:
The main reason we added the snapshot feature was so we can use it internally to provide you with smooth transitions from one State to another. But, we exposed it in the API so you can use it in other ways too. Always great to kill two birds with one stone!
New Mesh Game Object
The biggest update this week is the addition of the new Mesh Game Object. This is a WebGL only feature and an extremely powerful one. When you render a standard Sprite in WebGL it consists of 2 triangles drawn as a quad:
The texture is mapped using the UV coordinates, assigning half of the texture to each triangle. Because they are joined together the image appears as a whole. When you use Sprites in Phaser it manages all of this for you, so you just move a sprite around the screen and all the triangle vertices and UV mapping is handled internally.
What a Mesh allows you to do is break these rules. When creating a mesh you need to pass the vertex positions and texture mapping coordinates as two arrays. Each Mesh has its own transform, so you can position, rotate or scale it without the need to update every vertex yourself. Here is the code for creating a simple quad using the Mesh:
Writing out each vertex by hand can be tedious, especially when dealing with big meshes. That is why one of the properties of a Mesh are the indices. It allows developers to describe the triangles using indices that map to the vertex array. The code above can now be presented like this:
This will help you remove redundant vertex definitions. Here is a demo where each vertice is updated using a tween, creating a nice 'push / pull' effect on the image:
In the coming day's we will be adding a new Quad Game Object, which extends the base Mesh class and offers you an easier path in, with more friendly access to the vertices. This will be handy for effects such as a scrolling Space Harrier style floor, or a perhaps just adding a bit of perspective flair onto your game logo.
It's important to understand that although the example and code above are based around a single quad, you can actually do so much more than that. They're not just about manipulating quads. There are some really advanced things you can do with them. For example, a pseudo-3D environment, or a 2D terrain renderer are now entirely possible.
A Mesh can have up to 8000 vertices and you have complete control over the texture mapping. This means you could create an effect where an image 'shatters' into pieces, like a pane of glass exploding, all using a single mesh. They are also batched. A collection of consecutive Mesh objects on the display list, if sharing the same texture, will be a single draw call.
We look forward to bringing you some more Mesh examples soon, including texture scrolling, and going way beyond a simple quad. Keep your eyes peeled on the newsletter for more!
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.