Hi! My name is Mart and I recently joined the Phaser team as a Content Manager. Nice to meet you!
Welcome to my first tutorial on Phaser Editor. In this tutorial you will learn how to setup a project, how to add assets to your game and how to change their position and size. In the end, we'll take a big step forward and add tweens as well.
If you're only interested in the tutorial, feel free to skip ahead. In the beginning, I talk about my first impressions of Phaser Editor, as well as my background. Here we go!
To give you a sense of my level of expertise in game development, I'll tell you a bit about my background.
I used to be a conference interpreter but I had always loved video games and grew up wanting to make games. As such, I tried my best to learn programming during nights and weekends. Eventually I managed to break into the industry and become a front-end developer, working mostly with JavaScript and React. Throughout my career, I have done hobby-level game development off and on, trying different tools. I have briefly experimented with Phaser, Godot, Unity, and many others, but I have never shipped a game.
I imagine a lot of you are like me, or were like me at some point.
So, to sum up, I have a tiny bit of Phaser experience, a good amount of web development experience, and some amount of game development experience. Let's see how I get on.
Step 0: Installing the editor
I am on Windows and the latest version of the editor, at time of writing, is 4.1.0. I downloaded the Phaser Editor Desktop installer from the Downloads section in my Phaser.io account and proceeded to install it. Once installed, I was prompted to authorize the editor for use with my account. Everything worked seamlessly.
Very soon I was greeted by a list of templates that I could use to start my first project.
Excellent, it's been less than 10 minutes!
After selecting a template, I got a welcome screen and, following my impulse of "press all the buttons!", I pressed the first one I found, which was "Open a scene".
I was happy to find that there were some built-in scenes that I could play around with and I selected Level to start tinkering with.
Once the scene was loaded, I saw a layout with a scene editor, a tree of objects on the left, and an inspector view on the right. Perfect! This is so familiar, it's just like Godot! I know exactly what I'm doing!
... or so I thought.
The dark middle chapter
Although I am a somewhat experienced software developer, I sometimes still make mistakes. Let me be the first to admit that this was one of those times.
In this case, the mistake I made was having assumptions. As any software developer will tell you, assumptions are deadly. They need to be cleared as soon as possible or you risk going in the completely wrong direction, solving problems that don't exist, or taking risks when you should be protecting yourself against them.
The assumption that I made was that the Phaser Editor was going to be exactly like Godot or Unity (just with a more cheerful and whimsical outlook on life). Looking at this statement now, it's clear how foolish I was. Why would it be the same? Godot and Unity already exist, they don't need to be re-invented. Furthermore, Phaser is a long running, established, game framework. It's bound to have its own approach, and its own philosophy, towards game development.
So after many attempts of trying to use the Phaser Editor like it was Godot, I finally did the sensible thing. I read the docs.
Understanding what Phaser editor is (and isn't)
I think it's important to first talk about the difference between a game engine and a game development framework.
Typically, a game engine is an all-in-one package that aims to help you make games by assisting you as much as possible. Think Unity, Godot, the Unreal Engine. They usually have a graphical user interface (i.e, its a visual experience where you can drag things around and so on) and provide a wide variety of helpful tools to help you make games.
While this is all great, there are some downsides as well. Since it's mainly a visual experience, you are expected to use the editor for most things. You can't just write code.
A game engine is also likely to be opinionated meaning that it has opinions on how things should be done. If you want to do things differently from how the engine thinks you should do things, you may run into trouble. You may end up fighting against it.
A game development framework is something different. Usually it's a set of tools (tools meaning functions, classes, methods, and other programmery things), made available to you in the programming language of your choice, also designed to help you make games. Phaser, especially without the Editor, is a framework.
A game framework won't, typically, provide you with a graphical editor where you can drag and drop game objects into place. But it will give you the code you can use to position them where you want. This means that using a game framework is a less visual experience, but you can just write code. And while the framework does make some decisions for you, they are typically so low level (meaning very technical) that most people are OK with having those things be decided for them. They are still left with more freedom on how to build their game.
I now see that the Phaser Editor is a nice blend between the two.
The Phaser Editor lets you write your game with the freedom and convenience of a framework, but allows you to switch to a graphical interface (for certain tasks) when you want to. And you may very well want to because some things are just easier or quicker to do with visual tools. You can quickly position UI elements, design levels, play around with particle emitters, and so on.
But when you need to code, you can just code. And it gets out of your way.
The thing that I appreciated the most was the idea of protected zones. These are parts in your JavaScript files (because, in the end, a Phaser game is a Javascript program) that the editor won't touch. So you can freely extend and code the behavior of your game objects, without having to be afraid that the editor will generate new files the next time you make a visual change. I think this balance is very nice and lets you get the best of both worlds.
The actual tutorial
So with the out of the way, on to the tutorial.
On the new project screen, I selected "Vite TypeScript" as my template. When prompted, I created a new directory and selected it. Then the editor goes to install some dependencies that we need and after that I was greeted with the welcome screen.
To see what we have to start with, I'm going to press Play in the top left corner. This will ask me to start a development server. This is expected! We'll just click on Start Dev Server.
That'll make some windows pop up, that is all expected (it's the development server starting up), and eventually your web browser should open and you should see the built-in scene.
Hello Dino! It's working! Now, let's make a small scene of our own to start getting a feel for the editor. Towards the bottom of the editor window, there is a section called Files. It should have one directory with the name of your project. In my case, it's fruit-shoot.
I'll expand it by double-clicking on it, then I'll select src, expand it, and finally select scenes.
With this selected, I'll click the file icon with a plus symbol in the top left. You will be presented with a list of things to add, we'll select Scene File. Then we have to name the file and save it somewhere. If we had the scenes directory selected, it should already be selected here as well. I'm going to name the scene FruitShootMain to indicate it's the "main" scene in my project. And then I'll click create.
This opens a new Scene Editor tab in our editor. And down in the Files section, it will have two new files for us, FruitShootMain.scene and FruitShootMain.ts.
FruitShootMain.scene is what we see in the editor. FruitShootMain.ts is its representation in code. This is a file that Phaser will eventually use to make things appear on the screen when we start the game.
Whenever we change FruitShootMain.scene in the editor, FruitShootMain.ts will be automatically updated as well. Neat!
Now I want to add precisely 1 asset, an image file to be precise. We will use an old technique that was used in Super Mario Bros. and change the color of our image to get many uses out of it. You'll soon see what I mean. Note that you are completely free to add multiple assets, but this seems quicker to me. Side-note: Programmers pride themselves on "being lazy" as this supposedly leads to creative solutions. Let's hope this is one of those. Feel free to right click and click "Save image as ... " on the blob to download it.
First though, we have to find the assets directory in the Files section. You'll get there by expanding public, then selecting assets. You can expand it to see what's already included.
Now try to right-click on the name of the assets directory and select Upload Files from the dropdown. In the new window, select Browse from the bottom and find the blob.png file on your computer and double click it.
With that added, you can click on Upload 1 Files.
Now the blob is available in the editor, but we also have to add it to the asset pack. This makes it possible for Phaser to find later. To do this, find the Asset Pack Entry section on the right, and click Import as image.
When prompted, you can add it to the first asset pack, asset-pack.json.
That was a bit of work, but we now have access to our blob. To actually use the blob, just drag it into the Scene Editor (that's the big window with the grid, should be empty except for some lines that form a rectangle, more on that later).
This will cause many things to change. The blob will appear on the left, in the Outline section. This is a list of all the GameObjects in the scene. On the right, you'll find the Inspector section. This is where you can change things about your game object.
The blob itself will get a few arrows. This shows that the Translate tool is selected. By the way, translate is a cool programming word that just means move. If you click and drag on the little yellow dot on the blob, you can move it around the screen.
If at any point you want to change what part of the scene you are seeing, tap space on your keyboard. Your cursor will turn into a hand and you can drag the camera around. Hit space again to exit this mode. You can also hold the middle mouse button and move your mouse.
Feel free to experiment with the different buttons and tools you see. Once you're ready, we'll go and change the blob's Scale (meaning its size).
It's a property in the Inspector. Let's change both the X and Y to 0.5 to make it half the size.
Once that is done, I'll select the blob GameObject in the Outline and copy-paste it (Ctrl C, followed by Ctrl V on Windows. Same, but with Cmd on Mac) to create a copy. In fact, I'll make two copies. Again, use the yellow dot to drag them around. Here's how I positioned mine:
We have made some clouds!
Now let's make the floor.
Right click anywhere in the Outline or the Scene Editor, select Add Object, then Shape, then Rectangle. This should give us a box.
We'll quickly switch to the Scale tool (that's the second one in the very top of the Editor) and drag the handles on the box to make it bigger. We want to make it cover the entire width of the screen.
Once you are happy with the size, select the Translate tool from the top (that's the first icon) and move it so that it sits in the bottom. The transparent rectangle in the scene editor is what the camera will see. You can use that as a reference.
Now let's explore what changes we can make to our box. In the Inspector, you'll find a tab that says Shape. Expand it and tick is Filled and select a Fill Color. I picked my favorite shade of green, #3e8948. You may be thinking "That's a weird way to spell green!" and you'd be right. This is called hexadecimal notation. It's often used in computer graphics. Don't worry, you can use a color picker as well, that's the little icon next to the text box.
Now we have a green floor and some white clouds. Let's see about adding a sky.
In the Files section, find main.ts. It's in src but you can also use the text box to find a file by typing in part of its name.
Double click it to open it in the code editor. If you already have a code editor installed on your computer, you can just open it directly there as well.
This is what a Phaser scene looks like. We won't get into the specifics now, let's just change a few things.
After line 3, we will add
import FruitShootMain from "./scenes/FruitShootMain";
It's important that the part in quotes refers to the place where the scene's ts file lives.
Then we can scroll down until we find the configuration.
Here we want to change the value of the backgroundColor to a shade of blue, I chose #0099db. And where it says [Boot, Preload, Level], we want to add our scene there as well, making it look like [Boot, Preload, Level, FruitShootMain]
Make sure to save (Ctrl + S on Windows or Cmd + S on a Mac).
To see our scene in action, we need to change one more thing. Let's find the Preload.ts file and open it in the code editor.
Scroll down to where it says this.scene.start('Level'). Instead of Level, we want to start our scene, so let's change this to this.scene.start('FruitShootMain'). The quotes are important!
Save it again and play the scene (that's the button in the top left). We should now see our ground, our clouds, and our blue sky.
Progress!
Now let's do something really clever. Let's go back to the editor and make another copy of our blob. In the Inspector, let's change its name to ground_blob. Then, let's position it such that it touches our ground shape.
Now in the inspector, let's find the Tint tab, and change all the four boxes to a lighter shade of green, like #63c74d. We now have a bush! Copy and paste this GameObject until you have a few of them and position them across the scene.
Now let's make another copy, call it dark_ground_blob, and give it a dark shade of green, something like #265c42. Feel free to adjust the Scale as well to add variety.
We should now think about the order in which our images are drawn. My vision was to make the darker bushes appear behind the lighter bushes. As you can see in the screenshot, it's currently the opposite. That's because, in the Outline section, whatever comes first in the list, is drawn last, meaning in front of everything else. To draw the darker bush first, let's move it down the list by selecting it and pressing PageDown. Let's move it all the way to the bottom.
Add another darker bush by copy-pasting it and you should end up with something like this:
This is looking like a nice scene already. Before we sign off, let's add at least a bit of interactivity as well.
Let's select all the blobs that we use for clouds. To keep multiple GameObjects selected, hold Ctrl while clicking on them.
Once selected, on the right in the Inspector, change the Scope to CLASS. This will make these GameObjects instance variables of the scene they appear in. If this sounds like I just made up some technobabble, don't worry! You'll pick this up over time.
Now lets find FruitShootMain.ts and open it.
Scroll down and you should see some variables (again, a programming term), like const blob = this.add.image(208, 280, "blob");. The numbers may be different, they reflect the position of the GameObject in the scene and it's unlikely that they would line up with mine exactly.
This is the code representation of the clouds that we have in our scenes.
Scroll down until you find something like create() {. This is the create function. This is called (i.e, executed, run) when the scene is created (who would've thought!). A function, in programming, is just a collection of lines of code. When the function is called, the lines are executed from top to bottom, one after the other.
Let's add something to the create function. Feel free to copy and paste this snippet and add it:
const clouds = [this.blob, this.blob_1, this.blob_2]
clouds.forEach(cloud => {
cloud.setInteractive()
cloud.on('pointerdown', () => {
const t = this.tweens.add({
targets: [cloud],
x: {from: cloud.x, to:cloud.x + 2000},
duration: 200,
easing: 'bounce',
yoyo: false,
paused: true
})
t.play()
})
})The end product should look like this:
If you are new to programming, this is a big jump in difficulty, but if everything worked out and you hit Play on the scene, you can now click on the clouds to make them shoot off screen!
Note that in the part where we say const clouds = [this.blob, this.blob_1, this.blob_2], the names (like this.blob) matter. You can check your code for the names that you have to use. They will be the same as whatever the GameObject is called in the Outline section in the scene.
And there you have it!
We covered:
- Basic tasks like creating scenes and uploading files in the Phaser Editor
- Creating and modifying GameObjects
- Adding code to add interactivity
If you have any trouble, feel free to leave a comment or post on the Discord! I'll leave it as an exercise for the reader to play around with the code that we added and see what changes. Try and see if you can figure out what each thing does!
I hope you found this useful, join me next time for more Phaser Editor tutorials!