 |
|
 |
|
Index
TaT Tile Map Editor is designed to deal with projects. A project usually contains all the maps for a game but a project can also be, for example, a single level for a game. Select "New project" from File-menu to create a new project. A Create new project... window will appear (figure 1). A project must have a name. Project author and project description are optional. Project name, author and description can be modified later at the project management window. You can also specify the default tile size. It won't limit the project for a single tile size but acts as a default setting when creating new tile palettes and tile maps.
There are three kinds of tiles in TaT Tile Map Editor: tiles with single image, animated tiles and tiles without any image. Tiles with single image and animated tiles must be created to tile palettes. Tiles without images are automatically created when you add a collision zone or a code to empty space in a tile map. Creating tiles and palettes is very easy.
There are three kinds of palettes in TaT Tile Map Editor: palettes for single image tiles, palettes for animated tiles and palettes for structures. Each of the palette types have their own window where the actual palette can be selected with buttons (figure 2). The palette names appear on the right side of the palette window.
Creating a palette for single image tiles
A palette for single image tiles can be created by selecting "New tile palette" from the Project menu. A window for creating a palette for single image tiles will appear (figure 3). Every palette must have a distinctive name. Also, a size for the tiles is required. Images for tiles can be added with "Add images" button. Selected images will appear to the table at the bottom of the window. On the table there are columns for image file name, image width, height and for information about the image transparency (is it opaque or does it have bitmask or alpha channel transparency). If the image is exactly the size of the set tile size, the name of the image file appears black. If the image size is divisible by the tile size, the name if the image file appears yellow. If the image size is indivisible by the tile size, the file name appears red. There are some options for what you can do to the images that are not the size of the tiles (images appearing yellow or red in the table). You can scale the images to the tile sizes (Scale when needed), you can reject the images (Reject wrong sizes) or you can split the images to the tile sizes (Split). Split is the default option and it is intended for tile set images (image that contains many tile images in it). There is also an option for making structures. It does the same thing as Split but in addition it also makes structures from the tiles. Once the OK button is pressed, the selected scaling method will be applied to all the images whose name appears yellow or red on the table, and the palette for single image tiles is created.
Creating a palette for animated tiles
A palette for animated tiles can be created by selecting "New palette for animated tiles" from the Project menu. A window for creating a palette for animated tiles will appear (figure 4). Like when creating a palette for single image tiles, a distinctive name is needed for the palette. There is a table at the bottom of the window. It will list all the animated tiles that the palette contains. The table has columns for tile name, frame count and total duration of the animation. To be able to create a new palette, at least one tile must be made. An animated tile can be created by clicking the "Add tile" button. It will open a window for creating an animation (figure 5).
Creating an animation for a tile
Frames for the animation are selected the same way as images for single image tiles. There is, however, one exception. Image scaling must be selected before selecting an image. Image for the animation frame(s) is/are scaled/splitted automatically after selecting an image so that settings for a frame could be applied. The frames will appear on the table at the bottom of the window. Buttons on the left side of the table can be used to set the frames to their correct places. The last button can be used to copy the frame to a new frame so you can use a single image on a multiple frames. Duration (in milliseconds) of the frame can be set with the buttons at the duration cell on the table. You can also write the duration to the cell but the changes will become effective only after you press Enter button on your keyboard. The window has an Animation preview section. You can use it to preview the animation you're making. Possible changes to the animation cannot be seen when the animation is running, as the animation is created with the information on the table after the play button is pressed. The FPS slider won't affect the animation in any way. It is only used to control the preview frame rate so you can see how the animation looks on low frame rates.
Creating a palette for structures Structures consist of tiles. For example if you have a tree that is made from three tiles, you can made a structure for the whole tree. That way you don't have to place three tiles manually to the map when making a new tree. You can also make single tile structures that have codes or collision zones defined in them. To create a palette for structures use the area selection tool to select an area from the map. Press the right mouse button over the selected area and a menu appears with "Create new structure palette" and "Create new structure to existing palette" options. The first one creates a new palette and the selected area as a structure to that palette and the latter creates a structure from the selected area to any of the existing structure palettes. After the selection, a structure palette / structure creating window appears. There you can give a name for the structure palette and to the structure.
Once you have created some tiles, it is time to create a map. A map can be created by selecting "New tile map" from the Project menu. A window for creating a map will appear (figure 6). A map requires a name, map size (how many tile rows and how many tile columns) and tile sizes. Map size can be changed later at the Map menu by selecting Resize. You should only use ASCII characters for map name. Map name will also be the the name of the map file (with xml extension) and because Java uses UTF-8 encoding for the file names when compressing zip file, it may not be possible to extract map files with correct names on some programs.
There are several tools that can be used to make a map. Figure 7 will show the tools. The tools will appear on the left side of the TaT Tile Map Editor window. The tools are from the top to bottom: Tile drawing tool, Tile eraser tool, Tile fill tool, Tile picker tool, Area selector tool, Map zooming tool, Tile rotator tool Collision zone tool and Code tool. Tile drawing tool can be used to "draw" tiles and structures to a map. Tile drawing tool draws the currently selected tile or structure by pressing left mouse button. When pressing right mouse mutton, the drawing tool can be used as an eraser. Tile eraser tool removes a tile from the map. If the eraser is used on area selected with the area selection tool, the whole area will be removed. Tile fill tool fills an area with selected tile. The area can be an area selected with area selection tool but the area can be any area surrounded by tiles (or map edges). Tile picker tool can be used to pick a tile from a map instead of selecting a tile from a palette. Area selection tool can be used to select tile areas. The selected areas can be moved with dragging the mouse. Also cut, copy and paste functions can be used like on any paint program. Area selection tool is also used to create structures. By clicking right mouse button over selected area, a menu will appear where you can create a structure palette or a structure to any existing structure palette. Map zooming tool can be used to zoom the map. Left mouse button will zoom in and right mouse button will zoom out. Map will be centred to the location of mouse cursor when either of the buttons is pressed. Tile rotator tool can be used to rotate and/or flip a tile. Collision zone tool can be used to add collision zones to a tile. Collision zone tool have several functions that can be accessed by pressing the arrow on the right side of the collision zone button. The functions include collision zone eraser, collision zones for tile corners and collision zone for the whole tile. The right mouse button can always be used as a collision zone eraser if any of the collision zones is selected. If collision zones are added to an empty area not containing any tile, a tile without image is created. This tile can be used, for example, as an invisible tile or simply as an collision zone on separate collision layer. Code tool can be used to add codes to a tile. Codes can be made at Project management window. Codes can be almost anything like enemies, goods to collect, scripts or more advanced collision zones. It's completely up to the game programmer. TaT Tile Map Editor supports up to two codes per tile. Like collision zones, the codes can also be added to empty map areas not containing any existing tile. When code tool is used by pressing right mouse button, the currently selected code will be removed from the tile.
Every map has its own editor window (figure 8). Name of the map appears on the title bar of the window. TaT Tile Map editor supports layers. On the bottom right corner of the editor window are five buttons (from left to right): Create new layer, Copy layer to new a layer, Move layer up, Move layer down and Delete layer. TaT Tile Map Editor supports layers up to 100. Above the buttons are tabs for some options. From background tab you can change the map background color and grid (shows the tile edges) settings. The map background color will be saved to map file so it is not limited to editor background only. Animation tab has animation controls so that you can test how the animated tiles looks on a map. Collision tab has settings for collision zone appearance to make the map editing as easy as possible. You can change the collision zone color and transparency or you can hide the collision zones completely. Code tab has similar settings for codes. You can also set the code font and size to your liking. Above the tabs are a table for layers. From the table you can select a layer to be edited. You can also hide or lock a layer. If a layer is hidden, it will not be displayed on the editor section of the window. If the layer is locked, it cannot be edited. Above the table is a slider to set the layer transparency. The setting won't be saved to a map file, as it is only meant to make the map editing easier (so you can see both bottom and top layer).
Project management window (figure 9) can be displayed by selecting "Project management" from Project menu. Project management displays information for all the maps, palettes, tiles, structures and codes from the project. Code groups and codes can be created from the project management window and the project, map and palette names can be edited. Hidden palettes and maps can be set visible from the project management (and from project menu). Project management window allows you to add new tiles to palettes and to create new palettes and maps.
TaT Tile Map editor supports custom codes. The codes can be anything, enemies, goods to collect, scripts etc. All the codes are created and managed from the project management window. As there may be a lot of different codes, the codes are created to groups. Code groups can be created from the project management window by going to the Codes section in the project tree and clicking the "New group" button. A window for creating a code group will show up (figure 10). You should give a descriptive name for the code group. You can also write an description but it is optional. The created code group will appear to the project tree under the Codes section. Open the Codes section and click the name of the code group. You will now see some information about the code group on the right side of the project management tree. Click "New code" button to create a code to a code group and a window to create a code will show up (figure 11). A code must have the actual code and a name. Description can also be given but that is optional. The code is the actual code to be saved to the tileset.xml file. TaT Tile Map editor handles codes as strings but you should use codes that are easy to parse from the tileset.xml file. The code name is used to make the code handling easier. It will appear on the code tool so you don't have to remember the actual code if your using, for example, integers as codes. You can place up to two codes per tile. It is up to you if you want to use distinct layer for codes or if you want to place the codes directly to visible tiles. Codes can be removed from the project management window if they are not used in any of the project maps.
TaT Tile Map Editor lets you easily create parallax backgrounds for games (as long as you want to create parallax backgrounds with tiles). Parallax utility window (figure 12) can be displayed by pressing "Parallax utility" button at the lower right corner on the main window of TaT Tile Map Editor. At the center of the parallax utility window are to tables. The table on the right side contains all the maps in the project. The left table has maps selected for a parallax background. Maps can be added to left table by choosing maps from the right table and by clicking the selection button on the right side of the right table. There are several settings for a parallax layer (maps on the left table). Starting coordinates sets the starting point (figure 13) of the parallax layer. Custom starting coordinates can also be set.
Scrolling settings specify if the layer is wrapped around X and/or Y axis. If it is, the layer graphics starts again after it has come to an end. If the wrap around settings are disabled, the parallax layer just stop when it comes to its end. X and/or Y axis movement can be inverted. Speed setting sets how fast the parallax layer moves. Speed is set in ms / pixel, which means how many millisecond it takes to move the layer a single pixel to the direction of the movement. The speed setting is also displayed as how many pixels the layer moves per millisecond. Third reading tells how many pixels per frame the parallax layer moves. That reading depends on the layer speed and the animation frame rate. The lower the reading, the smoother the animation will be. Parallax setting can be saved to a preset. Parallax presets are saved to a parallax.xml file so they can be used on games. On the top of the parallax utility window are graphics setting for parallax animation. Parallax animation can be played on full screen and in window mode (window mode is highly recommended because of full screen issues with Java).
TaT Tile Map Editor project file To be able to load the maps from TaT Tile Map Editor to your games, you naturally need to know how the maps are saved. TaT Tile Map Editor saves the project as a normal zip file. Inside the zip are four kinds of xml files and a directory (images) where all the tile images are. Project.xml saves project information for TaT Tile Map Editor. It is meant only for the editor and you don't need it to load maps into games.
The tiles and animations used in the project maps are defined in tileset.xml (figure 14) and in "tilesetFile" element. TilesetFile element has three attributes: version (file version), animations (animation count) and tiles (tile count). There are "tilesets", "tileAnimations" and "tiles" elements nesting inside tilesetFile element in that order. Tile set images (images that have more than one tile image or animation frame in them) are defined inside the "tilesets" element (<tilesets> and </tilesets> tags). Inside "tilesets" element are single line "tileset" elements that have file, tileWidth and tileHeight attributes. Tile animations are defined inside the "tileAnimations" element (<tileAnimations> and </tileAnimations> tags). Single animation is defined in "animation" element nesting inside "tileAnimations" element. The "animation" element have three attributes: name, width and height. The "animation" element can have two kinds of frame elements nesting inside it. Single line "frame" element defines a frame that is not part of any tile set image. Single line "tilesetFrame" element defines a frame from tile set image. It has "posX" and "posY" attributes that defines the upper left corner of the frame inside a tile set image. Both of the frame elements have common attributes: index, file and duration. Index is the frame index number and file is the image or tile set image for the frame. Duration attribute contains the duration of the frame in milliseconds. An animation can have both type of frames in it. All the tiles are defined inside "tiles" element (<tiles> and </tiles> tags). There are four kind of tile elements "animatedTile" element for animated tiles, "tilesetTile" element for tiles made from tile set images, "imageTile" element for tiles made from single image and "nullTile" element for tiles without image and animation. All the tile elements have three attributes: "id", "width" and "height". Id defines and ID number for a tile. Map files uses these IDs. Tile elements have nesting single line elements inside them. The "collision" element have an area attribute. It defines the collision zone and it can be "none", "full", "topLeftCorner", "topRightCorner", "lowerRightCorner" or "lowerLeftCorner". The "rotate" element have angle attribute. It can be "0", "90", "180" or "270" degrees. The "flip" element have two attributes: "vertically" and "horizontally" can be "true" or "false". The "code" element also has two attributes: "first" and "second" and their values can be anything as the codes are created by the user on project management window. Every tile element except the "nullTile" element has also one private single line element. The "animatedTile" element has "tileAnimation" element nesting inside it. The "tileAnimation" element has a "name" attribute that defines the name of the tile animation. The "tilesetTile" has "tilesetImage" element nesting inside it. The "tilesetImage" element has three attributes: "file" attribute tells the tile set image name and "posX" and "posY" attributes defines the location in the tile set image. The "imageTile" element has "image" element nesting inside it and it has "file" attribute. The "file" attribute tells the image file name for the tile image.
All the maps have its own file (figure 15). File name is name of the map + .xml extension. All the map data is defined inside a "TilemapFile" element, which has a "version" attribute. It tells the map file version. Definition for the actual map starts at the "tilemap" element. It has "name", "backgroundRGB", "layers", "rows", "columns", "tileWidth" and "tileHeight" attributes. The "name" attribute tells the map name, "layers" attribute tells the layer count, "rows" and "columns" attributes tells the size of the map and the "tileWidth" and "tileHeight" attributes tells the tile sizes. Nesting inside the "tilemap" element are "layer" elements. The "layer" element have two attributes: "name" attribute contains the layer name and the "index" attribute tells the layer index. Index 0 is the bottom layer. Inside the "layer" element is nesting a "data" element (<data> and </data> tags). The actual map data is tile ID numbers separated with a comma. Tile IDs are defined in a tileset.xml. When loading a map, the length of a row must be read from "columns" attribute on "tilemap" element as the map data rows are not the same as tile rows in a map.
Parallax presets created in the parallax utility are saved to a parallax.xml (figure 16). Definitions for the parallaxes start on the "parallaxFile" element. It has two attributes: "version" and "maps". The "version" attribute tells the file version number and the "maps" attribute tells the parallax map (or parallax background etc.) count. Inside the "parallaxFile" element are nesting "parallaxMap" elements. Each "parallaxMap" element defines a parallax map. The "parallaxMap" element has two attributes: "name" and "layers". The "name" attribute tells the parallax map name and the "layers" attribute tells the layer count. Nesting inside the "parallaxMap" elements are "parallaxLayer" elements. Each "parallaxLayer" element defines a layer for the parallax map. The "parallaxLayer" element has two attributes: "index" and "map". The "index" attribute tells the layer index. Layer 0 is the bottom layer. The "map" attribute tells the map (name of a map) to be used as a parallax layer. The "parallaxLayer" element has two single line elements nesting inside it. The "layerPlacement" element has three attributes: "location", "customX" and "customY". The "layerPlacement" attribute tells the starting position of the layer (figure 13) and the value is "topLeftCorner", "lowerLeftCorner", "topRightCorner", "lowerRightCorner" or "custom". The "customX" and "customY" attributes tells the starting coordinates when custom coordinates are used. The "layerMovement" element has five attributes: "speed", "wraparoundX", "wraparoundY", "inverseX" and "inverseY". The speed attribute tells how many milliseconds it takes to move the layer a single pixel. The value is stored as a float. The "wraparoundX" and "wraparoundY" attributes can have "true" or "false" values. They tells is the layer wrapped around X or Y axis. The "inverseX" and "inverseY" attributes can also have "true" or "false" values. They tells is the layer movement inverted.
Because TaT Tile Map Editor is written in Java, there are some memory related things you should know about. Java programs cannot just take advantage of all the system memory. By default Java programs use 64MB of system memory. In most cases this is not enough for TaT Tile Map Editor. To allocate more memory to TaT Tile Map Editor, you need to start it from the command line: "java -Xmx128M -jar TileMapEditor.jar" where the -Xmx***M is the memory allocated for the Java program (on top of that the Java virtual machine takes about 17MB). If you're using Windows you can run the editor.exe with -Xmx***M parameter. TaT Tile Map Editor has a memory tool (figure 17) that tells the used memory amount. If you are running out of memory, try to press the wastebasket button to run Java Garbage Collector. If that won't do the trick, you just have to allocate more memory to TaT Tile Map Editor as described above. IMPORTANT! You should never allow the memory to be depleted. It will cause the TaT Tile Map Editor to malfunction and you may not even be able to save the project.
File menu combinations
Edit menu combinations
Project menu combinations
Map menu combinations
Desktop combinations:
|
