You are here

The Art of StarBreak Pt. 1 - Character Art

Submitted by Ransom on Wed, 08/12/2015 - 13:05

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

*The UI of Spriter is a copyright of BrashMonkey and used with permission. StarBreak® assets are a copyright of Crunchy Games® all rights reserved.

Comments

Comment: 

Maybe it's just because I'm not a programmer, but this article was much easier to understand and digest- and it kept my interest much more easily. It really got me thinking about mechanics (Have a tipper mechanic for DW? Edge of her whip does more damage? Expand that to other shells?), and also future possibilities (I hope that comment toward the end was hinting at skins ;3). I really do enjoy the entirety of Starbreak's art, characters and all, and will def look forward to the next couple of installments!

Speaking of the future of the dev blog, this article also got me thinking about before you guys get everything going- specifically, the idea stage. I'd really like to see articles about the planning aspect, what did and didn't work, early concepts for zones and shells (You stated on your twitter that our concept art of DW was after you guys decided to shift directions, and recently released artwork of proto-WF showed him with a sword), and the reasoning behind each situation.

Again, thanks for this article, and thanks to Crunchy for making this game <3

Comment: 

This software Spriter is a very well known application to design 2d games in it. As rushessay says that We can create a likable character of our own by using this application. This software is user friendly and has lots of features in it. With help these we can drag and drop the images or figure and create new 2d characters for games.

Comment: 

Cost Accounting Assignment Help Homework Help, Cost Accounting Help Finance Assignment, Cost Accounting Assignment Help Finance Homework and Project of financial management Cost Accounting Assignment Help Accounting is a field that is numerical in nature. The students who study accounting are concerned with the numbers.

Comment: 

Plastic surgery essentially allows you to become all you can be and there is nothing wrong with that, it has made

plastic surgery helps to patients with chronic baldness feel better about themselves and it has also made it possible for a little girl who was

borne with a deformed mouth smile again.many people goes through it and they are satisfied it with botched plastic surgery. for more details go through it botched plastic surgery it is a good type surgery it is available normally in hospitals.

Comment: 

This post shares how to generate the art in StarBreak. I think this post is very much enough to learn the method to make this work more perfect. I am expecting more updates on this blog. Keep sharing more posts here! optimum internet

Comment: 

This position go halves how to produce the art in StarBreak. I believe this placement is very much sufficient to study the method to pay for custom essay construct this work more perfect. I am in the family way more update on this blog.