Project summary – Collaborative Unit – MOLA MA 3D Computer Animation

2022/3/15

In this blog I will summarise the outcomes of the project, the process and the changes. (Other links of Development-Logs are at the end of this blog.) Firstly here is the final video.

And the Following is the process showreel of my part.

Team Members

3D Animation – Kaiwen Xiao (k.xiao0120201@arts.ac.uk)

Script
Character Design
Character Modeling & Texture & Rigging
Character Animation
Scene Design
Scene Modeling & Texture
Game Programming
UI Design
Trailer Editing & Effects

3D Animation – Ziyao Zhu (z.zhu0320214@arts.ac.uk)

Script
Text Retouching
Character Animation
Scene Modeling

2D Animation – Hancheng Shen (h.shen0120201@arts.ac.uk)

Script
Storyboard
Scene Modeling & Texture

2D Animation – Zhuxuan Zhang (z.zhang0320216@arts.ac.uk)

Scene Texture
Voiceover

Special thanks to Shiyi Weng (s.weng0220202@arts.ac.uk) from 2D Animation who helped us with the voiceover.

The group changed from two to four members at the beginning. Because of the style we chose, we needed more people to draw the pictures. Ziyao and I each found a new group member for 2D Animation.

Recommended by a classmate, we have created a miro working board for better communication between the team:
https://miro.com/app/board/uXjVORyiTjw=/?invite_link_id=997711915311

Pre-planning

Final Form

The Final form has not changed which is Horizontal exploration game with 3D interlude animation.
The player will explore in a 3D horizontal scene. And they can interact with the objects in the scene by using key items. The story will be driven through a combination of game interaction and interlude animations. Finally gather clues and uncover the truth.
We chose to use Unreal Engine 4.

While in the end we decided to present the cutscenes as well as the gameplay part in the form of a trailer.

Reference: *This War of Mine* and *Metroid Dread*

Story

During the course of the project we found that the initial set-up was too general and I streamlined the script in order to further the process. More thought was given to how it would be realised.

In this story I wanted to represent the conflict between reality and illusion and to allow the player to make a choice.

Visual Style

Stylize rendering with hand-painted texture

Fortiche production (Arcane) is my reference and I’d love to learn how to do this style. It has two main features.

Illustration as the background, rely on the drawing to achieve a choice of picture priorities.

This image has an empty alt attribute; its file name is image-3.png — Scenes from *Arcane*

Use hand-painted materials to represent the relationship between light and shade. Instead of just depending on the size and lighting of the model.

This image has an empty alt attribute; its file name is image-5.png

Character

Character Design

Once the story was basically set I quickly started character design.
The setting of the story is an alternate worldview of the Western world in the 19th century. The character was born into an ordinary family. A good education and a happy life.

In terms of hairstyle, I initially envisioned it as short hair or coiled hair. On the one hand, it can reflect the gentle character. On the other hand, such hair avoids long hair and braids that require complex animations to be considered.
For clothing, I will refer to classical style or gothic style, etc. Considering the complexity of the model, I would avoid complicated decorations such as lace trim. Alternatively, I can try to solve this problem by using a paint map.

Character Modeling

I basically do the modeling in Blender, and its sculpting tools are great for modeling faces and folds in clothes. For the limb model I used model modifications from my last project.

This time I didn’t have enough surfaces for my eyelids, which resulted in limited post-paint textures.

For the hair modeling I learned the way YanSculpts did. Use a spline to control the hair direction and a circular curve to control the cross section.

Hand-painted Texture

I refer to the arcane picture style. Also, I did research on the technology disclosed by its production company, Fortiche production.

Although they aim to achieve a 2d style. But they don’t rely on toon shaders. Unlike the cartoon rendering, Arcane does not have sharp shadow edges. It’s more about creating a 2d texture using hand-painted texture maps. Combined with the painted background and 2d special effects. The end result is such a wonderful result.

At this stage, I experimented with character face maps. I referenced the characters from the film. There are very sharp brush strokes in the texture of these characters’ faces. This reinforces the blockiness and illustration style of the characters.

I used Procreate to draw textures, and the new 3d feature made it easier for me to do this.

It is worth noting the following places:

below the brow bone
Both sides of the bridge of the nose
bottom of nose
edge of lips
eyeliner
lower eyelid
both sides of cheeks

