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.