Introductory Guide to Tiled

Tiled

...and How it Applies to Pre-Rendered Mapping

Introduction

Tiled is a piece of open source software designed to function as a Map Editor for custom game engines. It is written in C++ and has some really nifty features that aren't going to be applicable to you at all for this purpose. In this tutorial, I will be going over the basic features that can be used to achieve the Pre-Rendered Mapping (more often known as Parallax Mapping) effect without the use of Graphic software such as Photoshop or Gimp.

​

Tiled can be downloaded for free at

mapeditor.orgStarting Off

The Tiled GUI is incredibly simple. However there is a lot of stuff you won't need to use. Don't be afraid to explore, but to learn to use it as a basic map drawing program you can follow this tutorial.



​

Above is the GUI. Like most software, File -> New is a great place to start.

​

​

The first prompt you will encounter will define the settings for your map. This is similar to the New Map prompt in RPG Maker. The Orientation should be kept as Orthagonal. You can use this software to make Isometric maps (Final Fantasy Tactics, Ogre Battle, etc.) but for this tutorial we won't be doing that.

The Map Size category defines the width and height of the map in Tiles. This is mostly the same as you would do it in RPG Maker; if Tiled only supported 32x32 tiles, it would function exactly the same.

However, Tiled will allow you to define the size of the individual tiles on the map. For now, we will leave it as 32x32. This is XP, VX, and vxAce standard and is a good place to start.

​

​

This is what a fresh map looks like, but there isn't much to go on here.

​

​

By clicking this option, we can import a new tileset. This is a fair bit different from RPG Maker but still should have some similarities.

​

​

This prompt is how we are going to define our tilesets. First, you should Browse to the tileset file you want to add. Outside_A1.png from the vxAce RTP is what I am adding for this tutorial. Since the XP, VX, and vxAce RTPs all use an alpha channel, we don't need to use a transparent color. However, if we were using RM2K or RM2k3 we would need to pick that ugly pink color.

Tiles, much like when creating a new map, lets you set the tile width and height. Why would we do this? Well, the VX and vxAce Autotiles are not easily placable as 32x32 tiles, since RPG Maker automatically cuts them up into 16x16 bits to make corners and edges.

​

​

This is how the tiles would be divided up if we left it with 32x32 Tile Dimensions.

​

Instead, we will set the Tile Width and Height to 16x16. This will let us select the corners and edges of the autotiles individually.

​

​

See how the divisions here allow us to pick corners, and edges? It also lets us pick divisions of the 32x32 water tile which can be used with some tiles (not this water tile) to create diversity.

Once you are back on the Map editor screen, with the Tileset window up, try and place a few tiles... Because we divided the tiles in the tileset into smaller sections than the tiles on the map, you won't be able to place the tiles properly. We have to change the Map settings... Well, Tiled doesn't let you change the map settings once a map is made. There may be a plug-in available, but for now we need to make a new map.

However, before we do, on the Tileset window there are four buttons along the bottom. Import, Export, Properties, and Remove. When you create a new Map, it doesn't care what tilesets you have used with other maps. To avoid having to import this tileset again (fully) we can Export it. You will get a standard Windows save prompt, so find/create a folder where you can store the tilesets and save it. It will be saved as a .tsx file which can be imported later so we don't have to adjust the tile settings again.

​

Starting Off... Again.

So close your current map, and go to the New Map prompt again. You will be greeted with the same settings window as before, but we will be making some changes.



​

We have changed the Tile Size to 16x16, so we can place individual pieces of the autotiles. However, when doing so you may notice that the full map size (the * x * pixels below the Map Size Width/Height boxes) won't read 544x416 if you kept the Map Size Width/Height at 17x13. These need to be adjusted by the inverse factor of the Tile Size change... Or in easier to understand terms, when you half the size of the tiles, you need to double the amount of tiles on the map. So a 17x13 tile map becomes 34x26.

You can now go ahead and click OK and Import the tileset we have already made. You do this by hitting "Add External Tileset" below the "Add New Tileset" menu item we used before. Just locate the .tsx file and load it up.

You should now take a minute and start adding a few more tilesets (and exporting them as .tsx files for later use.) In this Tutorial, I add the following from the vxAce RTP:

​

• Outside_A1.png
  
• Outside_A2.png
  
• Outside_A4.png
  

and

​

• Outside_B.png *
  

* When adding Outside_B.png, I use 32x32 as the tile size. Since these are not autotiles, we don't need to divide them up any more than 32x32. Don't worry, we'll still be able to place them on the 16x16 grid. This has advantages of its own!

​

​

Once you have added those tilesets, you can go ahead and mess with the Layers on the right. To add a layer, just right click and select Add Tile Layer. I usually use these layers to start, and they function exactly the way that Layers would in any Graphic editor. The lower on the list, the lower in priority. The check box can be ticked or unticked to show or hide a layer, and you can click and drag them to move them up or down the list.

​

I use the layer name Object Layer and Object Layer 2, but don't confuse these with Tiled's ability to add an Object Layer (instead of a Tile Layer.)

