Newsletter
Welcome to Issue 98 of Phaser World
I love watching Gumball on Cartoon Network! I don't get to see it as often as I'd like, but when I do it never fails to entertain me. So it was great to see an official Gumball game created in Phaser.
We've also got tutorials, special offers and pirates to battle this issue. As the Dev Log is packed full of demos to test out with the Beta 4 release of Phaser 3. Also, we're pretty close to issue 100, right?! Make sure you're around for it - I've something special planned :)
So, until the next issue, keep on coding. Drop me a line if you've got any news you'd like featured. You can reply to this email or grab me on the Phaser Slack or Discord channels.
All of our own plugins and books are now 50% off or more For example, the Phaser Mega Bundle pack is now just $50, Interphase is now just $15 and Particle Storm is now just $20. Please visit the shop page for details.
Note that this excludes our affiliate products.
The Latest Games
Game of the Week
It's like air hockey, but played with Gumball, his friends and a load of lethal discs!
Staff Pick
Take to the high seas and sink as many vessels as you can in this multiplayer arcade battler.
It's a jigsaw in nature, but not as you know it, in this clean drag and drop puzzle game.
A nice mixture of zombies and sheep in a guess the word game.
Reduce stress as you pop an infinite amount of bubble wrap!
What's New?
A visual novel engine based on Phaser and inspired by Ren'Py. Create stories in yaml. Easy for non-programmers and to extend and modify.
Multiplayer Game Tutorial Part 2
In the next part of this multiplayer game tutorial the client is made dumb and the server authoritative.
How to create a smooth card flipping effect using just a couple of tweens.
Game Distribution API Tutorial
How to integrate the Game Distribution API and start monetizing your games.
FullStack introduction to Phaser
A nice short presentation on what Phaser is, its features and a demonstration game.
The ultimate Phaser IDE gets a new update including support for HiDPI monitors, new Scene Editor features and JavaScript 6.
Welcome and a massive thank you to the new Phaser Patreons who joined us this week: Jake Jensen.
Patreon is a way to contribute towards the Phaser project on a monthly basis. This money is used entirely to fund development costs and is the only reason we're able to invest so much time into our work. You can also donate via PayPal.
Backers get forum badges, discounts on plugins and books, and are entitled to free monthly coding support via Slack or Skype.
Dev Log #98
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 cursors to move
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):
A walk through the Space Harrier forest
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:
Weeee!
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:
Use the keys to move inside the spheres
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:
Pwetty!
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:
Enjoy the ride!
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!
Game scenario director Hiroo Otsubo has an interesting work process: he creates anime style art in Excel.
The Paint Timing API has landed in Chrome 60, and it allows us to gather paint timing metrics from end users. In this post, we'll show you how to use it!
An illustrated and interactive Dante's Inferno!
Phaser Releases
Phaser CE 2.8.7 released September 14th 2017.
Phaser 3 Beta 4 released September 25th 2017.
Please help support Phaser development
Have some news you'd like published? Email support@phaser.io or tweet us.
Missed an issue? Check out the Back Issues page.