POKEPLAY: SwiftUI Development Project | Case Study
Pokémon-themed mini arcade app features two short games
Project Date
Fall 2022
Overview
After finding success with a variety of SwiftUI projects and views, I wanted to build something dynamic, interactive and entertaining. I settled on making a simple game that anyone needing to kill a few minutes could enjoy.
One game wasn’t satisfying enough, so I evolved my plan into something a bit bigger: a single, cohesive experience featuring two short games — a casino-style slots game and a classic pairs matching game — with a Pokémon theme. I dubbed this mini arcade app Poképlay.
While the amount of setup required for the two games differed wildly, both are quick, easy and low stakes from a user standpoint.
I built this app with SwiftUI in Xcode.
The Challenge
My primary objective was to make something that was polished, fully functional and pushed me beyond the bounds of my previous work in native app development.
I initially thought I could accomplish this with a single game but subsequently decided to add a second game to the mix. Each game required unique mechanics, graphics, sound effects, etc.
The biggest challenge I faced was designing and implementing the two distinct games within a single app while ensuring a seamless user experience. A secondary challenge was time. I only had a few days to complete the project, along with regular work and family obligations.
My Solution
I am still fairly new to SwiftUI and had not yet attempted a full game, so I had to rely on code-alongs to help me with the setup for the games.
The YouTube tutorial for the basic slots game was straightforward and easy to follow. The video encourages you to add notes to specific code sections as labels, which really does help in the long run when you are troubleshooting or making adjustments in more complex projects!
The code-along series included a separate video that broke down animations really nicely. Of course, I wanted to make the game as interactive and fun as possible. But I’ve been animating for web and video for years and was also genuinely curious to know more about the mechanics of animations in SwiftUI.
I enjoyed making the slots game, and when I was done maxing out its features using the accompanying videos, I felt a lot more comfortable with animations.
However, I wasn’t happy with how it looked. My first order of business was replacing the asset files the code-alongs had generously included. I could have made assets myself, but I was hoping to find additional free assets to save a bit of time. I wasn’t sure what to look for at first.
Something that has turned out to be rewarding for me lately is designing with my son in mind or making things that feature him in some way. It’s made my work less of a mystery to him and has helped me narrow my ideas. He was my inspiration for the theme.
My son loves Pokémon, so I was thrilled when I found an adorable and generously sized set of free icons. I then fully customized the game by adding new fonts, colors and animations. I included feedback sounds as well.
The slots game looked great with its new Pokémon theme, but I didn’t feel like I had pushed myself enough yet. I decided to try building another game using a few of the remaining Pokémon icons.
For the second game, I chose to build a pairs-matching/memory game, which happens to be a family favorite.
The matching game setup was more complicated than the slots had been, and the code-along series for the game was also much longer. I almost changed my mind about doing the second game because of my time limitations, but the match game videos delved deeply into the model–view–viewmodel (MVVM) architecture that most apps are built around, making it too tempting to pass up.
Watching several videos at 1.5–2x speed, I was able to complete the matching game. My only hiccup was I couldn’t get the timer part of the game to work properly. Rather than continuing to troubleshoot as I normally would, I decided to exclude the time bonus from my version and move along.
I had decided midway through the second game build to try to combine the games into a single app. Because I hadn’t planned to do this from the start, I wasn’t sure how best to approach the merger. My biggest concern was that both games utilized CardView, which could obviously conflict.
While I let my ideas on how to combine percolate, I commenced with a quick mockup of the main view that would present the two games to users. It started out rough. Just as I was lamenting the gradient horror show I had somehow come up with first, I had a eureka! moment on making the landing for the games look like a poké ball.
As you can see, my son is the real Pokémon fan in the house. I had to look up a reference to get the final styling of the poké ball correct.
Once I had the poké ball properly oriented and assembled in my mind, I proceeded to recreate it in Xcode using a few stacks and the icon assets.
I had previously styled the separate games with the same fonts, colors and images. All that remained was for me to merge the games into a single app. I backed up my game files and began renaming them carefully.
I first tested the slots game by changing its CardView file and any references to it to SlotCardView. Once I ensured that the game still functioned properly, and still functioned properly, I made two GameView files, pokePairsGameView and pokeSlotsGameView. I next loaded each game’s helper files into the new project that already contained my poké ball ContentView.
I used NavigationLinks with the buttons in my ContentView to point to each GameView file. Then, I went into the GameView files and added back buttons so users could return to the main screen, and voilà! I had my mini arcade app.
Results
My test audience (son) loved it. He took over my laptop immediately and began to play with both games.
I would refine one or two small things, such as the time bonus on the matching game, in future iterations of this app. Overall, however, I am pleased with how it turned out.
I pushed myself to make something new, then pushed myself well beyond that and ended up with a cool little app — at least as far as my 9-year-old and I are concerned.
In the process, I learned quite a bit about MVVM architecture, grids, functions, arrays and animations in SwiftUI. Overall, I’d say this app project was a win for me!
