HTML5 Phaser Tutorial – Top-Down Games with Tiled

I’m a huge fan of top-down 2D games, mainly RPG’s, adventure games and dungeon crawlers.

In this tutorial we’ll create a basic template you can use to make your own top-down games using Phaser, an awesome HTML5 game framework.

This template will be expanded in further tutorials to add the ability to move between levels, work on mobile and more cool stuff. If there are aspects you’d like me to cover in future tutorials feel free to post that on the comments!

We’ll be using a free map editor called Tiled to create our level. One nice thing about Phaser is that you can easily load map files exported from Tiled (JSON format).

This tutorial builds on top of the concepts covered in our previous Phaser tutorial, so if you are not familiar with States, preloading assets and rendering sprites you might want to check that tut first.

Source code files

You can grab them from here. If you want us to notify you when we release new tutorials on Phaser or HTML5 game development don’t forget to click “subscribe to our list” when downloading the files (if you choose not to you won’t hear from us!).

You can also play the game on your browser here.

Tutorial goals

1-Learn to create levels for your game using Tiled and load them using Phaser.

2-Learn how to create a basic top-down game starter.

Concepts covered

-Setting the game size in pixels
-Tiled basic usage
-Tile layers and object layers
-Tilemaps
-Creating sprites from object layers
-Moving a character in a top-down level

Dive deeper into Phaser

At Zenva Academy we have a comprehensive Phaser video course which focuses on mobile support. In the course, you’ll learn how to create a Jetpack Joyride-style infinite runner game by the hand of game developer and Phaser contributor Codevinsky.

HTML5 Game Development with Phaser

Tutorial requirements

-This tutorial builds on the concepts covered in our previous Phaser tutorial HTML5 Phaser Tutorial – SpaceHipster, a Space Exploration Game, so it assumes you know how to setup a game, work with States, preload game assets and create sprites.

-Basic to intermediate knowledge of JavaScript. If you need a refreshment feel free to check our JavaScript beginners video course at Zenva Academy.

-A code editor or IDE. My personal preference at the moment is Sublime Text.

-Get Tiled, an Open Source and free level editor.

-Grab Phaser from it’s Github repo. You can either clone the repo or download the ZIP file.

-You need to run the code and Phaser examples using a web server. Some popular options are Apache (WAMP if in Windows, MAMP if in Mac). Some lightweight alternatives are Mongoose web server and Python’s HTTP server. Take a look at this guide for more details.

-Download the full tutorial source code and game assets here. If you want us to let you know when we release new tutorials on Phaser or HTML5 game development don’t forget to subscribe to our list!

-Have the documentation and the examples page at hand. Also don’t forget that you can always find answers by looking at the source code of Phaser itself!

Get Tiled-Face

Tiled is a really awesome level editor created by Thorbjørn Lindeijer which allows you to visually create tile-based levels for your games. The main file format these levels use is TMX. In order to use these levels in Phaser we need to export them as JSON.

When I talk about “tiles” and “tiled-based games” what I mean are games where the levels are composed of individual small blocks or pieces. Check out the Wikipedia definition if you are not 100% familiar with this concept.

To create a new map in Tiled go to File -> New:

tiled tutorial create new map

On width and height specify the number of tiles your level will have on each dimension. Tile size refers to the size of the individual tiles. Make sure Orientation is set to “Orthogonal” and Layer format to “CSV”.

The next step is to create the Layers. A level will have different layers that sit on top of each other. The naming of the layers is important here as we need to refer to that in the code later on.

There are two types of layers:

-Tile layer: layer made of tiles/blocks.
-Objects layer: layer where you create vector objects that can contain metadata.

You can create layers using the “+” button under layers, to rename them just click on the name of the newly created layers. The order matters, you can rearrange them using the arrows.

tiled create layers

