top of page
截图20210912173542.png

TEMPORAL

Coding programmer, Art designer, Project planer - Ryan Yuan

Developed by Unity, Procreate, Maya

A Collaborative Project

​Oct 2020 - Dec 2020

Introduction

Project Run-through

Summary

Temporal is a cooperative Metroidvania music game project. The project is mainly developed using Unity, supported with Procreate and Maya, etc. The project explores the non-linear story-telling of Metroidvania game and incorporates musical experience into the game system. Various elements such as combat system as well as platform movement are responsive to the background music, so that players can have a more immersive game experience than traditional 2D platform games.

Introduction

Gains

Temporal was a 2D platformer with multiple endings on the same map.  We introduced a novel alignment between the player's actions and the rhythm of the background music that players' attacks and dodges should follow the beat, making the game more engaging. Players are encouraged to achieve high combos to maximize their damage. I was in charge of programming character combat logic and physical engine and creating visuals.

This game development experience made me capable of both game visual design and game programming, and I am confident in using not only Unity but also other related software such as Blender and Procreate.

Production

After-image

Production
截图20220113144337.png
截图20220113144429.png
截图20220113144621.png

I set up an array to generate and play the after-images of the play character once the players dodge.

2D Sprites

截图20220113145027.png
截图20220113145329.png

I imported both original and online assets to create the game scenes as well as the non-player characters. I utilized Tile Palette to draw the game scene with the active brush and the sprites. At the same time, I utilized the Tilemap Renderer component to set sorting layers for different tiles, such as grass, ground, enemy, etc. These sorting layers determine which layer each object belongs to and whether they have a collider or not, this is helpful for me to create hidden roads.

Camera Effect

截图20220113150342.png

I drew the background of the camera utilizing Procreate including the floating clouds and the animated skybox. I utilized cinemachine to follow and aim at the player character and I attached 2D lights to the camera to create consistent lighting. Post-processing is also utilized to optimize the final rendering quality.

截图20220113151556.png
截图20220113151442.png
截图20220113151511.png

Player Character

The most challenging part is to make the player character volumetric. I modeled the character in Maya and rigged it on Mixamo where I could apply different animations to the model. I found a script online enabling me to acquire the normal maps of a 3D animation when shooting it with a 2D camera in Unity. So I imported the 3D model with animations into Unity to record it with a 2D camera and the script and I successfully obtained the normal maps of all the animations and transferred the 3D animation into sets of 2D sprites. Thus I was able to create a 2.5D character with shadows.

Modeling & Texturing

截图20210912182716.png

I modeled the player character in Maya and give different textures to different parts of the model. However, when I imported the model into Unity, I found out that I was not able to color the model correctly. I was not aware of clearing up the UV map so I chose to separate the model into different objects and attach different materials to each of them in Unity to color the model.

Rigging & Animation & Character Lighting

截图20220113152339.png
截图20220113153149.png

I uploaded the model to Mixamo where I could rig the model and apply various already-made animations to it.

截图20220113155302.png
截图20220113160015.png

After transferring the 3D animation into 2D sprites, I animated the player character utilizing Animation and Animator to determine which animation should be played under different states.

Also, two freeform lights are attached to the player character to make the player character look volumetric.

截图20220113151349.png
bottom of page