Tile Editor

Tile Editor  helps you create your world tile by tile. Your imagination is your only limit. All of the world visuals are created here. Now if your map already had something on it, you can log into your client and test it out to get a feel for the engine. You should also mess around with this window because you are going to be using it often, and will need to get a feel for it so it becomes almost second nature. But for the purpose of the tutorial I am going to click the "clear map" button this will erase all of the visual based tiles from the map. Here is a brief explanation of all of the functions that are in the window in front of you.



I am sorry it is a little hard to read, but I will try to improve also they are explained below. Back to the tutorial. Once you have cleared the visual layers on the map it is time to clear the events as well. You will notice words / letters on the screen. These events or attributes are the heart of your game since G2D has a big heart it reflects on the amount of attributes / features it has. Combining the attributes correctly can result in a mesmerizing game. So lets click on the Attributes button which is above the tile preview window. Clicking that will open another window that will be explained further along in this tutorial but for now the only thing that you need to do is click the "I" button then "Clear All attributes" button. Then you need to click the "II" button and "Clear All Attributes" same goes for "III".



Now that our map is clear we are ready to start making our very own game. Lets switch back to the tiles window by clicking the Tiles  button next to the Attributes  button. And then lets select the ground  layer. Now in the tile selection menu click on a tile that resembles ground then click on the Game Preview Screen  and notice that the tile is placed on the ground. By holding the left mouse button and dragging it across the screen the tile gets placed down automatically. Doing this for all of the tiles on the map will take a long time so lets just click the Fill Map button and then click Yes to confirm. Now the whole map is filled with that one tile.

<span class="TextRun SCX262704645" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX29817173" style="font-size: 11pt; font-family: Calibri,Sans-Serif;">But what if the tile you want to select is larger then 32x32 pixels? You simply hold shift and click on the <span class="TextRun SCX29817173" style="font-weight: bold; font-size: 11pt; font-family: Calibri,Sans-Serif;">Tile Selection Screen <span class="TextRun SCX29817173" style="font-size: 11pt; font-family: Calibri,Sans-Serif;"> and drag your mouse highlight more area.



<span class="TextRun SCX97125850" style="font-size: 11pt; font-family: Calibri,Sans-Serif;">The <span class="TextRun SCX97125850" style="font-weight: bold; font-size: 11pt; font-family: Calibri,Sans-Serif;">Mask <span class="TextRun SCX97125850" style="font-size: 11pt; font-family: Calibri,Sans-Serif;">layers allow you to add multiple tiles on top of one another without affecting the layer below it, this allows the user to create more detailed maps. The mask and ground layers are shown below the player sprite. The <span class="TextRun SCX97125850" style="font-weight: bold; font-size: 11pt; font-family: Calibri,Sans-Serif;">Frindge <span class="TextRun SCX97125850" style="font-size: 11pt; font-family: Calibri,Sans-Serif;"> layers will be placed over the player sprites creating an effect of a tall object where the player goes behind the object.

<span class="TextRun SCX97125850" style="font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX79432773" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">You will notice that each layer but the ground has an <span class="TextRun SCX79432773" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Anim <span class="TextRun SCX79432773" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">button next to it. These buttons work the same as the button left of it but when placed on the ground they will flicker this is to create an water or fire effect or any type of movement that can be simulated by two frames. How it works is that if you place a water tile on the floor with the waves of water going one way and the you place an Anime tile with the wave of water going the other way it creates an effect that looks like waves are going back and forth.

<span class="TextRun SCX79432773" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX246711063" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Now lest click the <span class="TextRun SCX246711063" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Auto-Tile <span class="TextRun SCX246711063" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">button. Notice that when clicked it opens tile set 8 and blocks you from changing the tiles sets.

<span class="TextRun SCX246711063" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX20126375" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">This is because auto tiles work only with special kind of tile sets that calculate your mouse movement with the surrounding tiles to place a tile in the right spot. Clicking on the tile in the <span class="TextRun SCX20126375" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Tile Selection Screen <span class="TextRun SCX20126375" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> you will notice that it a large rectangle appears similar to when you click shift and drag your mouse this is because the editor needs that whole set to create a smooth tile placement based on your mouse.

<span class="TextRun SCX20126375" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX221553951" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Now select a <span class="TextRun SCX221553951" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Mask <span class="TextRun SCX221553951" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> layer and right click on the <span class="TextRun SCX221553951" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Game Preview <span class="TextRun SCX221553951" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> window don’t let go of the mouse button just drag your mouse across the map. You will notice that the tile set flows like a river behind your mouse. This is used to make everyone's lives easier and to create a detailed world.

<span class="TextRun SCX221553951" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<p style="font-weight: normal; font-style: normal; vertical-align: baseline; font-size: 8pt; font-family: Segoe UI,Tahoma,Verdana,Sans-Serif; background-color: transparent; color: windowtext; text-align: left; text-indent: 0px;"><span class="TextRun SCX201948341" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">To move exit out of the Auto Tile mode you will need to click the <span class="TextRun SCX201948341" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Auto-Tile <span class="TextRun SCX201948341" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> button again. Here is a more advanced tutorial that will show you how to create your own auto tiles sets. <span class="EOP SCX201948341" style="font-size: 11pt; font-family: Calibri,Sans-Serif;"> <p style="font-weight: normal; font-style: normal; vertical-align: baseline; font-size: 8pt; font-family: Segoe UI,Tahoma,Verdana,Sans-Serif; background-color: transparent; color: windowtext; text-align: left; text-indent: 0px;">http://devogeninteractive.com/forum/index.php/topic,1913.0.html

