Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Phaser Tiled Plugin

xerver

By xerver,
in Phaser 2

 Share

Recommended Posts

xerver Newbie

xerver

Posted
Posted

Hey all, recently released another plugin to try and improve the tilemap system in Phaser (specificly the flow for Tiled maps). You can the plugin here:

 

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

 

If you have questions or bugs, please report them on the GitHub page. Also, if you are looking for a project to contribute to I would appreciate any help!

 

Thanks,

 

-Chad

 

 

 

Using my test map which is 256x256 tiles, each 16x16 pixels, and 3 tile layers the core renderer gave me a performance graph like this:

 

slow_lttp_debug.png

 

The spikes you can see are when camera was panning. When using the phaser-tiled plugin on the exact same map I get this:

 

fast_lttp_debug.png

 

Still panning, still 3 layers, same map; different rendering strategy (graphs from phaser-debug).

Link to comment
Share on other sites
xerver Newbie

xerver

Posted
  • Author
Posted

This is meant to extend the current implementation with extra stuff for specifically when you are using Tiled Editor maps. That is instead of using the core methods, you would use the ones the plugin provides. Generally where you type "tilemap" you would use "tiledmap", with a "d". For example, when loading you use "game.load.tiledmap" instead of "game.load.tilemap". You can see more in the README. This way the plugin runs side-by-side with the current implementation. You can choose to use the core methods, or these.

 

Eventually the idea would be to extend this and merge it to core as a replacement for the current implementation, but there is a lot of work to do if we want it to be backwards compatible. Right now the API is similar, but code you use for tilemaps will probably not "just work" with this plugin. There are assumptions this plugin can make since we know the format of the data and the tool, so there is a lot more magic that seems to happen (layers created for you, tilesets created for you, etc) so a lot of the boilerplate you have when dealing with Tiled maps goes away. If you are using a CSV, custom build map, building a map in code, or something like that it may not just work for you.

Link to comment
Share on other sites
scoots Newbie

scoots

Posted
Posted

Cool stuff, thanks so much for sharing! Do you have any side-by-side performance comparisons? I'm working on a game with a large map that could definitely use a boost, but I'd love to see it in action before committing to switching over to the plugin.

Link to comment
Share on other sites
xerver Newbie

xerver

Posted
  • Author
Posted

Cool stuff, thanks so much for sharing! Do you have any side-by-side performance comparisons? I'm working on a game with a large map that could definitely use a boost, but I'd love to see it in action before committing to switching over to the plugin.

 

Edited main post with some graphs.

Link to comment
Share on other sites
nkholski Newbie

nkholski

Posted
Posted

Seems like a great plugin and I will definitely test it! Do you plan to make it independent of Phaser tilemap system? It would be great to be able to choose between your specialized Tiled plugin and the former core tilemap system when Phaser goes modular in the 2.2 release.

Link to comment
Share on other sites
xerver Newbie

xerver

Posted
  • Author
Posted

Seems like a great plugin and I will definitely test it! Do you plan to make it independent of Phaser tilemap system? It would be great to be able to choose between your specialized Tiled plugin and the former core tilemap system when Phaser goes modular in the 2.2 release.

 

It is independent, you can use this parallel to the core implementation.

 

The plugin looks like it has promise, but I have a question: the readme doesn't mention isometric maps. Are they supported by this plugin? (either directly or via lewster32's isometric plugin)

 

Thanks,

 

Laurie

 

No it doesn't, maybe in the furture (since the goal is feature parity with Tiled Editor), but not right now.

Link to comment
Share on other sites
  • 5 weeks later...
xerver Newbie

xerver

Posted
  • Author
Posted

Just updated the plugin to v1.2. This update adds adds physics integration and other stuff as well: https://github.com/englercj/phaser-tiled/releases/tag/v1.2.0

 

You no longer need to pass a tileset cache map into the plugin, as long as you load things with keys that it will expect it can "discover" the map assets for you.

 

Information about how physics work, and how the key discovery work can be found by reading through the readme: https://github.com/englercj/phaser-tiled#phaser-tiled

Link to comment
Share on other sites
  • 1 month later...
JustPaul Newbie

JustPaul

Posted
Posted

Hi, I'm going to be testing your plugin to see if it improves performance on a test app I'm porting to js from ts at the mo.  Once I get it working.. at the moment it's not obvious (to me) from the readme which Tiled layers etc are passed....

 

//                              Key//                               vgame.load.tiledmap(cacheKey('my-tiledmap', 'tiledmap'), 'assets/levels/tilemap.json', null, Phaser.Tilemap.TILED_JSON);//                                              ^//                                             Que?////                            game.load.image(cacheKey('my-tiledmap', 'tileset', 'tileset1-name'), 'assets/levels/tileset1.png');//                                          ^//                                        Layer?
 

