Last week, we wrapped up a discussion on map generation. This week, we start another three-part post about how we generate the art in StarBreak®.

PART 1 - CHARACTER ART

Hey, breakers!

Ransom, here! This week we thought we’d let you see a little of what goes into creating a player character for Starbreak. In particular, we’ll be talking about Spriter and what it offers us in terms of production.

A. TOOL SPOTLIGHT - SPRITER

Spriter* is a software developed by Brash Monkey. It’s designed to compose and animate 2D artwork generated in other software, such as Adobe Photoshop or Flash. It offers many great features, including some exciting ones still under development. Nearly all the artwork featured in Starbreak is built using Spriter, putting it at the heart of our pipeline!

Spriter is designed for game development in particular and offers the game artist just about any form of asset transformation desirable. Artists are able to create hierarchies and rigs for modular 2D characters, but Spriter also facilitates traditional frame-by-frame animation. It allows for the easy placement of hit boxes, emit points, and the editing of registration points across multiple images. Another nice feature are Character Maps, which allow for automatic composition and swapping of artwork. The Z-order (or “stacking order”) of art can be easily manipulated, giving the artist convenient control over when and where overlapping artwork occurs. All of this is later exported as data for the game.
Spriter includes many other features that we will touch on now as we discuss how we use Spriter for character art. There are other features that we will also touch on in the coming weeks when we discuss enemy art and environment art in later blog posts.

B. USING SPRITER FOR OUR CHARACTERS

For Starbreak’s player characters, we strike a balance between traditional frame-by-frame animation and modular, puppet style animation. Character artwork is produced and animated in other software, separated into pieces, and then recomposed and animated within Spriter. This method allows us to pack character art into our texture maps efficiently without completely sacrificing the quality of work that traditional animation is known for. Here is an animated gif that shows the Wildfire’s run cycle and the corresponding puppet pieces that are used:

Speaking of traditional animation, Spriter’s frame-snapping function is very helpful here. This feature allows the artist to work in frames per second rather than by milliseconds, which many artists will find more comfortable.

Spriter also offers features to address pixel interpolation. This allows us to animate without telling the game to draw artwork “in-between” pixels, which would normally result in a blurred or choppy appearance. This can be illustrated with this example:

After animations have been made, we can apply boxes and points over the artwork to provide the game with data on attack vectors, vulnerable areas, projectile emission points, and more. These objects fall into the following categories:

• Hit Boxes: These cause damage to enemies on contact.
• Vul Boxes: Establishes areas of the character vulnerable to damage.
• Emit Points: Points in space from which projectiles can be generated.
• Draw Point: Points in space at which an object can be “hung” in game.

Despite the fact that these objects are all invisible to the player, the size and placement of these boxes and points, along with the timing of animations, contribute greatly to the overall feel of a character’s behaviors in Starbreak. Here is an example of a collection of hit boxes for a standard Duskwing attack:

In the above image the box around the character is her vul box. This specifies what portion of the art is vulnerable to attack. Because the Duskwing is performing a ducking attack, her vul box is smaller than when she is standing, reducing her chance of being hit by enemies. The remaining boxes illustrate the hitboxes of her attack arc. Any enemy that is detected to intersect with one of these boxes will take damage and any weapon-based effects (e.g., the Balefire’s burn effect) that are associated with the attack. Here is another example of the Ironclad's standing swing animation in Spriter:

Another feature we use a lot in the composition of our characters is Character mapping. Character mapping is a powerful and convenient feature in Spriter. By assigning different mapping criteria to characters, any piece of artwork can be swapped for another automatically. Characters are originally animated using dummy art, which is then swapped via character mapping for the appropriate appearance. This is what happens whenever you swap weapons in Starbreak, as illustrated by the following Ironclad examples:

Hmm…I wonder what other features this technique can be used for ;)?
That makes for a brief overview of how Spriter is used in the player character pipeline for Starbreak. I hope you found it interesting! Of course, there is a lot more that goes into creating a character, but hopefully this gives a little taste of how characters make it into the game. Next week we will be discussing enemy art.
Have a good week, Breakers!
-Ransom