Skip to content

Creating Graphic Borders

Leif Theden edited this page Jul 5, 2016 · 1 revision

Graphic borders in Tuxemon are easy to create. The format uses png files to define the border. The border image can be any image that is easily divided into nine sections. Each of the nine sections will be used when drawing the border.

It will help you make the border if you understand how borders are rendered.

  1. The inner portions of the border are filled with the center tile, a solid color, or nothing at all.
  2. The borders are drawn by blitting the edge tiles over and over, not stretched.
  3. The corners are drawn

This process happens very quickly and allows for flexible designs. In fact, the HP bars are a type of border, which allows them to be drawn at arbitrary sizes without redesigning them.

Below is a crude diagram of how the tiles must be laid out:

+-----------+------------+------------+
|           |            |            |
|           |   top      |            |
|  corner   |   edge     |   corner   |
|           |            |            |
+-------------------------------------+
|           |            |            |
|  left     |            |   right    |
|  edge     |   center   |   edge     |
|           |            |            |
+-------------------------------------+
|           |            |            |
|           |  bottom    |            |
|  corner   |  edge      |  corner    |
|           |            |            |
+-----------+------------+------------+

Hp Bar Default border