How to export from tiled and integrate into Phaser?

[D3thy]

Dear Phaser community,

 

I am working on developing my first game and having a lot of trouble finding information on tiled and how it works with Phaser.

 

-The game is a sidescrolling shooter(character moves along a 8000px wide map)

-I opened up tiled, and created a map 480x8000px, using 3 different sprite sheets or tilesets(as tiled calls them)

-I have an exported .json, my saved .tmx and, i also saved the entire map as an .png

 

Questions

 

1. I created the map as 480x8000 but the work space on the left in Tiled, has no indication of where to start your build and is much taller than my specified hight of the map. Does it matter where i started building from.(attached is a picture to better explain) as im used to applications like photoshop that make the canvas the size you specify....

 

2. For collision , i created an object layer and just placed rectangles all over my maps tiles that are sopposed to be objects, is this going to work properly?(you can see these in the attached example as well)

 

3. Please explain in great detail what javascript is required in my game.js and what each line of code is doing. I have looked at all of the exaples (http://examples.phaser.io/index.html) and plenty of other online examples, with not a single explaination as to what each line of code is doing.

 

My javascript up to this point as has been all web development focused(clicks, animations, video player/picture gallery), so im feeling a bit lost right now.

 

[Videlais]

1. I created the map as 480x8000 but the work space on the left in Tiled, has no indication of where to start your build and is much taller than my specified hight of the map. Does it matter where i started building from.(attached is a picture to better explain) as im used to applications like photoshop that make the canvas the size you specify....

 

In Tiled, the leftmost edge of grid-space will be the outer limit, going left. The same with the far right. The grid-space dictates where tiles can be placed.

 

The work-area, your red, is just there in case the map is changed or zoomed in or out in some way. As you might have notice, you can only place tiles within the grid itself.

 

2. For collision , i created an object layer and just placed rectangles all over my maps tiles that are sopposed to be objects, is this going to work properly?(you can see these in the attached example as well)

 

Probably not. Maps need to be composed of Tile Layers.

 

You add them using Map -> New Tileset in Tiled. After selecting your file and setting the dimensions, clicking "OK" from its dialog box will create a new Tile Layer using those tiles.

 

3. Please explain in great detail what javascript is required in my game.js and what each line of code is doing. I have looked at all of the exaples (http://examples.phaser.io/index.html) and plenty of other online examples, with not a single explaination as to what each line of code is doing.

 

The Starstuck example is good for this. It shows the use of loading and use JSON files exported from Tiled.

 

However, to give you a more detailed breakdown, hopefully the following code will help.

 

In your preload:

// Load the JSON file using the TILDED_JSON special flaggame.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);// The first parameter is the key to the cache dictionary. We use that to reference the loaded data.// The second parameter is the location of the file relative (or using absolute paths) to the file loading it.// (For example, with a 'index.html' in a root directory with the folder 'assets' in the same place, I reference the map as 'assets/map.json'// The third, null in this case, is the parameter of the optional data URL for the map.// The fourth is a special flag, Phaser.Tilemap.TILED_JSON, that specifies that this JSON data came from Tiled (and that it should be loaded as such)

Before and in your create (assuming Physics.Arcade, 'game' is a Phaser.Game object, and there is an image 'level' in the cache dictionary):

var map; // The tilemapvar layer; // A layer within a tilesetfunction create() {// Add the tilemap 'map' to the gamemap = game.add.tilemap('map');// Add the tileset image 'level' to the map// (The name must match both an image in Phaser's cache// and the name of an image within the JSON file// list of tilesets too.)map.addTilesetImage('level');// Create a layer from the JSON file// based on 'Tile Layer 1' from the available tiles.layer = map.createLayer('Tile Layer 1');// Set the collision range // Here, in this example, the range is from 1 to 5.// (Those are the positions of the tile in the image//   file itself, starting at 1 from the upper-left corner.)map.setCollisionBetween(1, 5);// Tell the layer to resize the game 'world' to match its sizelayer.resizeWorld();// Enable the Physics.ARCADE body for the tiles.game.physics.arcade.enable(map);// Adjust the world bounds now that the //  world has been resized earlier//  (from the layer.resizeWorld() ).game.physics.setBoundsToWorld();...}

In your update (assuming a 'player' and that colliding with the map's layer is wanted):

game.physics.arcade.collide(player, layer);

[D3thy]

Videlais,

Thank you soooo sooo much for your response, i appreshiate it a lot and you have my gratitude. A few things i don't understand.

 

 

In Tiled, the leftmost edge of grid-space will be the outer limit, going left. The same with the far right. The grid-space dictates where tiles can be placed.

 

The work-area, your red, is just there in case the map is changed or zoomed in or out in some way. As you might have notice, you can only place tiles within the grid itself.

 

When i create a new map in Tiled, there is no "Grid space" or visible que as to where my map parameters are within the work area on the left. However i did notice like you said, that i could only place tiles within a certain area.

 

 

Probably not. Maps need to be composed of Tile Layers.

 

You add them using Map -> New Tileset in Tiled. After selecting your file and setting the dimensions, clicking "OK" from its dialog box will create a new Tile Layer using those tiles.

 

In my Tiled project i have three layers. Background layer, has a 500x800 picture that i repeated along a straight line to create a background for the game's world. The second layer, called Floor, is a layer that consists of the squares and fire that make up my map. The third layer is an object layer, where i then "insert rectangles" on all of my squares, to give them collision, as demonstrated  in this example here :

 

http://gamedevelopment.tutsplus.com/tutorials/introduction-to-tiled-map-editor-a-great-platform-agnostic-tool-for-making-level-maps--gamedev-2838

 

 

 

 

Before and in your create (assuming Physics.Arcade, 'game' is a Phaser.Game object, and there is an image 'level' in the cache dictionary):

var map; // The tilemapvar layer; // A layer within a tilesetfunction create() {// Add the tilemap 'map' to the gamemap = game.add.tilemap('map');// Add the tileset image 'level' to the map// (The name must match both an image in Phaser's cache// and the name of an image within the JSON file// list of tilesets too.)map.addTilesetImage('level');// Create a layer from the JSON file// based on 'Tile Layer 1' from the available tiles.layer = map.createLayer('Tile Layer 1');

 

This is where a majority of my confusion comes from. I don't understand the referencing to tilemap images and stuff, especially when you say "The name must match both an image in Phaser's cache and the name of an image within the JSON file". So i need to link to the .json file and then also link to all of the tile sets i used to make the map in Tiled?

 

For example, in my map, i added 3 different tilesets and used tiles from each set to create my map. Does this mean that i need to link up to these images by going "map.addTilesetImage('level1');" but change level1 to the name of my image?

 

The create layers part also blows my mind, no idea what this means at all.

 

 

 

 

[D3thy]

Update: Was able to get tiled map to work, and the "grid" to display, that shows your world size.

 

New problem: Second layer from tiled map is not displaying properly. Attached is picture of how the tilemap should look, how it looks now and my source code.

[D3thy]

Update, using background image instead of second layer from Tiled, much easier to work with....problem avoided.

[nExt]

i use tile map editer to create map and export to json, csv... 

then you can import and load to your game

see more : http://gamedevelopment.tutsplus.com/tutorials/introduction-to-tiled-map-editor-a-great-platform-agnostic-tool-for-making-level-maps--gamedev-2838

[clark]

When you make a TileMap game.....

 

Do you have a layer specifically for Physics objects and the less of these Physics tiles you have, the greater performance is?

[D3thy]

i use tile map editer to create map and export to json, csv... 

then you can import and load to your game

see more : http://gamedevelopment.tutsplus.com/tutorials/introduction-to-tiled-map-editor-a-great-platform-agnostic-tool-for-making-level-maps--gamedev-2838

 

Yes thank you for this link, i have already gone over that tutorial before. The problem with it, is that it does not explain how exported Tiled maps are properly integrated into Phaser.

 

 

When you make a TileMap game.....

 

Do you have a layer specifically for Physics objects and the less of these Physics tiles you have, the greater performance is?

 

You make the map in Tiled, not the game. By Physics objects, im going to assume that you mean, objects that you are able to apply collision to...in which case, from my understanding, you can only have it enabled on 1 of your Tiled maps, layers.

 

For example, i created a map in Tiled. The map is made by using 4 layers, only 1 of these layers should have your objects that require Physics or Collision. From what i have read, posted by other users, is that there is a direct link between having more tiles/layers and a reduction in performance. However, i believe the limitation of 1 layer only being able to use Physics is a limitation of Phaser, and not Tiled.

 

I am very new at all of this myself and my information could be wrong or misleading, please verify with a second source because you take anything to heart, i am just trying my best to shed some light for you guys.

[clark]

I appreciate it d3thy thanks for taking the time to explain.  New here too and surprisingly tilemaps are something I have not dealt with for 10 years!

 

cheers

[D3thy]

I appreciate it d3thy thanks for taking the time to explain.  New here too and surprisingly tilemaps are something I have not dealt with for 10 years!

 

cheers

 

They also appear to be something that is well documented in the examples but poorly explained, relative to Phaser. I spent at least 20 hours researching on it, and ended up just getting someone else to set it up for me and then toying with it to get a better understanding. Even now, i barely know what is going on...lol

[valueerror]

i work with tiled and layers a lot... so if you have a specific question... shoot!

there's one thing i have to correct right now.. you can definitely define more than one layer to collide with your player..

[Videlais]

You make the map in Tiled, not the game. By Physics objects, im going to assume that you mean, objects that you are able to apply collision to...in which case, from my understanding, you can only have it enabled on 1 of your Tiled maps, layers.

 

For example, i created a map in Tiled. The map is made by using 4 layers, only 1 of these layers should have your objects that require Physics or Collision. From what i have read, posted by other users, is that there is a direct link between having more tiles/layers and a reduction in performance. However, i believe the limitation of 1 layer only being able to use Physics is a limitation of Phaser, and not Tiled.

 

You can have Physics support on more than one layer. It just doesn't always make sense to do so. Usually, one layer is used as something like you have now, a floor or wall or other fixed surface. Then, to place objects, developers add them as Phaser.Sprite(s) separately or as part of a Phaser.Group so that they can animate or move by themselves.

Other layers would be background images or other visual details that sprites would not collide with.

 

They also appear to be something that is well documented in the examples but poorly explained, relative to Phaser. I spent at least 20 hours researching on it, and ended up just getting someone else to set it up for me and then toying with it to get a better understanding. Even now, i barely know what is going on...lol

 

The thing to remember is that Phaser isn't very old and its API has changed a very large number of times in the last year or so. Previous to 2.0, there have been a handful of different ways to add and collide with with tilemaps. Now, finally, the major API changes have slowed done and documentation is being written to explain why and how everything works.

 

Because it's an open-source project, and even Rich himself doesn't get paid to work on it, help and better documentation is sometimes slow to appear and get approved by the general community. There is a major push coming soon, though. There is a book in the works and the number of examples with documentation is still growing.

[D3thy]

i work with tiled and layers a lot... so if you have a specific question... shoot!

there's one thing i have to correct right now.. you can definitely define more than one layer to collide with your player..

 

Valueerror, thank you for verifying that...i think an explination of some things would be a hugeeee help to me and the community.  What would be ideal is to take some code, like this example here, taken from the "Mario" example on phaser(i took out the unrelated code). Then explain in full detail what each part of the neccesary code is doing. I will add my own comment to give you an idea of what i mean.

 

 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

//This code is creating your Phaser game, with the aspect ratio of 800 by 600, setting it to run on auto(which means it will run webgl or canvas, depending on the device), and then...etc etc etc

function preload() {

//your preload function, this function runs first and loads all of your games objects(sprites and stuff) before the game starts.

game.load.tilemap('mario', 'assets/tilemaps/maps/super_mario.json', null, Phaser.Tilemap.TILED_JSON);

//this is the first neccesary step to using a tilemap from Tiled, you need to load it into the game by saying game.load.tilemap and then....etc etc etc

game.load.image('tiles', 'assets/tilemaps/tiles/super_mario.png');

game.load.image('player', 'assets/sprites/phaser-dude.png');

}

var map;

var layer;

var p;

var cursors;

function create() {

map = game.add.tilemap('mario');

map.addTilesetImage('SuperMarioBros-World1-1', 'tiles');

layer = map.createLayer('World1');

layer.resizeWorld();

//this will resize the world to match your tilemaps size?? i think

}

[valueerror]

well .. i made this fully functional tilemap example and uploaded it to my server..  you can try it here: http://test.xapient.net/phaser/tilemapexample/

 

i also attached the whole example as zip file so you can download it and have a look at all the files! i tried to comment as much as possible

 

 

glhf 

 

 

FYI : i tend to use p2 physics because this way i can also use non-square objects and create real hills and slanted tiles to walk upon.. (or materials like ice without friction) also i get the impression that p2 is more reliable - with arcade my player sometimes falls through the tiles  for no reason 

tilemapexample.zip

[D3thy]

well .. i made this fully functional tilemap example and uploaded it to my server..  you can try it here: http://test.xapient.net/phaser/tilemapexample/

 

i also attached the whole example as zip file so you can download it and have a look at all the files! i tried to comment as much as possible

 

 

glhf 

 

 

FYI : i tend to use p2 physics because this way i can also use non-square objects and create real hills and slanted tiles to walk upon.. (or materials like ice without friction) also i get the impression that p2 is more reliable - with arcade my player sometimes falls through the tiles  for no reason 

 

Valueerror,

 

Thank you so much for that contribution, i have pretty subpar javascript knowledge and i was able to understand the code and your explinations much better than any of the examples or Documentation i have seen. I hope anyone else new to the scene and looking for imformation, comes across this thread and is able to benifit from your generosity. I wish the Phaser examples had comments like your code, would make using Phaser a lot easier and more user friendly.

[valueerror]

you're welcome..

 

and here comes one additional thing...   

the very same example with p2 physics and slanted tiles 

 

http://test.xapient.net/phaser/tilemapexample/index-p2.html

 

 

the attached zip file contains index.html  (arcade) and index-p2.html (p2)

 

good luck with your game !

tilemapexample_1.zip

[D3thy]

Awesome, thanks a lot, i look forward to trying out p2 physics when i have a bit more experience. Just a general question, do you have to do anything different if using multiple tile sheets to make your map, say 1 tilesheet for each layer or multiple tilesheets to make 1 layer.

[valueerror]

not really... you will of course have to add all used tilesets ... first preload them .. and then add them to the map .. every one of them...   

 

btw.  i don't want to confuse you but i want to be precise:

you could use a different (custom) cachekey for your tileset in the preload function (different from the filename that is hardcoded in the json file)  but then you would have to use the addTilesetImage function this way..

 

preload:

 game.load.image('tilset1', 'test-tileset.png');

create:

 mymap = game.add.tilemap('testmap'); mymap.addTilesetImage('test-tileset', 'tilset1');  // this is how you would combine the custom cachekey with the tileset name..

i decided to go with the easy way and keep everything simple so my cachekeys are the same as the tilesetfilenames without the extension..

 

if you have more than one tileset image just do this for every tileset

 

mymap = game.add.tilemap('testmap');mymap.addTilesetImage('test-tileset-A');  //every used tilset image needs to be added mymap.addTilesetImage('test-tileset-B');  mymap.addTilesetImage('test-tileset-C');

[D3thy]

Thank you for clarifying that, i think i can make sense of what your saying, I will do some experimentation and should do just fine with all the instructions and examples you provided.

[mrBobDobalina]

First, I'd like to say Thank You! to mr/ms valueerror for all the help so far with this topic!!

 

I have also been having issues getting my tilemap to load using Tiled and Phaser together.

 

I found this thread a few days ago, and even using your examples cannot get my tiled map load properly.

 

I even downloaded that mario code example (which was Awesome and informative) and copied it Exactly, only substituting my image and tilemap files in place of mario and the mario tilemaps and all that.

Its loading my .json file correctly so thats good =)

 

I have that tilemapexample in my webroot and it runs perfectly

The mario code provided runs perfectly in my localhost browser, but whenever i run the same code (and file structure) only substituting my tilemap and pictures with marios i get an 800 x 640px black screen

 

heres a link to my copy of the html file if anyones that curious

main.html

 

 

I also get the following error messages:

 

Phaser.AnimationParser.spriteSheet: 'dude's width/height zero or width/height < given frameWidth/frameHeight

 

Phaser.Tileset - image tile area is not an even multiple of tile size

 

TypeError: d.tiles[C.index] is undefined  

       ...],B=0;B<i.length;B++)C=i,C.index<0 || (D=d.tiles[C.index][2],p=d.tilesets[D],p....

                                                          and there is a little arrow pointing specfically to the upper case D in (D=d.tiles[C.index].......

 

 

ReferenceError: player is not defined

  game.physics.arcade.collide(player, layermain);

 

Nobody else getting crazy results like that?

 

 

 

 

[valueerror]

so you changed mario.png to dude.png and the spritesheet dimensions changet too..  did you correct them for your dude.png file?   in the mario spritesheet one frame is 50x50 ..  the first error message indicates that your dude.png frames have a different size..  therefore "player is not defined" because it couldn't be initialized correctly..  

 

the second problem is similar..  it seems that your map is (for example)  1000x400 pixels and the tilesize of your tileset is something like 23x23 (just random numbers here)  you can not divide 1000 by 23 and get an even number of tiles.. 

[mrBobDobalina]

oh well i certainly feel slow.

Thanks alot!!

I really do appreciate it though; you are awesome!

[mrBobDobalina]

Well upon further inspection it seems that wasnt the issue.
I figured out how big my tilemap is and even when i make the canvas exactly as big as there are pixles in the map i get the same error.

 

I had been using that 'dude.png' sprite file from the phaser tutorial and even when making it the appropriate size, i get the same error message.

 

interestingly enough the first time i loaded this, my blue sky background appeared so i just had a big blue screen instead of black.

but then without changing my code at all, i reloaded the page and it went back to black.

 

so who knows what the problem is maybe something wrong with my computer, I'll try doing this on a friends computer and see how it goes like that.

I super appreciate all the help though anyways you are super awesome for giving people a hand! =)

 

I'll post the results here whenever i figure out the problem in case anyone else had the same issues

[valueerror]

huh?  the canvas size has nothing to do with the issue.. the error suggests that your tilemap is no multiple of your tileset-tilesize..  

 

if you still struggle with this - zip the whole thing and upload it here as attachment.. i'll have a look at it asap

[mrBobDobalina]

That makes sence. I guess I was just desperate for a solution haha. I have been using Tiled for this example with all its basic settings (32px tiles) and I dont understand how making a map entirely out of 32px tiles wouldnt end up being an even multiple of 32.

 

I attached the zip file here.

learning.zip

I'm (obviously) new to tiled so I super appreciate all your support with this!