{"id":106,"date":"2017-07-17T23:43:00","date_gmt":"2017-07-17T12:43:00","guid":{"rendered":"https:\/\/studios.nomoss.co\/blog\/?p=106"},"modified":"2023-12-12T16:04:40","modified_gmt":"2023-12-12T05:04:40","slug":"turning-a-square-into-a-character","status":"publish","type":"post","link":"https:\/\/noblesteedgames.com\/blog\/turning-a-square-into-a-character\/","title":{"rendered":"Turning a square into a character"},"content":{"rendered":"\n

Hey folks,<\/p>\n\n\n\n

This week, I’ll be extending my topic from last week<\/a>. I\u2019ll be talking about the eyes I\u2019ve implemented in Duped. Before we start though, lets talk a bit about why we have the eyes.<\/p>\n\n\n

\n
\"Jumping
Jumping around some platforms<\/figcaption><\/figure><\/div>\n\n\n

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\u2019m definitely not at a point where I\u2019m 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\u2019t feel that emotion without the eye.<\/p>\n\n\n\n

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

\n
\"Jumping
Jumping around some platforms (but without eyes)<\/figcaption><\/figure><\/div>\n\n\n

The square doesn\u2019t 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.<\/p>\n\n\n

\n
\"Eyes\"<\/figure><\/div>\n\n\n

So, let\u2019s talk about the eye. These are the actual sprites for the eye. It doesn\u2019t look so hot as individual sprites (they\u2019re super low res) but in action, the animation is quick enough that nobody really notices.<\/p>\n\n\n

\n
\"Duped
Hey, four eyes!<\/figcaption><\/figure><\/div>\n\n\n

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<\/strong> eye.<\/p>\n\n\n\n

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).<\/p>\n\n\n

\n
\"Jumping
God, that is creepy.<\/figcaption><\/figure><\/div>\n\n\n

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.<\/p>\n\n\n

\n
\"Look
Look at that nice eye<\/figcaption><\/figure><\/div>\n\n\n

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\u2019re 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.<\/p>\n\n\n

\n
\"Those
Those eyes go good<\/figcaption><\/figure><\/div>\n\n\n

The effect of this is we get a player who has a bit of personality. They\u2019re a little timid, cautiously opening their eye after they fall or get bumped around. They\u2019re also a little adventurous, rushing & blinking into danger.<\/p>\n\n\n\n

So, there\u2019s 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.<\/p>\n\n\n\n

We hope you enjoyed reading this! Have a question or want to chat more about game development? Reach out to us!<\/strong><\/a><\/p>\n\n\n\n

Other places you can find us:<\/p>\n\n\n\n