In our example we’ll have two tile layers: one for the background called backgroundLayer (doesn’t collide with the player) and one for the blocking elements called blockedLayer (walls, trees, etc). We’ll also have one objects layer (objectsLayer) that will represent game elements, in this case the player starting location in the level, the collectables/items, a door (which we’ll extend in a future tutorial). In this layer you’d want to add enemies and more stuff. This is all just a suggestion and how I normally do it, it is by no means a convention or a rule of the framework.

Loading the tileset

A tileset is a set of individual tiles, which come in an image. You can have many tilesets on your tilemaps. We’ll use just one: assets/images/tiles.png.

To load a tileset: Map -> New Tileset

tiled add tileset

The nice retro tileset we’ll use is from Open Game Art and it’s a public domain image (CC0), so you can use it for both non-commercial and commercial projects.

The tiles are 16×16 and there is no separation between them or margin. The “name” in the text field, keep that name in your head as we need to refere to it when joining the tileset with the map in Phaser.

Create the level

You can now create your level. Now it’s really up to you. What I did was fill the backgroundLayer with a black tile (using the bucket tool), then changed to the blockedTile and painted some walls and trees:

tiled simple level

The object layer

We’ll add 3 different types of objects or game elements: items that will be collected by the player, the player starting position, and a door that will take you to a new level (to be implemented in a follow-up tutorial).

These objects will be represented by sprites from the tileset, but that is just for OUR simplicity. Phaser will show the sprite you tell it to when creating a Sprite object.

To insert new objects: select the objectsLayer layer, click on the Insert Tile button (the one that shows a picture of the sunset) then click on the tile you want to show, then click on the location of the object within the map.

tiled create object

We’ll add some blue and green teacups, a door and a “player”:

tiled map level

Adding properties to the objects

How is Phaser going to know what these elements represent and what sprite should be used to display them? Lets add that as object properties.

Click on the “Select object” button from the menu, then double click on any object and you’ll see a dialog where you can enter properties.

Enter a property called “type” with value “item” to the tea cups (this is not the “type” select dropdown!, this is within the Properties area), “playerStart” for the player location and “door” to the door.

For the blue cups enter a property “sprite” with value “bluecup”, “greencup” for the green cup, “browndoor” to the door. None to the player start as it won’t represent a sprite, but a location for us to use. These values are the sprite keys we’ll implement in Phaser for the corresponding image assets (peak at /assets/images).

**You can also just create one of each element, then select the element with the right click and click “duplicate”, this will allow you to quickly replicate an object and then drag it to it’s final position.

We won’t implement the door behavior in this tutorial, but enter these properties so you can guess where I’m going with this:

door properties

Before we move any further, I’d like to make it clear that this will work with the game template we are building in this tutorial, it is not a default Phaser functionality. Phaser only provides the ability to create several sprites from objects using the same sprite key. Take a look at the Tilemap documentation to learn what Phaser provides in this aspect.

Once you are doing export the level as a JSON file. File -> Export As -> Json Files, save into /assets/tilemaps.

Hola Mundo Phaser

I’ll go through this section without stepping into much details as these concepts were covered in the previous Phaser tutorial.

In this game we’ll have three states: Boot, Preload and Game. You can always add a main menu screen as we did in the previous tutorial.

Let’s start by creating index.html, where we’ll include the game files:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Learn Game Development at ZENVA.com</title>

		<script type="text/javascript" src="js/phaser.js"></script>
		<script type="text/javascript" src="js/Boot.js"></script>
		<script type="text/javascript" src="js/Preload.js"></script>
		<script type="text/javascript" src="js/Game.js"></script>

		<style>
		  body {
		    padding: 0px;
		    margin: 0px;
		  }
		  </style>
	</head>

	<body>  
		<!-- include the main game file -->
		<script src="js/main.js"></script>
	</body>
</html>

I prefer using the non-minified version of Phaser when doing development (phaser.js) as it makes it easier to debug errors. When working with HTML5 game development libraries it’s good practice to constantly refer to the source code itself to find answers. Not everything can be found on StackOverflow and getting familiar with the framework’s code itself can save you hours.

