Cities of the Imagination

Tools: Unity, Photoshop, Spine, Visual Studio Code, C#

Role: Illustrator, Animator, Developer

Context: I was chosen to represent my PrattMunson (then called PrattMWP) class in the PrattMWP 20th anniversary exhibition. For my contribution, I exhibited an interactive experience that gallery viewers could explore using just a keyboard and screen.

Considerations

Project Opportunity: Delight gallery visitors with an interactive, digital piiece in the exhibit.

Limited User Input: I was limited to using only keyboard input for visitors to interact with the experience on the screen.

Lack of Immediate Support: There wouldn’t be someone to reset the application in a timely manner or help visitors interact if they were confused or got stuck.

A visitor interacting with the project in a gallery
A visitor interacting with my project in the PrattMWP Gallery

The Design Process: Problems and Decisions

Where did the imagery come from?

The different scenes in my thesis project were loosely inspired by cities in the book Invisible Cities by Italo Calvino. In the book, Marco Polo summarizes his travels to various different cities. The different cities are described in abstract ways, emphasizing aspects of each city. I chose some of the cities that spoke to me: Baucis, a city on stilts in the sky, and Armilla, a city full of pipes. I also created my own city, Ibislia, a lagoon of time.

Why the snail? In Ibislia, I wanted to draw attention to the way that time seems to move differently in cities and play with scale and speed in the imagery. Snails are small and slow, but what if they became big and fast? The fact that Marco can ride the snail and the fact that there is a Giant Ibis in the scene as well evokes a the question of: has marko shrunk or are the elements just really big?

Why the flying plant? In the chapter about Baucis, there is a moment where where Marco wonders why everyone in the city lives so high up. One of the hypotheses was that the people just hated dirt. My brother at the time was taking care of an air plant that just needed moisture and air to survive. I thought it would be interesting if the people in the city used the air plants as transportation, and so, the flying plant was born.

an orange snail with a purple shell sliding in a looping animation, and a black and white marco polo character riding on top
Marco riding on a giant snail... or has he shrunk?
An air plant inside a purple basket with wings and marco polo riding on top
Marco riding on a flying air plant

How would the visitors navigate the landscapes?

The visitors to the exhibit would only be able to use a keyboard to navigate the three cities. In an effort to add variety I thought of different ways Marco would move around in each landscape and how the interaction would map to each key on a keyboard.

Armilla:He travels by foot in Armilla, so the controls mimicked those from 2D platformer game.

Baucis: In Baucis, all arrow keys can be used to move over a 2D plane.

Ibislia: To slide on the snail, I used the ragdoll runtime feature from Spine and had the user to apply force left and right with the arrow keys. This created a sliding effect. More on this later!

Menu: In the menu, I reused the movement mechanics in Armilla and had the user select which landscape they wanted to explore with the enter key when Marco was in the vicinity of the corresponding portal.

diagram of interaction types for each city- armilla, baucis, and ibislia.
The planning sketch for the navigation.

Trying to break it.

Throughout the development process in Unity, I playtested the application with friends and family and asked them to try to break the application while observing where they got confused and asked questions. As a result I implemented a few solutions:

Pop up instructions: I added instructions that would appear after a minute of inaction and when the visitor enters each landscape. That way, the instructions would hopefully appear between each gallery visitor's experience, and if not, if the user didn't understand how to move, would appear while they were trying to figure it out.

Boundaries and Restart Triggers: I implemented hard boundaries in Baucis and Ibislia that the player couldn't cross so they wouldn't get lost or go off the scene, and triggers in Armilla that allowed me to detect when the player object had fallen and restart the scene.

instructions in a circle on top of the background from the Baucis scene
The instructions for Baucis
marco walking around on a pipe and then falling. as soon as he falls off the page, the scene restarts
When marco falls, the scene restarts
diagram of the boundaries in the game. The flying scene, Baucis, has boundaries all around the 2D plane that you can fly around in. The snail landscape, Ibislia, has boundaries on the left and right of the scene.
The planning sketch for the boundaries

Broken Snail!

I had a hard time making the snail unbreakable as the code used the physics engine in Unity and there's a lot of unpredictability involved with how the ragdoll physics would interpret user input.

If the user put too much force on the snail, the snail would flip over and sometimes fly across the screen.

My solution: I decided to prepare for the inevitable and added ways to detect if the snail had flipped over so I could display a message to the visitor. After the message displayed, I sent the users back to the menu to try again.

An unexpected result is that the visitors found this to be one of their favorite moments of the display.

An error message displayed to the user when the application detects the snail was broken.
The eror message that appears

Outcome

The exhibition went off without a hitch! I was able to subtly watch as visitors interacted with my piece and noticed that the solution I came up with for the snail breaking made people laugh, which is what I was hoping for.

Maddison Manente's Cities of the Imagination is a unique, engaging, and fun exhibit ... a delightful piece that brings its viewers back again and again. - Sarah Griffin Ives

Thank you for taking the time to explore this case study. You can click into the embed below to interact with the project on desktop or visit it directly athttps://maddiemaloo.itch.io/cities-of-the-imagination

computer