{C}<span class="TextRun SCX201948341" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Lets move on and click the Lighting button. Notice that another special tile set will appear in the Tile Selector Window. Lets shit right click and drag the entire withish faded circle.



<span class="TextRun SCX36207244" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">And now place it somewhere in the <span class="TextRun SCX36207244" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Game Preview <span class="TextRun SCX36207244" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> window. Instead of the tile set appearing you will see yellow "L" characters. This indicates where you placed your light tile.



<span class="TextRun SCX263964387" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Now in the game when you login and the night falls you will see the bright circle giving effect that the map is lit up. Adding objects like a fire or a light pole makes it appear as if that’s the source where the light is coming from.

<span class="TextRun SCX263964387" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX254373550" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Zoom <span class="TextRun SCX254373550" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> <span class="TextRun SCX254373550" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">button opens up a neat tool that allows the user to zoom on certain objects this is useful with mapping especially if you are working with pixel tile sets you can alight everything faster and you don’t have too strain your eyes trying to place a small object on the map.

<span class="TextRun SCX254373550" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<p style="font-weight: normal; font-style: normal; vertical-align: baseline; font-size: 8pt; font-family: Segoe UI,Tahoma,Verdana,Sans-Serif; background-color: transparent; color: windowtext; text-align: left; text-indent: 0px;"><span class="TextRun SCX8751375" style="font-weight: bold; font-size: 11pt; font-family: Calibri,Sans-Serif;">Map Assist <span class="TextRun SCX8751375" style="font-size: 11pt; font-family: Calibri,Sans-Serif;"> opens this awesome window, that allows you to toggle between layers, day and night, npcs, items and other maps if they are connected to your main map. (That will be explained later) <span class="EOP SCX8751375" style="font-size: 11pt; font-family: Calibri,Sans-Serif;"> <span class="TextRun SCX8751375" style="font-size: 11pt; font-family: Calibri,Sans-Serif;">This is extremely helpful if you have a ton of detail on the map and you want to make it simple to see what actually belongs to which layer, because it does get a little confusing. Or if you simply just want to test out your lighting tile set you just placed on the floor. Spend some time toggling on and off layers and day and night.

<span class="TextRun SCX8751375" style="font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX59300988" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Tile Info <span class="TextRun SCX59300988" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> button as mentioned above displays all of your tile information that the player sprite is standing on. You can also clear the information from the tile.

<span class="TextRun SCX59300988" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX8299514" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">The <span class="TextRun SCX8299514" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Copy Tile <span class="TextRun SCX8299514" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> button will copy the tile that you click on in the Game Preview window as long as you have the appropriate layer from which you want to copy the tile from. So lets say you placed a flower pot as a mask layer and couple of minutes later you want to use that same flower pot but instead of searching trough all of the tile sets you can just click the mask layer and then click the <span class="TextRun SCX8299514" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Copy Tile <span class="TextRun SCX8299514" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> button then simply click the flower pot and now you have selected a flower pot will appear under your mouse.

<span class="TextRun SCX8299514" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX108503732" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Map Grid <span class="TextRun SCX108503732" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> simply toggles a grid on the map to help with alignment and mirroring / scaling the map. If you already have a map planned out you can brake up the map into 32x32 squares depending on your map size and work with your planes to create the exact replica.

<span class="TextRun SCX108503732" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX187253238" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Now lets use the knowledge you just learned and some imagination to make your first map layout.

<span class="TextRun SCX187253238" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">

<span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Your map will probably look a whole lot better than mine. But once you have a basic layout notice that it still doesn’t feel right. You can go trough solid objects there isn't really much you can do and there are no events which the player can interact with. This is where the <span class="TextRun SCX136065566" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Attribute <span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> menu will come in handy. Lest save the map by clicking Save map on the <span class="TextRun SCX136065566" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Tile Editor <span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">. Saving the map will open <span class="TextRun SCX136065566" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Map Assist <span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">click <span class="TextRun SCX136065566" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> Map Editor <span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">in <span class="TextRun SCX136065566" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> Map Assist <span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">window and this time lets click the <span class="TextRun SCX136065566" style="font-weight: bold; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;">Tile Attributes <span class="TextRun SCX136065566" style="font-weight: normal; text-decoration: none; font-size: 11pt; font-family: Calibri,Sans-Serif;"> button.

Tutorial Index

 * 1) Website
 * 2) The Engine
 * 3) Download
 * 4) Vocabulary
 * 5) Getting Started
 * 6) Server/Client Setup
 * 7) Client Basic Controls
 * 8) XGE Setup
 * 9) XGE Guide
 * 10) Map Editor
 * 11) Tile Editor
 * 12) Tile Attributes