The Hills of San Francisco

"Dear Tabby..."

Introduction

The Hills of San Francisco is an interactive comic about letting go of your childhood cat.

Made in memory of my cat, Waffle, who was diagnosed with Stage Four Kidney Disease in May 2024. Waffle was a very shy cat who enjoyed eating food and snoring loudly. He passed away at the end of August 2024, 9 years after his adoption day.

Controls

Leftward movement: A or left arrow key
Rightward movement: D or right arrow key
Attack: Z, J, or left mouse button
Interact: E
Show Cursor: Left Alt
Restart Game: R (for testing purposes only)
Quit Game: Esc

Known Bugs / Limitations

Player is able to make Tabby move backwards while attacking
Dialogue animation cannot be skipped
Animations after getting hit are buggy
Camera movement is...not robust...

Development Notes

Narrative Development

This project began as a hack-and-slash roguelike where Tabby, a gladiator cat with a terminal disease, fights cross-country to return home to San Francisco before he passes away. Throughout his journey, he would travel through three major area's of our family's life: Upstate New York, which is my hometown; rural Illinois, where my parents first met in college; and the San Francisco International Airport, the liminal space before returning to my grandmother's home.

Around the halfway point of my project, though, I started losing direction. I felt like I had fallen too much into "the swing of things" where I was just going through the motions of making a game but losing the reasons why I was making it.

Visual Development

An issue I ran into a lot was that I kept jumping into the art without taking the steps beforehand to develop the style I wanted for this game. As a result, I had a lot of dissatisfaction with the way my game looked (and I still do, to some extent, but I think that's more to do with being a perfectionist haha).

A prime example is when I was learning Unity's Tilemap system, and I got way too caught up with making new tiles that I realized I didn't actually like how the tiles looked in game. The world looked cold and cave-like, as though Tabby was stuck in a dungeon, which was NOT my intention. After doing a bit of sketching and narrative development (see above), I decided to go with an autumn forest scene instead, which I feel fits the tone of my piece much more.

This happened with the arena as well. I wasn't really enjoying the look of a gladiator's arena in this new environment -- it felt too out of place, and the perspective felt too warped. As a result, I developed an arena that was much more meaningful to both the setting and myself -- a high school hallway with stained glass windows depicting three major landmarks of my hometown. The first window depicts my old church, the second window depicts my old house, and the third window depicts the playground near my house.

Technological Development

For this project, I decided to use Unity. I had some knowledge of Unity due to taking Professor John Craig Freeman's 3D Computer Gaming class the previous semester, but the technological side of game development was a major concern for me going into this project. I had limited experience with programming, but I still felt I had a lot to learn to even understand the basics. The concept of functions and classes confused me, and I often relied heavily on nesting conditionals within conditionals within conditionals. My primary goal during this semester was to learn how to code in a non-hacky way -- that is, developing robust coding frameworks rather than patching all my bugs with equally buggy fixes.

The main issue I was running into was that even when I follow tutorials or reading coding forums, I often did not actually understand the logic of what I was putting into the code. Often, I was simply copy-pasting chunks of code and hoping that it worked. Consequently, if was really difficult to figure out what parts of my code were broken whenever I ran into a bug.

I figured out a few ways to help me understand my code. Firstly, I began placing comments next to every single line of my code that explains what each line does. This helped me get accustomed to the syntax of coding by translating the lines into something more easily comprehendable.

A second way to help me out with programming was not just to use tutorials, but also to visually map out the coding after finishing the tutorial. In the below images, I mapped out the flow of functions and classes for Brackey's Unity Dialogue System tutorial I'm a very visual person, so doing this really helped me understand the structure behind the code I was adding to my game. After doing this, I was able to adjust the code from the tutorial to fit the kinds of interactivity I wanted for my game.

Now, about four months after I started this project, I feel like I'm starting to get a better understanding of coding!