Client Case Study: Creative Code in 2D Animation for an Educational Game.
My Part of the Project
UI/UX, UI Implementation, Additional Programming
Engine: Unity
Contract Length: 3 months
Infosphere Invaders is an educational game aimed at teaching middle school students about disinformation.
I was dropped into the middle of the team in the middle of a project to help bring the project from alpha to launch. For the role I was expected to perform UX consulting, UI design and front-end Unity implementation for hand off to development.
How to utilize creative code in UI Design and Animation.
It wasn’t long before the team realized I could also help speed up the process by fully wiring up the designs and transitioning some of the animations from the Unity animator to modular creative code animation.
Arriving at a Planet
- The planet you select moves towards the screen as a loading screen fades in on top
- As the loading screen plays, the level scene async loads behind it
- The camera passes backwards “through the glass” into the ship as the pieces load in
- The ship swoops in towards the planet and comes to a stop as the camera pans over to where our heroes load in
Setting up the Background
To allow for easy swapping of backgrounds for each level, I created a Scriptable Object to store all the background data such as the planet and background images, as well as the target scale and position of the planet and moons when they finish traveling and zooming in.
You can then create a new scriptable object for each planet and drop in the appropriate images and input the target scale and position.
A script then takes in the scriptable object on level load and assigns all the data, ready for animation.
Swooping in the Ship
To give the illusion of the ship arriving at the planets, the planets and moons instead start at a small scale and then move along a curve towards their designated places on the screen as they scale up.
Interacting with the Planet on the Map
When you hover a planet, it’s title begins to type in with a typewriter script. The data for the planet itself is controlled by another script that points to it’s level data scriptable object to load and set up the background.
There was an issue with planets getting stuck in their hover animation when you quickly flicked the mouse all over the screen, which I fixed by taking on the philosophy in code that all animation is always moving towards a goal state, but can have it’s target state instantly changed.
Clicking the planet types out the name of the level across the top of the screen and triggers the zoom in animation as the planet slides towards the center of the screen and the rest of the solar system fade out.
Swapping Scenes
After the planet zooms in, a loading screen fades in on top. This loading screen is then used to hide the transition between scenes that occurs behind the loading screen.
An optimization we didn’t have time to implement would’ve been to load the level scene in more staggered pieces rather than all at once to avoid the stutter you see on the planets circling the sun loading animation.
However, to minimize the stutter, I set the background loading thread priority to low before swapping scene and back to high afterwards. Some of the loading time is artificial just to give the player time to enjoy the animation anyway.
Loading Animation
This was a fun one. We originally tried to set up the animation using Unity’s Animation Timeline, but it had problems with different resolutions – especially if you started the game in one resolution, and then full screened it in WebGL.
My solution was to set up an equation for the planet to spin around the sun and randomize it’s starting position so you’d always see a different loading screen.
I also added a resolution change detector that made sure to adjust the positions relative to the resolution.
And since it’s an animation script, you can just drop it on any planet image and tweak their individual settings. This is the power of handling animation in code – the modularity and easy editability.
Miscellaneous Highlights
Fading a Shader
At one point we realized the globe map was no longer fading in and out like it once had. After investigating, I discovered that when the artist applied a very cool hologram shader to the globe, the alpha layer ceased to function.
My solution was to tween the opacity value directly on the shader by accessing it’s material.
Viewing Ability Targets
In testing, the players mentioned they had trouble remembering the targets in their ability queue. After a team disucssion, the solution I implemented was for the ability icon to appear on top of the target when hovering the abilities in the queue.
Part of the trick was to convert the ability icons into a sprite sheet that could then be used in-line as a font. This also was used for the designer to easily place icons into the tutorial text.
Then it was as simple as translating the ability name to the icon string.
Opening Settings
We decided we wanted a more interesting intro animation for settings than just a fade in, so I got to work breaking out the pieces and giving them a sort of “futuristic digital interface” animation.
This was an instance where I felt the Unity animation system could do the job faster than code, especially because it was so custom to the exact interface.
This was one of the least rough end-of-project cycles I’ve ever been a part of. Because I was able to implement everything I designed, the lead programmer on the project was freed to focus on the core systems. Also, the team did a good job of keeping me from adding experimental new features at the last minute.
The Filament team are some of the most friendly and motivated people I’ve ever worked with, it was a pleasure to join their project and lend a hand.