Idle sprites - from concept to pixel art

Although I know that having made fully rendered graphics for the entire game (ie choosing a resolution and drawing it all) would have been slightly more within my comfort zone, I was determined to for once, make an entire project on pixel art. After comming along with some of the main characters' concept art  that mainly where made as promotional art I started making the conversion into in-game graphics.

I knew I was going to make big sprites and stay away from 8 or 16 bit graphics as I wanted to portraid a nice amount of detail. 

The first character I wanted was obviously the main character Kamea, which pretty much has been used as a reference for the rest of the level. Because she's meant to be quite short, all the other characters would normally feel quite tall, therefore I had to think of a way for the sprites to look approachable (with some exceptions). 

From the concept art, Kamea kept quite a lot of features. Same happen with the nymphs Alba And Kera, but in the case of Teles and Azmer it was a total remake from the original concept image, mainly to fit the scene.

I've already talked about the animation for Kamea. She was clearly the most challenging one due to having motion. The rest of the characters only have an idle animation. I was literally make a breathing 2 frame animation, but challenged myself to a bit of extra motion, and managed to get something a bit more exciting in 6 frames for each character:

Alba and Kera

Azmer

 Edric

 Teles

. 

Must admit that pixel art animation is not easy, but I enjoyed animating Teles and the nymphs the most. 

I want to try more flames and liquids next time! :)

Sprite Animation

I've done some work before related to animation in games, yet it always amazes me how hard it is to get it to look right, specially when there are several quick actions the player must make. In this case I'm lucky that the level doesn't feature any complicated mechanics as this keeps the animations to the minimal, giving me more time to work on them and get some fluid movement.

At this point in time I'm already behind, therefore I don't have the luxury of animating every single aspect of the game, yet Kamea is obviously the character that will have most of my attention.

Ryan agreed from the beginning to help me out by comming out with some rough animations which I could the draw over and fit the sprite. This is the walking cycle he came up with:

Knowing tthe amount of work he's got with his own project, I didn't feel like asking him for any corrections or any othe cycles, therefore I opted to adventure myself on the animation process.

No matter how much I looked for video reference I couldn't find something that I felt right so I had to make my own reference (which will never see the daylight ever). 

The idle idea didn't require reference at all as it was just a simple breathing movement, eye blinking, ear moving and perhaps a bit of exaggeration on the movement of the hair, mainly to accentuate the idle animation.

The runnin was a challenge as it was a 10 frame animation with all different frames. The character is not fully on side view as I keep this cartoony feeling of 'always looking at the camera' and that made the refencing a bit difficult. I managed with the front arm to give a bit of depth feeling, but I failed to do the same with the hair. I was quite pleased with the outcome for this running cycle as I tend to always get it weird looking, specially when it's a run that loops endlessly.

For the jump and fall I thought about making a proper animation that included a bit of anticipation, but no matter how I wanted it to fit it in, it will always look weird as the fluidity of the character in play doesn't include that small pause needed. At the end I decided to stick with only two frames for the jump (because of the determined hight that she can jump) and 3 for the fall (in case the player falls from a higher place).

Hopefully I'll have enough time to fit in a climbing animation, other wise I'll have to re adapt the level with some platforms instead of climbing ropes. 

As for the rest of the NPCs I'll only stick with a very very VERY basic idle, just to make them stick out as interactive characters, but if I have more time to before the Game Republics student showreel then I'll probably add some extra frames.

Sanctuary - test 2

So I finally came around to make a second test to show for a presentation.
This still keeps the original layout as there's no point to expand the level while testing (the smaller, the faster to test). I also haven't tried some of the sprites, mainly because I've been busy trying to sort out the gameplay itself. Probably in that respect it will be hard to notice the huge amount of improvements compared to the first test.

Click HERE to try the second test version.

Keyboard Controls :
A - left
D - right
Spacebar- Jump
S- jump down
W - talk/open door/pick up stuff/climb (interact is a better word) 

