Game Box Creation - Image Files

From BOARD18 Project WIKI
Revision as of 08:33, 11 December 2014 by Rich (talk | contribs) (→‎Some Good Sources Of 18xx Images: added link)
Jump to navigation Jump to search
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

  • Many tiles and tokens can be found in the buildingBlocks/tiles and buildingBlocks/tokens sub directories of the gamebox repository. These two subdirectories will soon be replaced by an expanded directory structure placed under the library sub directory of the gamebox repository. See the Library section below for a discussion of this new directory structure.
  • A good source for tiles that don't yet exist in the buildingBlocks/tiles subdirectory is BLACKWATER STATION
  • 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.

GIMP PythonFu Scripts

There are a number of GIMP PythonFu scripts for creating and modifying tile and token graphics. They can be found in the buildingBlocks/gimpPythonScripts directory of the gamebox repository. They can be installed in the gimp image editor by performing the following steps:

  1. 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/
  2. Copy the contents of the buildingBlocks/gimpPythonScripts directory into this directory.
  3. Make each of the copied files executable: chmod +x ~/.gimp-2.6/plug-ins/FILENAME.py
  4. Restart the GIMP image editor.
  5. 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.
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.
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.
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.
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.
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 New Token Sheet Script

This script will prompt for the number of rows and columns in the new token sheet.

It will then create a new token sheet with room for the desired number of rows and 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 [numbered 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.
Each tile in the column will be rotated 60 degrees clockwise compared to the tile above it.
The tiles will be spaced 14 pixels apart.

The Add Token To Sheet Script

This script will prompt for three parameters:

  • "Token to Add" The fully qualified name of the token image file.
  • "Column" The token sheet column to fill [numbered from one].
  • "Row" The token sheet row to fill [numbered from one].

It will then place a token on the token sheet.
The tokens will be spaced 10 pixels apart.

The Library

The Library Directory Structure

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 save 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.

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.

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 save 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.

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.

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 is a tiles library in the buildingBlocks/tiles directory of the 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 [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.

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

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 the New Tile Sheet script to create an empty tile sheet with the correct number of columns [tiles].
  4. For each tile (in order) use the Add Tile To Sheet script to add the tile to the sheet.
  5. Make the background of the sheet transparent using Colors->Color to Alpha. Change the From: color to X0066ff before clicking OK.
  6. Save the sheet as a .png file. Accept the defaults.
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 library in the buildingBlocks/tokens directory of the gamebox repository. 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 rare 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 in the gamebox repository.

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 the 1830 token sheet, I displayed the tokens from a 1830 Cyberboard game box and took screen shots of them. I then used the three token related GIMP scripts (see above) to format the tokens and create the sheet. Please add any tokens created in this way to the Tokens Library.