UX Architect | Game Designer | UI Designer | Graphics Artist | Programmer
Project Overview: For the past few years I had wanted to take some of the lessons I learned from PetriPet 1 and apply them to an entirely new version of the game. When Apple released the new SwiftUI language, it seemed to be a good project to use to teach myself the SwiftUI libraries and implement some gameplay improvements to the original PetriPet game. The result was a much more polished and fun game compared to the original.
The Opportunity: Since the release of PetriPet 1, Apple made significant changes to WatchKit including the removal of the system-wide default long-press gesture for contextual menus, and a completely revamped Apple Watch Complication system. These changes rendered the original PetriPet game as being difficult (if not impossible) to play. The most significant change that Apple made since the release of PetriPet 1 is breaking the bond between Apple Watch apps and the iPhone.
Now that Apple Watch apps can run independently from the iPhone, I decided to challenge myself with building a single watchOS-only app that had all of the features of the version that ran on the iPhone with the Apple Watch companion app. At the same time, I was able to completely re-design and re-engineer the entire PetriPet code-base to run using Apple’s new SwiftUI language. This provided me with the opportunity to learn this new language and utilize some powerful features to simplify the game using the built-in state change tools such as @Published objects.
Research Findings: When I set out to design PetriPet 2 it was vital that if this was going to be a complete re-write that I wanted to make sure I also improved the overall gameplay experience and not simply give the game a face-lift. As a player of PetriPet 1 and knowing several close friends and relatives that also played the original for some length of time, I collected some interesting impressions of the first game from these players.
Insight #1) The most fun about the game was seeing your pet change and grow. However, the visual changes of your pet in the original game topped out at age/level 6 — when they became adults. That took somewhere between six and ten days. At that point the game became very monotonous.
Insight #2) Along with the first insight, when reviewing data from Game Center, it would appear that most players abandoned the game when their pet reached age/level 7 or 8. This also reinforced the impression that players stuck to the game until the pet was full grown and then became bored with the game and abandoned it.
Insight #3) The original game featured 8 different kinds of pets and they were all based on real-life animals such as dogs, cats, birds, and fish. While this was fine, it wasn’t particularly creative and some of the feedback from players indicated that they would have preferred more fantasy creatures or just monsters in general. They mentioned procedural games such as SPORE for the PC where the creatures were computer generated and therefore more interesting than simply a dog or a cat.
Insight #4) Players liked the idea of ‘splicing’ power-ups when described to them about how they could work but in reality, splicing seemed like a superficial gimmick that didn’t substantially change the gameplay. It only changed your pet’s colors and in some cases the pet’s species from fish to dog or the like. Players explained that splicing seemed like an after-thought instead of an integral part of the game.
Insight #5) Players didn’t find the Apple Watch Complication included in PetriPet 1 to be particularly useful or interesting. It was simply a static image of your pet’s face and served only as a shortcut to open the app. There were requests to see things like if the pet had pooped or not or how much food was remaining.
Addressing Feedback: I made it a point to address the feedback of players in a many ways that improved the quality of the game as well as making the game more fun. Here’s how I addressed each of these feedback items in PetriPet 2.
Enhancement #1, #2: A core focus of the new game was in creating a pet that changed visually through its life-span. In PetriPet 2 we have 18 types of pets that each have at least a dozen visual changes that update as the pet grows. Every 1-4 levels, the pet visually changes it’s look as it grows. For example, a level 6 pet may have one eye and small arms but a level 8 pet may have grown a second eye and larger arms. This helps keep the player engaged and keeping the pet alive so they can watch it grow and evolve over time. The pet does not reach adulthood until level 25 and then continues to age and get older as it lives to over level 50. This level of engagement also entices players to purchase In-App Purchases like Treat Packs to keep it alive as they build more of a connection with the pet the longer it lives.
Enhancement #3: PetriPet 2 now features fantastical creatures and monsters in addition to traditional pets. You can grow a standard fish, but you can also evolve that fish into a monster of the deep sea with huge, sharp teeth. For players that wanted a bit more of a creative creature, this is now available to them.
Enhancement #4: Instead of being the last thing that was developed and added to the game as was the case in PetriPet 1, the new game integrated splicing into the very core of the gameplay and was added from the very beginning of the game development process. Besides only effecting the look of the pet (primarily color in the original game) the new splicing engine modifies the pet in ways that can make the game easier or more difficult. For example, one splice can turn the pet into being nocturnal where it sleeps during the day and eats at night, forcing players to develop new strategies to keep the pet alive now that the pet is sleeping when the player is awake. Other splices help the player by increasing the amount of experience points that are earned when feeding or cleaning the pet. This splicing engine is what makes PetriPet unique among other virtual pet games.
Enhancement #5: Apple drastically changed the way Complications worked after the release of the original PetriPet game. The new ClockKit API updates allowed for the design of much better Apple Watch Complications in PetriPet 2. I kept the original static image Complication of the original, but enhanced it so that on Watch Faces like the XL Family, there can be a large image of the full pet on your watch next to the digital clock. I also added a counter that shows how many poops and a gauge that shows how much food is remaining. This is a significant upgrade for players who can now monitor their pet without having to open the app regularly to check up on it.
Game Engine: Something that was probably not readily apparent to the players of the original PetriPet was that it was truly 8 games in one. Each pet had their own life-cycle, visual model, and methods. The game also featured multiple repeated sections of code that needed to be maintained and lead to unintended bugs. Debugging and maintaining PetriPet 1 was very challenging and it was clearly the work of an inexperienced developer.
When I developed PetriPet 2, I wanted to apply good programming principles that I had learned in the time since PetriPet 1 was released. This lead me to the conclusion that I needed to design an ‘engine’ for the game and deal with the visual aspects of it as separate from the logical code. PetriPet 2 was developed in such a way that all of the logic of the game was put into place and the artwork for each pet was added at the very end, before going to beta testing.
The overall game engine was broken into distinct parts.
Time Functions: I developed an object that contains all of the code for setting time intervals for various functions (for example, when to eat next or when the pet will be tired enough to sleep for the night) and called these functions as needed from within the main game engine. This provided consistency and a single place to tweak time-interval related code.
Splicing Engine: A variety of micro games like flip a coin, a simple slot machine, or a random number generator that the player interacts with when splicing the DNA code of their pet. This added an element of interactivity to the splicing feature and added some variety to the game. The results of the splices also modify real values that get taken into account in the main game engine sub-routines.
Main Game Engine: This is the main logic of the game which included evaluating the state of the pet, but also used specific variables such as eat rate, poop rate, experience rate, etc that could be adjusted by the game through the splicing engine. This engine also keeps track of the pet’s vitals and tracks steps.
Visual Engine: This is the logic that draws the various pets to the screen including the idle animations, the sleeping animations, and the various action menu animations. I utilized a variety of particle effects for things like feeding the pet or simulating water coming out of the shower head when cleaning up after the pet. The use of a visual engine allows me to add more pets to the game overtime without any change to the actual SwiftUI code.
Store Manager: This is the object that handles all of the In App Purchase related functions.
Complication Controller: This object executes whenever the game is minimized to the background (or closed) and creates a timeline of views for the three distinct complication styles for every Watch Face family. For example, it calculates when the pet will be out of food for the next 24 hours in 15 minute increments and queues those images up for display at a given time to the user’s Apple Watch face if they have the Complication installed.
UX Challenges: There were many challenges in making PetriPet 2, but the most challenging aspect was combining the two distinct parts of PetriPet 1 into a single app that ran on the smallest (38mm diagonal) of screens.
The original game was broken into two parts.
iPhone component displayed the pet’s vital information, processed splicing, processed leveling up, and provided for In-App Purchase transactions.
Apple Watch component displayed your pet and governed the interaction with him including feeding, cleaning, providing treats, etc.
Since PetriPet 2 was going to be an independent watchOS app, the Apple Watch component had to handle 100% of the game’s functionality. To do this, the game needed to be broken into two ‘tab’ views. SwiftUI presents tab views in watchOS as two pages that the user swipes between. Tab 1 would be the laboratory screen which would feature all of the typical functions like action views while Tab 2 would be the details view that provided for the pet’s vitals and displayed inventory items, achievements, and processed In App Purchases. This paradigm worked out very well and thanks to the reactive nature of SwiftUI, scales perfectly on Apple Watch displays from 38mm up to 45mm.
One additional challenge that I decided to take on during the design of PetriPet 2 was supporting VoiceOver for visually impaired players. In September 2021, I received a request from a player of the original PetriPet asking if I would re-write the app to support VoiceOver as there was not a single virtual pet game for the Apple Watch on the App Store that supported it. Since SwiftUI provides for a lot of VoiceOver support by default, I decided to work a little more on optimizing the game for VoiceOver beyond what SwiftUI gives you for free. I still have some work to do in this area, but for release 1.0 there are audible indicators for most parts of the game. This is something I will continue to engineer as a part of future releases.
Technologies Used:
Apple Xcode 13
Swift 5 & SwiftUI 2
WatchKit, ClockKit, StoreKit
Adobe Illustrator, Adobe Photoshop
Apple Keynote