Difference between revisions of "Game Box Creation - Image Files"

From BOARD18 Project WIKI
Jump to navigation Jump to search
 
(42 intermediate revisions by 2 users not shown)
Line 7: Line 7:
== Some Good Sources Of 18xx Images ==
== Some Good Sources Of 18xx Images ==


* '''[http://www.fwtwr.com/index.htm <span style="color: Green">Keith Thomasson on the Web</span>]'''  Keith has given me permission to use his graphics.  
* Many tiles and tokens can be found in the [http://library.board18.org/ game box library]. See [[Game_Box_Creation_-_The_Library|the Library page]] for a discussion of this new library.


* Many tiles and tokens can be found in the buildingBlocks/tiles and buildingBlocks/tokens sub directories of the [https://gitorious.org/board18/gamebox gamebox repository].
* A good source for tiles that don't yet exist in the library is '''[http://www.18xx.net/tiles/index.htm BLACKWATER STATION]'''


* Some images can be copied from Cyberboard game boxes. Below I will describe two ways to do this.
* Some images can be copied from Cyberboard game boxes. This is especially useful for game boards and stock markets. Below I will describe two ways to do this.
 
* And for game boards you can also use '''[http://www.fwtwr.com/index.htm Keith Thomasson on the Web]'''  Keith has given me permission to use his graphics.  


* If you know of other sources, please let me know.
* If you know of other sources, please let me know.
== GIMP PythonFu Scripts ==
There are a number of GIMP PythonFu scripts for creating graphics in the buildingBlocks/gimpPythonScripts directory of the Gitorious BOARD18/gamebox repository. They can be installed in the gimp image editor by performing the following steps:
# In the GIMP image editor, use Preferences, Folders->Plug-ins to find location of plug-ins on your system. You'll see two directories. Do not use the system directory. Instead use your personal plug-ins directory. It should look something like ~/.gimp-2.6/plug-ins/
# Copy the contents of the buildingBlocks/gimpPythonScripts directory into this directory.
# Make each of the copied files executable: chmod +x ~/.gimp-2.6/plug-ins/FILENAME.py
# Restart the GIMP image editor.
# The Python scripts will appear in the Filters->BD18 menu of the GIMP image editor.
=== The Tile Adjust Script ===
This script will adjust the scale and orientation of a tile image. <br>
First it will rotate image by 30 degrees then it will scale it to 100x116 pix. All extra white space will be clipped by the script.
The tile to be adjusted should be the only graphic data on the image. Remove any surrounding text before adjusting tile. <br>
The background setting on the Toolbox should be set to white before you use this script.
=== The Batch Tile Adjust Script ===
This script will prompt for two parameters:
* "Input directory" A directory containing one or more tile images.
* "Output directory" An '''existing''' directory.
It will then call the tile adjust script for each .png file in the input directory. <br>It will put the resultant adjusted tile into the output directory as a .png file.
=== The Token Adjust Script ===
This script will adjust the scale of a token image. <br>
It will scale it to 30 pix. All extra white space will be clipped by the script.
The token to be adjusted should be the only graphic data on the image. Remove any surrounding text before adjusting token. <br>
The background setting on the Toolbox should be set to white before you use this script.
=== The New Tile Sheet Script ===
This script will prompt for the number of columns in the new tile sheet.
It will then create a new tile sheet with room for the desired number of columns.
=== The Add Tile To Sheet Script ===
This script will prompt for three parameters:
* "Tile to Add" The fully qualified name of the tile image file.
* "Column" The tile sheet column to fill [numberd from one].
* "Row Count" The number of rows to fill for that tile.
It will then create a column of tiles on the tile sheet. <br>The tiles will be spaced 14 pixles apart.


== Game Board Images ==
== Game Board Images ==
Line 64: Line 23:
First access a game file using cbplay and, if there are any tiles or tokens on the board, press the hide counters button.  
First access a game file using cbplay and, if there are any tiles or tokens on the board, press the hide counters button.  
Then select '''Edit > Copy Board Image To Clipboard'''.  Then start GIMP and select '''Edit > Paste as New Image'''.
Then select '''Edit > Copy Board Image To Clipboard'''.  Then start GIMP and select '''Edit > Paste as New Image'''.
Then adjust the scale (if necessary) and finally save the game board as a .png file.
Then adjust the scale (if necessary) and finally export the game board as a .png file.


When I did this for a 1870 game board the hexes measured 60 pixels wide by 70 pixels high. So I used 100/60 as the scaling factor for the width of the image and 116/70 as the scaling factor for the hight of the image. This achieved a map with hexes that conformed to the BOARD18 standard.
When I did this for a 1870 game board the hexes measured 60 pixels wide by 70 pixels high. So I used 100/60 as the scaling factor for the width of the image and 116/70 as the scaling factor for the height of the image. This achieved a map with hexes that conformed to the BOARD18 standard.


=== Keith Thomasson Map Graphics ===
=== Keith Thomasson Map Graphics ===
Line 72: Line 31:


You should first trim off the tables that sometime appear at the top of the graphic. Then the scale of the graphic must be adjusted to meet the BOARD18 specification. The horizontal and vertical scaling are not the same [that is: the aspect ratio will change]. The scaling factor for the width of the image should be 100/70. The scaling factor for the hight of the image should be 116/70.
You should first trim off the tables that sometime appear at the top of the graphic. Then the scale of the graphic must be adjusted to meet the BOARD18 specification. The horizontal and vertical scaling are not the same [that is: the aspect ratio will change]. The scaling factor for the width of the image should be 100/70. The scaling factor for the hight of the image should be 116/70.
=== A Note About Type "F" Board Maps ===
'''[[Type_%22F%22_Board_Map_Glitch|<span style="color: Green">This note</span>]] describes a potential problem with the interaction of'''
'''[[Design_Document_Game_Boxes#Tile_Orientation|<span style="color: Green">type "F" board maps</span>]] and the hexCoord function.'''


== Stock Market Images ==
== Stock Market Images ==
Line 79: Line 42:
First access a game file using cbplay and, if there are any tokens on the stock market, press the hide counters button.  
First access a game file using cbplay and, if there are any tokens on the stock market, press the hide counters button.  
Then select '''Edit > Copy Board Image To Clipboard'''.  Then start GIMP and select '''Edit > Paste as New Image'''.
Then select '''Edit > Copy Board Image To Clipboard'''.  Then start GIMP and select '''Edit > Paste as New Image'''.
Then adjust the scale (if necessary) and finally save the stock market as a .png file.
Then adjust the scale (if necessary) and finally export the stock market as a .png file.


When I did this for a 1870 game board the price boxes measured 65 pixels wide by 85 pixels high. Since the token standard is for 30 pixel tokens, I decided to make the boxes 50 pixels wide. So I used 50/65 as the scaling factor for the image and preserved the aspect ratio.
When I did this for a 1870 stock market the price boxes measured 65 pixels wide by 85 pixels high. Since the token standard is for 30 pixel tokens, I decided to make the boxes 50 pixels wide. So I used 50/65 as the scaling factor for the image and preserved the aspect ratio.


=== Templates ===
=== Templates ===
Some stock chart templates can be found in the buildingBlocks/images/stock directory of the game box repository. I suggest starting with the stockgrid.ods file. Use LibreOffice Calc to add price values to the grid boxes and export it as a .pdf file. Then import it into the GIMP Image Editor and cut away the unneeded boxes and add colors, etc. Save the resulting image as a .png file and there you are.
Some stock chart templates can be found in the library.


== Tile Sheet Images ==
== Tile Sheet Images ==
Line 90: Line 53:


=== Tiles Library ===
=== Tiles Library ===
There is a tiles library in the buildingBlocks/JSON directory of the Gitorious BOARD18/gamebox repository. Of course, this library does NOT have all of the possible tiles. Any missing tiles, that you need, should be added to the library before you start creating the tile sheets. If the tile is in an online tile library such as the [[http://www.18xx.net/tiles/menu.htm Blackwater Station]] master tile list then you can use the tile_adjust script to format the tile for BOARD18 and then add it to the tiles library. In the rare case that the tile does not exist anywhere, you may have to create it from scratch or by hand modifying an existing tile.  
There are two tiles sections in the [http://library.board18.org/ game box library]. Of course, this library does NOT have all of the possible tiles. Any missing tiles, that you need, should be added to the library before you start creating the tile sheets. If the tile is in an on-line tile library such as the [[http://www.18xx.net/tiles/menu.htm Blackwater Station]] master tile list then you can use one of the Python tile_adjust scripts under gimp to format the tile for BOARD18 and then add it to the correct section of the tiles library. In the rare case that the tile does not exist anywhere, you may have to create it from scratch or by hand-modifying an existing tile.  
Please share any tiles library updates that you make with the BOARD18 project so that they can be added to the tiles library in the Gitorious BOARD18/gamebox repository.
 
<span style="color: Fuchsia">Please share any tiles that you create with the BOARD18 project so that they can be added to the tiles library.</span>


=== Creating a Tile Sheet ===
=== Creating a Tile Sheet ===
Line 97: Line 61:
# Make an ordered list of the tiles that you want for the sheet.  The list should include the count for the tile [for use in the control file] and the row count [rotations] for the tile.
# Make an ordered list of the tiles that you want for the sheet.  The list should include the count for the tile [for use in the control file] and the row count [rotations] for the tile.
# Make sure that all the tiles exist in the tiles library. If any don't then add them [see above].
# Make sure that all the tiles exist in the tiles library. If any don't then add them [see above].
# Use the New Tile Sheet script to create an empty tile sheet with the correct number of columns [tiles].
# Use one of the [http://wiki.board18.org/w/Game_Box_Creation_-_GIMP_PythonFu_Scripts New Tile Sheet scripts] to create an empty tile sheet with the correct number of columns [tiles].
# For each tile (in order) use the Add Tile To Sheet script to add the tile to the sheet.
# For each tile (in order) use one of the Add Tile To Sheet scripts to add the tile to the sheet.
# Make the background of the sheet transparent using Colors->Color to Alpha. Change the '''From: color''' to X0066ff before clicking '''OK'''.
# Export the sheet as a .png file. Accept the defaults.
# Save the sheet as a .png file. Accept the defaults.
 
[[File:1870Tokens.png|frame]]
I think that it is a good idea to cause the tiles that are more often used appear first on the sheet.
 
==== A Tile Sheet Manifest ====
Before creating any tile sheets, I always create a spread sheet
like [[Media:1830TileManifest.png|this one]]. It helps to coordinate all of
the information that is needed to create the tile sheets for a game box.


=== Templates ===
==== Adding Tiles to the Library ====
<span style="color: Green">[Use of these templates is deprecated.]</span> The tile sheet templates are in the "buildingBlocks/images/6 x 16 hex" directory of the game box repository. Read the Info.txt file in this directory for the specs on the supplied templates.
When the Library does not have a tile that is needed for a game
then it must be found elsewhere or created. Here are some hints
to make this process easier.


=== Keith Thomasson Tile Graphics ===
When the type P Python scripts are used to rotate and scale a
<span style="color: Green">[This method is deprecated.]</span><br>
tile, the resulting tile sometimes has values and other text
The Keith Thomasson tile graphics are structured somewhat like tile sheets but the scale is different and the tiles are not arranged in exactly the correct way. Thus you will first have to chop up the graphic into color sections and then piece together some of them to make tile sheets.  Be sure to preserve the exact inter column spacing when joining two graphics.  
that have become too small to read and/or are now at an angle.


After the sheet is pieced together, you will have to convert the white background to transparent. Be sure that the white holes in the city tiles are not transparent.
The '''Useful Stuff / Tile Patches''' section of the '''Library''' contains
image fragments that can be used to patch such tiles.
These fragments are mostly value circles that
can be used to replace the tilted ones on the rotated tiles.
The numbers in these fragments are
font size 12 Sans Bold. They can be placed over the existing
value circles or the existing circles can be over written by
the background color and then the value circle can be placed anywhere on
the tile.


Finally the scale of the sheet must be adjusted to meet the BOARD18 specification. The horizontal and vertical scaling are not the same [that is: the aspect ratio will change]. The scaling factor for the width of the image is 100/70. The scaling factor for the hight of the image is 116/70.
Tile numbers should be over written by the background color.
Then they can be rewritten using font size 10 or 12 Sans Bold.
Other text on the tile, if any, can be replaced and scaled as appropriate.
 
[[File:1870Tokens.png|frame]]


== Token Sheet Images ==
== Token Sheet Images ==
The image on the right should provide a good idea of what a token sheet should look like.
The image on the right should provide a good idea of what a token sheet should look like.
=== Tokens Library ===
There is a tokens sections in the [http://library.board18.org/ game box library]. Of course, this library does NOT have all of the possible tokens. Any missing tokens, that you need, should be added to the library before you start creating the token sheets. In the case that the token does not exist anywhere, you may have to create it from scratch or by hand-modifying an existing token. You can use the token_adjust script to format a token for BOARD18 and then add it to the tokens library.
<span style="color: Fuchsia"> Please share any tokens that you create with the BOARD18 project so that they can be added to the tokens library.</span>
==== Tokens Library Structure ====
As of November 2014, the token's library is being restructured to contain a separate sub library for each game. Tokens for a train company that exist in more than one game will no longer have to have the same graphic image in all games.
==== Two Sided Tokens ====
As I improve the graphics for various game boxes, I intend to use two sided tokens for their stock markets. This will enable tokens to be flipped to indicate corporations that have run in a given operating round.
I have found that an easy way to create a back side token image from the existing [front side] image is to convert the image Mode to grayscale. This works best for brightly colored tokens. Another way is to invert the colors on the token.


=== Lifting Tokens from Cyberboard ===
=== Lifting Tokens from Cyberboard ===
To make the 1870 token sheet,  
To make a token sheet,  
I displayed the tokens from a 1870 Cyberboard game box and took screen shots of them.  It took 3 screens to get them all.
I sometimes display the tokens from a Cyberboard game box and take screen shots of them.   
I then cropped the screen shots and stitched together this Token Sheet. I had to be careful to keep the spacing between tokens consistent.  
I can then used the three token related GIMP Python scripts to format the tokens and create the sheet.
The resulting tokens had a diameter of 44 pixels so I scaled the sheet with a factor of 30/44. I then made the background transparent.
Please add any tokens created in this way to the Tokens section of the Library.

Latest revision as of 07:53, 14 October 2017

Game Box Creation edit

About Images

Game Box images consist of the map board, the stock market and various tile and token sheets. This page discusses the creation of these image files for a game box.

The preferred format for all game box image files is Portable Network Graphics (.png). An image to png converter can be found here.

Some Good Sources Of 18xx Images

  • Some images can be copied from Cyberboard game boxes. This is especially useful for game boards and stock markets. Below I will describe two ways to do this.
  • If you know of other sources, please let me know.

Game Board Images

Export from Cyberboard

If you have access to Cyberboard and a Cyberboard game box for the game in question then you can get the game board image directly from Cyberboard.

First access a game file using cbplay and, if there are any tiles or tokens on the board, press the hide counters button. Then select Edit > Copy Board Image To Clipboard. Then start GIMP and select Edit > Paste as New Image. Then adjust the scale (if necessary) and finally export the game board as a .png file.

When I did this for a 1870 game board the hexes measured 60 pixels wide by 70 pixels high. So I used 100/60 as the scaling factor for the width of the image and 116/70 as the scaling factor for the height of the image. This achieved a map with hexes that conformed to the BOARD18 standard.

Keith Thomasson Map Graphics

The Keith Thomasson map graphics require some modification. The scale is different and the aspect ratio does not conform with the BOARD18 standard.

You should first trim off the tables that sometime appear at the top of the graphic. Then the scale of the graphic must be adjusted to meet the BOARD18 specification. The horizontal and vertical scaling are not the same [that is: the aspect ratio will change]. The scaling factor for the width of the image should be 100/70. The scaling factor for the hight of the image should be 116/70.

A Note About Type "F" Board Maps

This note describes a potential problem with the interaction of type "F" board maps and the hexCoord function.

Stock Market Images

Export from Cyberboard

If you have access to Cyberboard and a Cyberboard game box for the game in question then you can get the stock market image directly from Cyberboard.

First access a game file using cbplay and, if there are any tokens on the stock market, press the hide counters button. Then select Edit > Copy Board Image To Clipboard. Then start GIMP and select Edit > Paste as New Image. Then adjust the scale (if necessary) and finally export the stock market as a .png file.

When I did this for a 1870 stock market the price boxes measured 65 pixels wide by 85 pixels high. Since the token standard is for 30 pixel tokens, I decided to make the boxes 50 pixels wide. So I used 50/65 as the scaling factor for the image and preserved the aspect ratio.

Templates

Some stock chart templates can be found in the library.

Tile Sheet Images

A game box will require a number of tile sheets. The procedure below can be used to create these sheets from tiles stored in the tiles library. You may want to read this paragraph for a better idea of what a tile sheet should look like.

Tiles Library

There are two tiles sections in the game box library. Of course, this library does NOT have all of the possible tiles. Any missing tiles, that you need, should be added to the library before you start creating the tile sheets. If the tile is in an on-line tile library such as the [Blackwater Station] master tile list then you can use one of the Python tile_adjust scripts under gimp to format the tile for BOARD18 and then add it to the correct section of the tiles library. In the rare case that the tile does not exist anywhere, you may have to create it from scratch or by hand-modifying an existing tile.

Please share any tiles that you create with the BOARD18 project so that they can be added to the tiles library.

Creating a Tile Sheet

To create a tile sheet:

  1. Make an ordered list of the tiles that you want for the sheet. The list should include the count for the tile [for use in the control file] and the row count [rotations] for the tile.
  2. Make sure that all the tiles exist in the tiles library. If any don't then add them [see above].
  3. Use one of the New Tile Sheet scripts to create an empty tile sheet with the correct number of columns [tiles].
  4. For each tile (in order) use one of the Add Tile To Sheet scripts to add the tile to the sheet.
  5. Export the sheet as a .png file. Accept the defaults.

I think that it is a good idea to cause the tiles that are more often used appear first on the sheet.

A Tile Sheet Manifest

Before creating any tile sheets, I always create a spread sheet like this one. It helps to coordinate all of the information that is needed to create the tile sheets for a game box.

Adding Tiles to the Library

When the Library does not have a tile that is needed for a game then it must be found elsewhere or created. Here are some hints to make this process easier.

When the type P Python scripts are used to rotate and scale a tile, the resulting tile sometimes has values and other text that have become too small to read and/or are now at an angle.

The Useful Stuff / Tile Patches section of the Library contains image fragments that can be used to patch such tiles. These fragments are mostly value circles that can be used to replace the tilted ones on the rotated tiles. The numbers in these fragments are font size 12 Sans Bold. They can be placed over the existing value circles or the existing circles can be over written by the background color and then the value circle can be placed anywhere on the tile.

Tile numbers should be over written by the background color. Then they can be rewritten using font size 10 or 12 Sans Bold. Other text on the tile, if any, can be replaced and scaled as appropriate.

1870Tokens.png

Token Sheet Images

The image on the right should provide a good idea of what a token sheet should look like.

Tokens Library

There is a tokens sections in the game box library. Of course, this library does NOT have all of the possible tokens. Any missing tokens, that you need, should be added to the library before you start creating the token sheets. In the case that the token does not exist anywhere, you may have to create it from scratch or by hand-modifying an existing token. You can use the token_adjust script to format a token for BOARD18 and then add it to the tokens library.

Please share any tokens that you create with the BOARD18 project so that they can be added to the tokens library.

Tokens Library Structure

As of November 2014, the token's library is being restructured to contain a separate sub library for each game. Tokens for a train company that exist in more than one game will no longer have to have the same graphic image in all games.

Two Sided Tokens

As I improve the graphics for various game boxes, I intend to use two sided tokens for their stock markets. This will enable tokens to be flipped to indicate corporations that have run in a given operating round.

I have found that an easy way to create a back side token image from the existing [front side] image is to convert the image Mode to grayscale. This works best for brightly colored tokens. Another way is to invert the colors on the token.

Lifting Tokens from Cyberboard

To make a token sheet, I sometimes display the tokens from a Cyberboard game box and take screen shots of them. I can then used the three token related GIMP Python scripts to format the tokens and create the sheet. Please add any tokens created in this way to the Tokens section of the Library.

Retrieved from "https://wiki.board18.org/index.php?title=Game_Box_Creation_-_Image_Files&oldid=2406"