Create an HTML5 game like Timberman in a matter of minutes with MightyEditor

This tutorial, courtesy of MightyFingers will give you an example on how to use MightyEditor – an online level editor based on popular game framework Phaser. The article will take about an hour and only ~140 lines of actual code. Following game development aspects will be introduced: sprites, sprite animations, game states, tween animations, user input, game loop, user interface.

Benefits of using MightyEditor are very fast prototyping of games, no need to install and configure software, ease of collaboration with team and open source. Also check out also features and tutorials of editor.

Game idea

The idea is based on Timberman mobile game. You have to chop never ending tree and avoid its branches by tapping left and right side of screen. Sounds very simple but actually it is quite addictive.

Rocky Smasher game created by MightyEditor

This time we are going to smash rocks instead of chopping tree and let’s call the game “Rocky Smasher”.

Requirements

A browser! And that’s all. Try the newest version of Google Chrome. Other browsers should work, but are not tested that well.

Starting a project

Open MightyEditor and click “Create New Project” button. New game popup will be shown where you can type project name. Enter it and press “Create”.

Create project with MightyEditor

Empty game project will be created. Go to bottom right Settings panel to change following parameters like it is shown in picture below.

Change game settings in level editor

Note that we have set up world and viewport sizes exact 480x720px thus we see everything on the screen. There is a camera concept in a lot of games when you see only small fraction from game world. But this is not the case, we don’t need it for Rocky Smasher. A grid concept helps to snap graphics to certain tile so we have set grid size to 160x120px.

Uploading game assets

Download game assets. Find Asset panel on top right side. You can upload assets by “Upload File” or “Upload Folder” icons or just drag and drop them from your file system.

Upload assets

Creating a map

Drag and drop “bg.png” and “stump.png” on to map. By holding Ctrl images will snap to grid. An alternative way is to do it with Stamp and Brush tools on left tool panel.

Navigate to Objects panel right below Assets panel on right side. Select both newly created objects and click group them by clicking highlighted icon in image. Rename this group to “bg”. The result should be following:

Map creation in game editor

Sprite frames

Add a new group called “trunk” to Objects panel and then select “trunk.png” image in asset panel. You will notice that trunk does consist of 5 frames. We need to separate them in editor. For doing this keep selected image and locate Settings panel on bottom right. Change FrameWidth to 480 and FrameHeight to 120 pixels. You will see separated frames in “assetPreview” panel in the bottom.

Divide sprite into frames

After that select Brush tool from right panel and add 5 different pieces of trunk starting from bottom to top. It is very important to follow given order. If it is not correct then you have to changing it in Objects panel by rearranging “trunk” group elements.

After trunk you need to add character. We don’t need a group for only one element so we can create a simple sprite object. But before that FrameWidth and FrameHeight needs to be defined similar to trunk sprite. This time we set following dimensions 285x215px. Note that in the game character needs to change sides of tree. That is why we will flip image and very important aspect of flipping is anchor point. By default it is allways at 0, 0 (top left) point of image. For this case we will manually drag it to be in the center and to be even more precise you can define that this point x is 240px in Settings tab. Check out a screenshot of how it should look like.

Setting sprite anchor

Game Over popup

When finishing game we need to show game over popup. Let’s create a group in Objects panel called “popup”. By default group coordinates are x:0, y:0, but in this case it would be easier if we set them in game world center. Select group and navigate to Settings tab. Change coordinates x: 240, y: 360.

When the group is created then add in it “popup.png” and “restartButton.png”. At last add 4 text objects with help of text tool on left panel. In short “score” will represent points in current game and “best” the highest result you have got. Note that you need to set anchor point x: 0.5, y: 0.5 and coordinate x: 0. So all objects are aligned to group center and the group is aligned in the middle of game world. Check out screenshot with popup object parameters.

Game Over popup

Minimal user interface

