Skip to content

Turning a square into a character

Hey folks,

This week, I’ll be extending my topic from last week. I’ll be talking about the eyes I’ve implemented in Duped. Before we start though, lets talk a bit about why we have the eyes.

Jumping around some platforms
Jumping around some platforms

Here you can see the eyes in action. One of the earliest problems I faced with Duped was that I am not an artist. I dabble, but I’m definitely not at a point where I’m able to draw & animate a main character with the fidelity that I would have wanted. So, I used squares. The problem with this though was how to give them some semblance of a personality. One of the key themes of Duped is abandonment, and the player just doesn’t feel that emotion without the eye.

In fact, lets see what it looks like. Here is a similar gif to the one above, but without the eyes active:

Jumping around some platforms (but without eyes)
Jumping around some platforms (but without eyes)

The square doesn’t really feel like a character any more. The eyes are necessary to turn a moving square into something that actually feels like it has emotions & personality.

Eyes

So, let’s talk about the eye. These are the actual sprites for the eye. It doesn’t look so hot as individual sprites (they’re super low res) but in action, the animation is quick enough that nobody really notices.

Duped eyes
Hey, four eyes!

There are actually four eyes on each square. At all times, the squares are looking at their rotation, and deciding which eye should be the eye.

If the eye is meant to be open, it animates forward through the sprites above until it is fully open. If the eye is meant to be closed, it animates backwards. (Note that after it moves past the slitted eye sprite, the eye has no sprite).

Jumping around with too many eyes.
God, that is creepy.

Now that we know which eye we should be using, we need to know whether it should be open or closed. The logic for this is actually pretty simple. For each frame, we check whether the square has rotated less than a set amount (currently 3 degrees). If it has rotated less than that for 10 frames in a row or more, we move our eye towards open. Otherwise, it moves towards closed.

Look at that nice eye
Look at that nice eye

This means that when the player is jostled lightly, the clone will blink. When the player is jostled a little more heavily, or starts rotating (for example, if they’re knocked back by an enemy, or fall off of a ledge) they keep their eye closed. When (or if) they land again, they wait a little while before opening their eye again.

Those eyes go good
Those eyes go good

The effect of this is we get a player who has a bit of personality. They’re a little timid, cautiously opening their eye after they fall or get bumped around. They’re also a little adventurous, rushing & blinking into danger.

So, there’s the thought behind the eyes! Hopefully this information is useful to somebody to see how I turned some VERY simple sprites (a rectangle, a square and an oval) into something which has personality.

We hope you enjoyed reading this! Have a question or want to chat more about game development? Reach out to us!

Other places you can find us:

Author

Tags:

Leave a Reply