Artwork Categories

From Hero of Allacrost Wiki
Jump to: navigation, search

This page lists all of the types of artwork that can be found in Hero of Allacrost. Each section states the location(s) where the type of artwork may be found in the program's file directory, the image file format to use, and selected examples.

Note: Images on this page include explanatory caption text. Hover your mouse over the image to read the caption.

Backdrops[edit]

File type JPEG
Image size 1024x768 pixels
Location img/backdrops/, img/backdrops/battle/

Backdrops are full screen images upon which other images and content are drawn. Because of their large size, typically large color count, and lack of need for any transparency, backgrounds are JPEG images. Background images are used primarily in two ways, explained in the sections below.

Scene Backdrops[edit]

Scene backdrops are used to convey an image of a scene in ways that other art of the game can not. These images have a unique artistic style, individual to the other artwork in the game. They are essentially digital paintings, and no other game artwork such as tiles or sprites are drawn on top of them.

A backdrop image of the first city in the game. Also used as a background for the game's main menu. A scene from an event early in the game, showing a city under attack.

Battle Backdrops[edit]

The second common use of backgrounds are used in battles. These backgrounds represent a location where battles take place, such as a cave or forest. Sprites and other visuals are drawn on top of these, so unlike scene backgrounds they are designed to blend together more smoothly with other game artwork. These images have to be crafted more carefully, as character and enemy sprites need to be able to "stand" on the backdrop image. It's easiest to think about the battle backdrops as being divided into three areas, from top to bottom.

  • The top 256 pixels is the background area. It is typically used to show the sky, background structures, or other objects going "up".
  • The middle 256 pixels is the action area. This is where the sprites are placed and where the battle action generally plays out.
  • The bottom 128 pixels is the GUI area. Most of the time, the backdrop image will be covered up by various battle menus here.

Depending on your designs, the following additional information may be important for you to note with battle backdrops.

  • Characters are drawn on the left side of the screen, and enemies are drawn on the right. A "neutral zone" exists between the two where sprites will not be placed.
  • The top of the screen (background area) may occasionally be covered by a dialogue menu or some other temporary notification.
  • The far right side of the screen has a stamina bar and icons for each entity on the battle field
  • The background area may additionally be animated.

A cave backdrop. The top area is suitable for animations. Battles may occur in towns and other "safe" areas, not just dungeons.

Battle Backdrop Animations[edit]

File type PNG
Image size 1024x256 pixels (for each animation frame)
Location img/backdrops/battle/

The game supports custom-made animations for the top portion of the battle screen (the background area of the battle backdrop). Animations can be anything that the artist imagines. Because background animations may only need to animate a small portion of the backdrop, such as a bird flapping it's wings, PNG images are used and the unanimated sections are made transparent. There is no limit to the number of animation frames that you can make or how they are used to produce an animation sequence.

A couple of the animation frames for the cave backdrop. Changes include the water on the left and movement of insects on the right.

Maps[edit]

Maps in Allacrost are comprised of tiles, objects, and sprites. Tiles are small, square images that are used to build a map, piece by piece. Objects include any image that is not produced by tiles. For example, a statue or a treasure chest. Sprites are a type of object which represent living, animated creatures that may roam about the map. Sprites on maps are used elsewhere as well, such as in shop menus or in a battle. We discuss sprites in their own section following.

Tiles[edit]

File type PNG
File size 32x32 pixels
Location img/tilesets

Tiles are the basic building blocks used to create maps. They represent the vast majority of what is visible when the player. Some map features, such as a tree, are created using several tiles that are specifically tailored to be used together to build an object. Tiles may be animated as well, and often groups of animated tiles are used to build things such as fires or waves of water. An animation sequence can consist of any number of frames.

Maps are built by drawing layers of tiles, one on top of the other. A map can have any number of tile layers, but for most maps we stick with three layers. Sprites are drawn interspersed between these layers as well. This is important for you to think about when designing your tiles. Although the way that a map can use it's tile layers can vary drastically, most commonly you want to imagine your tiles fitting on a three layer map with the following properties.

  • The first tile layer is the bottom-most layer. Tiles in this layer should have no transparent pixels, as behind them is simply a black screen.
  • The second layer is drawn immediately after the ground layer and provides for embellishments upon the ground layer, such as bushes, rocks, or boxes.
  • The third layer is drawn after all map objects are placed. Use upper layer tiles for the tops of walls and buildings. Sprites do not collide with any tiles drawn in this layer.

