Adding new tiles: Difference between revisions

From PZwiki
(Further information added on the subject.)
Line 1: Line 1:
This page attempts to run through the key processes and methods necessary for both creating new tiles for modding PZ, and the physical act of getting them playable in the game.
This is slightly, but significantly different for 0.2.0+ as compared to 0.1.5 and earlier. This page describes the method for 0.2.0+.
== Drawing new tiles ==
== Drawing new tiles ==
==== Programs ====
==== Programs ====
Line 7: Line 11:
I'm sure there are others, but ideally the program will have the capability of working with layers, as this gives lots of very helpful functionality once you figure out how it all works. Ultimately so long as you can save files as 32-bit .png files, you are good to go.
I'm sure there are others, but ideally the program will have the capability of working with layers, as this gives lots of very helpful functionality once you figure out how it all works. Ultimately so long as you can save files as 32-bit .png files, you are good to go.


[http://www.paint.net Paint.NET]
* [http://www.paint.net Paint.NET]


[http://www.gimp.org Gimp]
* [http://www.gimp.org Gimp]


Most of the instructions written down here specifically refer to [http://www.paint.net Paint.NET] processes, as this is the tool the author primarily uses. Most such programs should have similar functions amongst Photoshop / [http://www.gimp.org Gimp] etc. although they might be named differently.
Some of the instructions written down here may specifically refer to [http://www.paint.net Paint.NET] processes, as this is the tool the author primarily uses. If in doubt, most such programs should have similar functions amongst Photoshop / [http://www.gimp.org Gimp] etc. although they might be named differently.


==== Working with a Spritesheet ====
==== Working with a Spritesheet ====
Line 27: Line 31:
== Adding tiles into Tiled/Tilezed ==
== Adding tiles into Tiled/Tilezed ==


Adding Tiles in to Tiled / TileZed is pretty straightforward. Click 'add tilesheet', find the sprite-sheet that you want to input (this should be located in your master mapping directory - see How To Set Up Tiled / TileZed) then modify the dialog box that pops up to show the correct dimensions for PZ tiles (128 x 64).
[[File:New_tileset.png|thumb|right]]Adding Tiles in to Tiled / TileZed is pretty straightforward. Click 'Map->New Tileset' on the menu bar, find the sprite-sheet that you want to input (this should be a .png file located in your master mapping directory - see How To Set Up Tiled / TileZed) then modify the dialog box that pops up to show the correct dimensions for PZ tiles (128 px high x 64 px wide) and the correct name for the group of tiles. This name should match the filename, and it is suggested that the naming format as utilised by the main game is generally followed (in the screenshot to the right we choose TileObjectsFiat500), for ease and all round understanding.
 
Note this is all you need to do to get your tiles in to Tiled / TileZed, and place them graphically within the Tiled-based engine. At this stage all we are doing is stamping a load of reference numbers around a large array of information (i.e. the map) and the game would not necessarily know what to do with this - until we take it a step further (see 'Editing tiledefinitions.tiles' below).
 
For full TileZed functionality, each tileset should be provided with a partner .xml file describing what the default layer is for each sprite within the sheet, and this should be located in our 'Master Mapping Directory' as described earlier.
 
==== TileZed XML Data ====
 
The following is the abridged version of TileOffice.tilelayers.xml, used to define the default layers for the sprites contained within the vanilla tileset TileOffice. For your own tilesets, simply create a new .xml file called TileSheetName.tilelayers.xml and follow the same format. For default layers please refer to the existing tilelayers .xml files contained within the maptools download.
 
<pre><?xml version="1.0" encoding="UTF-8"?>
<tileset columns="16" rows="8">
<tile id="0" layername="Walls"/>
<tile id="1" layername="Walls"/>
....
<tile id="96" layername="Furniture2"/>
<tile id="97" layername="Furniture2"/>
</tileset>,</pre>


Note the index number relates to the specific cell within the tileset, reading from zero (the first, top left tile) across to index 7 (the last tile on the first row) and then down through the tiles in a similar fashion. In this case, TileOffice finishes about three quarters of the way through a tilesheet with up to 128 tiles, and therefore we stop at index 97.
Once we have done this, TileZed will attempt to locate the tiles on the right layer, increasing the efficiency of map-making.
For the avoidance of doubt, this functionality is not available in Tiled.


== Editing tiledefinitions.tiles ==
== Editing tiledefinitions.tiles ==


TO BE CONFIRMED
Take the tiledefinitions.tiles file, located within Project Zomboid \media\. directory, and place it in your 'Master Mapping Directory'.
 
Using MappingTools.exe, we can now define the properties of all our new tiles, by selecting Tileset Manager within this.
 
The Tileset manager allows you to modify a number of properties for the individual tiles, import new tilesets, and save the resulting information back down in to your re-defined tiledefinitions.tiles file.
 
For PZ to understand the concepts you have put forward for your own tiles, it needs an updated tiledefinitions.tiles file. Simply save over this, and add it back in to the \media\. directory.


== Adding tiles into the game ==
== Adding tiles into the game ==


TO BE CONFIRMED
[[File:Tileset_flowchart.png|centre]]
 
Above is a concise flowchart trying to identify all the key steps to get the information in to PZ. We have arrived now at a stage where - as far as TileZed is concerned, we have created a complete map. We have also defined the properties of each of the individual tiles, so that PZ knows that a container is a container, a light is a light, and a wall is a wall.
 
What is left is actually working towards getting the graphical information in to a format that PZ understands, and can render in to the game.
 
==== Cutting up the Sprite Sheet ====
 
If you are using Paint.NET, this bit is a doddle.
 
[http://forums.getpaint.net/index.php?/topic/17516-sprite-animation-helper-v-086-updated-may-1-2012/ Animation Helper] - plugin for Paint.NET
 
The above tool allows for easy slicing up of the tilesheet .png file in to the constituent parts with the click of a button. Follow the instructions in the link to install the helper, and then use it to export all your relevant files in to a dedicated directory where you wish to work with all your tiles.
 
If you intend on putting together a few seperate tilesheets, feel free to put them all together in the same folder. (e.g. say you have built some new walls, some new furniture, some new objects etc.).
 
If using the Paint.NET Animation Helper, always remember to suffix the filename with an underscore (e.g. TileObjectsFiat500_). This then gives each tile an index that the game is happy to work with. The filename is important, and should match that used elsewhere.
 
I'm sure there are other easy ways to do this with other programs, or alternatively for those with a masochistic streak simply crop the tilesheet a few hundred times and individually save a load of 64x128 .png files.
 
With this, we have a whole load of files, ready for bunching up in to a nice, compact, memory saving sprite sheet, getting rid of all the blank spaces.
 
==== Packing the Tiles together ====
[[File:Sprite_sheet_packer.png|thumb|right]]
At this stage we use the Sprite Sheet Packer.exe, provided with the modding tools download.
 
Simply open it up to be presented by a dialog box.
 
'Add Images' and select all the tiles you want to use within this spritesheet.
 
Note, they should all be able to fit within the set bounds of the spritesheet (e.g. 1024x1024), and most of the redundant space around the tile will be ignored (within reason). For this reason you can get far more telephones, hamster wheels and microwaves on a single spritesheet, than you can e.g. walls or large items of furniture.
 
Click the little button next to 'Image File', and then locate this spritesheet. You can call this whatever you want, as you will reference it at a later date within the PZ scripts to tell the game what it is looking for. Ensure that 'Generate map' is ticked.
 
This 'Map' is in fact a text file essentially identifying the coordinates of each (reduced) tile within the packed sprite sheet. It is necessary for PZ to be able to understand how it should interpret the sprite sheet.
 
This will leave us with two new files, which we should place in our Project Zomboid \media\texturepacks\. directory.


[http://www.theindiestone.com/community/viewtopic.php?f=34&t=4608 legacy tiling tutorial]
[http://www.theindiestone.com/community/viewtopic.php?f=34&t=4608 legacy tiling tutorial]
== Links ==
* [http://theindiestone.com/community/viewtopic.php?f=34&t=7406 PZ Mapping Tools] (includes MapTools.exe for editing tiledefinition.tiles, plus base .tmx files)
* [http://theindiestone.com/community/viewtopic.php?f=34&t=2764 PZ Mod Tools] (includes Sprite Sheet Packer.exe)

Revision as of 22:04, 10 September 2012

This page attempts to run through the key processes and methods necessary for both creating new tiles for modding PZ, and the physical act of getting them playable in the game.

This is slightly, but significantly different for 0.2.0+ as compared to 0.1.5 and earlier. This page describes the method for 0.2.0+.

Drawing new tiles

Programs

There are plenty of programs available with which to create tilesheets for implementation within Zomboid.

A couple of well known free programs exist, listed below, if you want a bit more functionality than Default OS Paint programs, and you don't have the budget to stretch to Photoshop.

I'm sure there are others, but ideally the program will have the capability of working with layers, as this gives lots of very helpful functionality once you figure out how it all works. Ultimately so long as you can save files as 32-bit .png files, you are good to go.

Some of the instructions written down here may specifically refer to Paint.NET processes, as this is the tool the author primarily uses. If in doubt, most such programs should have similar functions amongst Photoshop / Gimp etc. although they might be named differently.

Working with a Spritesheet

This link points to a sample PDN file (set up ready to go in Paint.NET) which is the size for a typical sprite sheet, and contains the individual sub-cells of the sprite sheet seperated via gridlines set up on different layers. The isometric square regions shown on this grid refer to the different 'shelf' heights for various types of furniture etc. and can be useful reference points for creating things like tables, or even things that sit on tables. Feel free to use this as the basis of your own work.

Drawing stuff

From this point on, you are really only limited by your own imagination and skill (or patience) working with pixels and art programs. Drawing by hand is one way to do things, but you could also try doing clever things like exporting isometric graphics from 3D software (including Google Sketchup).

The following link on the forums shows a tutorial which describes the use of Google Sketchup to create a multi-tile object for used in TileZed / PZ (in this case, a Fiat 500)

Multiple Tile Object Creation

Adding tiles into Tiled/Tilezed

New tileset.png

Adding Tiles in to Tiled / TileZed is pretty straightforward. Click 'Map->New Tileset' on the menu bar, find the sprite-sheet that you want to input (this should be a .png file located in your master mapping directory - see How To Set Up Tiled / TileZed) then modify the dialog box that pops up to show the correct dimensions for PZ tiles (128 px high x 64 px wide) and the correct name for the group of tiles. This name should match the filename, and it is suggested that the naming format as utilised by the main game is generally followed (in the screenshot to the right we choose TileObjectsFiat500), for ease and all round understanding.

Note this is all you need to do to get your tiles in to Tiled / TileZed, and place them graphically within the Tiled-based engine. At this stage all we are doing is stamping a load of reference numbers around a large array of information (i.e. the map) and the game would not necessarily know what to do with this - until we take it a step further (see 'Editing tiledefinitions.tiles' below).

For full TileZed functionality, each tileset should be provided with a partner .xml file describing what the default layer is for each sprite within the sheet, and this should be located in our 'Master Mapping Directory' as described earlier.

TileZed XML Data

The following is the abridged version of TileOffice.tilelayers.xml, used to define the default layers for the sprites contained within the vanilla tileset TileOffice. For your own tilesets, simply create a new .xml file called TileSheetName.tilelayers.xml and follow the same format. For default layers please refer to the existing tilelayers .xml files contained within the maptools download.

<?xml version="1.0" encoding="UTF-8"?>
<tileset columns="16" rows="8">
 <tile id="0" layername="Walls"/>
 <tile id="1" layername="Walls"/>
....
 <tile id="96" layername="Furniture2"/>
 <tile id="97" layername="Furniture2"/>
</tileset>,

Note the index number relates to the specific cell within the tileset, reading from zero (the first, top left tile) across to index 7 (the last tile on the first row) and then down through the tiles in a similar fashion. In this case, TileOffice finishes about three quarters of the way through a tilesheet with up to 128 tiles, and therefore we stop at index 97.

Once we have done this, TileZed will attempt to locate the tiles on the right layer, increasing the efficiency of map-making.

For the avoidance of doubt, this functionality is not available in Tiled.

Editing tiledefinitions.tiles

Take the tiledefinitions.tiles file, located within Project Zomboid \media\. directory, and place it in your 'Master Mapping Directory'.

Using MappingTools.exe, we can now define the properties of all our new tiles, by selecting Tileset Manager within this.

The Tileset manager allows you to modify a number of properties for the individual tiles, import new tilesets, and save the resulting information back down in to your re-defined tiledefinitions.tiles file.

For PZ to understand the concepts you have put forward for your own tiles, it needs an updated tiledefinitions.tiles file. Simply save over this, and add it back in to the \media\. directory.

Adding tiles into the game

Tileset flowchart.png

Above is a concise flowchart trying to identify all the key steps to get the information in to PZ. We have arrived now at a stage where - as far as TileZed is concerned, we have created a complete map. We have also defined the properties of each of the individual tiles, so that PZ knows that a container is a container, a light is a light, and a wall is a wall.

What is left is actually working towards getting the graphical information in to a format that PZ understands, and can render in to the game.

Cutting up the Sprite Sheet

If you are using Paint.NET, this bit is a doddle.

Animation Helper - plugin for Paint.NET

The above tool allows for easy slicing up of the tilesheet .png file in to the constituent parts with the click of a button. Follow the instructions in the link to install the helper, and then use it to export all your relevant files in to a dedicated directory where you wish to work with all your tiles.

If you intend on putting together a few seperate tilesheets, feel free to put them all together in the same folder. (e.g. say you have built some new walls, some new furniture, some new objects etc.).

If using the Paint.NET Animation Helper, always remember to suffix the filename with an underscore (e.g. TileObjectsFiat500_). This then gives each tile an index that the game is happy to work with. The filename is important, and should match that used elsewhere.

I'm sure there are other easy ways to do this with other programs, or alternatively for those with a masochistic streak simply crop the tilesheet a few hundred times and individually save a load of 64x128 .png files.

With this, we have a whole load of files, ready for bunching up in to a nice, compact, memory saving sprite sheet, getting rid of all the blank spaces.

Packing the Tiles together

At this stage we use the Sprite Sheet Packer.exe, provided with the modding tools download.

Simply open it up to be presented by a dialog box.

'Add Images' and select all the tiles you want to use within this spritesheet.

Note, they should all be able to fit within the set bounds of the spritesheet (e.g. 1024x1024), and most of the redundant space around the tile will be ignored (within reason). For this reason you can get far more telephones, hamster wheels and microwaves on a single spritesheet, than you can e.g. walls or large items of furniture.

Click the little button next to 'Image File', and then locate this spritesheet. You can call this whatever you want, as you will reference it at a later date within the PZ scripts to tell the game what it is looking for. Ensure that 'Generate map' is ticked.

This 'Map' is in fact a text file essentially identifying the coordinates of each (reduced) tile within the packed sprite sheet. It is necessary for PZ to be able to understand how it should interpret the sprite sheet.

This will leave us with two new files, which we should place in our Project Zomboid \media\texturepacks\. directory.

legacy tiling tutorial

Links

  • PZ Mapping Tools (includes MapTools.exe for editing tiledefinition.tiles, plus base .tmx files)
  • PZ Mod Tools (includes Sprite Sheet Packer.exe)