top of page
Twitter header (1)_edited.jpg

Redefining Dinosaurs

Project G.A.R.D.E.N.S.

Project G.A.R.D.E.N.S. is a self-published, futuristic puzzle game where players are part of a revival space mission saving dying alien plant life. Over the course of 15 weeks, our Senior Capstone team conceptualized and developed this fully functional product, which all started around the theme of "community." For this project, I took responsibility for the in-game motion design and micro-interactions, as well as the 2D art for both in and out-of-game materials. 

Game Available on Itch.io | Mac & Windows

Skills

Motion Design, Illustration, Graphic Design, Collaboration

Programs

After Effects, Photoshop, Illustrator, Figma, Cinema4D

Duration

4 Months

Prompt

Senior Capstone, Interactive Exhibit

Game Intro Animation

While taking inspiration from the game's UI and functionality, I created the introduction that plays when the player first opens up Project G.A.R.D.E.N.S. The script and visuals are meant to give the players a brief overview of the story and functionality of the game.

Research

Problem

Many depictions of dinosaurs and fossils have become inaccurate and outdated as science advances and more discoveries are made. Explaining this process of how exactly scientists get from just fossils to fully fleshed-out renderings of dinosaurs can be complicated and vary from situation to situation.

Solution

Create a touch-screen digital interactive museum exhibit that allows users to explore and learn about different versions of fossils and dinosaurs, and to learn about the science that helped paleontologists to get to these conclusions. This could work in conjunction with a traditional exhibit on dinosaurs and fossils.

Initial Sketches & Storyboard

GAME INTRO

To start the process of creating the Project G.A.R.D.E.N.S. intro, I first started off by drafting several scripts. Keeping the dialogue short and to the point allowed us to keep the length of the intro to our originally planned time of around 30 seconds.

Once our team settled on a final script, I generated and edited the voice heard in the intro with PlayHT in order to understand the timing to create a storyboard and sketches based on the most important beats.

These sketches also helped drive the UI design process as well, since several of the UI motifs such as the hexagon grids and plant icons were incorporated into the UI due to the development happening for this intro.

IMG_1128_edited_edited.jpg
IMG_1132_edited.jpg
IMG_1130_edited_edited.jpg
IMG_1134_edited.jpg
Screenshot_2023-03-28_at_4.18.25_PM.png
style_frame_2_test.png
gardens_style frames_v3-01.png
gardens_style frames_v3-05.png
Screenshot_2023-03-28_at_4.18.33_PM.png
threeplants_style frames_v3.png

Style Frames

GAME INTRO

One of the most collaborative parts of this section of the project was establishing the style. We wanted this animated introduction to match the overall style of the game, but due to our short timeline, the game and its introduction were being developed tangentially.

 

This resulted in more of a non-linear creation process of the style frames, as well as a variety of unused style frames being produced to expand upon and test the developing user interface. Although we knew we wanted a more "futuristic" style, we experimented with different color palettes, shapes, and motifs typically found in that style. In some cases, portions of the intro would be animated, but then updated at a later point to match new developments to the style.

GAME INTRO

Asset Production

Although the style frames and assets for this piece weren't developed in the most traditional timeline, the back-and-forth process allowed for more experimentation and ultimately led to well-developed assets that went through multiple rounds of iteration.

These motion graphics assets also helped drive the UI design process as well, since several of the UI elements such as the hexagon grids, plant icons, and mission patch originated in sketches made for the intro. To keep this process streamlined, we consistently used vector graphics across our game, while I made my assets for mograph in Adobe Illustrator, our UI artist worked in Figma.

 

GAME INTRO

MODE Festival Finalist

The intro animation I created for Project G.A.R.D.E.N.S. was a finalist in the Interactive/Experiential category at the 2023 MODE Festival. The MODE Festival is a part of MODE Summit, a semi-annual event that focuses on motion design from an academic perspective.

mode festival post.png

Interactions & Around Game

Aside from the in-game introduction, the other large portion of my motion graphics work focused on the 2D micro-interactions that appeared around the game. Although these animations are smaller in comparison to the beginning animated sequence, they provide the motion and life that bring the still screens to life.