The last graphical thing we need to do is a minimal user interface which we will show on to right corner of the game. For this create a group “ui” and put there 3 objects: a time bar, score text and score value text.

Minimal user interface

Source editor

From now on we will dig in to the JavaScript code. On the top left corner locate Source editor tab. Opening it you will see file tree on the left side and code on the right.

Source editor

To define game logic Phaser has game state concept. We will focus on play state. But before we need to switch on this state from load state. Select js -> state -> load.js and change create method the following way so it loads play state:

There is a certain structure how you organize state classes. In short you need that there are couple reserved method names. You need to know at this moment that in preload method assets are loaded, create method is called right after preload and update method is a game loop called 60 times per second. For more check out Phaser documentation.

Display objects

Go to play state js -> state -> play.js and write code to display objects from Objects panel. To do so we will use mt.create() helper.

Note that ‘bg’, ‘trunk’, ‘character’ and ‘ui’ names are the same you can find in Object panel.

Now click “Open Game” button in top menu and you should see displayed objects in a game.

Animate character

We need to add animations for character. This can be done in animations property with add and play functions. There will be idle animation with 6 frames defined in array and chop animation consisting of only one frame. Add these 3 lines to create method.

Handle inputs

Game needs to be controlled arrow keys on desktop and tapping on mobile. That is why we implement both options in create method. At first arrow cursors is defined with this.game.input.keyboard.createCursorKeys() and the check if right or left arrow is pressed with onDown parameter and if event triggers we send a direction -1 or 1 (left or right) to chop method. For clicking or tapping we use this.game.input and check same onDown. The only difference is that we calculate on which side of game screen is clicked by checking this.game.input.activePointer.x

As for chop method, we create it under play state and inside it flip character sprite depending on user input.

Open game and character should move left/right depending on arrow keys or mouse click.

Chop tree

Lets add chop animation for character and method for removing trunk at bottom and adding trunk at the top of tree.

Adding trunk happens with this.trunk.create() method. We need to check if trunk at the very top has branch. If it has then next trunk will be without branches. If the top trunk doesn’t have branch then we will give 75% chance that next trunk will have. The branch itself is a frame in spritesheet. “trunk.png” asset has 5 frames where frame nr. 0 has branch to left, 1st frame has branch to right and rest 3 frames have no branches at all.

We get the bottom trunk from group with following method this.trunk.getBottom() and destroy it. After that iterate through group and add each object a tween to move it down.

Check collisions

Add collision checks in chop method.

We are checking collision with comparing character direction (-1, 1) and sprite frames (0, 1, 2, 3, 4). Before that temporary variable is created where 0 value is changed to -1 (left branch).

Timer and scoring

We need to set up some kind of limit for gameplay. It will be 10 seconds and in addition 200ms for each chop. Moreover getting more points addition time limit will be decreased. Lets add timeStarted and gameOver parameters in create method. timeBar and score are children of ui. Check out correct position in the ui group in Objects panel. For this case they will be child nr 0 and child nr 2.

Time is started only after first chop and timeBar is cropped depending from time left in the game. Remember that update method is called automatically 60 frames per second and it is the best place to add all time related events. Check also chop method where we have added time check and score count.

Game Over

As the last bit of coding there needs to be game over popup shown when character dies and option to restart game for user. Similar to create method we use the same mt.create() method to show popup and access it’s children elements to show current and best scores. High score is stored in localStorage. And the game can be restarted by simply calling play state this.game.state.start("play").

Full code and demo

You can find project here.
Play the game here.
Iframe:

Full code:

What are you waiting for? Go get MightyEditor!

  • Thanks! Easy to follow tutorial.

  • My main beef with html5 game editors so far is that you always get too much lag when running on mobile. Hand coded phaser games work well on mobile, I will try this and hope it runs just as smooth :)

  • JethCrew

    Could you post a tutorial to make this game only with phaser without the need to use the mightyfingers editor? Greetings, I would appreciate it, you would help me