​

These Object Layers are an advanced function that could be used to emulate the Event Editor of RPG Maker with some very advanced scripting.

​

It isn't something we will explore in this tutorial.

​

​

Here I have taken the tiles from Outside_A2 and placed some grass and a path. Nothing in this image couldn't be done with vxAce. So why are we using Tiled anyways? Well, Pre-Rendered Mapping came about as a way of working outside the limitation of tiles, so that everything isn't all neatly packed into 32x32 spots. Yes, we are still limiting ourself to tiles with Tiled, but we are reducing their size so that we can create more intricate maps.

​

​

I started by taking the 16x16 corners and placing them along the top of the path, offset a bit. I took the interior corners, placed them appropriately, and then adjusted the tops and sides. This creates a more even flow, so that the landscapes look more natural. I left the bottom unaltered so that you could see the contast in effect.

​

After finishing the bottom and adding some water, I then move on to Ground Detail Layer. This is where I will be placing any ground objects that have transparency around them.

​

​

Tip! Press pressing H, you can have Tiled show the active layer at normal brightness and others slightly darker.

​

I applied the same edging to the Grass tile, trying to make it look as natural as possible. This is also a good layer to start adding some low-ground foliage. The tufts of grass, moss, etc. I try to keep anything that would obstruct character movement on a different layer as a personal preference.

​

​

So, pretty drastic change. I'm here to teach you how to use the software and some tips and tricks on how to use it in a way that makes it work nicely in RPG Maker, not to teach you how to map.

​

New things; I added some more to the Ground layer. The cliffs in the top left (which look awesome thanks to 16x16 tiles) and the cliffs at the bottom.

​

Tip! The two lighter coloured pieces are on a layer higher than the active layer.

​

They are on the Overhead layer because the player can walk behind them in RPG Maker.

​

I'll explain more on this later.

​

I've also added a temporary layer where I placed a grid of a random mostly see-through tile. This is so that while placing impassable objects, I have the 32x32 movement grid of vxAce in mind. This can feel sort of limiting, since you aren't going to want to place certain objects half way across (Like I did with the sign... Doh!) but its really important to keep pass-ability in mind!

Now, the objects I have placed on the first Object layer are all over the place. Tree bottoms! Tree bottoms are far as the eye can see! I have placed the tree bottoms this way for two reasons: First, it lets me place the trees tighter together. By placing the tops on the same layer, similar to in RPG Maker, you couldn't bring the trees as close together or in as varied of patterns; and Second, it's for organization regarding pass-ability again. I don't care where the tops of the trees are because I can just walk right under them.

​

​

I've now moved on to the Object Layer 2. This is where I can go ahead and place most of my tree tops. Why only most? Looking closely, you can see that I have only placed the tree tops where it would be impossible for the player to pass underneath them. I could also place the rest of the tops on this layer, but for sake of organization I am not doing that. I also put a bit of growth on a rock... Because sexy love growth on rocks.

​

​

Ahh. The Overhead Layer. I finished up my treetops, and you can see the overhead cliffs along the bottom.

Why do I even have an Overhead Layer? Why don't I just put it all on Object Layer 2? I'll show you why.

​

​

Being able to separate the priority layers is key in Pre-Rendered Mapping. If you shove everything into one image, you'll be walking all over your map.

​

Making the Images Usable in RPG Maker

​

Tiled has a feature for exporting images, so you won't even need to open a graphics editor to finish this off. Activate every layer except the Overhead Layer (and the grid layer if you used it) and go to the File drop-down menu, and click Save as Image... The prompt you will receive should look something like this:

​

​

Browse to the directory you want to save the image (the GameFolder\Graphics\Parallaxes folder is suitable for the image we are saving now.) Be sure "Only include visible layers" is checked. Use current zoom level only needs to be unchecked if you were zooming in and out while making your map. I don't do this, but having it checked off is best so you don't have to save the file twice. Of course, leave the grid unchecked. Now save the file.

​

Go back to your map. Un-check all the layers except Overhead Layer and do the same thing for saving as an image. However, save the image in the GameFolder\Graphics\Pictures folder instead.

​

Using the Images in RPG Maker

​

You definitely should have saved your map through Tiled so you can come back and edit it again later, but if you haven't, make sure you save now. Go ahead and close the program, and open the RPG Maker you are using (vxAce in my case.)

​

This section shouldn't need any images to explain. Create a new map, set the map Parallax BG to the first image you saved. Check the "Show Parallax in Editor" option and click OK. Go into the Database, and create a new Tileset. Load a blank 512w x 256h .png file in as the A5 tileset. Make the first tile passable, and the second tile impassable. Make this the tileset for your Pre-Rendered Map and draw impassable tiles over all the areas you shouldn't be able to walk.

​

Tip! You can create a dummy tileset with an easily identifiable "Impassable" tile.

​

Draw this on the map where you don't want the player to be able to move and then go back and change the tileset to a blank image.

​

By doing it this way you'll be able to see what is passable and what isn't.

​