main.js creates the game itself and defines the game size in pixels, which I’ve set to a very small size for this example. The reason being, the tileset I’ll be using is also small and I wanted to have the game not showing the entire level (which is not that big) in the browser space.

By creating all the game objects inside a parent object called TopDownGame (this is what’s called the namespace pattern) we don’t pollute the global scope with our game elements. This is good practice as it could happen that you are including some other libraries in your project and their names match those of the objects you are creating so then you have a conflict!. Whereas if you put everything inside TopDownGame there won’t be any conflicts, unless another library created an object called TopDownGame in the global scope which is unlikely.

(Btw this:

var TopDownGame = TopDownGame || {};

basically means that if TopDownGame exists, then use it, if it doesn’t exist then initiate it as an empty object)

var TopDownGame = TopDownGame || {};

TopDownGame.game = new Phaser.Game(160, 160, Phaser.AUTO, '');

TopDownGame.game.state.add('Boot', TopDownGame.Boot);
TopDownGame.game.state.add('Preload', TopDownGame.Preload);
TopDownGame.game.state.add('Game', TopDownGame.Game);

TopDownGame.game.state.start('Boot');

Boot.js

In Boot.js we’ll create the Boot state, where we load the images for the loading screen (just a loading bar in this example) and define other game-level configurations.

Since we are using Phaser.ScaleManager.SHOW_ALL the game will show as large as it can to fit the browser space, but it wont’ show more than 160×160 pixels of the game world, as that’s the limit we defined in main.js.

var TopDownGame = TopDownGame || {};

TopDownGame.Boot = function(){};

//setting game configuration and loading the assets for the loading screen
TopDownGame.Boot.prototype = {
  preload: function() {
    //assets we'll use in the loading screen
    this.load.image('preloadbar', 'assets/images/preloader-bar.png');
  },
  create: function() {
    //loading screen will have a white background
    this.game.stage.backgroundColor = '#fff';

    //scaling options
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    
    //have the game centered horizontally
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;

    //screen size will be set automatically
    this.scale.setScreenSize(true);

    //physics system
    this.game.physics.startSystem(Phaser.Physics.ARCADE);
    
    this.state.start('Preload');
  }
};

Preload.js

Preload.js will contain the loading of the assets, including the loading of the tilemap. See how the tileset iteself is simply loaded as another sprite. It will be later on when we relate the tilemap level with the tileset:

var TopDownGame = TopDownGame || {};

//loading the game assets
TopDownGame.Preload = function(){};

TopDownGame.Preload.prototype = {
  preload: function() {
    //show loading screen
    this.preloadBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY + 128, 'preloadbar');
    this.preloadBar.anchor.setTo(0.5);

    this.load.setPreloadSprite(this.preloadBar);

    //load game assets
    this.load.tilemap('level1', 'assets/tilemaps/level1.json', null, Phaser.Tilemap.TILED_JSON);
    this.load.image('gameTiles', 'assets/images/tiles.png');
    this.load.image('greencup', 'assets/images/greencup.png');
    this.load.image('bluecup', 'assets/images/bluecup.png');
    this.load.image('player', 'assets/images/player.png');
    this.load.image('browndoor', 'assets/images/browndoor.png');
    
  },
  create: function() {
    this.state.start('Game');
  }
};

Game.js

The following code in the create() method will show the map (without the objects) on your browser:

var TopDownGame = TopDownGame || {};

//title screen
TopDownGame.Game = function(){};

TopDownGame.Game.prototype = {
  create: function() {
    this.map = this.game.add.tilemap('level1');

    //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset
    this.map.addTilesetImage('tiles', 'gameTiles');

    //create layer
    this.backgroundlayer = this.map.createLayer('backgroundLayer');
    this.blockedLayer = this.map.createLayer('blockedLayer');

    //collision on blockedLayer
    this.map.setCollisionBetween(1, 100000, true, 'blockedLayer');

    //resizes the game world to match the layer dimensions
    this.backgroundlayer.resizeWorld();
  }
}

