Programmer Art is Hard When You Can’t Draw

Programmer art for the guy animation frames

Series:
Posted on

Day 5

Today is a short day when it comes to number of things to accomplish, but long on how much time it takes to accomplish it. Time to add some animations!

Some Ground Work

Before creating the animation art, I needed to add some code to keep track of an entity’s current frame, the animation being played, and how much time until the next frame. For now, this is just added to the entity object as an object that contains exactly what I listed in the last sentence. In addition to that, I added the animation frame information to the shared prop objects, so no matter how many entities use a prop, they always have the correct animations already defined.

After the data entry, the prop rendering function required some updates to make sure it renders the correct tiles of an animation frame. Believe it or not, all I had to do was check if the prop being rendered is animated (which I flag to the code with an object member called ‘animated’) and check if the entity being rendered has animation data (the frame, time to next frame and animation state). If we have that, then I just grab the tiles for the current frame and let the prop rendering code handle the rest.

Just so you know, I did this all with animation data that kept defining the same static image of a guy as a few animation frames. That way, I could confirm the animation code works before making some lovely programmer art.

Programmer Art, Lots of Programmer Art

So in the LDG discord chat recently, there was a bit of a discussion laughing about how everyone’s default idle animation was shrugging. So naturally I had to start with that. And it was really easy to do, move the arms a little down, then move the head a little down and now you have a shrugging guy.

The animation with the wrong tiles specified

Well, first I have to make sure each frame has the correct tiles specified.

The guy's shrugging/idle animation

With that done, it’s time to see what a room full of shrugging dudes looks like.

A room full of shrugging dudes

Well, they don’t call it programmer art for nothing… I call it a success!

And Some More Programmer Art

With the idle animation done, it was time to add another animation. I went with walking downward.

The walking down animation for a guy

It actually turned out pretty good, considering art isn’t my thing. Now let’s make him walk upwards!

The guy's up and down walking and idling animations

Also seen in this gif is the “Idle Up” animation for when you stop moving after moving upwards. Needless to say, my walk down animation was a bit better than the walk up one.

At this point, I spent a couple of hours making awful programmer art and wanted to just be done. So I just slapped some single frame “animations” in place for walking/idling left and right so I could call it a night and move on to other tasks.

The walking and idling animations, along with placeholder left and right animations

Summary

Successes:

  • Animation code implemented
  • Walk down, walk up, idle down and idle up animations added
  • Stand-in left and right walking/idling “animations” in place also

Potential plan for the next day of work:

  • Add map triggers that trigger when walked on
  • Make the map trigger transition you to another room (maybe)

Lessons Learned:

  • Art is hard
  • Add a one pixel wobble to your walk animation to make things look more lively (accidental find there 🙂 )

Leave a Reply

Your email address will not be published. Required fields are marked *