3D Generalist
SU_HouseVray.png

Steven Universe

SU_gameTitle.png

Steven Universe

I had the pleasure of working on three Steven Universe games for Cartoon Network during my time at Grumpyface Studios. These games include Attack the Light, Save the Light, and Unleash the Light, which were developed for mobile, console, and Apple Arcade, respectively. Here are a few reviews for these games.

“Steven Universe: Attack the Light” - Included in Google Play’s “Top 50 Apps and Games of 2015”, Paste Magazine’s “10 Best Mobile Games of 2015” and Popular Mechanics “10 Best RPG Games of 2015”.

“Steven Universe: Save the Light” - Released to home consoles and Steam, 9/10 average score on Steam with over 350 user reviews

Process

Out of all the processes used in the development of the third Steven Universe game, my favorite was the 3D workflow. It emerged as a solution to the concerns raised during the production of the Teen Titans GO! Figure game and the previous Steven Universe game, where our 2D Art Department was responsible for a large number of illustrations during the animation process. By using 3D characters, we could pose them in any way at any given point, providing more flexibility. Additionally, the use of Autodesk Maya's Referencing feature proved to be highly effective. We were able to update 3D models, rigs, animations, and effects seamlessly throughout the process, which was a significant advantage for me and the team as a whole.

3D workflow for Steven Universe Unleash The Light

