Friday 26 April 2013

Programming Blinking Eyes in Games

What seems simple in visuals is not so simple in programming

During one presentation, my lecturer suggested that having blinking eyes for the negative blocks would bring it to life. I agreed and thought it was a great idea, with little knowledge on how to go about doing it.

One thing that I have started to notice during the development of this game is that as avid gamers, no matter how dedicated they are to playing games will find it difficult to come to fully appreciating the work that is put into developing a game. A great example of this which I must admit to doing, is underestimating the amount of effort that goes into creating a simple thing such as blinking eyes within a game.

Now, being on the other side and actually trying to create this simple function, it is not actually as simple as you'd think. To create blinking eyes, you need to create a custom script (JavaScript) that switches textures with the eyes that are closed every few seconds to create the illusion of blinking eyes. 

This is the original negative block.

After a few moments in photoshop, this is the negative block whilst closing his eyes which will be a single frame animation.

If you animate blinking eyes with more than a 1 frame animation, then it has to be played as a sprite sheet with a custom animation script, so to keep things simple, I am going create a script that alternates between two different textures. I had a lot of help from the Unity3D forums and Unity Answers forum which is plentiful in answers and a large community willing to lend a hand.

The Javascript file can be seen bellow:  

To simply explain the code, the top part of the code starting with 'var' display the variables which are the settings that can be changed. The code bellow the var options are basically the code that creates the variables. So for example, at the top it shows eyeTimer + Random.value*randomfactor, which means that the eyeTimer variable will blink after the allocated second count, but also that at random (random factor) the blinks will happen unexpectedly.

Above you can see what the script looks like within Unity.

Normal Eyes: texture of the normal open eyes.
Blinky Eyes: texture of the closed eyes.
Eye Material: The material that unity connects with (this is particularly for lighting, although there is limited lighting within my game)
Eye Timer: the amount of seconds before a texture change (blink) occurs.
Blink Timer: the time the texture stays before it is changed (the actual blink time)
Random Factor: how much you want a random blinking factor to influence the blink. 

The next step was to make sure that all the blocks do not blink at the same time, as that would look strange, so I had to create 3 separate prefabs (Unity's custom holder of items) of the negative block which would blink all at different times. I chose for block 1 to blink after 3 seconds, block 2 at 4 seconds and block 3 at 5 seconds.

Application



UPDATE: Above is a video of the blinking in action, it sometimes blinks too much in random which I will need to look into fixing, although it is not a massive issue and I think that it brings a sense of atmosphere and realism for what a 2D game can produce. I also applied the same procedure to the white block also. I tried to create a similar code to apply to the character, although it did not work so well due to the characters various animations and the angle when he is moving left/right or jumping. Overall I am glad that I experimented with this and got the results I was looking for.

No comments:

Post a Comment