Loading...
 
Skip to main content

Contributions to sv_GraphicsCutting (current version)

Process



Options




Version
Version Date User
2014-03-01 15:35 Frank
2017-05-12 00:31 Frank
2017-05-12 00:31 Frank
2017-05-12 00:31 Frank
2016-08-25 13:09 Frank
2014-03-01 15:35 Frank

Statistics

Author Words Whitespaces Characters Printable characters
Used Deleted Used Deleted Used Deleted Used Deleted
FrankP 745 (100.0%) 0 (0.0%) 590 (100.0%) 0 (0.0%) 10593 (100.0%) 0 (0.0%) 7020 (100.0%) 0 (0.0%)
Total 745 (100.0%) 0 (100.0%) 590 (100.0%) 0 (100.0%) 10593 (100.0%) 0 (100.0%) 7020 (100.0%) 0 (100 %)

Page changes

Table of contents

  • <a href='#Why_do_graphics_need_to_be_cut_' class='link'> Why do graphics need to be cut?</a>
  • <a href='#Position_of_the_image_and_its_tiles' class='link'> Position of the image and its tiles</a>
  • <a href='#How_to_do_it' class='link'> How to do it</a>

Why do graphics need to be cut?<a href="#Why_do_graphics_need_to_be_cut_" class="heading-link" aria-label="heading link"><span class="icon icon-link fas fa-link " ></span></a>


The graphics system in Simutrans is based on tiles, in order for an image to be displayed correctly in-game, the source image needs to be divided into tiles depending on their intended position. Each tile is a square area with the following dimensions:

Pakset size Width in pixel Height in pixel
32 32 32
64 64 64
96 96 96
128 128 128
192 192 192

A building consists of ground-level tiles (blue) and up to 3 height-level tiles for each ground-level tile (red - 1 height).

The parts of the ground-level tile shown in green in the image to the right will not be visible in-game.

A building which only consists of a single ground-level tile does not need to be cut. Only when a building is made up from several ground-level tile is it necessary to cut the graphics.
<a href="alt=" class="internal" title="1x1"> <img src="show_image.php?id=307" height="128" width="64" class="regImage pluginImg " title="1x1" alt="Image" /> </a>
1x1

<a href="sv_GraphicsCutting#tiki_top">{TRAFD(fields=>22,filtervalue=>1)}{TRAFD}</a>

Position of the image and its tiles<a href="#Position_of_the_image_and_its_tiles" class="heading-link" aria-label="heading link"><span class="icon icon-link fas fa-link " ></span></a>


The information in the graphics file correspond to the values of B C D of the <a href="en_BackImage" title="BackImage" class="wiki wiki_page">BackImage</a> parameter. Their relative ordering from top to bottom is given vertically.

<a href="alt=" class="internal" title="1x2"> <img src="show_image.php?id=361" height="176" width="96" class="regImage pluginImg " title="1x2" alt="Image" /> </a>
1x2

<a href="alt=" class="internal" title="2x1"> <img src="show_image.php?id=362" height="176" width="96" class="regImage pluginImg " title="2x1" alt="Image" /> </a>
2x1

<a href="alt=" class="internal" title="2x2"> <img src="show_image.php?id=363" height="192" width="128" class="regImage pluginImg " title="2x2" alt="Image" /> </a>
2x2

<a href="alt=" class="internal" title="2x3"> <img src="show_image.php?id=364" height="192" width="160" class="regImage pluginImg " title="2x3" alt="Image" /> </a>
2x3

<a href="alt=" class="internal" title="3x2"> <img src="show_image.php?id=365" height="192" width="160" class="regImage pluginImg " title="3x2" alt="Image" /> </a>
3x2

<a href="alt=" class="internal" title="3x3"> <img src="show_image.php?id=366" height="192" width="192" class="regImage pluginImg " title="3x3" alt="Image" /> </a>
3x3

other sizes can be found <a class="wiki" href="tiki-browse_gallery.php?galleryId=17" rel="">here</a>


<a href="sv_GraphicsCutting#tiki_top">{TRAFD(fields=>22,filtervalue=>1)}{TRAFD}</a>

How to do it<a href="#How_to_do_it" class="heading-link" aria-label="heading link"><span class="icon icon-link fas fa-link " ></span></a>

To help cut up an image according to these specifications, there is a Windows-program called <a href="de_tilecutter" title="de_tilecutter" class="wiki wiki_page">TileCutter (German description only</a>); under Linux TileCutter works well with Wine.

It will take 2x the original graphics, a target file and the appropriate interface mask.

<a href="alt=" class="internal" title="Output file"> <img src="show_image.php?id=314" height="192" width="349" class="regImage pluginImg " title="Output file" alt="Image" /> </a>
Output file

<a href="alt=" class="internal" title="Interface mask"> <img src="show_image.php?id=372" height="192" width="128" class="regImage pluginImg " title="Interface mask" alt="Image" /> </a>
Interface mask

<a href="alt=" class="internal" title="Target file"> <img src="show_image.php?id=371" height="192" width="448" class="regImage pluginImg " title="Target file" alt="Image" /> </a>
Target file


The next step is to mask the intersection of the two original images; with red and blue respectively being used as transparent.

<a href="alt=" class="internal" title="cut output file"> <img src="show_image.php?id=312" height="192" width="349" class="regImage pluginImg " title="cut output file" alt="Image" /> </a>
cut output file


Then the partial images are copied into the target file.

<a href="alt=" class="internal" title="raw target file"> <img src="show_image.php?id=310" height="192" width="448" class="regImage pluginImg " title="raw target file" alt="Image" /> </a>
raw target file


Finally, the red and blue of the mask as well as the tile backgrounds of the target file are filled with transparent color. The original image is also copied into the target file.

It is a very good idea to add a copyright notice to the target file. Then everyone knows by whom the picture is, even if the file name changes.

<a href="alt=" class="internal" title="Target file ready"> <img src="show_image.php?id=308" height="192" width="448" class="regImage pluginImg " title="Target file ready" alt="Image" /> </a>
Target file ready


<a href="sv_GraphicsCutting#tiki_top">{TRAFD(fields=>22,filtervalue=>1)}{TRAFD}</a>