Phaser Tilemap system has been totally overhauled

[rich]

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:

 

Tilemap

 

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).

 

Tileset

 

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.

 

TilemapLayer

 

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.

[RestingCoder]

Just to be sure, will this eventually include the ability to use data from an object layer, and the properties assigned to a given object? I was going to start implementing that myself as soon as 1.1 was out of the dev branch.

[rich]

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.

[RestingCoder]

Very nice. Thanks for all you are doing with Phaset, Rich.

[spider]

This is fantastic. When is 1.1 planned for release? I'm holding off development until 1.1.

[spider]

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

 

 

 

b.t.w: Was not working for me in Chrome 29. Works in 30 (Max OS X). Unfortunately, don't have the error (nor 29) anymore. Something about FRAME. Blank black screen.

[RestingCoder]

This is fantastic. When is 1.1 planned for release? I'm holding off development until 1.1.

Same here. Very exciting stuff is coming and I don't want to end up having to redo stuff.

[rich]

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

[RestingCoder]

Take your time, and put out something you are satisfied with I've been working on art while waiting.

[tychon]

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

[yetanother]

I was wondering what are the support for isometric tilemap, do the collision (mouse click for example) will still be working (because tile are not square)?

[rich]

There's no support for isometric maps yet.

 

tychon - nice, that's a full-on WebGL error way below the Phaser stack. Do other WebGL demos work for you? (like the three.js ones for example)

[tychon]

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.

[mariogarranz]

• 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

[hackenstein]

I tried to update to the current beta build, but I can't get the tilemaps to show, unless I load the tileset in the Game.preload instead of the Preloader.preload.

[gleborgne]

Hy,

 

You mentionned a method scanning a map to fill sprites. Could you please share it ? using tilemap to position some game items is very interesting

[rich]

You can see this working in the dev branch and look at examples/wip/tilemap.js and you'll see how a group of sprites are generated from an object layer.

[Tweeper]

Hi,

 

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!

[lewster32]

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.

[xerver]

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.

 

https://github.com/englercj/phaser-tiled

[lewster32]

Oooo!

[Tweeper]

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.

 

https://github.com/englercj/phaser-tiled

 

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!!

[xerver]

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.

tilemap.objects[tilemap.getObjectIndex('player')].container.add(player);

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

[Tweeper]

 

 

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