- A deceptively simple puzzle game -『0hh1』

My road to conquering the process of designing, building, and launching a mobile game from my imagination

My Shift Journey 😌

Growing up, I always loved the act of creating, building something from my imagination. The sheer joy I felt from materializing a vision confined within my mind to reality was a feeling like no other. It left me glowing with a sense of accomplishment. I did practically everything one could name — sketches, painting, sculpture, music, composition, animation, story writing, graphic novels. However, high school ripped my free time away from me, and I soon forgot how to create just for the fun of it.

The annual University Of Michigan Festifall brought to me the opportunity to reclaim that passion I once had. Shift Creator Space. This org was a godsend for me. Coming out of the constant hustle to get into a “good” college, I began college with a fear to spend time outside the classroom on non school activities. I felt extremely guilty (to an unhealthy extent) for not spending all my time studying.

Shift taught me that some of the best learning moments come from unapologetically pursuing passion projects. Stepping out of my comfort zone is vital to growth. Shift taught me that school isn’t everything. It taught me that the only thing holding me back, is myself.

『0hh1』… My Very Very Very *first* App

Coming into Shift, my initial project idea was a grand vision of a mobile-based succulent nurturing simulator designed to relax users with pleasing visuals and gentle affirmations. However … I didn’t know how to code. Let alone make an app. I didn’t know anything. Let me empathize again — I knew nothing. Lol.

“0hh1” (pronounced oh hi) is a puzzle game involving red and blue tiles. The objective of the game is to solve the board by filling it according to a specific set of rules. The game, originally built by Martin Kool is web-based. In preparation to build my succulent nurturing simulator, I built a mobile version of this puzzle to learn the basics of app development.

Development of this app can largely be classified into these four steps :

• Learning the basics of Swift
• Developing the logic of the puzzle
• Designing the user interface and adding external features for decor
• Shipping to the App Store

Frames from the “Running Tile Man” animation mentioned later on in the story — Tile Man is the beloved mascot character of 0hh1 🥰🥰

Learning Swift

Swift is a programming language developed by Apple, specifically designed to create iOS apps. The language comes with several useful built in packages and tools such as a UI designer and physics simulators. One of the most helpful packages within Swift was SpriteKit, a general purpose framework designed to draw a vast variety of 2D shapes and manipulate them with ease. I completed several simple iOS tutorials to first learn the language.

Puzzle Logic

This was perhaps the most labor intensive piece of the whole project. 0hh1 is a puzzle based off of several rules and limitations. Coding the correct logic for the game was a time consuming process, and making sure no rules were violated during the gameplay was a crucial step. In order to make things faster, I first coded this in C++, a language I am more acquainted with, and later translated it into Swift.

Design

After the meat of the game was built, it was time to connect the internal logic to the external design. The design process if this app was definitely the most enjoyable for me, as I’ve always loved visual art. Using SpriteKit, I laid out the tiles in the correct order on the screen, made sure the tiles were responsive to user interaction, and connected the game action to each button on the screen. Additionally, I added some tile confetti animations as well as “Tile Man,” a mascot character for the game to make it significantly more attractive. The running tile man animation in the title screen of the game brings me the most joy — he is extremely cute, and I’m proud that I was able to figure out how to achieve that end result using SpriteKit.

Running Tile Man Animation on Title Screen

Shipping to the App Store

Though this process is still in the works, (the Apple store has many rules and regulations for what can and cannot be on their store) I plan to complete this step during the summer. I’m really excited though :)

Final Game Demo !!

A video walking through all of the different scenes within the app as well as sample gameplay

What’s Next ??

Of course, the succulent nurturing simulator. I’m coming for you. >:)

I’m really really really excited to continue growing next school year and also over the summer. Stay tuned to what I manage to come up with, hehe.

…About Me :)

Me, photographed by Me. Self Timer Came in Clutch.

Hello !! My name is Kaoru Murai, a first year student at the University of Michigan studying Computer Science through the LSA. I’m also pursuing an Art & Design Minor through the Stamps School of Art & Design. I just began coding for real this past September of 2019, and I’m excited to learn more. Some of my other interests include : digital illustration, design, animation, orchestral clarinet, ballet, pad thai, and high waisted jeans.