Phaser 3 Beta 4 is out. Sprite3D and Camera3D demos.
First things first - Phaser 3 Beta 4 is out. As mentioned previously we're now releasing new builds weekly, because the pace of change is just too great to accurately capture in a monthly release. Beta 4 introduces a lot of new features including the main one we'll talk about this issue: 3D Cameras.
Sprite3D and Camera3D
Last issue I talked about how I had added in all the Vector math classes. And what better way to test them than by implementing a 3D Sprite Camera. Just to be clear from the outset: What I have added isn't true 3D. Yes, the math itself is, but on the rendering front, it's projected into 2D space with billboard sprites. A billboard sprite is a sprite that always faces the camera, no matter what the orientation of the camera or sprite itself is. The sprites are then scaled and positioned based on their position in this 3D world. It's important to remember they have no perspective though, it's still just a flat 2D sprite but projected into the correct place on the screen.
The benefit of this is that all we're really doing is some vector math and sprite scaling, so it will work across both WebGL and Canvas. It's also nice and fast because, math aside, it's literally just setting the scale of a sprite. Let's start with a few demos so you can see what is in store. Please run these on desktop because they use cursor keys to control them.
Use the cursor keys to move the camera. Hold down the SHIFT key while pressing up/down to move on the Y axis as well. Here all you're looking at is a single perspective camera and three Sprite3D objects. If we look at the code you'll see how simple it was to create this scene:
The Scene Camera Manager, that is already used to create new cameras in multiple camera games, has gained two new methods: add3D and addOrthographicCamera. add3D is just a short-cut for creating a Perspective Camera. A perspective camera has a field of view which impacts the projection of the sprites. An orthographic camera has no fov, as it uses a form of parallel projection in which all the sprites are orthogonal to the plane.
So, what happens if you take a bunch of Sprite3D objects and allow the camera to fly through them? Demo time ... (again, use cursors + shift to move):
As the cursors are pressed the camera is moved through the scene. The trees themselves are all staying still, their position never changes, it's only the camera that moves. Internally a Sprite3D object is basically just a position and size in 3D space bound to a Game Object. When the camera is updated all of the Sprite3D objects are projected, based on the camera and their position. The resulting scale and 2D position are then fed into the Game Object simply using setScale and setPosition.
There is an option for simple culling, stopping objects 'behind' the camera from rendering. There are some helper methods (as seen in the code above with the camera.create method) which will quickly create a Sprite3D object bound to a Phaser Sprite, but these are merely for convenience. You can actually use any Game Object you like, including Text, as long as it can be positioned and scaled.
The camera will also look after its own Sprites, updating and projecting them for you, but again this is optional. There is nothing stopping you from creating a camera directly and managing the objects it projects yourself, updating it as needed.
You don't have to move the camera though. You can also move the Sprites:
Here we're used a helper method createRect to create a 3D rectangle full of Sprite3D objects. You can set the dimensions and spacing to achieve all kinds of layouts. We then create a Matrix4 and apply a slight rotation to it. This is then added to the Sprite3Ds every frame. The result is what you see in the demo above, all of the sprites moving position. You can still use the cursor keys to move the camera though.
As well as laying out Sprites in a rectangle you can also place them randomly in a sphere:
Again, it's just the Sprites that are moving. Although camera controls are enabled, so try moving inside the dot sphere :) Because these are just normal Game Objects it means anything you can do to those, you can do here too. They could be animated for example, or have a blend mode applied. Here's a 3D cube with an additive blend mode:
This will work fine in Canvas too! Although be careful with the number of Sprites you're drawing. In WebGL as long as the sprites are using the same base texture they'll be batched too, meaning the above demo is completing in a just single draw call (well, two if you include the text rendering, but the cube itself is just one!)
I'm quite excited about what you'll be able to do with this. It definitely takes a bit more effort to set-up a 3D scene, and you're not going to be able to create a Doom game with this or anything. But remember all of those classic Sprite Scaling games such as Afterburner, Space Harrier, Galaxy Force, or racing games like Outrun or Powerdrift? Now those are definitely possible!
You could also use it for just pretty transitions and effects. For example dropping a bunch of cards onto a casino table, or doing a character select screen where you spin the characters around (think Golden Axe). Because the Sprite3D objects are children of the Camera they don't interfere with anything else in your scene. You can easily add images behind or in front of them, they will even respond to input events and could have physics enabled (although again it won't be in 3D unless you implement that).
I'll leave you with this final demo. It's resource heavy, so won't run well on an iPad (or maybe that was just because iOS11 "upgraded" me!) but did run perfectly smooth on my desktop and laptop:
All of these examples are in the Phaser 3 Examples repo. All of the classes are in Beta 4. So feel free to have a play and experiment!
Next issue I'll be talking about the new Particle System we've added. We're still busy creating fun demos for it to show it off, but we're very happy with progress there.
Phaser 3 Labs
Visit the Phaser 3 Labs to view the new API structure in depth, read the FAQ, previous Developer Logs and contribution guides. You can also join the Phaser 3 Google Group or post to the Phaser 3 Forum - we'd love to hear from you!
First things first - Phaser 3 Beta 4 is out. As mentioned previously we're now releasing new builds weekly, because the pace of change is just too great to accurately capture in a monthly release. Beta 4 introduces a lot of new features including the main one we'll talk about this issue: 3D Cameras.
Sprite3D and Camera3D
Last issue I talked about how I had added in all the Vector math classes. And what better way to test them than by implementing a 3D Sprite Camera. Just to be clear from the outset: What I have added isn't true 3D. Yes, the math itself is, but on the rendering front, it's projected into 2D space with billboard sprites. A billboard sprite is a sprite that always faces the camera, no matter what the orientation of the camera or sprite itself is. The sprites are then scaled and positioned based on their position in this 3D world. It's important to remember they have no perspective though, it's still just a flat 2D sprite but projected into the correct place on the screen.
The benefit of this is that all we're really doing is some vector math and sprite scaling, so it will work across both WebGL and Canvas. It's also nice and fast because, math aside, it's literally just setting the scale of a sprite. Let's start with a few demos so you can see what is in store. Please run these on desktop because they use cursor keys to control them.
Use the cursor keys to move the camera. Hold down the SHIFT key while pressing up/down to move on the Y axis as well. Here all you're looking at is a single perspective camera and three Sprite3D objects. If we look at the code you'll see how simple it was to create this scene:
The Scene Camera Manager, that is already used to create new cameras in multiple camera games, has gained two new methods: add3D and addOrthographicCamera. add3D is just a short-cut for creating a Perspective Camera. A perspective camera has a field of view which impacts the projection of the sprites. An orthographic camera has no fov, as it uses a form of parallel projection in which all the sprites are orthogonal to the plane.
So, what happens if you take a bunch of Sprite3D objects and allow the camera to fly through them? Demo time ... (again, use cursors + shift to move):
As the cursors are pressed the camera is moved through the scene. The trees themselves are all staying still, their position never changes, it's only the camera that moves. Internally a Sprite3D object is basically just a position and size in 3D space bound to a Game Object. When the camera is updated all of the Sprite3D objects are projected, based on the camera and their position. The resulting scale and 2D position are then fed into the Game Object simply using setScale and setPosition.
There is an option for simple culling, stopping objects 'behind' the camera from rendering. There are some helper methods (as seen in the code above with the camera.create method) which will quickly create a Sprite3D object bound to a Phaser Sprite, but these are merely for convenience. You can actually use any Game Object you like, including Text, as long as it can be positioned and scaled.
The camera will also look after its own Sprites, updating and projecting them for you, but again this is optional. There is nothing stopping you from creating a camera directly and managing the objects it projects yourself, updating it as needed.
You don't have to move the camera though. You can also move the Sprites:
Here we're used a helper method createRect to create a 3D rectangle full of Sprite3D objects. You can set the dimensions and spacing to achieve all kinds of layouts. We then create a Matrix4 and apply a slight rotation to it. This is then added to the Sprite3Ds every frame. The result is what you see in the demo above, all of the sprites moving position. You can still use the cursor keys to move the camera though.
As well as laying out Sprites in a rectangle you can also place them randomly in a sphere:
Again, it's just the Sprites that are moving. Although camera controls are enabled, so try moving inside the dot sphere :) Because these are just normal Game Objects it means anything you can do to those, you can do here too. They could be animated for example, or have a blend mode applied. Here's a 3D cube with an additive blend mode:
This will work fine in Canvas too! Although be careful with the number of Sprites you're drawing. In WebGL as long as the sprites are using the same base texture they'll be batched too, meaning the above demo is completing in a just single draw call (well, two if you include the text rendering, but the cube itself is just one!)
I'm quite excited about what you'll be able to do with this. It definitely takes a bit more effort to set-up a 3D scene, and you're not going to be able to create a Doom game with this or anything. But remember all of those classic Sprite Scaling games such as Afterburner, Space Harrier, Galaxy Force, or racing games like Outrun or Powerdrift? Now those are definitely possible!
You could also use it for just pretty transitions and effects. For example dropping a bunch of cards onto a casino table, or doing a character select screen where you spin the characters around (think Golden Axe). Because the Sprite3D objects are children of the Camera they don't interfere with anything else in your scene. You can easily add images behind or in front of them, they will even respond to input events and could have physics enabled (although again it won't be in 3D unless you implement that).
I'll leave you with this final demo. It's resource heavy, so won't run well on an iPad (or maybe that was just because iOS11 "upgraded" me!) but did run perfectly smooth on my desktop and laptop:
All of these examples are in the Phaser 3 Examples repo. All of the classes are in Beta 4. So feel free to have a play and experiment!
Next issue I'll be talking about the new Particle System we've added. We're still busy creating fun demos for it to show it off, but we're very happy with progress there.
Phaser 3 Labs
Visit the Phaser 3 Labs to view the new API structure in depth, read the FAQ, previous Developer Logs and contribution guides. You can also join the Phaser 3 Google Group or post to the Phaser 3 Forum - we'd love to hear from you!