1. Game Development
  2. Phaser
Gamedevelopment

New Camera Features in Phaser

by
Difficulty:BeginnerLength:ShortLanguages:

Introduced in the 2.4.7 version of Phaser, the new camera features look really interesting and it's worth checking them out. In this tutorial you'll see how easy it is to apply camera effects in your HTML5 games built with Phaser.

Note: if you need an introduction to the Phaser framework, you can check Getting Started With Phaser: Building "Monster Wants Candy", where I break down the source code and explain it in detail.

There are three interesting new features you can use: camera flash, fade, and shake. They do exactly what you can expect from them. Let's see why those are very useful and should be considered in your next game development project with Phaser.

Until now I was using the Juicy plugin to achieve such functionalities, but the source code was abandoned a long time ago and I had to manage it myself. Now with the features being built-in and part of the Phaser source code I don't have to worry about any compatibility issues or framework updates. They are also a lot easier to implement.

Enclave Phaser Template

I'll use Enclave Phaser Template as a case study—it's a set of basic functionalities, from states through audio and highscore management to tweens and animations. The template is open sourced and available on GitHub as part of the open.enclavegames.com initiative, so you can easily see how it all got implemented, including the new camera effects.

Enclave Phaser Template

Ok, let's move on to the actual implementation part.

Camera Flash

Flashing the camera can be used for hit or impact effects—for example, when the player is hit by the enemy's bullet, the screen can turn red for a short moment. Here's the flash camera effect with the parameters explained:

It fills the screen with the solid color and fades away to alpha 0 over the given duration. You can use the force parameter to overwrite any other flash effects and have this as the only one running at the current moment. The default color is white, and the flash lasts for half a second (500 milliseconds):

Flashing the camera can be used for various effects. In the Enclave Phaser Template, it makes a nice seamless transition when bringing up a new state, to show the main menu after all the resources have finished loading. Instead of showing everything instantly, we can use the flash with black color as a base:

It is executed at the very end of the create function in the MainMenu.js file representing the menu state. You can see the effect in action on a gif:

Enclave Phaser Template - Flash

As you can see, this achieves a nice, smooth appear effect. Now let's move on to camera fade.

Camera Fade

To make the feeling of moving between states complete, we can use fade to achieve a reversed flash and make the state fade out smoothly. If done properly, this can bring a fade-out, fade-in effect, which looks really nice. Here's the theory:

The parameters are exactly the same as in a camera's flash, except the default color is not white, but black:

It starts filling the screen from alpha 0 with the given color and ends with a solid fill. The actual source code from the clickStart action on the Start button in the MainMenu.js file looks like this:

It fades the screen over a period of 200 milliseconds and then launches a new state after the same amount of time to synchronize both actions. This is what it looks like in action:

Enclave Phaser Template - Fade

Combining flash and fade makes a nice transition between states. Now, let's move on to the shake effect.

Camera Shake

Another useful Phaser camera method is shake—it can be used for situations where a player hits the obstacles when flying through the asteroid field, or utilizing a powerful bomb from the inventory. It can be executed when colliding with the game objects floating on the screen.

The first parameter controls how much the camera is shaking, and the second one how long the shake will last. The third one is about replacing the already running shake if this parameter is set to true. The fourth controls the shake horizontally, vertically or both, and the last parameter decides on whether the camera will shake outside of the world bounds showing whatever is there. Here's the example with the default values:

It will shake the camera with 0.05 intensity, for half a second (500 milliseconds), the force parameter is set to true, the camera will shake in both directions, and also outside of the world bounds. If you don't need to customize the shake and leave the default parameters, then you can just omit them in the call and it will work the same as above:

And this is how the actual shake looks in the Enclave Phaser Template source code when the points are added in the Game.js file:

The last three parameters are exactly the same as the default ones, so could have been omitted, but were left for educational purposes. See it in action:

Enclave Phaser Template - Shake

In this case the intensity is lower than the default value, and the duration is shorter to make it feel a little bit weaker, so it won't distract the player too much.

ResetFX

There's also a handy little method along with those three explained above. You can reset any active effects, and from the programming point of view you don't even have to know if there are any running at the given time—there's a special resetFX method you can use.

It immediately clears any ongoing camera effects and removes them from the screen.

Events

If you want to know if any specific effect is active or already ended, you can use the events provided by the framework: onFlashComplete, onFadeComplete, and onShakeComplete.

Remember the fade example on button click in the main menu? It was done by waiting a fixed amount of time, and then the state was switched to a new one. We can do it better using the onFadeComplete event:

This way was implemented in the next step, in the Story.js file when switching from Story state to the Game one. You have to admit it looks better, and the state is launched exactly when the effect is completed, no matter how long it lasts.

Summary

As you can see, those are quite powerful features when it comes to adding this extra "juice" or polish to your games. They are at the same time also very easy to use—it's great to see them natively implemented in Phaser.

Feel free to grab the source code of Enclave Phaser Template, implement the effects, and share links to your newly upgraded games with us in the comments!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.