Phaser 3 Tutorial + Template
Phaser3 Game Tutorial + Template!
I hope it helps you!
Step by step
The first thing is to have our html project empty, we will have the following hierarchy of folders and files
(you can use any file hierarchy you want, like with a src folder, or others, but this is the one we'll use in the template!)
Now, in our html, we will write a basic html structure, with head and body, and we will call the library and our initial script.
Ready, we have already called our library and our main script, now let's start configuring the first steps of our game.
We will go to our main script and create a constant with the game configuration.
The type of our game will be the way it will be rendered, it can be with Canvas, Headless or Webgl, but we can put auto so that Phaser decides which is the best for us.
height will be the size of the game screen (in pixels).
scene we will leave an empty array for now, while we create our first scene.
Time to create a new scene, we create in the scenes folder a file called
game.js and extend the Phaser scene class.
Our first action will be, in the constructor, to put a super which assigns the key with which Phaser will recognize this scene.
Once we assign the key of the scene, it is time to start building the things that will make up our scene, the preload, the create and the update
preload()- we will load the assets before we can use them.
create()- it is executed when the scene is created, here we will start some variables and objects, like our player.
update()- this function is executed every frame that passes in the game
We will create these 3 empty functions, and we will start loading them little by little, starting with the preload, where we will load our sprite for the player
To load our sprite in the scene, we use the method of our scene,
load.image, note that this will not put the image in the scene, it will only load it!
load.image receives two parameters, the name with which phaser will identify this image, and the path of the image file, I will use the following image, and put it in
/assets/ with the name
Ready, we can use our Mark! you want to see? we use the method of the scene
add.image receives three parameters, the position in x, the position in y, and the name of the image that we have assigned, we will use the function in the
create method so that it is only executed when the scene is created
Well, it looks great! But it doesn't do anything, so let's delete that line and create a new object in
/objects/, in my case, I'll call it
mark.js, you can call it whatever you want , obviously always with the
We will extend the class of
Phaser.GameObjects.Sprite and we will add to the constructor 4 parameters, the scene where the object will be instantiated, the initial x and y position and the name of the image that will be used as a sprite.
Now, we will create a new method to move, with 4 parameters for each movement key, what the method will do is to add the position of our character if one of the keys is being pressed or not, then we will see with defining the keys, but I need you to know that the
isDown property of a key is
true when it is pressed, so we will be verifying if that key is pressed, and if it does, we will gradually change the position of our character.
Ready, now that we have created our class and our method, we will add something else in the constructor, the function of the scene parameter
add.existing, which in turn receives our player class as a parameter, so we place it.
We will have ready, our Mark class, we would only have to export!
Now, we go back to our scene file
game.js, and import our Mark class.
Now we must create the keys, we use the method of our scene
input.keyboard.addKeys, which will receive as a parameter an object with the codes of the keys that we want to map
We already have our keys, now we can instantiate our Mark and see how it appears in the scene, we will pass t as a parameter of the instance, the corresponding keys (To see the other keycodes, click here)
Nothing happens, of course, we have to export the scene and put it in our configuration, of our main script
Now our character moves, great !, but we have 2 problems, the first is that, at least, I would like Mark to be in the center, and also, to be faster, we will see how to solve the first problem
We create a variable and put the following value to it, it will receive the dimensions that we have chosen in the game configuration, at the beginning of the guide
height properties will give us the size of the game, so we will divide them and put it in the Mark instance
Done, our Mark is centered, now let's look at the speed issue, let's go back to our Mark's script and add a variable with reference to speed
Now we change the function to move, and instead of it being added by 1, we will make it add / subtract and assign with the velocity, using the
You can adjust the speed to your liking, now we can continue to the following, create texts!
We will go to the
create method of our project and use the function of our scene add.text, which will receive 3 parameters, x-axis, y-axis and a string with the text
Ready, we also place the function
setOrigin(0.5, 0.5), basically what it will do is position the x and y axis in the middle of the text, so that it is centered, and
setColor(), which receives a color as a parameter, and it will come us jewel for that the color is white, since by defense, it comes black
Also add the space key to my
keys variable and create the next function:
Basically what it does is add an image of Mark when the space key is pressed, we do not use anything not seen before.
Another problem that arises is the issue of the z axis, and the positioning of the objects, when the Marks are created, our Mark stays down, but we can use the
setDepth () function and set the parameter "z axis"
Ready, you would have your first project in Phaser ready, I hope it has served you!