Map Exploration

From Hero of Allacrost Wiki
Jump to: navigation, search

The goal of the map exploration is to provide a flexible and enriched environment for the player to explore in the game. This page explains how Allacrost maps are structured and how they are processed in the game in a non-technical manner. The intended audience of this document are those who wish to design maps, create content for maps (particularly artists), or wish to understand how map exploration works in Allacrost. Programmers, scripters, and those who wish to understand the technical details about this portion of the game's code are advised to visit the Map Mode documentation page, which explains more of the technical aspects of maps.


All maps in Allacrost are a composition of three types of structures: tiles, objects, and triggers. Tiles represent multi-layered images that are placed adjacent to one another to create the map environment. Map objects represent sprites and other visible objects on the screen that the player may interact with. Triggers are non-visible elements that cause some change in the map state when they are activated, such as initiating a scripted sequence or dialogue.


In Allacrost, a map tile is defined as a three-layered image with various properties about that tile, such as walkability. All three image layers are composed of 32x32 pixel graphics in PNG format, which are called tile images. The three tile images for each tile are drawn one on top of the other to emulate a 3D environment in the game (tile layers will be explained later). Tile images may contain transparency in part or in full using native PNG transparency. Each tile image layer may optionally be animated to provide for a more realistic environment. It is not necessary for a tile layer to fill each of its three tile layers with images. In fact, some map tiles may contain no images in any of its layers. When a tile contains no images, the tile is completely black when it appears on the map.

Tile Properties[edit]

In addition to images, each map tile has a number of properties associated with it. Perhaps the most significant property is that of

Tileset Images[edit]

Rather than have a separate file for each tile image, tile images and grouped together into conglomerate image files. These files that contain multiple tiles are called tileset image files, or tileset images. The dimensions of these files can be any size (preferably less than or equal to 512x512 pixels), but both the width and height must be divisible by 32. Tileset image files contain the tile images for all three image layers, and hold both static and animated images (specifically: all of the individual frames for an animated tile image).


The most common map object is a map sprite. Map sprites are animated living entities within the game and are usually mobile. A map object, however, may not necessarily be a map sprite. For example, a tree may be better represented as a map object instead of as a collection of tiles. Like tiles, objects may be animated


The Layout[edit]

The map camera is usually focused on the player's sprite, but may be set to focus on any map object. Usually the map is drawn so that the focused object is in the center of the screen, as shown in the figure below. The view area of the map is always 32 tiles wide by 24 tiles high. A map is divded into a 2D matrix of tile rows and tile columns. The minimum size for a map is 32x24 tiles.

File:Mapmode layout.png

When the focused object is near the edges of a map however, the object can no longer be centered on the screen. The image on the left below shows an example where the focused object is no longer centered on the screen. The image on the right defines the border area in which the focused object will no longer be centered on the screen.

File:Mapmode focusborder.png File:Mapmode borderregions.png

Draw Layers[edit]

Maps must be drawn in a way such that the screen that the player sees "makes sense". For example, you wouldn't expect for a dog to be drawn on top of a house. This introduces the concept of draw layers. The map is drawn in several layers, and the layers are always drawn in the same order. We define the following layers for tiles and objects.

  • Lower Tile Layer: represents the ground or floor.
  • Middle Tile Layer: used for variations in the lower tile layer, such as placing rocks or shrubbery.
  • Upper Tile Layer: used to represent smoke, the roofs of houses, or other things high in the air.
  • Ground Object Layer: objects that are attached to the ground
  • Pass Object Layer: objects in the ground object layer can both walk under or walk over these objects (bridges)
  • Sky Object Layer: clouds, birds, etc.

The layers are drawn in the following order.

  1. Lower Tile Layer
  2. Middle Tile Layer
  3. Ground Object Layer
  4. Pass Object Layer
  5. Ground Object Layer (again)
  6. Upper Tile Layer
  7. Sky Object Layer

Ground objects are drawn in two passes because if a ground object is walking over a bridge as opposed to under a bridge, they need to be drawn after the bridge is drawn.

Map Sprites[edit]

Collision Detection[edit]

Because of Allacrost's isometric perspective, we use a slightly different system of collision detection. Observe the first picture on the left below. Even though one sprite is partially drawn over the other, this image makes sense because of the perspective we use. Therefore, what we need to do is define the "collision rectangle" on a sprite that would allow us to draw sprites in this manner. In the case of the standard humanoid sprite, we define this region as the lower square of the sprite, which is outlined in red in the second picture below.

When we do collision detection, all that we are doing is making sure that no two collision rectangles overlap. If they do overlap, we need to move one sprite or the other to fix the situation. Observe the image on the right below. The sprite on the left is walking to the right at a higher speed than the sprite on the right. What we need to do, then, is move the sprite backward enough so that their collision rectangles do not overlap. Effectively, this slows down the sprite on the left so that they are not walking at the speed of the sprite on the right. This makes sense, because if you've ever had to walk behind an old lady in a narrow grocery market aisle, you are forced to walk at her same speed.

File:Mapmode spritesvertical.png File:Mapmode collisionbox.png File:Mapmode collisionblocking.png

Map Context[edit]