Live With One Goal: Release My First IOS App
Introduction
Three months ago I set a simple goal for myself: release my first iOS app to the App Store. Game development wasn’t a new thing for me. Previously I’ve created five games within a sandbox environment. I already had knowledge of javascript and mathematics, along with prior Ionic 4, Angular 7 and Phaser 3 experience. However, I lacked in design skills which held me back from releasing previous iterations of my ventures into game development.
Appreciation
I would like to start by giving credit to the generous kenney.nl for providing me with the assets used in this project. Head over to kenney.nl for various assets that can be used free within commercial projects. The Free Sprite Sheet Packer website helps me a lot with packing sprite sheets, including data formats for Phaser.
Technical Details
I’ve used the Ionic 4 and Phaser 3 frameworks for implementation.
Ionic 4 nicely integrates with Angular and Apache Cordova. All of these frameworks give an extensive list of useful features: pre-designed UI components, native plugins, build and deploy commands across multiple platforms, CLI and more.
Phaser 3 is a 2D game framework which uses both a Canvas and WebGL renderer.
Game Description
The player controls a pink ghost inside an enclosed maze. The maze is filled with four types of crystals, a portal and four multi-coloured ghosts whose main mission is to catch the pink one. The goal of the game is to collect all of the crystals and unlock the portal.
Challenges Along The Way
The process of game development can be as rewarding as it is complex.
Creating The Maze
The maze has a complex system of paths and passages, this is constructed by setting impenetrable walls. The mazes landscape consists of walls and a portal. In total there are fifteen types of walls. The walls and the portal data are preserved in a simple integer matrix. In the image below you can see how the landscape matrix is mapped to the maze.
For example, ‘2’ represents a horizontal line, ‘4’ — a vertical line and ‘81’ — a portal.
The same approach is taken to settle the crystals. The maze’s items matrix keeps the data.
The Ghosts Behaviour
You, the pink ghost, are being chased by four ghosts whose main objective is to catch you. Individual logic is applied to each ghost which gives them uniqueness in their movement and predictiveness. The ghosts attributes are as follows:
- the beige-coloured ghost knows the exact location of Pink, this means that the pink one will always be aggressively chased by the beige one;
- the blue one is trying to predict a future location of Pink to get in front of him and cut him off;
- Green doesn’t “think” much so he moves randomly;
- Yellow is a lazy ghost by nature.
Previously I mentioned two matrices: the landscape and the items. There is a third and final matrix which determines the possible navigation path for the ghosts and the user. This contains two values: ‘0’ — a free path and ‘1’ — a barred path. In the image below you can see how the navigational matrix is mapped to the maze.
There are two controllers that move ghosts. The BFS-controller and Random-controller.
The BFS-controller employs the breadth-first search algorithm. It sets a hunting ghost as a root and the pink ghost as a target. It traverses the navigational matrix to find an optimal path. Beige ‘knows’ the exact location of Pink, in technical terms this means that beige ghost is a root and the pink ghost is a target. The algorithm finds the path and the controller moves the hunter in the right direction. As explained in brief above, Blue is trying to predict the future location of Pink. It sounds complex but I found an easy and elegant solution. As an interesting exercise, you could try to solve this before continuing. As a hint, the BFS-controller is still in place.
The Random-controller navigates two other ghosts. It randomly changes their direction on every cross.
Smooth movement
The player controls the pink ghost, which has the possibility to move in all relative directions: up, down, left and right. At any point in time, any turn can be done.
On the image below red rectangles mark a bounding/collision box surrounding Pink and green rectangles mark bounding/collision boxes of the walls on the right side.
In the image you can see that Pink moves down and tries to perform a right turn. Three situations are possible: an early turn — Pink touches the wall with his top path, a late turn — Pink touches the wall with his bottom part, and a successful turn — Pink fits the space in between the walls. The first two situations can be annoying for players if they can’t clearly understand why the ghost is stuck. To make gameplay smoother and improve playability, an auto-correction function comes into place. Basically it calculates the overlap distance Δ between the bounding boxes of Pink and a wall. If such distance Δ is less than a threshold value the auto-correction function pushes Pink in the right direction. The push is almost not noticeable for a player but the effect of having continuous movements increase the perception of the game dramatically.
Finishing Touches
At this point I had completed what I thought was about 80% of my original plan. In reality, adding these “finishing touches” took twice as long as creating the maze and game engine. This was mostly because of the growing scope and UI changes, which includes changes in the maze.
The app consists of several pages, these include the following: the splash, home, settings, rules and finally the map selection page.
Thankfully, Ionic provides a set of UI components and useful plugins like Native Audio, Storage which I utilised to implement the app’s pages.
Publishing the app
The process of publishing an app can seem a bit scary from the first glimpse. In all honesty, it cost me two evenings to successfully publish the app. I suggest checking the official documentation and this guide. Be prepared to answer a lot of questions and to have your privacy policy page.
Closing Remarks
After publishing your first app to the App store a few emotions start to hit you all at once. These can be summarised as proud, happy and worried all at the same time. You might be criticised, you might get zero downloads but in the end you, the developer, decide what the outcome of this learning experience is for yourself. Personally I know there is still a lot to learn about and a lot of new challenges ahead.
I hope this could inspire you to challenge and push yourself to achieve more. Follow me for future updates and new projects.