Because there are so many tiles in the game, it can be quite troublesome to manage if each tile was contained within it's own file. We solve this problem by instead creating tileset images. A tileset image is a 512x512 pixel PNG image that is filled with 32x32 pixel tiles. This means the image contains 16 rows and 16 columns of tiles, for a total of 256 tiles in a tileset. Tilesets are organized so that, generally speaking, all tiles in a tileset are used to construct the same environment, such as a desert or a forest. Sometimes 256 tiles is not enough space for all the tiles in a tileset, in which case we simply create multiple tilesets and spread the tiles out between them. A map in the game can load any number of tilesets that it wishes. All the animation frames for an animation must be contained within the same tileset, however, and thus animations have a limitation of 256 total tiles (which should be more than enough). When creating your tiles, you should never need to concern yourself with the particulars of tilesets or feel like they present you with any limitations. This information was presented here purely for your education.

A tileset may contain some dead space where no tiles exist. Tilesets include several related items, in this case objects you'd find inside a house. Notice the animation frames for the clock and pot of fire at the bottom. Tiles are placed in such a way that it's easy to see what a group of tiles should represent. This tileset also contains an animation, comprised of four-tile frames, showing a large insect crawling along the wall.

Objects[edit]

File type PNG
Image size Various (length/width in factors of 32)
Location img/sprites/objects

TODO:

Sprites[edit]

Sprites represent living things that inhabit the game world. Sprites are re-used across all different aspects of the game modes and menus. Most sprites created for the game will have what we call the "standard movement" set of animations. These include standing still (typically only a single frame) and walking animations for each direction. Sprite movement in the game world is eight-directional (up, down, left, right, and the four diagonals). However, we only create four-directional movement images (up, down, left, and right). One of the lateral movement animations is used when the sprite moves in a diagonal direction. This greatly reduces the amount of effort it takes to produce the standard movement frames or a sprite.

Characters[edit]

File type PNG
Image size Typically 32x64 pixels, but may vary
Location img/sprites/characters

Characters include both playable and non-playable characters in the game. These sprites are typically human, or humanoid. With few exceptions, all character sprites include a standard set of standing and walking animations. An averaged-size adult sprite is typically 32 pixels long by 64 pixels high (or 1x2 in units of map tiles). However, sprites can be smaller or larger. Similar to tiles and tilesets, we group several individual sprite images into a sprite sheet. Typically, each type of animation has it's own sprite sheet file. In any animation, all individual frames must be the same size. Below is a template image of the standard frame set for a male, female, and child sprite. If you like, you can use these as a starting point in creating your own sprites.

The "0" frame is used for standing and is not part of the 5-frame walking animation. The animation sequence is explained at the bottom of this image. Note the navel position. Use this as a reference point for clothing. Compared to the male template, this female sprite is slightly shorter and has breasts. This model works for both male and female children.

Note: The model examples are missing the standing frames and the side walking animations have extra frames. Ignore these differences and follow the animation guide in the left image.

Because the left and right sides of a sprite are typically mirror images of one another, you can often get away with creating either only the left or only the right animations, then copying and flipping them to produce the other set. Thus the common case requires only 18 animation frames to complete the standard movement set for a sprite. Below are some examples of standard set for some of the characters seen in the game.

Claudius, the story's main character. Observe how this old woman has a significantly different posture compared to a healthy adult. Even though children such as this boy are not 64 pixels tall, we make their frames the same size as an adult for convenience.

Running Animations

Some characters will additionally have a separate set of animations for running. Typically, running animations are created only for the main playable characters in the game. Running animations follow the same format as walking animations. These animations are created on an as-needed basis and have no pre-defined format as to how many frames there should be or how those frames should be animated. Like all animations, frames should remain the same size, however.

Compare Claudius' running animation with his walking animation. Notice that the frames on the left are for the standing pose. The same frames are found on the left of the walking animation.

Custom Animations

Some sprites, usually playable characters and important NPCs, will require some additional animations beyond walking and running. Animations that are used for battle or expressing certain emotions such as surprise or anger are two such examples. These animations typically do not need to be done in all four directions. Character sprites in battle are always facing to the right side of the screen, for instance.

Note that in this 5 frame animation, each frame is 64x64 pixels instead of 32x64 pixels. The extra room is added to this animation to show the sword swinging without forcing constraints on the artist. Try to create animations that are generic enough that they can be re-used in a variety of situations. The jump in this animation is a nice effect that expresses surprise.

Note: When character sprites are used in battle, the game magnifies them to 4x their size. A 32x64 pixel sprite will be enlarged to become a 64x128 pixel sprite

Enemies[edit]

File type PNG
Image size Various (length/width in factors of 32)
Location img/sprites/enemies

Hero of Allacrost does not have so-called "random encounters", but instead enemies are visible on the map and the player may choose to try and avoid them or to engage them. These sprites can be as small as 32x32 pixels (smaller than a standard character sprite) or much larger. Requirements for these sprites are almost always limited to only standing and walking animations. However, custom animations may be created for special circumstances. The same template for the character/human sprites is applied for enemy sprites, although obviously the animations themselves may vary greatly (bats flapping their wings, for example).

