Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Character Spriting Part 1 - Graphics Gale Tutorial

Character Spriting
Part 1
Character Front Outline
By: Holder

Galeban200x40.gif


Graphics Gale can be found here: http://www.humanbalance.net/gale/us/, and the best thing it's free.

Introduction
The first part in a series of tutorials aimed towards creating your very own character set template. This isn't just a start to finish tutorial as I'm hoping to inspire variation and creativity here so there's a lot of different examples along the way but the basic principles remain.

Setting up
Firstly getting your working area sorted is a key part for this, if this stage isn't done right then by the time you come to test your creation then it could be a completley different size (smaller or larger) than you can use or even want.

Open up Graphics Gale and select File and New... and you'll be promted with a box for a new image, this box contains two values which are horizontal and vertical. Now for a template set up I'd suggest that creation needs to be within the bounds of each tile, so it's 32 x 4 for horizontal (32 x 3 for VX users) and vertical should be 32 x 8 (for bot XP and VX) as you're going to be creating something not bound to the height of a tile:
gallery_2782_66_5795.png


Now that may look a bit too tall and a little confusing with it being blank, but don't worry you'll be sorting that out in no time. Previously it was best to colour the squares in to show which frame was which, howevere within Graphics Gale you can set up a custom grid which is really useful. Here's how to set that up.

Along the top bar you'll see these three Icons:
gallery_2782_66_19702.png


Left click onto Custom Grid and select Setup... with the next box click the Add button and for both x and y set it to 32, double okay that and you'll now be able to left click Custom Grid and select your new 32 x 32 grid.

Note: Having a grid split the height in half helps for sizing. It also helps later on when it comes to different directions.

I used to rely on Layers more than I do now but it's always good practice to use these, especially when you're going to be trying different things. So create a new layer:
gallery_2782_66_14151.png



Face me!
Now it's time to actually get something on that blank image, it's sometimes a tricky thing wondering where to start but I always get the eyes in there first as it's a good starting block, for the overall size of the head and defines the style you're going for. I found that trying to fit them inside the head can be tricky especially when you've not been spriting long and haven't had much experience in the way expressions on character sets are done.

Anyway eyes on character sets are quite large, like I've said it's normally the place where it's easiest to show expression so making them stand out is quite essential. Normally eyes range in size and also the space inbetween them, whichever you choose it's up to you, I'll be working from a certain set but will show variations at each point.

Working with just black for now, we'll start with the eyebrows first. Create a straight line of three pixels and drop down one towards the outside, now do the same on the other side. Under the centre each eyebrow drop down two pixels, these are the puplis and also eye colour.

Now I've done this with a single space between the eyes but by all means two is also workable:
gallery_2782_66_2172.png


Next mark out the nose, now this isn't going to stay as obvious as it looks now but it's always a good marker for the chin. So one down from the bottom of the eyes and within the centre mark it there. Leave a space of two pixels and again mark that area, this has become your chin.

To continue further from the side of the face do a line the height of the eyes right after where the eyebrows finsih. This will act as a guide for constructing the jaw and also the top of the head.

Note: From now on any new lines will be in grey to show what's been added, but still work with black for now:
gallery_2782_66_2920.png


Now we're going to move onto the head, to get the basic shape right it's not just a circle it's more of a rounded rectangle linking into the side of the face.
Start by moving one pixel out from the edge of the face going four high, the come in one and go up further two, again come in one and this time only place one pixel. Then extend across till you meet in the middle.

Don't panic if it looks like you've got a massive forhead, this is quite normal as it's going to be covered with hair, you've also left room for bangs and room to do expressions with the eyes:
gallery_2782_66_2432.png


The jaw line is next, now this can be done a number of different ways so I'm just going to leave this bit with an image. There's certain ones that only suit and make a character more noticable as Males, Females and Children:
gallery_2782_66_2027.png


I'm going to continue using the Male Face but feel free to practice using another one or your own.

Body poppin'
Unless you're creating a floating head then it's going to need the body. Now something you need to realise before continuing, the viewpoint for games like these is slightly above centre, meaning that a neck is rare, and shoulders normally start from just above the jaw line.

To continue defining the different between males and females you need boarder shoulders for males and more sloaped ones for females. Starting from the line on which your jaw ends continue out without marking anything until one pixel after the jaw line moves up for the second time. This will make your character look connected body and head wise.

Now for the male bring it out (counting from the centre) six pixles and drop it down one on the seventh, as for females bring it out six and drop down one.
To mark where the arms connect from (The armpits) leave a three pixel gap from where you started the shoulders (the inner point), and mark a pixel there:
gallery_2782_66_1349.png


