Designing Phaser games for mobile

By April 9, 2018 No Comments

Designing Phaser games for mobile is as easy as designing a house, or as difficult.
Well designing any game for any platform is as easy or as difficult as you make it. The better you get at game design, the easier it becomes. More experience means more resourcefulness.

It all comes down to you in the end, but here are some of the things we have learned about mobile game design. Use some of the steps here if you find them useful.

designing phaser games blueprint
Start with good game design

Good design is so important. Snowman Gaming on YouTube covers this in his videos. Games with bad design simply fail. When you’re designing Phaser games, you’re no exception to the rule. Start with a good game design. A good game follows a good design, and a good design requires time and effort. Intuitive controls, clear game direction and smooth game flow are the fruits of great design, great planning and execution.
If you skip it, it shows.
It shows like a lighthouse beacon on a dark night.
We will all see your design sucks.

So take the time to carefully plan out your game. Think about it, both from the user perspective and development perspective.
What will we see first when we play? A loading screen? Will there be an introductory animation?
How many states are there for objects and scenes? Are objects self-managed or controlled?

Once you have a clear design, step back and thin out your design. Check every item and ask yourself: does this need to be here? The best designs end up being the simplest.

phaser mobile game
Designing Phaser games with Mobile in mind

Our mobile devices are more powerful than ever! True, but they won’t perform like our computers. Always bear that in mind. You may be forced to make concessions to accommodate the lack of power in mobile devices if you don’t think mobile first.

Aside from performance optimisations, consider the physical device.
Where, when and how do your players hold their devices? Tablets are different to phones, and phones come in a hundred sizes. Don’t make players reach over to access the menu, or flip their device unnecessarily just to play. You don’t want players fidgeting; you want them immersed in play.

Also, consider your GUI and HUD elements. Look at the button positioning and button sizes. If you put your finger over the screen, do important things disappear? Be sure the player isn’t blinded every time they need to put their finger on the screen. The main stage should remain visible. Mouse cursors are unobtrusive, but hands and fingers are giant screen blockers.

Optimisations for performance

We follow 5 golden rules to optimise our games for mobile devices. They work well for us, and will help your games perform better on less powerful devices.

  1. Make it smaller
    Create the smaller feasible size of the game and Phaser will scale it up. If your graphics can be tiny, keep them tiny. If you can use fewer sounds, less becomes more! If your viewport can be 320 instead of 640, 320 it is. Get your game and minimize it.
  2. Be stingy with objects
    Only the absolutely essential objects exist at any time. Add them only when they need to exist, and remove them as soon as possible.
  3. Begrudgingly accept any input
    Be strict with that the player can interact with. Turn off input on objects when they cannot be interacted with. Block input when you need to. This allows you to play with great features like active pause screens.
  4. Collision avoidance
    We really hate checking for collisions. You should too. Only perform the bare minimum checks when absolutely necessary. Now watch your performance jump.
  5. Simplify
    Probably one of our most important rules. Keep finding ways to simplify your code. Reuse functions. Define fonts only once. Use constants.

Finally, we have the review. Unfortunately, this step is a heartbreaker. When we’re designing Phaser games for mobile, we often overlook this vital point. We accept the flaws and make excuses because it’s a free engine, or just a ‘side project’. Step away from your game, let someone else play it without directing them.
Was it intuitive and easy to understand? Did they enjoy it? Will they play it again without you asking them to?
We never get the design completely right the first time, therefore, reviews are essential. Improve the design, improve the game, and implement feedback. Be sure your players are happy with the game before the project is closed. While you’re here, take a look at our games.

Umz Webber

The Master of Umz Gmaes.