Jump to content

Phaser Tilemap system has been totally overhauled


Recommended Posts

Hi all,


So I'm nearly finished on this, and it's almost the final component of the Phaser 1.1 release (previously 1.0.7) which is pretty exciting! But I wanted to give you a run-down of how tilemaps have changed in 1.1. They are now broken down into the following objects:




This holds the loaded and parsed tilemap data split into layers. Alternatively you can now create blank tilemaps of whatever size you wish and populate them with data yourself. Essentially this object is just the raw representation of the map data and contains all the functions needed to manipulate it (like swapTile, fillTile, replaceTiles, etc).




A Tileset is kind of like a sprite sheet. It contains a reference to a single image that holds the tiles and dimension information. Tilesets consist of "Tile" objects which you can set collision on and now set collision callbacks on too.




A TilemapLayer contains a reference to a tileset and a tilemap. A Layer creates a dynamic texture which is used to render the layer in to and a sprite which is added to the display list. It doesn't hold the map data directly, or the tileset, but just references to them and you can change those at any time. So if you've got a 50 level game you only ever need to create 1 layer and just keep updating the data (and if needed tileset) it's rendering from. Of course Layers can have their own unique tilesets now.




The above is a playable demo, check it out here: http://gametest.mobi/phaser/examples/tilemaps/Sci-Fly.php


Use cursor keys to fly and also click anywhere in the map :)


There are some great new changes that this configuration allows:


  • Because layers are now just pimped-out Sprites you can insert them anywhere into the display list. This means it's now painfully easy to have a tilemap layer on the top of your game, all of your sprites, another layer and then a background. Or whatever combination you need.
  • You can now also scale the layers and the collision system recognises this and uses the new scaled size for all collision.
  • You can now position layers anywhere in the game world. By default they are placed at 0,0 and fixed to the camera, but actually you can put them anywhere.
  • Multiple sprites can now share the same layer. This means you can render the same tilemap to as many sprites as you want, and it won't cost anything extra to do so - which means you can have some crazy cool effects going on. Or have a scaled down sprite containing your layer as a mini-map in your game, without having to render it all again.
  • Layers are now much more intelligent - they use a dirty cache system, so they will never update unless something has changed (camera, map data, etc).In the previous version a map would update constantly, so this change alone saves a lot time.
  • Tile objects now have their own collision callbacks and what's more, you will soon be able to associate any meta data you want with them (i.e. the data exported from TIled maps)
  • Tilemap objects are just data buckets now, which means they're much smaller and it's perfectly safe to create loads of them with all your level data in. By decoupling them from the TilemapLayers both sides benefited as a result.
  • Collision is now pixel perfect with no 'wall sticking' or penetration issues :) The tile collision code has been totally rewritten from scratch, using a new optimised Body hull method, and it's faster, has less checks and is far more optimised than before. It also puts us in a good place to support sloped tiles in the very near future.

So I'm really pleased with this. There's still more tidying up to do and the tilemap API docs to finish, but this was the last major thing to get done before 1.1 could be released.

Link to comment
Share on other sites

Yes totally. I've put hooks in place already for Tile meta data, but that is tileset specific, but it's now also really easy to expand to extract data from Object layers too. I've got a function here that scans a map and converts all instances of a specific tile index to sprites (then removes the tile from the map, leaving the sprite in place), which is pretty handy - and I think an Object layer class could do similar things.

Link to comment
Share on other sites

I'm really hoping to release it this week, but there aren't many days left and I want to be sure it's in a good state, so it may flow over into early next week. Tilemaps was the last big thing to finish though, so right now I'm really just tidying-up and general house keeping. Still, it's a big house, and it feels like there has been a student party in some of the rooms right now :)

Link to comment
Share on other sites

Chiming in with getting an error here, too. Chromium 28.0.1500.71:


  1. Uncaught TypeError: Cannot read property 'FRAGMENT_SHADER' of null WebGL Shaders.js:165
    1. PIXI.CompileFragmentShaderWebGLShaders.js:165
    2. PIXI.compileProgramWebGLShaders.js:187
    3. PIXI.initPrimitiveShaderWebGLShaders.js:103
    4. PIXI.WebGLRendererWebGLRenderer.js:60
    5. Phaser.Game.setUpRendererGame.js:359
    6. Phaser.Game.bootGame.js:284
    7. _onBoot
