Artwork Standards

From Hero of Allacrost Wiki
Revision as of 15:31, 5 December 2012 by Roots (talk | contribs) (Copying page from old wiki.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
This page is under development.

This page explains the technical and stylistic standards for creating Allacrost artwork. It is absolutely vital that all artists wishing to contribute to the game read and fully understand the sections of this page that are relevant to their area of work. Artwork that is not consistent with these standards will not be considered for use in the game until the problem(s) are fixed.

General Standards

Before getting into specific standards for certain types of artwork, the artist should be aware of a few general rules that apply to Allacrost artwork.

  • The PNG image format is used for almost 100% of the graphics in Allacrost.
  • Transparency in images is done via the alpha channel that is supported in PNG images. Transparency is not done by color keying (using a single solid color on the background to represent which parts of the image should be transparent).
  • The JPG image format is used for very large images that usually take up the whole screen.



As you might expect, much of the artwork in Allacrost is animated. This section describes the allowances and limitations of animation in the game, as this information is applicable to all artwork. Animation is done in Allacrost by using a set of animation frames and timing information. You can display the frames in any order, for any amount of time, and frames may be re-used more than once. For example, let's assume we would like to animate a tree and the animation is composed of four seperate images/frames (F1 through F4). The animation is specified in a data file by doing something similar to the following.

  • {F1 100, F2 250, F3 1, F2 550, F3 12000, F4 200}

In this example, frame 1 is displayed first for 100 milliseconds, followed by frame 2 at 250 millisecionds, frame 3 for 1 millisecond, and so on. The time values corresponding to each frame must be positive integers and greater than zero. You wouldn't want a frame displayed as quickly as 1 millisecond as in the example above though for two reasons. First of all, the human eye is not acute enough to be able to perceive that many frames per second. Second of all, it is highly likely that the video engine will simply skip over the frame because the animation is proceeding too quickly for the player's system. (This requires some technical knowledge about the engine and time-based movement to understand fully). Please also refer to this site to get a feel for how slowly or quickly your animations should be made.

One important thing we haven't mentioned yet is the frame sizes. 99% of the time, all frames must be the same size. If you have a sprite animation where one frame needs to be twice as long and twice as high as the other frames, it is perfectly acceptable to make the other frames as large as the largest frame, and fill that unused space with transparency. There may be some special circumstances where you must use different sized frames. If you believe this is the case, talk to the programmer responsible for that particular piece of code, or address the programming team as a whole with your situation. If it is agreed that dissimilar frame sizes are needed, it is then your task to make sure that all frames are aligned to some common point, so that (for example) a sprite doesn't appear to "transport" over a short distance when a different sized frame is displayed. Typically, you should align the frames to the lower-left corner of each image, although this depends on what mode you are using the animation in (map mode and battle mode both use lower left corner animation alignment).

Lighting and Effects

Map Artwork

Map artwork primarily consists of three types: tiles, objects, and portraits. Tiles are small blocks that are used to construct the background environment, while objects are variable-sized entities that exist and may roam on the map (sprites are one type of object). Portraits are used to illustrate facial details and expressions of characters in a dialogue. Almost without exception, all map artwork is stored in PNG image files.

Map Tiles

All map tiles have dimensions of 32 by 32 pixels, with no exceptions. Tiles are not stored in individual image files, but rather multiple tiles are stored in a tileset image file. Animated tiles may be created by using multiple still image "frame" tiles to piece together the animation. Likewise, multiple tiles can be pieced together to represent a large tiled object, such as a tall tree. Multiple layers of tiles are drawn for every map.

Tile Layers

Maps are created by drawing 3 layers of tiles and 3 layers of objects. The names of the three tile layers are: lower layer, middle layer, and upper layer. None of the tile layers need to be filled in completely a map. Indeed, it is perfectly acceptable for a tile layer to not have any tiles at all. Each tile layer is drawn in a different order and the layers are used for different general purposes.

Lower Layer

The lower layer tiles are the first to be drawn on the map, and typically represent the ground. Usually, lower layer tiles should be completely opaque and contain no transparency (since there's nothing beneath them except blackness).

Middle Layer

The middle tile layer is drawn right after the lower layer. The middle layer tiles are used to put variation into lower layer tiles, such as placing some patches of grass upon tiles of dirt that were drawn in the lower layer. The middle tiles may also be used for effects such as shadows, etc. Middle tile layers are usually partially or mostly transparent.

Upper Layer

The upper layer tiles are drawn over both of the other tile layers as well as all map objects. This layer usually has very few tiles in it, and represents things such as roof-tops, walls which sprites can walk behind, smoke, clouds, etcetera. Upper layer tiles are typically either completely opaque (e.g. sections of rooftops) or partially transparent (e.g. smoke).


Tileset images are 512 x 512 pixels in size, although larger sizes may be permitted in the future. This means that each tileset of this size will contain 16 rows and 16 columns of 32 x 32 pixel tiles, or 256 tiles in total. The tiles contained within a tileset may be used for any of the three tile layers, so the artist should not concern themselves with the tile layers when constructing a tileset. Tileset images store tiles that are related based on their map environment, not their tile category or type. For example, a tileset file should hold all tiles that are used to create a cave map; a tileset should not be created to hold various types of rocks, dirt, or trees. Sometimes there may be too few tiles to fill up all 256 available locations in a tileset. This is perfectly fine, and the empty slots should remain fully transparent. If there are too many tiles than the tileset can hold, you can create a second (or third, or fourth) tileset image. Note that maps can be constructed from more than one tileset image. Also note that a tileset image can be used by more than one map.

The example below illustrates a standard sized tileset for a desert cave.

Desert Cave Tileset

Map Objects

A map object is something that is not constructed from tiles and is usually (but not always) animated. Map objects have virtually no restrictions to their dimensions, unlike tiles which have fixed dimensions. Map objects almost always have transparency, usually at the borders of the image so that the object does not appear as a block. A map object may have a single image that represents it, or it may have multiple frames. The most common type of map object is a map sprite, which is an animated, living entity on the map. With the exception of map sprites, map objects have their position permanently affixed and are not allowed to move around on the map.

Map Sprites

Map sprites are mobile and can usually be interacted with by the player or other sprites. A normal humanoid sprite is 32 by 64 pixels, and indeed most map sprites in Allacrost are of this size. Sprites can come in multiple sizes, however. A sprite usually has at least 24 different frames, which allow for horizontal and vertical movement on the screen. These 24 frames are referred to as the standard sprite sheet of the sprite, and it is expected that every sprite have these frames. On the other hand, other frames are used on a per-map basis for different scenarios, such as for displaying emotions. These images are known as the special sprite sheets.

Standard Sprite Sheets

The 24 frames of the standard sheet are divided among the four facing directions (north/south/east/west), yielding six frames per direction. One of the six frames for each direction is for a stance for when the sprite is not moving. The other five are used for animating the sprite as it walks. The example below illustrates how to create a standard sprite sheet. Note that both left and right movement frames must be present in the final sheet.

Map Sprite Models Claudius' Standard Sprite Sheet

Special Sprite Sheets

Special sheets are used to represent virtually any action, from running, jumping, crying, or anything else. Special frames are created and added into the game as they are needed in specific scenes throughout the game. There are no limits to the number of frames in a sprite's special sheet.

Map Portraits

Map portraits convey facial details and expressions during dialogue sequences. All map portraits are 200 by 200 pixels in dimension. A character may have multiple portraits that convey different emotions such as anger, sorrow, enamor, etcetera. All characters have a standard "neutral" expression portrait, such as the one for Claudius below.

Cladius Face Portrait

Battle Artwork

There are many different forms of battle artwork, which include background images, character sprites, character portraits, enemy sprites, stamina icons, and skill animations. The sprites used in battles are much larger and more detailed than their map sprite counter-parts, requiring a longer time for them to be fully developed. In Allacrost battles the characters are fully animated, having several animations that are used . With the exception of battle background images which are in JPG format, all battle images are in PNG format.

Background Images

Note: The methods in this section are not yet finalized and may be changed at a later time.

Every battle that takes place has a background scene that the sprites and other visual objects are place upon. These backgrounds have certain restrictions to how they are constructed.

  • Because of the large amount of colors and image size, backgrounds are in JPG format.
  • Backgrounds are actually composed of two separate images, a bottom and a top piece.
  • The bottom piece is 1024x512 pixels and is not animated.
  • The top piece is 1024x256 pixels and may be animated, with an unlimited frame count.
  • The left 128 pixels for each image will normally be covered by menus.
  • The bottom 128 pixels of the bottom image is also a reserved space for menus.
  • The top 224 pixels of the top image serves as scenary to make the background look three dimensional and not completely flat.

(A sample background and layout will eventually be placed here as an illustrative example.)

An artist designing a battle background must take all of these criteria into consideration when designing their backgrounds. The following is a list of suggestions on how to best utilize that space.

  • The lower 128 pixels of the bottom image may be used for an additional three-dimensional perspective, such as showing the roof tops of houses in a town background for example.
  • The animation for the upper 224 pixels of the top image may include environmental effects, such as falling leaves in a forest, or soldiers fighting in the distance on a field of war.

Character Sprites

The standard size for the idle character sprite animations are 64 by 128 pixels. These dimensions have a little flexibility, but the artist should try to keep the sprite as close to 128 pixels tall as possible, so as to avoid overshadowing other characters on the battle field. The other animations are granted a larger degree of flexibility with regards to their side. All animations, regardless of size, should keep the character aligned to the left bottom corner of the image so that the character is not seen to make sudden "jumps" when switching between animations. The number of frames in each animation is not limited, and each animation may use its own arbitrary timing sequence (in other words, two characters can have idle animations that are timed completely differently and with different frame counts). The only time a character sprite is not animated is when they are exhausted or otherwise disabled on the battlefield. Note that the character sprites are placed on the left side of the screen and the enemy sprites on the right, so the character sprites should usually be facing towards the right.

Animation Sets

Character sprites have several animations that are used for different states of the sprite. Unique sprite animations are not' provided for each and every skill, but are instead shared between "classes" of skills. Examples of skill classes would be close-ranged attacks, magical spells being cast, etcetera. The reason for this animation sharing is not because we are cheap, but because it is simply too much work to animate every character for every possible skill they may possess. Because the animations are used for multiple actions, the animations should be made as generic as possible. Each skill does have its own unique effect animation, but that is outside the scope of battle sprite production. The list below contains the planned animation sets for character sprites.

  1. Idle: when the character stands in place as the wait bar fills. Possible effects include visible breathing, bobbing/weaving, etc.
  2. Warm-up (Physical): when the character is in warm-up mode, gathering strength for their next attack
  3. Warm-up (Magical): when the character is in warm-up mode, preparing to cast a spell
  4. Forward Movement: character charges forward to engage the enemy in close-range combat
  5. Backward Movement: character retreats to home position from a close-range attack, still facing foes
  6. Close-Range Attack: character strikes an enemy who is immediately to their right. This animation should try to be as generic as possible since it is used for multiple skills
  7. Long-Range Attack: character attacks a foe from a distance
  8. Cool-Down: character shows fatigue from recent execution of a skill
  9. Damage Taken: occurs when the character takes damage from an attacker
  10. Defend Position: a defensive position the character takes when executing a physical defense skill
  11. Death: when the character is killed

This list may be appended to or otherwise modified in the future.

Character Portraits

Claudius Battle Portriats

Enemy Sprites

Enemy sprites are also in PNG format with a minimum size of 64x64 pixels and can scale up to as large as 512x512 pixels as long as both the pixel width and height are a multiple of 64 (the sprite images do not need to be square). Unlike character sprites, enemy sprites are not animated because of the large number of enemies in the game. Instead, each enemy sprite has 4 frames, representing various levels of damage that has been caused (this includes the normal "no damage" frame). The 4 frames should be representative of the enemy at: 100%, 66%, 33%, and 0% of their maximum health.

Instead of making sudden transitions from one frame to another, in Allacrost two of the frames in the set are blended together gradually, as a factor of the enemy's current hit points over their maximum hit points. So if an enemy's health is at 50%, its 66% and 33% health frames would be blended together accordingly. Because of this transition, drastic changes between frames (such as losing a large limb) are not feasible to make. Instead it is preferred that increased bleeding, brusing, and wear-and-tear be show on the enemy instead. Examine the spider sprite below for a good exmaple.

File:Spider.png File:SpiderDamage1.png File:SpiderDamage2.png File:SpiderDamage3.png

Stamina Icons

Skill Animations