Swift Runner UI

As most of the game elements are on the canvas, the UI is an integral part of the game.

Each song has a card that the player can unlock. Originally, these cards only featured the song name and track number. I then decided to add a drawing of Taylor depicting the respective album of each card, which were all drawn by my sister.

To be accepted into the Strava Developer Program, there are brand guidelines that have to be followed relating to disclosing the connection to Strava. This involves using a ‘compatible with Strava’ or ‘powered by Strava’ image to indicate that Strava is used, and a ‘connect with Strava’ button to authorise the user. These images were supplied by Strava.

The layout of the main UI was inspired by games such as Crossy Road and Clash Royale, and other apps like Strava, which have the key feature buttons along the bottom of the screen. Putting all the buttons at the bottom made it too crowded, so I decided to move the achievement and quest tabs to the upper section of the screen. Previously each tab had a close button. To make the new layout work, I removed the close buttons and changed the tab buttons so that each closes all the other tabs. Closing all the tabs each time means that I can use the same code without having to change it depending on the tab.

I decided to add navigation between unlocked achievements so the player can easily look at what they have earned. I already had this for navigating between songs, but I had to adapt the system as opening achievements doesn’t work in the same way. The song navigation uses the card’s ID to find the right position in the sorted list and then moves to the next card in the list of unlocked songs.

To make the achievement navigation I had to save the sort ID of the current achievement viewed, find the position of it in the sorted list of unlocked achievements, then index this against the list of card IDs to open the next achievement. This took a significant amount of time as it was difficult to understand what to do and in what order to make this work. 

As the player can open the locked achievements to see the unlock requirements, I could have made the navigation include all achievements, and this would have been easier as I wouldn't have to index the sort IDs against the card numbers. I decided not to do this as it could feel demotivating to swipe through and see a lot of locked achievements. This decision was inspired by Crossy Road where each group of characters shows the players unlocked characters first, and then the locked underneath, and characters no longer obtainable are not shown to the player at all. This emphasises the core drive of ownership (Chou, 2015) as it makes players focus more on what they already have.

Originally, I was hesitant to show outfits and cards in places like the shop because I wanted the reveal of each to be impactful. I decided to change this to enhance the gameplay to give the player more agency in how they spent their points and felt this trade off was worth it to enhance the gameplay.

I added popups that appear on the screen for a short time. These tell the player they have earned points, completed a quest or don’t have enough points to buy an item from the shop. These popups could overlap if more than one was triggered at the same time, meaning that the player would miss information. To solve this, I created a new popup manager script that queues the popups so only one can appear at a time. When a condition for a popup has been met, a variable is set to true to show it needs to be displayed. Lower priority popups can only appear if the higher priority popups don’t need to be shown.

The popup for the starter quest wasn’t displaying the correct text. I realised the string wasn’t being set at the correct time and changed it so it was set to the starter quest when it was active, but the main quests were still overwriting it. I tried changing when the main quests were enabled, but this kept awarding XP until the level maxed out. During testing, I use the space bar to simulate activities and give the player progress. Using this, I noticed that the player was gaining quest progress even when the main quests weren’t active. I changed this so the main quests would only gain progress when they were active and set the popup text to the starter quest when only 1 quest had been completed in total.

Through a bug that continuously gave XP, I accidentally discovered the level would increase beyond the maximum. I added a level limit so that when the player reaches the maximum level, the game doesn’t try to start progressing the player to a level that doesn’t exist.

This sets the XP to a fixed value so it can’t increase, sets the level bar to full, and stops the level up check so that even if the player was given XP accidentally, the level up function would not run.

Some gem counts were displayed with the number first and others with the gem icon first, so I changed these to make them consistent, and added the prices of each item in the shop. I also adjusted the gem count in the home screen and shop screen to keep them consistent.

I made a box with patterns in the corners to use for UI buttons and backgrounds, but the pattern became very stretched when using it on elements that had different sizes. To fix this, I made 3 rectangle versions with different dimensions and then used the one closest to the target element dimensions so that the pattern wasn’t stretched too much.

The shop buttons were inconsistent with when they were able to be clicked. I fixed this by updating the logic so that if there is at least 1 item remaining and the player has enough gems, the button is available to be clicked. If either of these are not satisfied, the button can’t be clicked.

I implemented additional swipe gestures for navigation. I was originally planning to use tapping on an active tab to close it. However, when I tested this with song cards in the collection, the tap and swipe actions were not distinctly separate and sometimes one activated when I was aiming for the other.

I changed this to a vertical swipe upwards so that horizontal swipes wouldn’t be triggered at the same time. The tab to close is determined using different combinations of variables when the player swipes upwards. I then removed the close buttons once all the tabs were able to be closed with swipe controls.

When switching between tabs, the close and open sound effects played at the same time. This was because the sound effects were still set up for the old UI system with close buttons for each tab. To fix this I removed the close sounds from these tabs so that switching tabs only played the open sound.

Some of the UI button hitboxes were extending beyond the image and overlapped with other buttons, causing the wrong button to be pressed. I realised that this was because the custom button I made had blank space around it that triggered the button when clicked. I fixed this by making a new version of the image without the empty space and resizing the buttons to keep the layout similar.

I was using purple and yellow for backgrounds of different UI panels, but they were inconsistent. I changed them so that information panels such as gem popups, the tutorial and achievements were yellow, and background panels were purple.

In the wardrobe, there was no way to close the clothing tab after it had been opened. I changed this so that the clothing tab closes if the player presses the button of the currently open tab. I did this by using a new integer variable that tracks which tab is open, and closing that tab is the button is pressed again.

Unlocking the outfit achievement showed the achievement over the outfit, and closing it also closed the outfit popup so you couldn’t see what outfit was unlocked. I changed the outfit achievement to only appear if the outfit display wasn’t active, so that when it was unlocked, it would only show once the display showing the unlocked outfit had been closed.

Sometimes completed quests would show the default quest text in the popup, so I changed the default to ‘Completed quest’ to show to players if displaying the actual quest failed.