First Game with Phaser 3 and Tiled

A quick guide to setting the basic physics of a web game.

Phaser 3 and Tiled maps

When we learn a programming language we almost always close our vision to what it can serve and we pigeonhole it into what we were taught, forgetting that the world of programming is a world of infinite possibilities.

This is the case with JavaScript that allows us to create greater games for the web and mobile. With this article, I intend to help you set the foundations so that you can start building your own games.

Prerequisites

• Node JS, you can download it from https://nodejs.org/es/download/
• Tiled maps, you can download from https://www.mapeditor.org/
• The code editor, in this case, I’m using Visual Studio code, you can download it from https://code.visualstudio.com/download
• Images for our map from https://kenney.nl/assets/platformer-art-winter
• Images for our character from https://www.gameartguppy.com/shop/penguin/
• The program for character’s movement, it’s called TexturePacker https://www.codeandweb.com/texturepacker

First step: Making all the Settings

Open a new folder with your Code editor:

Open a new terminal and run the command

That command will gonna create the file named packacge.json with that file We will be working on development, first of all, We will install Webpack to do that go to the documentation page for webpack https://webpack.js.org/guides/getting-started/ and follow the steps to set it.

Create a new folder called “src” and one file “index.html” when you run the command from npm

“npm install webpack webpack-cli webpack-dev-server --save-dev”

your folder should look like this:

Now We gonna add Phaser 3 with npm, with the command:

npm install phaser

The next thing to do is create a file “index.js” inside of our folder SRC connected with our file “index.html”

Now create a new folder inside of SRC named “config” and inside of that folder create a file named “Config.js” with the next lines of code this is the basic config for phaser:

Before continuing with phaser We have to set our webpack config and to do that We need some more dependencies to run the next commands:

npm install @babel/core @babel/preset-env --save-dev

npm install copy-webpack-plugin --save-dev

npm install clean-webpack-plugin html-webpack-plugin raw-loader --save-dev

npm install resolve-url-loader terser-webpack-plugin --save-dev

npm install babel-loader css-loader sass-loader styles-loader postcss-loader file-loader

After running these commands, in your file package.json create the next scripts and the file should look like this at the end:

Create some new files: “.babelrc”, “babel.config.js”, “webpack.config.js” with the next code:

Babel first file

Babel Config file

Webpack Config file 1

Webpack Config file 2

Webpack Config file 3

For all the code inside the “webpack.config.js” just copy, for now, this is not an article dedicated to webpack.

If you set everything well, you gonna have this when you run the command npm run start

Browser view

Second Step: Creating Scenes and Adding Your Character

For this step, you should have downloaded the images of the characters and maps pages from the links provided at the beginning.

PD: All images are free, for the penguin just add to the card and continue the instructions and choose only images you don’t need vectors this time.

These are all the images together

• Open the program TexturePacker that you downloaded before, and add new images

• Add all the images for penguin, and choose framework “Phaser (JSONArray)”, and the folder where you are working, in this case, create a new folder inside of SRC called “assets”, finally click on “publish sprite sheet”

Your project has to look like this right now:

Now you have two png files and one JSON file for the penguin, this JSON file will be useful when you want to create animations.

• Create a new scene, go to SRC create a new folder named “scenes” and inside of this create a scene named “Game.js”

Game scene

• Add the next code to the “index.js”

Code in index.js

• This is the result:

Browser Result

Now open the Tiled maps program and click on the new map button and you can personalize the size for this example I choose 70px by 70px cause the images are of this size but you can edit as you want, these are my settings:

Tiled initial settings

Tiled first screen

• First, add a new tileset, clicking on the button on the right and choosing the image that you download for the map the IceWorld from here https://kenney.nl/assets/platformer-art-winter, them give it a name and press OK.

• Pick one of the images and put it on the grid, also change the name of the layer:

Ground

• Now go to “file” them to “export” choose the folder “your_project/src/assets”

Ok, now We have all that we need.

Third step: Connecting character and map with physics from MatterJS

• First, we gonna add our map to the scene.

Adding a map to the scene

• For now, we remove our code for the penguin and add new code to set the map, and also to see the improvement you can add some blocks to the top of the map to see it cause right now looks like it’s empty but it isn’t:

New code in Create function

Changes in tilemap

Browser view

• Now we will add the physics with Matter, to do that go to the folder config and open the file “Config.js” and change the default ‘arcade’ value for ‘matter’ as the image:

Change physics

• Go to tiled and change the attributes of the layer, clicking the button below our layer:

Settings of the layer

• Select all the picks inside:

Images picked

• Add new property “collides” with the value of bool that means that will be a boolean. Make sure that the new property it’s checked.

Add new property

Make sure that it’s checked

• Add the property of collides to our code through Matters, with this all our ground now are physicals bodies.

Adding Matters to our code

• Add the character again and create animations for idle and walk with a new function called createPenguinAnimations that get the frames from our file penguin.json in the assets folder:

Add animations

• Well done, it’s time to add the cursors with some methods from the phaser, adding init function to our scene, and passing the next code:

Adding cursors

• Add references to our character, with Phaser.Physics.Matter.Sprite :

• Now we have to create a function to move our character and that will be done with the update function which controls the movement in the X-axis, and to fix the rotation adds some setFixedRotation() to our penguin also to follow our character we gonna set code for the cameras with “this.cameras.main.starFollow(this.penguin, true)”:

Adding movement

• And now just is left the code for jumping, well to do that we gonna add a variable to our constructor “this.isTouchingGround = false”, after that we gonna add the next code to our functionality:

Add a new variable to the constructor

Add functionality for jump

With this last part, our character can jump just one time so that is the rule for this example, and with this, we finish the settings.

Conclusions:

We make the basic configurations to work with Phaser 3, Tiled map, and Webpack and add some awesome functionality for our project, I really hope that this short article helps you with your projects. Also if you want more about this project you can search it on this youtube channel Ourcade (https://www.youtube.com/c/Ourcadehq/videos). I studied it from here and just add the webpack part.