INTERACTIONS & AROUND GAME

Tile & Path Animations 

The core gameplay of Project G.A.R.D.E.N.S. is connecting matching tiles to solve the puzzles. In order to show that the user was successful, we needed a micro-animation that could show the transition between a "unsolved" and a "solved" state.

 

Along with the animated tiles, I needed to create animated paths for each puzzle solution, as seen in the gameplay trailer. If we had a larger team and a longer timeline, we would have preferred to find a way to create the path animations in code, however, we relied on creating them in After Effects and exporting them as a temporary solution.

INTERACTIONS & AROUND GAME

Instruction Animations

Once the intro animation concludes, the player is given quick instructions on how to play the game. Minor animations were added to make the directions more engaging. This video also provides a look at other subtle motions we incorporated into the game including the swinging vines and the CRTV screen static.

 

Visual Design & Concepts

Alongside doing the motion design work in-game, I was also responsible for concept work and visual design. This included work such as sketching out exhibit setups, printed materials, and concept art for the overall game.

PlantSketch_Page_02_Image_0001.png
PlantSketch_Page_06_Image_0001.png
PlantSketch_Page_10_Image_0001.png
PlantSketch_Page_07_Image_0001.png
PlantSketch_Page_09_Image_0001.png
PlantSketch_Page_08_Image_0001.png
PlantSketch_Page_01_Image_0001.png
PlantSketch_Page_03_Image_0001.png
PlantSketch_Page_11_Image_0001.png

VISUAL DESIGN & CONCEPTS

Plant Designs

Ideating the plants for our game was one of our most intensive tasks. Starting off with simple pencil and paper sketches, I drew up dozens of ideas and concepts. I took inspiration from peculiar plants found in our world, fictional stories like Avatar, and Alien, and just my overall surroundings.

Once the team decided on our three favorite plants, I developed the selected 2D concepts further and experimented with colors and patterns. We also based the UI's color scheme on our selected plant color palette to keep the visuals cohesive.

Finally, our plants were modeled and textured by our 3D Artist, Sebastian. and then implemented into the interface by our UI Designer, Hannah.

As the main focus of our game, our team wanted to put care and effort into creating these plants, and we did so in a collaborative and iterative process.

2DPlants.png
3Dplants.png
Main Menu - Incomplete V3.png

VISUAL DESIGN & CONCEPTS

Printed Materials

To promote the Project G.A.R.D.E.N.S. exhibit around our campus, I created a poster to hang around high-traffic areas of RIT.

 

Since this poster was meant to promote our exhibit and not just our game, I focused on visuals that could grab a viewer's attention without giving away too many details of what the game actually was. 

GARDENS_Poster_Print.png

Imagine RIT 

From the beginning of this project, the end goal was to present this project at our school's annual Creativity and Innovation Festival, Imagine RIT. This festival hosts hundreds of families in the Rochester area who come to visit the RIT campus for a day filled with exciting exhibits and engaging activities.

Since we knew our audience would vary from young children and students to older members such as parents, and grandparents, we wanted to create an experience that everyone could enjoy. We settled on a game with a simple puzzle motif of connecting tiles that could be adapted to a variety of difficulties and should be easy to learn but fun to play.

Imagine 10.jpg
Imagine 3.jpg

The Team

Hannah.png

Hannah Bailin

UI/UX Artist, Level Designer

Hannah's Portfolio

Emily.png

Emily O'Shea

Motion Graphics and Visual Artist

Sebs.png

Sebastian Moreano Mesa

3D Artist and Game Developer

Sebastian's Portfolio

Takeaways & Conclusion

Ultimately, I learned so much from this project. As my first long-term project working in a close-knit team, I gained first-hand experience with both the ups and downs of the collaborative process, and saw how much further you're able to take a project when you have team members by your side.

If I were to have the chance to go back to this project, I'd love to incorporate more animations in the game for smaller interactions like screen transitions, button states, and icons. This project was truly a test to use multiple of my skillsets, but it was an amazing challenge that I'm glad to have taken on.

bottom of page