- Joined
- Mar 25, 2012
- Messages
- 90
- Reaction score
- 58
- First Language
- English
- Primarily Uses
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.
...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.
[IMG]http://i.imgur.com/v9IyU.png[/IMG]
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.
[IMG]http://i.imgur.com/v9IyU.png[/IMG]
Above is the GUI. Like most software, File -> New is a great place to start.
[IMG]http://i.imgur.com/tg1Ic.png[/IMG]
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.
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.
[IMG]http://i.imgur.com/oJLCB.png[/IMG]
This is what a fresh map looks like, but there isn't much to go on here.
[IMG]http://i.imgur.com/1NRAo.png[/IMG]
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.
[IMG]http://i.imgur.com/SlBBR.png[/IMG]
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.
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.
[IMG]http://i.imgur.com/wcnA0.png[/IMG]
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.
[IMG]http://i.imgur.com/u6w6L.png[/IMG]
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.
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.
[IMG]http://i.imgur.com/zkqNT.png[/IMG]
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.
[IMG]http://i.imgur.com/zkqNT.png[/IMG]
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:
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!
[IMG]http://i.imgur.com/tU534.png[/IMG]
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.
[IMG]http://i.imgur.com/38thx.png[/IMG]
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.
[IMG]http://i.imgur.com/XPLiI.png[/IMG]
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.
[IMG]http://i.imgur.com/c8ZGq.png[/IMG]
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.
[IMG]http://i.imgur.com/KQDj1.png[/IMG]
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.
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.
[IMG]http://i.imgur.com/Ioa2y.png[/IMG]
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.
[IMG]http://i.imgur.com/gAkfv.png[/IMG]
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.
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.
[IMG]http://i.imgur.com/cGGyq.png[/IMG]
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:
[IMG]http://i.imgur.com/GCkKT.png[/IMG]
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!
[IMG]http://i.imgur.com/b3mJY.png[/IMG]
[IMG]http://i.imgur.com/b3mJY.png[/IMG]