Simple enemies, such as this slime, require little animation effort due to the lack of limbs and other features. Animations for enemies can sometimes be much simpler than those that are created for characters.

Battle Sprites[edit]

File type PNG
Image size Various (length/width in factors of 64)
Location img/sprites/enemies

Unlike character sprites, which re-use their normal set of sprite animations in battle, enemies have a unique sprite created specifically for battles. Enemy sprites in battle are much more detailed than standard sprites are (and much larger as well). However, enemy sprites are not animated, reducing the burden on the artist. The smallest an enemy can be is 64x64 pixels (technically it can be only one pixel, but the image has to be 64x64). The size of the characters in battle is 64x128 pixels, so you can use that information to size your enemy sprites accordingly.

Another feature unique to enemy battle sprites are what we call "damage frames". Each enemy sprite has a total of four frames created for it, and each frame displays the enemy in a different state of health. In other words, the first frame shows the enemy at 100% health, the second frame represents 66% health, the third 33% health, and the last frame is how the enemy looks at 0% health. As you may expect, as the battle progresses and the enemy takes damage, it's appearance will change to reflect it's current state. We also will blend two of these frames together so that the enemy appears to take damage gradually, rather than looking perfectly fine in one moment, then suddenly switching to a frame showing damage. An enemy that is at 50% health will have its 66% and 33% damage frames blending together in a 50/50 ratio to reflect this state. The artistic limitation with this feature is that you can not make drastic changes in an enemy's appearance, such as showing a limb that has been severed. Limit your damage frame alterations to blending, bruising, tearing, and other small changes.

All four frames for an enemy sprite are placed in the same .png file in a single row. The left-most frame represents 100% health while the right-most frame represents 0% health.

Notice the wounds that open up as this spider receives more damage. Because this skeleton lacks any tissue to apply bruising or bleeding to, instead we add cracks and blemishes to their bones. You can get really creative with creating the damage frames for some enemies, such as this demon tree.

Creatures[edit]

File type PNG
Image size Various (length/width in factors of 32)
Location img/sprites/creatures

Creatures are various organisms that roam the world that are neither human nor enemy. The purpose they serve is to make the environments feel more alive. Examples include bugs, birds, dogs, cats, and farm animals. Typically, they need only their standard movement frame animations created. As an artist, you should take care to make sure that creatures do not look hostile or dangerous, as we want to try to avoid confusing the player with thinking that they are enemies. One way to achieve this is by making them smaller in size. Look for an enemy sprite of a snake, for instance, and make a snake creature smaller and more passive in appearance.

Sprite creature squirrel.png Sprite creature butterfly.png

Portraits[edit]

Portraits are images used to convey the face or body of a character in a more realistic light than we are able to achieve with pixel art. Portraits are typically done for only the most important characters in the game. Any character that is playable must have a full set of portraits created. Portraits may also be desired for some key NPCs and villains in the game. All portrait images should display only the character. No other visuals are permitted, such as a bird or structure in the background.

Face[edit]

File type PNG
Image size 200x200 pixels
Location img/portraits/face

Face portraits show a profile of a character's face, including their neck and shoulder line. The most frequent use of face portraits is for display alongside a character's dialogue. The character should be looking indirectly to the right, as the examples below show. Portraits should confirm to a similar style as these examples.

Claudius, the main character. Laila, young and beautiful. Notice Marcus' partially grey hair, reflecting his age. Portraits allow a great amount of detail in expressing a character's appearance and complexion.

Note: We only require a single neutral face portrait for each character. In the future we may consider supporting multiple portraits for a character to display different emotions and states.

Damage[edit]

File type PNG
Image size 100x100 pixels
Location img/portraits/damage

Damage portraits are a special kind of face portrait designed expressly for use in battles. Unlike the standard face portrait, the damage portraits display only the face (not the neck and shoulder line). At 100x100 pixels, they are also much smaller than a standard face portrait. These portraits are only created for playable characters that will be used in battle. The portraits are displayed when a particular character is selected for an action during a battle. The most unique aspect about this type of portrait is that, similar to enemy battle sprites, multiple "damage frames" are created to reflect the character's health. Each character has a total of five damage frames that reflect their health at 100%, 75%, 50%, 25%, and 0%. Two of these frames are blended together to reflect different health levels, such as 37%, so that the change in appearance is gradual and not dramatic. Like enemy battle sprites, the changes between two frames should not be dramatic (no noses cut off, etc.). Common alterations to indicate damage include bruising, bleeding, open wounds, "messy" hair, and slightly tilting the head downward.