3D model of Steven for Unleash the Light. At the start of the project we were not sure if we would use 3D models for character animation. But thanks to proving the 3D model could mimic a 2D look, (if you scale on the Z axis and squish him into the c…

The 3D model of Steven for Unleash the Light was a key asset in the game's development. Initially, we weren't sure if we would use 3D models for character animation. However, we were able to successfully achieve a 2D look with the 3D model by scaling it on the Z axis, squishing it into the correct perspective, and adding some shader rim light. This saved the 2D Art Department a significant amount of time and resources, as they no longer had to illustrate characters in-between poses.

After the concept art was approved and ready for production by the 2D Art Department, we would hold an overview meeting to discuss the character's description and abilities. I would carefully review the concept art and create the 3D model(s), ensuring that the form and scale met the Art Director's approval. Once approved, I would begin preparing the 3D model(s) for texturing by unwrapping them, exporting their UV maps for Photoshop, and exporting them to a model viewing program like Marmoset Toolbag.

Once the 2D Art Department completed the texturing process, I would move on to optimizing the model(s) by focusing on poly count and texture size reduction. The fewer polygons on a model, while still maintaining its form, and the smaller the texture resolution, the better for optimal gameplay performance. After optimization, rigging would begin.

As part of the development for the Teen Titans GO! Figure game, I created an auto-rigging MEL script that allowed our studio to efficiently rig over 100 3D biped playable characters for the game’s requirement. This script was later adapted for use in Unleash the Light, saving us significant time and effort. Thanks to the script, we were able to focus primarily on painting skinned weight maps, which still required manual work for accuracy, rather than on the tedious task of naming the entire skeletons, controllers, constraints, locators, FK IK switches, and other elements of the rigging process.

The auto rigging process started with generating a center and left side biped skeleton at origin. The user would manually position the skeleton’s joints to match the character model proportions, set the joint’s orientations, followed by mirroring the modified joints to the right side of the skeleton. Once the character model was skinned to the skeleton and saved, the user would duplicate the scene and save as the rig file. In the new rig file, the character model was removed and the auto rigging script was run on the new rig skeleton. The script renamed and rigged the entire skeleton with controllers, switches for FK and stretchy, no-flip, IKs for arms and legs, and a head aim constraint for targeting. After, the user would reference the model file into the rig file and connect the rig skeleton to the model skeleton with the script. The auto rigging script also created the facial rig, assisting the user in parenting each eye, nose, mouth, and eyebrow to the appropriate joints.

After completing the rigging process the rig file would be referenced in to an animation start template scene that included an environment, camera, and enemy dummies. Throughout the animation process, I kept logs of frame duration for each animation clip to be used in Unity. These logs also included information about key frames for special events, such as effects or triggering events for other animations during gameplay. Once all required animation clips were completed, preview videos were generated and evaluated by the Director and Art Director for approval. If approved, the 3D model would then be exported..

The exporting process involved importing the referenced 3D model and rig files to your animation file, as well as any special effect meshes, prop animations, etc. These objects were then baked, and the resulting baked files, along with their accompanying textures, were exported to Unity. In Unity, the animation clips were inputted, along with handle events, and assigned to their corresponding animation controllers. Textures were compressed and set according to their material specifications, and shaders and materials were created and applied to the imported 3D models, effects, and props. Custom animation clip generation was also utilized for shader animation keyframes if necessary. Once everything was properly connected in Unity, a prefab was generated, and preview videos were created for final approval by the Director and Art Director for in-game use. If approved, the project was pushed to Git and the process was repeated for subsequent game assets.


Character Animation

When animating for any of the Cartoon Network games, I told myself I wanted to stay true to its show style. I would research for anything pertaining to the subject of the object I was animating, in relation to the show. Most of the time my research would aid in accomplishing my task in ways that were more creative than I sought out for. For instance, after the Squaridot fight in Steven Universe Save the Light, the splash effects were directly inspired from the show.

Squaridot boss idle animation for Steven Universe Save the Light.

Squaridot boss idle animation for Steven Universe Save the Light.

PNG Sequence of Rotoscoped splash effects sampled from the Steven Universe show, with permission from Cartoon network.

PNG Sequence of Rotoscoped splash effects sampled from the Steven Universe show, with permission from Cartoon network.

(In-game footage sampled from youtube channel: Ace101Infinity https://www.youtube.com/watch?v=wqt1mL4-dZQ)

(In-game footage sampled from youtube channel: Ace101Infinity https://www.youtube.com/watch?v=wqt1mL4-dZQ)

Strawberry Knight mace retraction animation from the viewpoint of inside Maya.

Strawberry Knight mace retraction animation from the viewpoint of inside Maya.

Planning Animation

  • Establish character attributes

    • Attitude

    • Weight

    • Speed

    • Strength

    • Sound

  • Establish a hierarchy of movements

    • Blocking animations

    • Timing

    • Utilize 12 principles of animation

    • Polish pass

Two Head Ted sword attack animation.

Light Golem “contemplating its own existence loop”, part of a story requirement moment of dialogue animation.

Light Golem “contemplating its own existence loop”, part of a story requirement moment of dialogue animation.

Mockup of Light Golems charged up attack for approval.


 

Environment Animation

Another aspect of the job that I found enjoyable during the development of Steven Universe Save the Light, and Unleash the light was environment modeling and animation.

Here is an example of an environmental animation driven by a shader. Anytime I needed to produce a simple looping animation utilizing a shader was my go to.

Environment animation in action.

Environment animation in action.

Aerial view of 3D environment Unity scene. Repetition of game objects greatly reduces in-game computation costs for frame rates to remain at smooth 60 fps.


Shader Creation

I had a lot of fun developing shader node trees during the production of Steven Universe Unleash the Light. To learn about the power of shaders, I started with Shader Forge, a Unity plugin, and later switched to Amplify Shader Editor. Shaders can be used to create various effects for your 3D models, including vertex deformations, procedural texture effects, color correction, faux lighting, and countless other things. I found creating custom shaders for 3D models to be incredibly enjoyable to the point that I would actively seek opportunities to include shader animation in my work.

Starburst shader node tree I developed for Steven Universe Unleash The Light, (via Amplify Shader Editor plugin for Unity). This shader was created to help with the need for any burst effects for explosions, or background noise for GUI elements, portals effects, or whatever needed. The shader has a lot of flexibility for customization, such as the texture map you pipe into the shader- very different results per map. Feel free to use this node tree as a baseline shader for effects in your project if it requires the many effects this node combination enables.

Demo of starburst shader customization. Texture input drastically effect the result of the shape, as seen in the gifs below.