Sorry about the layout issues. New version of Genesis stuffed things up. Will fix.
Its been a long time between posts, and whilst I have been distracted by trying to earn a living, Google’s decision to abandon the Dart Virtual Machine has effectively killed Dart’s chances of widespread adoption. Others seem to agree with me. So, goodbye Dart.
I will continue, but am switching to using mobile clients (iOS first) instead. I will need to change things on the blog (a “blog pivot”) to reflect this new direction, but hey – if startups can do it, so can I.
After getting familiar with the Spine tool I decided it’s time to create my first monster. No more relying on freebee sprite sheets off the web.
For my first effort, I decided to go for a bipedal reptilian look, for no particular reason. I fired up Pixelmator and started trying to create a grey, scaly leg. After about ten minutes, my efforts were not going well. Time to change tack. So I thought, how about sketching on real, old-fashioned paper and then scanning and editing the result? So I tried this, and was pleasantly surprised. Sketching on paper is a lot faster and more natural.
Here’s the story.
Ingredients for Phase 1 – Pencil, Paper and one fresh boring meeting
A few days ago, I found myself in a long and boring meeting at work. So here I was – a spiral pad, a pencil, dimmed lighting, and a soft droning voice. Fighting my urge to snooze, I started to sketch instead. I decided to sketch individual body pieces, as I was planning to work on them individually – a left arm, forearm and hand – you get the idea. Since Spine wants you to attach images at different points, this made sense – sort of like putting on pieces of medieval armour.
So here is one of my sketches. Note the horizontal lines (it was a ruled notebook) – more on these blue lines later.
About ten sketches later, the meeting concluded, with nothing decided. All in all, quite a productive morning.
Ingredients for Phase 2 – A Left Leg, Pixelmator and a Bucket of Enthusiasm
With the scanned images of all my sketches, I powered up Pixelmator to start work on my left leg image. There were several obvious issues with it:
1) It was too big – 209 by 260 pixels
2) It had blue lines in it
Initially I was fixated getting rid of the blue lines, so I tried that first. This was easier todo than expected – I just rubbed out most of them and made the background transparent. Why I only did a rough job of rubbing out I’ll get to in a minute, suffice to say that after my tenth image or so – blue line removal was taking only about 10 seconds.
So, blues line vapourized, I smudged each reptile scale to get a more even look. I was not impressed with the result – it looked a fourth grade art project. With a leap of faith, I shrunk the image down to 20 by 30 pixels, and was quite happy with the results. Agh, the magic of “change image size”. All my bad smudging – gone. Left over blue lines – gone.
Ingredients for Phase 3 – Lots of Reptile Parts with a dash of Wisdom
Emboldened by my efforts on the left leg, I sketched, scanned, smudged and shrank my way through all the other monster body parts. This took a while, but by the end I was getting faster and faster, after I realised that I did not have to do much editing. The “shrink image effect” did a great job of turning my so-so sketches into pretty good sprite images.
Ingredients for Phase 4 – A Spine and lots of Bones
Once I had all my images completed, I created a new Spine project and started creating a skeleton (literally) with a backbone, arms, legs and a head. I then created 10 frames with aforementioned skeleton running to the right. This took a little time, but would get faster with experience. Here is what it looks like. The different bone colours are due to my various experiments with using colours to denote foreground bones, background bones and so on.
So far so good. Monster appears to run, if a little clumsily, and it took surprisingly little time. Not bad for a newbie.
Ingredients for Phase 5 – Bake for 30 Minutes
Emboldened by my rapid progress with the skeleton of the reptile monster, I added an image to each bone of the animation, and learnt some more lessons. In my rush to sketch and create all the monster bits, I did not take particular care in drawing all the body parts to the same scale or shading. Furthermore, I then shrank all the images by eye, to approximately the right dimensions. SO when attaching the images to the bones, I noticed that the images had slightly different levels of shading, and the reptile scales were all over the place. My monster looked less like a scaly reptile, and more like a grey patchwork quilt with red eyes.
Here is the final result. It’s okay…..but a whole lot better than my attempts with creating images by hand.
The big advantage is that I can skin my monster with other images, so one skeleton can become many monsters. All that differs is the bone structure and gait of the creature. Very nice.
A Walk through Time – the Evolution of a Monster
Along the way, some of my mistakes were rather funny so I thought I would post them here for a laugh.
First, the weird armless alien thingy:
Then along came Elvis…..
Then a little too much caffeine….
Elvis grew a tail and also had an espresso….
Some Lessons Learnt
On reflection, these are things that I have learnt for the next time.
- The “image size” function is your friend
- Don’t spend too much time tweaking your images if you are going to shrink them a lot
- Draw each image to scale with other parts (duh!)
- When sketching, keep in mind the final size of the sprite – your A3 masterpiece will lose a lot of detail on the road to a 32 pixels wide image.
- Colourize/lighten/darken all the images together (or use one image and then chop them up.)
- Plan your design process with a logical directory and naming structure, or you’ll have lots of files called “monster leg” and “head” floating about and you will get confused
Now that I know everything, make a smaller, better reptile monster. I will try a slightly different tack.
Just when I thought everyone was only interested in 3D graphics and 2D was so last century, I was recently, and pleasantly, surprised by something new. That something is a neat little application called Spine (http://esotericsoftware.com/). This is a skeletal animation tool aimed at HTML5 and mobile game developers, and seems to take its inspiration from high-end movie animation techniques. Regardless, I think the process is how any sensible person would animate sprites. Not sure why it has not been done before for the low-end (no offence!) animation community. My two cents worth, from a guy sitting on the technical side of the fence – maybe experienced animators out there are rolling their eyes at my naiveté.
Instead of the usual methods used in low-end sprite animation (select monster’s leg, rotate 10 degrees, tidy up, next frame), Spine lets you build a skeleton of articulated bones which can be rotated, scaled and moved. Sort of like a fully articulated store mannequin but inside your laptop. Once you have built up your ‘bones’, you can attach images to each bone. Now comes the fun part – switching to animate mode you can move each bone and joint in a single frame, and then press play to see how it works. The tool rotates all the images for you. You can export animated GIFs, atlases or sprite sheets. And this is just the basics – add skinning, meshes (I don’t really know what these are yet) and what you have is a pretty powerful animation tool. Its pretty inexpensive and while just a little envious I did not think of it first, full credit to Esoteric for making it happen.
Here are 2 sprites (converted to animated gifs) created with Spine. You can guess which is a sample project that comes with the product, and which I did all by myself.
Create a better looking monster worthy of my hero’s attention (Sprite 2 – that means you).
Finally, some eye candy.