I want a visual representation of the enemies Jack will meet, but I want to the least amount of work to support that. Building 27 unique levels for Pushdown was the most labour-intensive part of that game, which got to be a problem for morale and productivity in the end. And that was just 2d platform levels with painted backgrounds, mind you. I currently have a nice workflow where I sit on the couch, re-watch Breaking Bad on Netflix and sketch on my iPad using an app called Procreate. They’re pretty rough and ready but enough for me to try to work out a workflow that’s as pain-free as possible.
Five is enough to get going with, because its enough work to show up problems.
My goal is to animate these guys movements as static images – individual animations are far too much work. I want to show them being hit by the player for positive feedback, and I want a dead state to display at the end of a round. So here’s to some trickery.
I use Spine for all animations, I’m getting more comfortable with it and figuring out some short-cuts. The dream is to use one animation project file, one set of animations – if you can call them that – one set of states but many different enemies.
I have a texture atlas split into four quarters
- Red top left = diffuse image. This will be the basic image for the enemy.
- Dark Grey bottom right = dead image. Displayed when the enemy is defeated.
- Light Grey bottom left = flash image. A white cut-out drawn over the top of the other images and faded out over time.
- Top right = not used at this time. Such a waste!
The flash image is cribbed directly from 1980’s arcade machines – drawing characters white for a split second when hit was a fast and cheap way to communicate the impact with limited hardware and memory. Its kind of hard to explain, so here’s an animation.
Still not super clear, eh? Lets replace the squares with one of the enemies.
End result: A static enemy with some movement and dynamics added. To get this result I just need to:
- Draw the enemy on the iPad, export it to .png
- in Photoshop create a white flash version and greyed out version. A bit fiddly and time-consuming but not too bad.
- Place the three images on a texture sheet and save it out.
- Replace the basic squares texture with the desired one at run time.
Some drawbacks are: the process to create the different flash, dead versions. The texture sheet has to be quite large to ensure the enemy isn’t too blocky. Right now its 512×512 (enemies themselves 256×256 – pushing the blocky boundary)
These textures are going to add up to a large download. There’s also a lot of duplication of work, so lets fix that in the next post.