olivia may visuals - Krebs Cycle Game

November 2019 - December 2019.

Educational game on the processes of the Citric Acid Cycle (aka. TCA, CAC, or Krebs Cycle) created in Unity3D, coded in C#.

Joint project with Tom Moreton.

Created for Master's course in Interactive Visualisation at the School of Simulation and Visualisation, Glasgow School of Art.

Context

We sought to create an game that allows University students to review the processes of the Krebs cycle. From our backgrounds in biochemistry and nutritional science, we thought an application that helps visualize the relevant molecules and their bonds in 3D space would be useful in learning about this tedious reaction cycle.

GameMode

Moodboard

Building Intro Scene

Mapping UI panels

Importing 3D Models

Development
We started with a pretty clear vision of what we wanted to create and laid it out in a storyboard, as well as agreeing on a colour palette and aesthetic.

Initially we wanted to highlight the changes to the bonds and atoms in the molecule at each step but decided that the amount of time it would take to animate each of these was beyond the scope of this project.
We decided to focus instead on the user’s ability to rotate the molecules in 3D space in order to understand their respective structures, as well as visualize the transitions between the stages. Upon clicking the enzyme responsible for the change,
- Molecule A fades out, Molecule B fades in;
- Molecule B travels to its destination (meanwhile, Molecule A fades back in in its original location);
Cycle is repeated for Molecule B, etc.

We compiled a list of Must Have components we would require in each of the scenes. Tom modelled the molecules and got started on the Intro Scene while I mapped out the steps of the Krebs Cycle and the enzymes associated with them onto a reference sheet that became an indispensable guide throughout the development process. I organized the UI panel for the Krebs Scene and made sure that the appropriate buttons were interactable at each stage of the cycle by implementing a GameManager which held a public integer variable, CycleState, that corresponded with each stage of the cycle.

Once we imported the molecules, I painstakingly added materials to each of the components of the molecules and assigned the StandardSpecular_Edited.shader to each of materials. I went through and added Mesh Renderers to each of the components and groups in the molecules to ensure that the FadeManager script would run through them, and with the way we had merged some components of the molecules into different groups, I had to manipulate the script so that it would affect nested groups within groups for the fade effect. Unfortunately, this issue came up after we had already placed the molecules in their appropriate locations and the animations had been done.

Conceptualizing the movement of the molecules along with their appearance/disappearance in the scene was mentally exhausting, but I worked out that on click of the cofactor (or, if no cofactor involved at the given step, the enzyme) I wanted the current molecule to fade out, and the next one appear and move to its destination. I decided to use IEnumerator for the CycleCoroutine() function, which delayed the cycle state change, which delayed the animation to allow for the fade out/fade in to occur before movement. Once at its destination, the previous molecule would fade back in upon having the active molecule entering a trigger in its destination. These colliders then had to be destroyed upon exit in order to avoid having the previous, reappearing molecule interfere with it. Each of the colliders had an exit script applied to them, except for the first and final steps of the cycle which required modified versions since the initial molecule was active and visible on its trigger zone from the start, while the last one did not move.

Initially, I had applied a script to each of the molecules for a bobbing effect. This however interfered with the trigger, animations, and transforms of the molecules, and ultimately was not worth the trouble we put in to attempting to sort it out. I added GUI text labels to the molecules and orchestrated their activation/deactivation within the scene according to button clicks and trigger entry/exit. I attempted to apply LookAt function to these labels when its accompanying molecule was at its destination, but it caused the GUI text to inexplicably fall out of the scene. We later tried to keep the camera parented to the GUI text after the molecule had de-parented, but again made the GUI text to fly off into the distance, so we decided to leave the text as is. I added a collider for scene change and created buttons for the UI panels on both scenes, adding fonts and sounds, as well as a release panel the text in which appears when certain reactions release atoms.

Mapping the cycle

Fonts
Kindel by vladfedotovv
Varela Round by Joe Prince

Images
Golgi.jpg – edited, from https://www.britannica.com/science/Golgi-apparatus
Nucleus.jpg – edited, from https://teachmephysiology.com/basics/cell-structures/nucleus

3D Models
All molecules modeled by Tom Moreton.
Lipid Bilayer modeled by Angela Douglass.

Sound

All from freesound:
-   Music by runnerpack
-   Fieldchorus dream sound 128bpm by karma ron
-   Pen click 2 by adam n
-   Spare fire wave picture by lloydevans09