The first thing we did was create a Tilemap object from the loaded JSON file. What’s a map without the images? we need to add the tileset image to this map, which we do with this.map.addTilesetImage('tiles', 'gameTiles');, where “tiles” is the name we gave the tileset in Tiled, and “gameTiles” is the image key as defined in Preload.js (I made those two different in purpose to make it more clear what they are referring to).

Then we load the layers, and make the blockedLayer “collision enabled”. The number between 1 and 2000 is an index range for the tiles for which we want to enable collision (in this case such a big number should include them all which is what I intended). In order to obtain this number open level1.json and in “layers” – “data” of the two layers find the largest number you can find, in this case 1896 so I put 2000 just to be sure I didn’t miss a slightly larger number. So in theory, you could just use one single layer, and define certain tiles as collision-enabled by specifying their index range.

WARNING: A previous version of this tutorial said put 100000 instead of 2000. The problem with putting unnecessary large numbers is that you are running more loops affecting the performance of your game

I find it easier to work with one layer for the background and one for the collision elements as I don’t want to count tiles one by one, that is just my preference here.

Lastly, we make the world the same size as the map.

Finding objects by type

Remember that “type” properties we gave to the objects in the level? Well I’d like to be able to find the objects of a certain type, so we’ll build a utility method in Game.js for that.

Tilemap objects have a “objects” property which is an array with the objects of each layer (you could have many object layers!). We’ll use this method to find the objects that have the property “type” of the value we want. I recommend you take a look at the file /src/Tilemap.js from the downloaded Phaser library and to the Tilemap documentation. You can also just use this method but it’s always better to understand where it came from.

  //find objects in a Tiled layer that containt a property called "type" equal to a certain value
  findObjectsByType: function(type, map, layer) {
    var result = new Array();
    map.objects[layer].forEach(function(element){
      if(element.properties.type === type) {
        //Phaser uses top left, Tiled bottom left so we have to adjust the y position
        //also keep in mind that the cup images are a bit smaller than the tile which is 16x16
        //so they might not be placed in the exact pixel position as in Tiled
        element.y -= map.tileHeight;
        result.push(element);
      }      
    });
    return result;
  },

When calling this method, it will give us an array of objects as they are represented in the assets/tilemaps/level1.json file.

Create sprites from Tiled objects

We are able to find tiled objects by type, and now we’d like to create sprites for them. This method in Game.js will help us out. This will become more clear over the next section where we create the tea cups.

//create a sprite from an object
  createFromTiledObject: function(element, group) {
    var sprite = group.create(element.x, element.y, element.properties.sprite);

      //copy all properties to the sprite
      Object.keys(element.properties).forEach(function(key){
        sprite[key] = element.properties[key];
      });
  },

We are copying all the properties you might have entered in Tiled. For example for the door we entered a bunch of properties. Well, this will all be copied to the sprite. Even if you entered sprite properties such as “alpha” (for transparency), this will be moved along to the sprite you are creating here.

** We are not using Tilemap.createFromObjects here because I wanted to be able to specify the type and the sprite inside of Tiled. If createFromObjects is what you need for your game I recommend you use that!

I love tea

Let’s create the tea cups! they’ll be rendered after this:

var TopDownGame = TopDownGame || {};

//title screen
TopDownGame.Game = function(){};

