| Event Images are background images that are shown during events. The typical situations in which event images are shown are:
There are also other events such as certain negative sanity events, hungry Abominations or infected wounds that will trigger events with an event image. |
 |
Introduction[]
In general, whenever an event uses showImage, an event image will be displayed alongside the Travel Journal:
showImage: {src: evt_fxt_village_1.png, type: day}
Every event image should have the dimensions 411 x 260 pixels.
Typically Players are presented with 3 image layers placed on top of each other:
| The Biome event image that is defined by the current Biome the Players are located in. |  |
| The Tile event image that is defined by the current Tile the Players are locaed on. |  |
| The Location event image that is defined by the Location the Players are exploring. However, this top layer can also be defined by any other event, for example coming from triggering an item or a automatically triggered status effect like an infection. |  |
| These 3 layers put together will be the final image presented to Players: |  |
Image Slots[]
One thing that is special about Event Images is that they can have special colored pixels (slot-pixels) that act as slots for positioning other sprites. These slots can be used to determine where character or NPCs can be positioned in a scene. Typically this is used in event images that are defined from Locations or general events, however, it is not limited to them. For example, you can see the slot-pixels on the location event image for the portal:
Here, 3 different colors are used:
- #36ff00 for Units,
- #f0ff00 for the main Explorer
- #ffffff for Animals
This means that these 3 types of characters can be placed in this scene. The slot-pixels as you see them in this source image are not being displayed in the game. Instead, if a slotted image is recognized each slot-pixel will be replaced by the pixel to the left of the slot-pixel.
In order to tell the game that your event image has slot-pixels you will need to add this line to the entry of your image in the imageData section of your mod:
{
id: imageID
file: yourModFolder/filename.png
type: slotted
}
The game will then automatically add the appropriate positions and replace the slot-pixels with the left neighbour pixel color. This is the full list of currently supported slot-pixel colors:
| Color | Code | Slot name |
|---|---|---|
| #f0ff00 | Explorer | |
| #36ff00 | Units | |
| #ffffff | Animals | |
| #ff9ceb | Mounted | |
| #802cff | Custom 1 | |
| #ffc24d | Custom 2 | |
| #00f6ff | NPC 1 | |
| #b700b1 | NPC 2 | |
| #ff0000 | Enemy |
The colors used are defined in the game.conf.js. There are standard slots used, depending on which prefix the respective character is using. You can, however, manually define the used slot by using imgSlot in the character definition, for example like this:
imgSlot: npc2
With this simple technique you can stage complex scenes and add just a bit more believability and life to your events. It is important to note that you can create variants of the same or slightly modified image with different Image Slots, which can be called by successive events for interesting effects. Examples are:
| Villages - the player units, animals and explorer are positioned on the left side of the image as they arrive at the village. Villagers (using npc slots) are spread over the right side of the village. During the night all characters are placed around the campfire (except animals, they stay away from the campfire). |  |
| Slave trader - the player units are visiting the slaver. When inspecting the slaves new, recruitable units are spawned and placed on the platform in the center of the image. |  |