Pro Tip! Alternatively, you can use Yanfly's Region-Based Passability script.

​

You can then just draw a region wherever you don't want the player to walk and not have to worry about tilesets at all!

​

To use the Overhead Layer image, just add a Show Picture to the teleport event that moves you to the map. Have it show the Overhead Layer image and viola. You should be good to go!



​

 

I wasn't even going to try Parallax mapping, but I think I've rather changed my mind. Thanks a ton Prexus!

 

We need more clear tutorials like this; and the pictures go a long way.

And since we have people asking "how i can do paralex" posts ALL THE fricking TIME; we can just direct them here.

Rock on brother. :evil:

 

Oh wow. This will make parallaxing a hundred times easier than how I normally do it, lol. (Seeing as I usually use Paint.Net and just start with a blank image.)

This can even make large parallax maps go a bit quicker, which is a huge plus in my book. Thank you for showing me this program and showing everyone how to use it properly.

Awesome tutorial.

 

I'm in agreement with all the comments so far. While there's plenty of tutorials on parallaxing, understanding certain programs in terms of parallaxing can be a challenge if, for example, the tutorials made by a community member doesn't cover something. It's not easy to look on google, either, because those programs weren't designed with map gaming in mind.

Tiled on the other hand was built with pre-rendered mapping in mind, but seemed intimidating until this tutorial came along. I'm still on the fence about parallaxing my own maps, simply because the task seems daunting, but this is definitely a start in the right direction.

 

I've got to agree I thought doing it within the engine was what I'd be using but after seeing this in action it may have just changed my mind. Thanks ever so much for taking the time to do this

 

I had given up on pre-rendered mapping due to it being so time consuming. But I've been messing with Tiled for a few hours now and it really does make it so much more convenient. Thanks a lot for the tutorial.

 

I think why it seems more inviting than other programs, even while other programs can do the same thing, is the mindset this was built with parallaxing in mind, so the tools will benefit you in some way. EB can use this as an example for their next maker, and maybe even tailor it to so events work better as a result. Until then, I think I'm going to test this out on a small project.

 

This is how the RPG Maker series map maker should be. At this point, we shouldn't be limited by layers at all, just allow us to make our own D:

 

I had already been using this for a while, but I still have one question.

How does the "Object" feature work?

 

I was thinking of making a TileD -> Ace map conversion, but I see that isn't really a necessity is it? Great tutorial prexus, very detailed. Might I add that with a simple edit to any existing pixel movement script, this could be pixel based collision? :3

 

That would be very cool. Being forced to use the collision detection of the maker itself with pre-rendered mapping is what held me back from doing it (And having to put even more time into mapping, altho good maps will always need their time.).

Thanks for this nice, little piece of Wisdom Prexus. I am pretty sure if I can get hold of 2 or 3 Scripts to allow pixel movement with a nice collision system I'll try Tiled for sure

 

While I like the idea of this, the fact that you have to make the whole ground layer from scratch is annoying. It just feels so fiddly and time consuming to do all the edges to the paths and the like. If there was a way to make the ground layer in the game editor where the autotile works and then import it into Tiled I would love to know about it, because them all my frustrations would be over.

I love the layers and stuff, and I would love to able to use this more because it is so much easier than paralaxing in gimp from the tilesets, and then having to set passability and the like.

EDIT: Took some time to mess about some more, and I still have to say, the lack of autotiles bugs me still, but I sort of get the idea now, still takes too long to make the ground layer paths and stuff though.

 

There are scripts that involve a map to png process (Omegas and Woratana), so basically you can draw the base of your map with auto-tiles and then port it to a png image to work on with Photoshop, etc.

http://www.rpgmakervxace.net/topic/669-map-saver-script-conversion-request/

The problem you come across, though, is that the end result of your map (including auto-tiles) is not what you start with. I've made plenty of forest maps where by the end I've added, removed, changed grass, water, and dirt tiles that would be a pain to try and port back and forth each time. At least this way, you can create the ground tiles as one layer and keep adding or changing them if needs be all through the program.

 

Actually, Tiled has a way you can do that.

 

Maybe add this to your tutorial ?

http://rpgmaker.net/scripts/207/

Because i think you can import map to Tiled but it's a script for Rpg maker Xp.

Maybe someone could convert it for other support ?

 

We'll this really helps with parallax mapping. Thanks a lot!

 

I have a feeling I may have more flexibility with doing this in photoshop still, but i'll give it a try. Seems like a really nice piece of software for people new to Parallaxing, I look forward to trying it, good work.

 

Using Tiled instead of Photoshop lets you keep in mind the restrictions of RM* regarding tile-based movement. It's really easy to see where you can move, and where you can't, and what needs to overlap the hero, and what doesn't, and so forth.

This isn't meant as a replacement for Photoshop (or any other image editor) for pre-rendered mapping but as an alternative for people who don't feel the need to make their maps super-non-tiled or use filters, but want to add additional diversity to the... for lack of a better word... blockiness of small tiles. (and the limits of VX/vxAce's 64x64 autotiles.)