TopDownGame.Game.prototype = {
  create: function() {
    this.map = this.game.add.tilemap('level1');

    //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset
    this.map.addTilesetImage('tiles', 'gameTiles');

    //create layer
    this.backgroundlayer = this.map.createLayer('backgroundLayer');
    this.blockedLayer = this.map.createLayer('blockedLayer');

    //collision on blockedLayer
    this.map.setCollisionBetween(1, 100000, true, 'blockedLayer');

    //resizes the game world to match the layer dimensions
    this.backgroundlayer.resizeWorld();

    this.createItems();

  },
  createItems: function() {
    //create items
    this.items = this.game.add.group();
    this.items.enableBody = true;
    var item;    
    result = this.findObjectsByType('item', this.map, 'objectsLayer');
    result.forEach(function(element){
      this.createFromTiledObject(element, this.items);
    }, this);
  },
  //find objects in a Tiled layer that containt a property called "type" equal to a certain value
  findObjectsByType: function(type, map, layer) {
    var result = new Array();
    map.objects[layer].forEach(function(element){
      if(element.properties.type === type) {
        //Phaser uses top left, Tiled bottom left so we have to adjust
        //also keep in mind that the cup images are a bit smaller than the tile which is 16x16
        //so they might not be placed in the exact position as in Tiled
        element.y -= map.tileHeight;
        result.push(element);
      }      
    });
    return result;
  },
  //create a sprite from an object
  createFromTiledObject: function(element, group) {
    var sprite = group.create(element.x, element.y, element.properties.sprite);

      //copy all properties to the sprite
      Object.keys(element.properties).forEach(function(key){
        sprite[key] = element.properties[key];
      });
  }
};

Doors

Adding the door will follow the same approach:

this.createItems();
this.createDoors();   

and:

createDoors: function() {
    //create doors
    this.doors = this.game.add.group();
    this.doors.enableBody = true;
    result = this.findObjectsByType('door', this.map, 'objectsLayer');

    result.forEach(function(element){
      this.createFromTiledObject(element, this.doors);
    }, this);
  },

But we can’t move around yet and find it.

The player

We are representing the player start position with an object of type “playerStart”. What we’ll do is find that object, then create the player sprite on that location and set the camera to focus on the player, and activate cursor keys to move the player with the arrows (to be implemented shortly):

 //create player
var result = this.findObjectsByType('playerStart', this.map, 'objectsLayer')

//we know there is just one result
this.player = this.game.add.sprite(result[0].x, result[0].y, 'player');
this.game.physics.arcade.enable(this.player);

//the camera will follow the player in the world
this.game.camera.follow(this.player);

//move player with cursor keys
this.cursors = this.game.input.keyboard.createCursorKeys();

Player movement

Listen to the cursor keys and adjust the player velocity accordingly. We’ll do this in the update() method:

update: function() {
    //player movement
    this.player.body.velocity.y = 0;
    this.player.body.velocity.x = 0;

    if(this.cursors.up.isDown) {
      this.player.body.velocity.y -= 50;
    }
    else if(this.cursors.down.isDown) {
      this.player.body.velocity.y += 50;
    }
    if(this.cursors.left.isDown) {
      this.player.body.velocity.x -= 50;
    }
    else if(this.cursors.right.isDown) {
      this.player.body.velocity.x += 50;
    }
  },

Now you can move your player around! but there is no collision yet.

Collision

Add the following to update(). This works in the same way as we covered in the previous tutorial, but see how you can also just put in a layer, as we are doing with this.blockedLayer:

//collision
this.game.physics.arcade.collide(this.player, this.blockedLayer);
this.game.physics.arcade.overlap(this.player, this.items, this.collect, null, this);
this.game.physics.arcade.overlap(this.player, this.doors, this.enterDoor, null, this);

Implementing collect():

collect: function(player, collectable) {
    console.log('yummy!');

    //remove sprite
    collectable.destroy();
  },

And enterDoor(), which is something left for a follow-up tutorial:

enterDoor: function(player, door) {
    console.log('entering door that will take you to '+door.targetTilemap+' on x:'+door.targetX+' and y:'+door.targetY);
  },

And that’s it!

We can now create a level in Tiled, load it in Phaser and move around a character around with the cursor keys!

phaser tutorial top-down games with Tiled

Feel free to use this code for your own games, and it’s always nice if you link back to us :)

If you haven’t already, you can download this tutorial game files and assets here.

Where to go next?

You can check our online course HTML5 Mobile Game Development with Phaser for a comprehensive training on this awesome framework, created by professional game developer Codevinsky.

HTML5 Game Development with Phaser

These other courses on HTML5 game development and JavaScript that might be of your interest as well!

Also, feel free to share your thoughts in the comments and let us know what else you’d like us to write about!

