Skip to main content

Tilesets / Symbolsets

Tiles are the fundamental piece that make this engine special. A tile is a space in the game world, a mobile or item occupies. A tile is also the representation of those entities.

Where to get tilesets from?​

You basically have three ways to get a tileset: Buy them, find free ones or create your own.

  • Buy them

    There are several resources on the Internet that can provide you with the necessary art for games. A good source is itch.io. One of the more useful examples is "The Roguelike Remastered"

  • Find free ones This one is harder. Most free tilesets are not very useful or are of limited use. Some - like the old Ultima IV or Ultima V tilesets - are better, can be found in several places, but are not free.Ultima 5

  • Create your own

    You find that to make best of tilesets in GraphicMUD, you may need to create your own. There exist useful tools to help you achieve that.

    1. Pixelorama
    2. Aseprite

Requirements for tilesets​

Before you begin any work on a tileset or invest money, you should be aware of the requirements

  • Size of the tiles My recommendation is a size of 32x32 pixels per tile
  • Different types of tiles (for terrain, items and living creatures (animals, monster, npcs)) You likely need all kind of tiles to represent the static game world and its inhabitants and moveable objects.
  • Transparency Usually tiles are rendered on top of each other. You may have a monster tile on a grassland tile and this looks better if the monster tile has a transparent background, so you can still see the grass underneath.
  • Spritesheets This export format is an image file where all tiles are directly put next to each other, from top to bottom and left to right, with no pixel space between them. The image above is an example for that. Right now, such spritesheets is the only thing GraphicMUD can import.

[!IMPORTANT]

Some spritesheets, like the Ultima V example above, have animated sprites, where each animation frame is represented as a tile. While GraphicMUD does not handle animation (yet), it can deal with that.

You can have multiple tilesets - e.g. one for backgrounds (with no transparency) and another one for living things and assets.

Making a tileset known to GraphicMUD​

Map representation in GraphicMUD can either be a pixel graphic image or an ASCII map. Since the term tile is usually associated with just the graphic representation, we use the term symbol and therefore also the term symbolset.

A symbolset in GraphicMUD is defined in an XML file in the directory static/symbols/ that starts with the name SymbolSet_. The basic structure is

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<symbolset id="immobiles" tilesize="32" title="immobiles">
   <imageFile>Steam Arcana Immobiles.png</imageFile>
   <symbols>
      <symbol id="0">...</symbol>
      <symbol id="1">...</symbol>
      ...
   </symbols>
</symbolset>

You can see that it references the size of each tile (32 meaning 32x32 pixel) and a filename relative to the XML file It is followed by <symbol> elements where the ID is a number for the position in the image. The Ultima5 image above has 32 tiles per row and 16 rows, so it has a total of 512 tiles. The first row would be the IDs 0-15. The second row 16-31 and so on.

The <symbol> element​

The symbol element is responsible for storing information about a single symbol on the map, e.g. if it blocks movement or how it should be represented in different scenarios.

Zoom of tiles 6+7

Let's have a look at the eights and ninth tile of the first row of the Ultima 5 tileset - symbol 7 and 8. The mere existence of symbols with the id 7 and 8 informs GraphicMUD that it has to grab the tile from the spritesheet.

Both symbols get a name. This is for the person writing the XML file, but might also be used later in GraphicMUD, e.g. when looking at a symbol.

<symbol id="7" title="Desert">
    <fore ansi="0" c256="11"/>
    <back ansi="3" c256="166"/>
    <text ascii="." cp437="."/>
    <flag>BLOCK_MOVEMENT</flag>
</symbol>
<symbol id="8" title="Forest, light">
    <fore ansi="10" c256="10"/>
    <back ansi="2" c256="2"/>
    <text ascii=":" cp437="▒"/>
</symbol>

Each <symbol> has the following child elements::

  • <text>: The grapheme to represent the symbol in outputs that don't support graphic The element has the following attributes:
    • ascii: A character from the ASCII table (the lower 96 characters). This is mandatory
    • cp437: A character from the Windows codepage 437 (Allows umlauts and other glyphs special to western european languages as well as more graphic elements) Optional. If absent the ASCII representation is used
    • utf8: Any UTF-8 encoded Unicdode character. Optional. If absent the CP437 (or ASCII) version is used Beware that some Unicode characters are rendered two-cells wide.
  • <fore> : The foreground color
    • ansi: Index of one of the 16 ANSI colors. The numbers will be mapped later to their ANSI control codes.
    • c256: A 256 color ANSI color code.
    • rgb: A HTML-like hexadecimal color representation
  • <back>: The background color Has the same attributes as <fore>
  • <flag> (Optional, multiple times): Flags associated with that symbol The only flags defined at the moment are
    • BLOCK_MOVEMENT
    • BLOCK_SIGHT
  • <image>: Information for graphical representation. Currently only used to instruct GraphicMUD how many animation frames form that symbol.
    • frames: Number of animation frames

So, symbol 8 would be

  • a light green ":" on dark green background (all color modes + ASCII)
  • a light green "▒" pattern on dark green background (ANSI 16 + CP437 or UTF-8)

Symbol 7 would have "." in every case, but different colors depending on the client support.