Game Designer / Programmer
AnimationStaging.png

12 Principles of Animation - Staging

12 Principles of Animation - Staging

Last update: 01/22/2020

This a group project I did for the Animation Fundamentals class. We’ve been told to research one of the twelve principles of animation and demonstrate it using Unity. After a lot of discussion, our team picked Staging.

Our team has 1 artist, 1 game designer, 1 programmer (that’s me). After the first team meeting, 5 minutes later, Josh, our brilliant game designer gave me quick sketch of what the demo should look like. I felt relieved, now that I had something to work on right away instead of preparing uncertain codes wishing it would match the designer’s idea.

By looking at this concept, I immediately understood what I should do in Unity:

  • There’s a humanoid character with an arrow indicating his walking path: This would need a 3D human model, a player controller, and a few basic locomotion animations like walking, idling. Our team agreed that a playable demo is more impressive than an animated sequence. That’s why we need a player controller.

Concept drawing made by Josh Capstick (game designer)

Concept drawing made by Josh Capstick (game designer)

  • There were two options in the concept for me to choose: a crossing river scene or a crossing chasm scene. I prefer the latter because this concept was easier to work on because I didn’t know how to create water in Unity.

  • We did a few quick researches to know what Staging is and we also agreed that the demo also needs a few camera effects including angle switch, dolly, etc. This was quite challenging at first but I knew I could do it.

 

After a while, I managed to create the first version of our demo.

  • For the environment, I used Unity - ProBuilder. It’s like Maya but a lot less complex and works inside Unity editor.

  • For the camera works, I used Unity - Cinemachine. It helped me save a lot of time creating the camera movements and transition.

 

I sent version 0.01 to our team and let them review it. After a few feedback here and there, version 0.02 is built.

  • The landscape is better polished.

  • Color tone is adjusted to harmonize with the atmosphere.

  • Rule of third in cinematography is applied.

  • The establishing shot is now more distinguishable. It helps give player a glimpse of the whole scene. In this scene I tried to present a vast, empty, eerie landscape with a little bit of ominous, fantasy vibe.

  • Camera timing, positioning and transitioning are also better calibrated.

 

Generally, the second version is quite okay. However, I kept thinking about the Staging principle and asking myself what could be done to improve this scene regarding the principle. So here’s version 0.03:

  • Fade in/out effect is added to indicate the start and the end of the scene to set the right level of anticipation.

  • A new effect is added. It’s the bridge parts assemble as player crosses it. I wanted to amplify the ambiance of the scene, to make it more interesting.

  • In the ending part, I also put a hidden door at the alley position. I think this one will set the pace right. It’s like the climate, conclusion of a story. I wanted the viewers/players to raise questions of curiosity.

  • The sky is also changed for aesthetic purpose.

 

For the final version, our 3-D artist had an idea “Hey! I bet this scene would look better with some crystals in it.” I think she was right.

 
Playable demo v1.00 (Desktop/Laptop only)
Click on demo screen to gain controls. Use ESC to quit .
Use WASD to move the main character. He’s is inside the tunnel on the left side of the chasm.
Basically, just hold D to move and you will see what I mean.