Cockerel — Critical Reflection on the Unity Project
Bwak! Bwak! Bwaaak! — Cockerel
TL;DR — Inspired by poster artist Tom Eckersley’s work, Cockerel (stylised COCKEREL) is a small interactive playable I made for the third project of the first term. In the article, I will talk about the inspirations, prototypes, the making of the game, and finally, a WebGL version of this game you can play right on your web browser! (Does not support mobile devices.)
✍︎ Outline of this article:
✍︎ Summary
✍︎ Picking the Image
✍︎ Prototyping
✍︎ Making of
✍︎ Playtesting
✍︎ Conclusion
✍︎ Play the DemoSUMMARY
For the third and the final project of this term, we were asked to take inspirations from poster artist Tom Eckersley’s works, find a piece of his artwork and turn it into a playful experience. We were given link to view his works on VADS’ site, and later that week we were taken to a tour to his archive on campus.
First, here is the full game, or you may also take a look at the final result gameplay video.
Now let me show you how did I create this project.
PICKING THE IMAGE
At first, when looking at Tom Eckersley’s works, I discovered that his works were mostly simple, informative, visualising abstract ideas, so were suitable for public services . His arts consists of clean lines, stylish layout and a sooth palette. Here were some of the artworks I picked at first:
Couple Dancing — I like the dancing idea, but understanding that I am not familiar with humanoid animations, I did not continue on this picture.
Fan — This is also a very stylish poster, but like the previous poster, it may contain humanoid animations, so this idea was also abandoned.
Crisis at Christmas — I tried to think of a melancholy game style for this poster, but understanding there may be many emotional subtle details to add, I feel like there may not be enough time for me to complete this picture.
Selling the Sea — I almost chose this picture. Having stayed by a remote island for couple of weeks, I know how I can capture the atmosphere of the seaside, but then like the Crisis at Christmas, I think for this picture I may need more time than I need to complete.
Cockerel — This cockerel is so interesting that I am afraid that too many people will pick this picture. It is interesting with its simple shapes. I am interested in making the cockerel’s head bob, so finally I chose this as the picture I want to work on.
PROTOTYPING
At first, for a more artistic approach, I attempted to replicate the old school hand drawn animation style. There were two elements I wanted to add in: low frame rate and smear frame animations. The low frame rate is due to the style I tried to replicate. This can be achieved by locking the frame in Unity Engine. But it also makes the physical simulation being not real-time. Although in the final work physics were not used, this fixed 15 frames per second idea was abandoned eventually.
The smear effect is an optical illusion often used in animations that interpolate movements, and works like motion blur to live action videos. Animators often stretch the shapes or repeat them to mimic movement.
The paused frames often looked hilarious and unrealistic. To reproduce this style in real-time interactive work though means that each component of the cockerel cannot be fixed shapes, or the cockerel has to be animated as a single object, and all of the movements that I intend to use have to be animated frame by frame instead of setting up key frames, and they all have to be able to seamlessly match with any other clips. This would be very time consuming, and I did try visualising using After Effects. Ultimately I decided to not continue using this style for this will be very hard for me to do all sets of the cockerel’s movements, and for other practical reasons.
At the end, I break down the shapes of the cockerel, and each is treated as a game object. Now it is the time to let the cockerel move.
MAKING OF
Hierarchies are set up so that when a root object transforms (including translation, rotation, and scaling) its children objects will follow this transformation. However, looking into the movements of a real cockerel, we can see that a cockerel, with many other kind of birds, tend to move their heads to a fixed position first, and then the body follows, so that the eyes can capture visuals as steady as possible, hence the bobbing movements.
Say if I put the head hierarchy under the body hierarchy, they will both move simultaneously. That will not work in this case. To solve this problem, I simply set up an “empty object” that simply marks the “destination” of where the body needs to be finally, then the real body components waits for a split second before it “catches up” to the head, using the DOTween tool and linear interpolation. Other components require a delay were also set up in this way.
In addition to the movements, to make the cockerel more stylish, I applied random wiggle to its eye, and it will follow the cursor.
Then I composed the music for this project and started to put everything together. The theme tune took inspiration from the recently published Untitled Goose Game. From the beginning I knew I want the music to be minimal as possible, so is the UI. So halfway through the making of the music I designed the UI as well. It simply reads the title of the game after a prompt to hold space, making the cockerel to crow. Then the city wakes up. The ambient sounds changes as well: when it’s day time, you can hear the sounds of an office and the traffics of the city, whereas at night, the sound fades to crickets and forest ambience. These were all parts of the overall design of this project.
PLAYTESTING
The overall playtest feedbacks were positive. Some of the students from the last year have played as well. There was no need to explain how the game works, the prompts were obvious but yet the UI was clean. Some people suggested that the background could be more vivid, and others made comments of the visual style of how it can be improved further, including making the crest more elastic and responsive to the movements.
CONCLUSION
This project was really refreshing even though I have been using Unity for more than three years. Seeing other people’s works also give me inspirations, such as Jiahui Hu’s Ocean World, where the players have to take pictures of whales jumping out of the water. It is simple but elegant.
Overall from this project, I have learnt how to make a small but complete project in a short amount of time, and I had a chance to get to know Unity Engine’s 2D tools better.