About the author  ⁄ fariazz

Pablo is an entrepreneur and developer based in Chile. Founder of two tech startups that thrive on innovation: Zenva and Super Colegio, Pablo is always enthusiast about new technologies and creating solutions for an exponential world.

  • Greg Malone

    I appreciate the effort you’ve made here — a really important topic. Unfortunately, the tutorial falls apart at the “Adding properties to objects” section — you rushed it and it refers to views and features not evident in Tiled editor (perhaps the Mac version is different than the version you use?). So, frustrated, I’ll go learn Tiled directly from Tiled, and then come back to your tutorial to see if I can figure out what you meant. Perhaps you could clean it up a bit? Thanks again for the great effort.

    • http://zenva.com/ Pablo Farías

      Thanks for your feedback Greg! and sorry to hear that part made it fall apart. Which features/views in particular you couldn’t find on the Mac version? It’s my understanding that Tiled looks exactly the same in all platforms, but I might be wrong. If you find a good Tiled tutorial for Mac let me know and I’ll add a link for Mac users. Thanks!

      • Greg Malone

        As I looked at other tutorials that use Tiled, I found that different versions and on different platforms have slight differences in terminology, menus etc. perhaps it’s just the version of Tiled. Not a big deal, just have to adapt. I figured it out. And completed your tutorial. Despite my confusion in that one section – in which the difficulty was probably due to my own issues, I fully enjoyed and learned from the entire tutorial. Very well done! I especially appreciate the clarity and organization you’ve used. Thanks again.

        Hey, any chance you’ll do a Part 2 of this tutorial? It really begs for it. In fact maybe you should write a book. But do part 2 first. :-)

        • http://zenva.com/ Pablo Farías

          Thankyou Greg! very glad to hear you enjoyed it :)

      • Greg Malone

        Pablo, a question, if you have a moment. Can you advise on how to setup the basic infrastructure of a multi-level game, building on what you’ve started here? You reach the door, and then….

        I presume you’d swap out the tilemap and reinitialize the objects for the new level. But I’m wondering if there’s a slick method that fits your scheme that I might miss if I brute force it my own still-learning way.

        Thanks.

        • http://zenva.com/ Pablo Farías

          Hi Greg,

          Once you reach the other door then you could re-launch the Game State but with another level as a parameter. Wait parameters in States? we are not doing that on this tutorial I know, but we it in the SpaceHipster tutorial. So basically the level data that you would load, instead of being hard-coded like in this tutorial, it would come from a parameter passed to the Game State initiation. In the SpaceHipster tutorial we do it with the high score. Instead it could be a level key, or the actual level data. I was thinking of making a follow up tutorial covering this but won’t have the time for a while. Hope this helps!

  • yassine

    Good tutorial , work fine with phaser !

    just a question about this line:
    //collision on blockedLayer
    this.map.setCollisionBetween(1, 100000, true, ‘blockedLayer’);

    why using 100000 ?, in the json file “level1.json” the max value for the blockedLayer is 1896 , we can do :

    this.map.setCollisionBetween(1, 1896, true, ‘blockedLayer’);

    doing 100000 , may this affect performance ( FPS) ?

    Thanks!

    • http://zenva.com/ Pablo Farías

      You are absolutely right! had a quick look at the code http://docs.phaser.io/Tilemap.js.html#sunlight-1-line-718 and having an unnecessary high value there will make the game do a lot more iterations and calculations, so yes use a lower number for sure. I’ll update the tutorial when I get the time. Thanks!!

  • John A Durston

    Hi,

    Thanks for posting these tutorials.

    I have one small problem with this one though – I downloaded the source and ran the game, but only the objects move with the camera, the collision layer image doesn’t move (its collision does however).

    I tried to edit the code but didn’t really get very far. Any ideas?

    • iownall555

      Hi there, the problem you are having is due to a tileset/webgl bug in version 2.1.3. It would seem the tileset doesn’t update after the first render due to a subtle change in Pixi. Try using an older version of Phaser or try using the 2.2 dev version (which fixes the issue) which you can get from here: https://github.com/photonstorm/phaser/tree/dev/build

    • P4nch0

      Hi,
      I had this problem too. Try to apply the phaser.js script. Download it from the other page and try to apply.

  • Greg Malone

    Coming back to this tutorial and having issues getting objects to show up in the map until I realized that for each object tile in the tileset that you intend to use, you have to (per this tutorial) separately load and tag each object tile w/ the key name — in addition to loading the tileset that already contains the textures.

    Doesn’t Tiled/Phaser provide a more direct way to know which texture to use in the tileset without having to redundantly load and tag each of them individually, in addition to loading the tileset?

    Thanks!

    • http://zenva.com/ Pablo Farías

      Hi Greg. They do have a way to create sprites directly from a certain tile ID (http://docs.phaser.io/Phaser.Tilemap.html#createFromTiles), but then you can’t specify per-object properties which is what I wanted to do in this example. But yes, checkout createFromTiles also createFromObjects and give a general read to the Tilemap class just to see what’s there. Cheers

    • http://zenva.com/ Pablo Farías

      Hi Greg. Will share this on the mailing list but thought you might not want to miss it ;) http://html5hub.com/how-to-make-a-mobile-virtual-pet-game-with-html5-and-cordova/

      • Greg Malone

        Pablo, that’s exciting, man. And, I’ve wanted to get my feet wet in Cordova. I’m onto it. Thanks for the heads up. You’re the best.

        Greg

        • http://zenva.com/ Pablo Farías

          No worries happy to help! let me know if you publish a game and we can feature it on the blog. Cheers

          • Greg Malone

            ​Oh you can count on it, Pablo. I’d be thrilled to give you and Zenva a promotional place in a game that comes out of the . Gotta support the team. Thanks for what you do.

            Don’t know if I’ve mentioned it, I’m working on a return to pro game dev after ​nearly 15 years out of that realm. My first commercial game, Minit Man, on Apple II in 6502 assembly, was published in 1981. Then Moebius, Windwalker and a variety of games and games collaborations. My stuff was cutting edge and original and, frankly, much emulated going forward. My last commercial game to produce was Duke Nukem 3D.

            Taking a break from game dev after ’97, I switched over to education as teacher, IT director, administrator. In that realm technology, coding and game dev edu have been the main effort. I’ve recently retired (am 62 yo, no kidding), am on a personal mission to develop and publish games that have a cleverly subversive learning and brain-enriching aspect while still being kickass fun or compelling in ways.

            At this juncture I’m still kicking around and analyzing a variety of game and learning products, but I hope to lock-in on *the* project after the holidays and let the next phase of the dev cycle begin!

            Hey, just for my reference, are you or others you know available for remote game dev project participation? e.g. contract work?

            Thanks. Back to the tut.

            Greg

          • http://zenva.com/ Pablo Farías

            Wow that’s impressive! I’m very happy to hear such a seasoned game developer is taking our tuts :) I’ll send you an email with info on our latest project which is inner-circle only atm.

  • P4nch0

    Hi, thanks for this tutorial it is very good.
    Can you tell when will be the next? :)

    • http://zenva.com/ Pablo Farías

      Glad you liked it! There are big surprises coming up in February in regards to Phaser tutorials. If you are in the ZENVA mailing list you will find out with time. In the meantime you can take a look at my tutorial HTML5 Hub for more Phaser: http://html5hub.com/how-to-make-a-sidescroller-game-with-html5/

      • P4nch0

        This tuorial is exactly what I am looking for . It helps me do a 2d game what I wanted to , but there are still many aspects that I would like to learn how such a change maps, load the appropriate animation after doing certain things , impact player on the map elements such as the cutting of a tree. Do you know you can side with similar tutorials for such games 2d with a phaser ? Greet.

  • http://blog.plicatibu.com/ Marcio Andrey Oliveira

    Amazing tutorial.

    I’m hoping for more :)