Damage progresses from light bruising, small cuts, to heavy bleeding. Notice the eyes shutting as the character nears death.

Full[edit]

File type PNG
Image size 150x350 pixels
Location img/portraits/full

Full body portraits only need to be created for playable characters. These are most often seen in the character/party menu screen. This portrait allows the artist to show details of the character's physical structure, standard clothing, and weapons. There are no limitations on full portraits and any profile angle can be used, but the most common profile is full-frontal with the character facing the viewer. This profile allows for the most amount of detail of the important features of a character. However, a side or back profile may be more appropriate for a character who is mysterious or secretive.

A battle-ready stance is very appropriate for this type of portrait. A good example of displaying the type and variety of weapons that this character uses.

Locations[edit]

File type PNG
Image size 500x125 pixels
Location img/portraits/locations

Location portraits are similar to landscape paintings and are used to represent a particular type of location in the game. They convey the environment in rich detail and provide a complementary perspective to the scene that map tiles are used to create. Some location portraits will be specifically designed to represent certain key locations of the game. Other portraits can be made more generic, such as a graphic for a cave, so that they can be re-used as the location portrait for multiple maps in the game. Each map in the game has an associated location portrait. There are no limitations as to what can be in these portraits, so you may let your creativity take over. These portraits are not animated and you must add a small border and shadow graphic that surrounds the outline of the image.

A generic portrait that can be used for nearly any cave found in the game. Note the surrounding border. An example of a location that does not contain hostile enemies.

Note: If a particular location has an associate battle background, you can simply copy over the top of that background and resize it to make the location portrait.

Icons[edit]

Small icon images are used throughout the game in various ways to represent a wide variety of things. The categories of icon objects below vary widely in their design, purpose, and use.

Actors[edit]

File type PNG
Image size 45x45 pixels
Location img/icons/actors

Actor icons are used in battle. Each character and enemy has it's own actor icon. These icons are incredibly easy to make, as they are simply small cut-out portions of either the character's battle portrait or the enemy's battle sprite. Only the 100% health frame is used to create the icon; The icons do not reflect damage to the actor in the same way that their portrait or sprite does. These cutouts are then placed in a square diamond with a specific border. The purpose of these icons are for the battle's stamina bar, which is a graphical indicator on the right side of the battle screen to show when each actor will be ready to execute their next action.

Templates used to create the icons. The cutouts are placed on a partially transparent black border and the frame line surrounds the image. Claudius, created using his full health battle portrait. Another example character icon. This spider icon was created from it's corresponding battle sprite. Generally, we try to use a cutout of the enemy's face for the icon.

Inventory[edit]

File type PNG
Image size 60x60 pixels
Location img/icons/items, img/icons/weapons, img/icons/armor

Any object that can be collected by the player and placed in the party inventory has an icon image associated with it. There are eight different kinds of inventory objects in the game: items, key items, weapons, head armor, torso armor, arm armor, leg armor, and shards. All eight categories use the same icon image format and style. The icons do not need to display the entire object (it is impossible to fit a detailed sword image in a 60x60 pixel image), but the icons should display enough of the object so that it is easily apparent whether the object is a sword, bow, helmet, etc. The border of the icon image is surrounded by a thin transparent area, with another thin, dark border inside of that. The inner area of the image is completely black, and the artist content is drawn upon this black area. Inventory icons allow for a fair degree of creativity, despite the size limitation. However, it should be noted that the game also requires simplistic and worn-down looking equipment in addition to highly artistic and embellished types. This is especially true in the beginning of the game, as equipment will start out rather basic-looking and grow to look more powerful and functional.

This series of icons are used to represent all eight inventory object types. The ninth icon here is meant to represent all types of objects. An icon for a potion item. A sword weapon. A powerful-looking crossbow A basic helmet. Armor that appears to offer a formidable amount of protection.

Effects[edit]

File type PNG
Image size 25x25 pixels
Location img/icons/effects

Effect icons are small images that are used to represent a property of a skill, piece of equipment, or an actor. Elemental effects can be used to show weaknesses to certain types of damage like fire. Status effects represent states of an actor, such as poison or an increase in agility (haste). Effect icons are also used to indicate whether a particular battle skill affects a single target or an entire party. Because of the limited number of effects in the game, there are not too many of these icons to create. Status and elemental effects also have an intensity rating, indicated by a colored border and arrow indicating whether the effect if helpful or harmful to it's target. Observe the template and example images below.

Templates showing the 9 different intensity levels for an effect. All eight elemental effects in the game are represented here. Four are magical in nature and the other four are physical. A sample of status effects. Note that not all status effects need both the "helpful" and "harmful" sets. Some status effects may be only one or the other.

Miscellaneous[edit]

GUI[edit]

Editor[edit]

Logos[edit]

Fonts[edit]