Link to comment
Share on other sites

Sci-Fly seems to be working now, though a lot of the examples are reporting "Performance warning: Some textures are unrenderable" a couple hundred times then aborting. Others seem dodgy, but I'm not sure if that's just my memory of the older versions different from how the current tests work. The Invaders game demo doesn't update physical position with graphical position for example. Was that always the case, or is my own memory just needing a bug report?


Edit: Er, it clipped the first half of my post. Hrm. Turns out I'd forgotten to install the NVIDIA driver blobs; Nouveau doesn't provide acceleration for much in Chromium, so you put me on the right track with that.

Link to comment
Share on other sites

  • Tile objects now have their own collision callbacks and what's more, you will soon be able to associate any meta data you want with them (i.e. the data exported from TIled maps)




Amazing! Already said it too many times, but even too many is not enough: You are making an awesome job with Phaser, Rich.

Thanks :)

Link to comment
Share on other sites

  • 2 months later...
  • 9 months later...



At the moment I'm looking for a way to import and use isometric tilemaps from Tiled into Phaser 2.1.2. 

Unfortunately Phaser doesn't seem to support isometric maps yet. 


I found this Phaser plugin for isometric maps in Phaser (http://rotates.org/phaser/iso/) , but it doesn't seem to support Tiled import.


Are there any plans on supporting isometric maps with json import in the near future? 

Or is there an alternative out there for using isometric maps from Tiled in Phaser?


Any help would be very appreciated!

Link to comment
Share on other sites

No-one that I'm aware of has begun looking at this yet, however I don't think it'd be an awful lot of work to parse Tiled format isometric maps and create normal IsoSprites for each tile. Making it run fast and efficiently however will be a different issue, and a lot of clever stuff will have to be done with combining collision bounds, visibility culling and so on to make it run really well.

Link to comment
Share on other sites

Thanks Guys!


I have a plugin for phaser that supports the Tiled Editor feature set, and I plan to add isometric tile support to it in the future.




Very nice!! Great work. Nice to see you improved performance and I can't wait for the isometric support! That would be great!

I had an orthographic map working in Phaser with import of multilayered tilemap from JSON, exported by Tiled. Also with collision layer and a hero runing in between front- and backlayers.


Just replaced some code to get it working with your plugin and after some adjustments it's showing fine with all layers and it is scrolling.

There are two things I can't figure out so far:

- with your plugin all layers are shown directly, is there a way to let a hero walk in between layers?

  (with normal Phaser I drew a layer, than a hero, then the top layer, like so:

// BACK LAYER        backLayer = map.createLayer('back');        // COLLISION LAYER        collisionLayer = map.createLayer('collision');        map.setCollisionBetween(1, 100000, true, 'collision');        // MIDDLE LAYER        middleLayer = map.createLayer('middle');        // PLAYER        player = game.add.sprite(32, 48, 'hero');        // FRONT LAYER        frontLayer = map.createLayer('front');

- for the hero to walk between bounds on a road I created a collision layer in Tiled called 'collision' and set it in phaser to create bounds with:

map.setCollisionBetween(1, 100000, true, 'collision'); 

Do I get it right the setCollisionBetween method isn't supported yet?


Anyway, very nice plugin! I'll use it for sure. And again: really looking forward to your isometric support!!

Link to comment
Share on other sites

I generally have an object layer that I put my player into so I can design where in the layer stack my player is on a map in Tiled. Just make a layer named "Player" and add the player to that item.


Physics is not supported yet in the new plugin, you can see it is on the roadmap: https://github.com/englercj/phaser-tiled/issues/1

Link to comment
Share on other sites



I generally have an object layer that I put my player into so I can design where in the layer stack my player is on a map in Tiled. Just make a layer named "Player" and add the player to that item.


That indeed is a better structured way. Just placed my player in between the layers by creating an object layer in Tiled like your example. Works well



Physics is not supported yet in the new plugin, you can see it is on the roadmap: https://github.com/englercj/phaser-tiled/issues/1 



Alright. See you also added isometric support on your todo list. Thanks! I'll keep it in view

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...