Tileset

One of the first things you should do, is picking one or more tilesets. GraphicMUD supports loading spritesheets like this:

But instead of having a single spritesheet for everything, we recommend having 2-4 different types of spritesheets - one for non-transparent terrain tiles and another one (or more) for all tiles that should be on the terrain tiles.

No matter with how many tilesets you work, all tilesets are expected to have the same square tile size, e.g 32x32 pixel.

Types of tiles

Mobiles / Assets / Immobiles

Tiles of these types are expected to have a transparent background. GraphicMUD allows to further distinguish between tilesets for mobiles (Critter, Monsters, NPC), assets (gear, stuff you can pick up) and immobiles (e.g. furniture, roads).

While mobiles are clear to identify, the decision to assign a tile to the asset or immobile category is more related to the question if you can think of a situation where one of the tiles needs to be on top of the other. E.g. a piece of road is an immobile, a tree would also classify as immobile - but this will most likely prevent you from displaying a tree growing on a road.

Terrain

Tiles of this type are expected not to have transparent background.

Why walls? Because being on the lowest layer allows having a window as a dedicated tile which you can display on top of the wall. So if you have 5 types of walls and 3 types of windows, you don't need 5 wall tyles plus 5x3 "Wall with window" tiles, but only 5+3 tiles which you can combine.

SymbolSet

GraphicMUD manages the tilesets in tiles starting with the keyword SymbolSet. The basic structure looks like this:

?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<symbolset id="terrain" tilesize="32" title="Terrain">
   <imageFile>Steam Arcana Terrain.png</imageFile>
   <symbols>
      ...
      <symbol id="4" title="Forest">
         <fore ansi="10" c256="40"/>
         <back ansi="2" c256="2"/>
         <text ascii=" " cp437=" " utf8=" "/>
         <image/>
      </symbol>
      <symbol id="5" title="Brickroad">
         <fore ansi="0"/>
         <back ansi="7"/>
         <text ascii="."/>
         <image/>
      </symbol>
      <symbol id="18" title="Chicken">
         <fore ansi="13" c256="4"/>
         <back ansi="0" c256="12"/>
         <text ascii="m" cp437="m"/>
         <image frames="4"/>
      </symbol>

*Attributes of symbolset *

Attribute	Description
id	Internal identifier for the tileset
tilesize	Pixel size of each tile (width and height)
title	Human-readable name

The symbolset has a reference to an image file containing the sprite sheet. Than follows a long list of <symbol> elements - one for each tile on the sprite sheet.

*Attributes of symbol *

Attribute	Type	Description
id	integer	Number of the tile in the spritesheet. Starts with 0.
title	string	Human-readable name

Each symbol has multiple mapping information.

• text contains information for a single character representation of a tile.

  • ascii is the character to use if the client uses ASCII encoding
  • cp437 is the character to use when the client uses CP-437/ISO-8859-1 encoding
  • utf8 is when UTF-8 is used. You can use any unicode character here. The rule is: If the higher specific attribute is missing, the next best encoding is picked,

• fore contains information about the foreground color. Where

  • ansi refers to the 16 ANSI colors. Valid value range is 0-15
  • c256 refer to the 256 color encoding (0-255)
  • rgb is a 6-digit hexadecimal representation of the RGB value

• back is identical to fore, but for the background color

• image contains additional information for graphical tiles. Currently there is only one attribute

  • frames The number of consecutive tile that are treated as an animated tile.
    E.g. if the tile id is 15 and the frames attribute is 4, than frame 15-18 form an animation.

For 16 and 256 color values consult:

Example

<symbol id="2" title="Chicken">
    <fore ansi="13" c256="4"/>
    <back ansi="0" c256="12"/>
    <text ascii="m" cp437="m"/>
    <image frames="4"/>
</symbol>

The 3rd (index 2) tile in the sheet is a chicken. When displayed in a text map, it is a magenta colored letter 'm', but in case of 256 colors it is a blue 'm'. The graphical representation consists of 4 frames that can be played as an animation.

Tools

Likely the two most popular tools to create spitesheets are

• Pixelorama
• Aseprite

Both tools are able to create spritesheets and there is no preferred tool. Pick one that feels more intuitive to you.

Conclusion

Getting a decent symbolset is a large piece of work, but it allows GraphicMUD to adapt to the clients graphical capabilities by picking the best grapheme, color or graphics.

I've started working on a tool to ease the process of creating the SymbolSet XML file, but it isn't done yet.