Things might be confusing at this point still, but the idea is to talk to both of the NPCs to be able to access the room inside the tree. The final text will be slower and the dialogue will give hints to what the player should do.
But leaving the story aside (that will be arranged in time) the mayor advances in this version would be:
- Global constants working along with the phasing of the story.
- Camera movement moves responding to the character's movement (still needs tweaking).
- Zoom in and out depending on players movement.
- Die and re-spam if falling of the 'level'
- Inside tree layout.
- Dialogue appearance.
- Initial Xbox controller compatibility (yes, you can play it with a controller or keyboard) 


There are still far too many problems that need fixing, to list a few:
-Fix camera movement
-Incorporate initial and final cinematic events (need to figure out how to do that :-/ )
-Avoid dialogue boxes to overlap
-Fix characters sprite movement (specially with the xbox controller)
-Set a menu screen
-by miracle... hope to figure out how to control text speed and appearance by pressing keys, instead of having it timed.

There are still loads and loads of things that need fixing, but it's certainly time to speed up with the sprites; any future testing might seem with less improvements as I'll have to balance more between the 'coding' and assets' creation.
Any feedback would be appreciated.

Some pixel art process

In my previous post I mentioned a blog that had a compilation of some 'rules' with regards the creation of pixel art. 

The type of pixel sprites that I'll be doing for the game are relatively big, and the level of detail is high in comparison to initial pixel art where characters could have a 24x24 sprite (like the old megaman games) to a more detailed 150 pixel sprite. 

I've documented the initial part of the process of the creation of the sprites of one of the elements that I like the most: the fountain of the Harpy.

The idea started as a sketch where I added some watercolour, but this was just to give me an idea (and play with watercolours for a bit). I scanned it and modify the background, mainly just to make it easy to work with. 

Then I made it semi transparent and using the pencil tool and preferences that will help me to keep hard edges in case of any movement or modification. I start with a very loose line, mainly just following the contour, as if I was to redo the line work. 

After all that is finished then I can turn off the reference and go into detail to fix the line. The image below is the outcome of a quick line. 

The image below is the how it looks after cleaning up, the idea is to avoid having any overlapping pixels. This will give an effect from further as a clean curvy line. This could be one of the processes that take the longer as is a matter of individually erasing and painting pixels all over the line. At the same time, you need to be zooming in and out to make sure the line is taking the shape desired, as is very easy to get it to look wonky...and in fact sometimes is just hard to correct and can only be corrected once the rest of the solid colour is along. 

This is the difference between the quick first line and the final clean up. This 'rule' wont apply everywhere as the hand that's suppose to be closer I decided to make its line thicker mainly to use a comic like technique of line weight. 

After that I started blocking out colour and shadows, which roughly follows the idea of cellshading with hard edges on the change of each colour/ shadow, this is mainly to give a sharp contrast and help the perception of the shape. In this case the statue is some sort of plaster material with its own shadows, while it will be cover with mould due to the dampness. Eventually I'll add the water falling down. This process is not finished as the shading requires just as much work as the line work. Also the main line will have colour and will nicely blend along with the rest of the colours. This kind of big landmarks on the level need to be very detailed, in comparison to the rest of the props, so I'll keep posting some of the further finished props as I go. 

Starting to get 'pixely'

Today I decided to start giving it a go to what the in-game sprite artwork is going to look like, before I carry on making complicated NPCs full of detail and colour.
Obviously I wanted to test Keara first as is the main character and she will have pretty much most of the animations.
This is just a quick test of her with a pixel line, although the final sprite will feel less linebase and the pixels more blended. The hight I'm happy with is 167px aprox., mainly because the animation of the hair might vary the over all hight.
Also today I spoke to Ryan and the process of the animation will begin. He will be helping me to get a rough animation mainly for the running/jogging animation. I couldn't resist to make a quick test for the idle, which clearly needs a lot of work, but I think is a progress overall. The main movement will happen on the hair, second by the dress. Luckily the hair won't have as much detail as in the full rendered version, as hair is not one of my strong points to draw. Later on I'll start making some test with the colours applied on pixels.