Part 1 - Introduction

By Richard Davey on 12th November 2018   @photonstorm

Note: This is an intermediate level tutorial. Development experience of Phaser 3 assumed.


In this tutorial we're going to create a retro styled highscore table. Classic arcade games would often have you trying your best to get a highscore, only to immortalize it on the highscore table with a simple 3 character name.

We're going to recreate this in a Phaser 3 Scene you can easily drop into any game. However, while it's retro inspired, we don't want to be entirely held in the past. So, as well as being able to select the characters to enter onto the highscore table using the cursor keys, you can also use the mouse, or touch input, or simply type them in too. Modern retro, if you like.

Scene Structure

We'll create a Scene that will handle the input of the name onto the highscore table. We'll call this Scene the InputPanel, but really, you can name it whatever you like. The idea, is that when the game ends, the Game Over Scene launches an instance of the Input Panel.

This panel will be running in parallel to the Game Over Scene. As you interact with it, it will emit events. The Game Over Scene will listen for these events and respond to them accordingly. Once you've finished entering your name, the Game Over Scene will close the panel down and resume full control.

So, let's get started with our structure.