Because the toon shader is not used. So this style is easily disturbed by ambient light. From researching arcane films, I found that a lot of the scenes are in dimly lit indoors or on rainy days. This effectively avoids glare from interfering with shadows on the map. It can be used for reference in subsequent work.

Rigging

Due to the time and some other reasons, I rig the character model. This work is less cumbersome than previous rigging, thanks to the advancedskeleton5 plugin. But because of the complexity of the model, I had to modify a lot of skins myself.

As for the facial features, the eyelid animation will cause serious deformation of the model, so I have to modify and texture according to the situation in the future.

Regarding the dress section, not much has been done due to the fact that there are basically no shots in the animation storyboard and the expected use of physics systems in the game engine.

It’s worth noting that in order for the RIG to be perfectly compatible with the game engine, I needed to create a skeleton specifically for the engine. This means I need to modify the skin weights again.

Scene

Scene Design

The general layout of the three rooms was designed to suit the needs of the story. And the items to be modeled are exemplified as needed.

Modeling & Texture

Ziyao starts modeling furniture as needed. Hancheng and I also started making some props and drawing textures. I was also responsible for bringing the textures and models together. Hancheng and Zhuxuan, two 2D students, helped a lot with texture.

Scene in Game Engine

In addition to the normal room scene, according to the script, I also needed to make the destroyed room. This is basically done by adjusting the lighting, toning in Game Engine, and flipping the model upside down.

Partially used model:
www.unrealengine.com/marketplace/en-US/product/alchemist-s-house
www.unrealengine.com/marketplace/en-US/product/stylized-medieval-house

Game Programming

In this Collaboration project, I will be responsible for programming in UE4. According to the functions that need to be implemented, I divide the main programs that need to be written into the following pieces:

The interactive prompt UI displayed by the trigger

Since this is a horizontal game, the character doesn’t actually touch the objects that need to be interacted with, so I need to make additional collision boxes in the specified range.
Whether the UI is displayed or not is judged by whether the character overlaps the collision box.

The gradient display and disappearance of the UI is achieved by assigning dynamic materials and controlling the visibility of the materials.

Regarding the UI design, since the whole scene is dark, I use white as the main color of the UI. Feather pens and cursive characters are used to highlight the elements of the era.

Acquisition and placement of objects

Considering that the puzzle solving process at each stage is not too long, I did not choose to make an item bar system. So I just need to add specific variables in the background to tell if the object is obtained.

I also used dynamic materials and controlled the visibility of the materials to make objects disappear and appear.

Dialog

Conversation is presented by interacting with objects. First of all I need a series of dialogue content, depending on whether the variable of a specific object is obtained or not, to determine whether a specific option appears.

Ziyao Zhu helped me translate the conversation.

The design of the border takes elements of the era and renders it in white.

Other

Insert videos, level transitions, and more.

Interlude Animation

Storyboard

I re-discussed the script with teammate Hancheng Shen. (Can be seen in miro.) In addition to that, he drew the storyboard for the opening animation.

Character Animation

Ziyao was responsible for the character animation in Interlude Animation.
Based on the storyboard he created four main character animations, but in the end, given the post-production workload, mainly one of the most important shots was presented in the trailer.

When the animation was finished I found that I couldn’t import it into UE4. So I had to take another approach.

First I render the characters individually in layers.

Then I build the scene in UE4.

Export the image and then key it and post-process it. Separate the foreground and mid-ground to facilitate animation.

Finally, use AE to synthesize, color, and add special effects.

Trailer Editing

Editing

I was also in charge of the final editing. I want to create a sense of conflict. So in the first part of the cutscene, I wanted the atmosphere to be warm. Then it got weird and eerie.

The Interlude Animation explain the background. The game part tells a little bit about the story.

Voiceover & Background Music

I think birthday songs can not only express a joyful atmosphere, but can also be scary in a special way. So I’ll start with that. Zhuxuan recorded the song.

Because of the background music I chose is a piano piece, Rain OST – Little Lost Child, I added a few piano notes to the birthday song.

Also, thanks to Zhuxuan for recording the girl’s voice and Shiyi for recording the girl’s mother’s voice.

Project summary – Collaborative Unit