At the moment the physics are working (from an object layer with .convertTiledCollisionObjects), so the tilemap is being loaded, but I am not seeing any tiles and I can't use .convertTiledMap for collisions. I need to be 100% sure I'm passing the correct parameters here so I can investigate. Could you confirm which of these are the map-key, tileset-name, layer-name etc?

Cheers!

edit: it turns out that Que? and Layer? above are the type of asset, which should have been blindingly obvious. The rest of the issues were caused by the tileset not being an exact multiple of tilesize. Now that I've trimmed it, everything appears to be working.

edit2: ... and holy guacamole, what a difference in performance. On Canvas+ CocoonJS I was experiencing a slowdown from 60+fps to around 4fps when scrolling used stock Phaser. Now the fps stays pretty constant, always 60fps+ on a map that's 20 tiles high * 1000 long. Now I just need to populate it with more than the ground and a few platforms and see what happens, but the difference is night and day.

Great work xerver!

Link to comment
Share on other sites
  • 2 weeks later...
nkholski Newbie

nkholski

Posted
Posted

I'm trying to switch from the built-in support for tilemaps to the plugin but ran into some problems. I can't get the camera to follow the player, and rotated tiles is placed on wrong coordinates (+/-1 on either the x or y value of tile position, in my case +/- 16px). Do you have any examples or demo to learn from, preferably following a moving sprite and using rotated tiles?

Link to comment
Share on other sites
  • 4 weeks later...
Partsu Newbie

Partsu

Posted
Posted

I'm having issues with colliding to the world bounds which is not working with Tiledmap. It seems that the sprite events outOfBounds and onEnterBounds are not firing. And yes, i have set body.collideWorldBounds to true... The world size is also correct.

 

Any way to enable bound collision easily?

Link to comment
Share on other sites
  • 7 months later...
cjke Newbie

cjke

Posted
Posted

Hi

 

Great plugin, tried it with Phaser 2.3 and I got a massively improved framerate. As mentioned in the issues section, it no longer works in Phaser 2.4. 

 

Looking into it, it's seemingly related to cache management (but could be a few things playing up). I wanted to ask two things:

 - How would you approach migrating the plugin to 2.4? As I am happy to work on it and submit a PR

 - What were strategies in obtaining such high performance? What bottlenecks were in the original phaser version? 

Link to comment
Share on other sites
  • 1 month later...
jmp909 Newbie

jmp909

Posted
Posted

theoretically I think this should work to bypass the TypeScript issues (using square-bracket property notation rather than dot syntax)

preload () {  this.game.plugins.add(new Phaser.Plugin.Tiled(this.game,null))  var cacheKey = Phaser.Plugin.Tiled.utils.cacheKey  this.game.load['tiledmap'](cacheKey('my-tiledmap', 'tiledmap',null), 'assets/demo/super_mario.json', null, Phaser.Tilemap.TILED_JSON);  this.game.load.image(cacheKey('my-tiledmap', 'tileset', 'SuperMarioBrosWorld-1-1'), 'assets/demo/super_mario.png');}create () {  var map = this.game.add['tiledmap']('my-tiledmap');}

but i get this error:

Tileset "SuperMarioBrosWorld-1-1" unable to find texture cached by key "my-tiledmap_tileset_SuperMarioBrosWorld-1-1", using blank texture.

I'm wondering if it's actually to do with updates to Phaser itself? the actual image seems to be in the cache.. (essentially meaning the plugin loader works)

 

post-16536-0-91781300-1444420907.png

Link to comment
Share on other sites
  • 1 month later...
san40511 Newbie

san40511

Posted
Posted

What I do wrong?

I've got this error - Tileset "testtiles" unable to find texture cached by key "my-tiledmap_tileset_testtiles", using blank texture.

preload state 

//preloader stategame.add.plugin(Phaser.Plugin.Tiled);//loader statetileMapLoader : function () {var cacheKey = Phaser.Plugin.Tiled.utils.cacheKey;this.load.tiledmap(cacheKey('my-tiledmap', 'tiledmap'), 'res/maps/w1-1.json', null, Phaser.Tilemap.TILED_JSON);this.load.image(cacheKey('my-tiledmap', 'tileset', 'testtiles'),'res/maps/testtiles.png');},//game state this.mapToo = this.add.tiledmap('my-tiledmap'); 

Is this plugin work?

Link to comment
Share on other sites
Jazz Newbie

Jazz

Posted
Posted

its working with these fixes, 

 

but how do u load specific layers and not just the whole map ?

 

nvm: i can access them under map.layers[]

 

how should i approach drawing the player between layers 2 and  3?

 

also all debug information is gone using this plugin, its now drawing on top of everything my guess is

Link to comment
Share on other sites
  • 3 months later...
 Share
Go to topic listing

  • Recently Browsing   0 members

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