The rest from here is very different so after this part I'll show both Male and Female Versions.

Down the centre of the body I'm going to mark out the Navel, now depending on what sort of size body you're wanting to do depends on where you mark this. Just a piece of information below this will be for where the lower half is formed, so if you're going for a child character or a cute anime style then do it higher up.
As this is an adult Male/Female I'm going to mark it ten down from the base of the chin.

Bring a line down from the armpits passing the navel by two for males, and for females bring it out by one and down by two-repeat this till you're just above the navel and then out by one when you're in line with it.
gallery_2782_66_1408.png
gallery_2782_66_1481.png


Let your arms hang low
Now a lot of people noted the flaw with the RTP of RPG Maker XP character sprites, the stump arms. Well now's your chance to really strectch out those limbs and get some hans on there.

We're going to start from the edge of the shoulders now, moving one pixel out from where we left off. Bring it down by five and then out and then down by five for males and four for females.
Note: Reasoning behind this is that to show the difference in genders males have shorter legs and females have longer ones, without altering the height of the sprite we're making the length of the male body longer and the female legs longer, so the hads will sit on the hips at different places. It's only by one pixel but flicking through you'll notice the difference.

As for the hand itself come out again by one and mark down three, bring it down one agian and one towards the body marking three towards the body. Mark one up and mark again towards the body continue marking up so the inside of the arm goes up seven for males and six for females. For the Male you'll need to go up one and mark one pixel to connect to the body.

Now go back to the hand and place a pixel within the centre of the hand, this will make it obvious which way the hand is.
gallery_2782_66_3327.png
gallery_2782_66_530.png


Feet set on the ground
Time for the legs and and feet, something which some people hate doing, myself included.

Now the male outline is going to look even more like a plank, but don't worry this will work when it's coloured. Now from where you left off at the body bring it out one and mark down four. This will be where the knees are, and also gives indication as to the start of the inner legs will be.

Now from where you've ended just before the knee mark in the centre, come out and up by one and mark two high. The legs on a male can look simple but I normally bring them down by seven, so mark down seven from each of the four points (leave a gap from the two high).

As for the female the hips and curvers are more of a focus and usually leaves a nicer looking outline. Now from the point level with the navel come down and out by one, and mark. You should be marking only three new pixels as the hands cover over the hips.

Come inwards and mark down six and in by one, also leave a mark in the centre. Now back up to the navel and come down three and mark that point and either side of it. From the centre of that line to the point at the bottom of the legs create a line.
gallery_2782_66_3464.png
gallery_2782_66_2014.png


Sometimes feet can be done as a simple block two three high by five or six, but if you're wanting to add detail and possibly boots or heels then you're got to have to have some kind of shape to them.

Now from the male join the inner lines together to form a heel, and for the outside leg your going to need a mark on the inside one up from where you left it, continue diagonally down and out four times to then finally drop the forth down two, this will form the toe.
Coming in and down go towards the centre and mark a line of four, go up and in by one and mark a line of to so it connects to the heel, and then your Male outline front view is finished.

For the Female the feet are done facing forward a bit more than that of the male. so from where we left off on that on the ouside of the leg come out one and mark down two twice. This will help doing heels and other long footware a simpler process for the side views.
As there's no footware on this character come down and inwards again and mark a line of four going towards the centre. Go up and in and place a mark, then from the centre continue the line up till you reach the bottom of the leg. And there you've finished your Female outline front view.
gallery_2782_66_3378.png
gallery_2782_66_2898.png


Closing part one notes
Now that's just one way with one gender alternative, there's a whole load of different styles and alternative character types you can create. Just remember to place emphasis on the obvious parts, no matter how small the alteration on the outline it will show if it's in the right place.

Here's a few little experiments I did after finishing these two, why don't you try to do some:
gallery_2782_66_2096.png



gallery_2782_66_177.png

Hope this is useful to everyone here at HBG, part two will focus on colouring this frame and tutorials to follow will include animation and how to do different views easier. Any C&Cs are welcome, and I'd like to see what kind of outlines you're able to do, hey think monsterish or even aliens.

Farewell and stay safe-
Holder
 
Oh look, a tutorial... that's been totally ignored for four days apparently :/

I like how you illustrate the process step-by-step with respective images... that should help every ascending spriter along the way definately. I'm not into the rather realistic approach myself, but yeah... it's not about taste ^^

In general, congrats on one of the nicer spriting tutorials so far... I'm definately looking forward to the next step!
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top