Creating a Level in Tiled

ACCESS the FULL COURSE here: https://academy.zenva.com/product/build-a-full-rpg-adventure-in-phaser/

TRANSCRIPT

So now that we have Tiled installed we can go ahead and work on creating our map. So to get started we're gonna go ahead and click on New Map. And then in the window that pops up, this is where we'd choose the map size that we like to create. So for our game we'll be doing a Fixed Width and Height. So this will be the number of tiles wide and high our map will be. And then for the sprite sheet that we'll be using it'll be 32 by 32 pixels. So we can go ahead and put those in there. And then we can go ahead and leave the default properties in there for our map. And then we'll go ahead and click on the Save As button, so this will be where we wanna save our level. So I'm just gonna save this as Example. And you wanna go ahead and Save. And then you'll be taken to the Map Editor. So the first thing we're gonna do is our map is gonna be a little bit hard to see 'cause of how small this is. So we can zoom in on our map by coming down here and then selecting a higher percentage. So we'll do an 200%. And then so this is the layout of our map. So the first thing we need to do is we actually need to import a tileset that we'd like to use in our game. So in the course notes below you'll see a link to an Asset folder. If you go ahead and download that folder and unzip it you'll see inside there'll be a Level folder. And in there we're going to have four different files. First two is Background Extruded and Background. These are going to be the sprite sheets that we'll be using to create our level and the sprite sheet we're using to load into site Phaser. And then the Large Level.json and the Large Level.tmx will be the level we'll be using for the rest of the course. So what we're gonna wanna do is we're gonna wanna go ahead and load in the Background.png into Tiled here. So we're gonna go ahead and come over here and click on New Tileset. And we're gonna go ahead and click on Browse. And lets click on Assets, and we'll go on our level, we'll do Background. So like I said, our tile width and height is 32 by 32. And we wanna make sure Embedded Map is selected. So what this does is it saves the metadata inside our map file so that way when we go to export it out all of that relevant data will be available and we'll need that for loading inside Phaser. All right and then we'll just leave the name as Background. So we'll go ahead and click on Okay. And then what you'll see here is over here on the side all of our sprites will be loaded in. So what Tiled does is when we specify that width and height it will go ahead and break up that sprite sheet into that spacing format and then make it so we can select all of these sprites and we can use them in our map ... https://www.youtube.com/watch?v=PboVUH-vw1U