The CARD™ Web App


The CARD™

Web App

The CARD™ Web App is a mobile web-gl based project being produced with the Canadian Public Health Association. It's goal is helping children, who are scared of needles and vaccines, better understand why vaccines are important and teach them techniques in reducing the stress they can cause. I was hired on as a designer and system and gameplay programmer.

Details

Time:             Jan 2021 - Apr 2021
Team Size:   5
Tools:            Unity
Role:              Technical Game & System Designer, Programmer

The CARD™ Web App is a mobile web-gl based project being produced with the Canadian Public Health Association. It's goal is helping children, who are scared of needles and vaccines, better understand why vaccines are important and teach them techniques in reducing the stress they can cause. I was hired on as a designer and system and gameplay programmer.

Details

Time:             Jan 2021 - Apr 2021
Team Size:   5
Tools:            Unity
Role:              Technical Game & System Designer, Programmer



Contributions


  • Several minigames
  • Sound & Music Implementation
  • Generalist

My core role within this project was a c# programmer. I was tasked with designing, and implementing multiple mini-games. To make sure these games matched our main game, I had to design them with 8-12 year olds in mind, as that was our target demographic.

Aside from developing minigames, I was also tasked with more general tasks such as:

  • Sound implementation
  • QA Testing
  • Gameplay Polish



Minigames


Minigames


I designed and implemented 5 different minigames. As the projects audience was a rather young target, these games were kept simple, and designed to be similar to games one would find in schools, or dental offices. As a result, designing these games was quite simple, in that many of their rules were already pre-established from other mediums, and most of the work was spent programming systems to make them work.

Additionally, as I was enrolled in classes while in this position, my schedule was 1 day a week, which resulted in these minigames being developed in 5-7 hour sprints, in order to make time for feedback and other tasks. I just treated these like game jams

Here are two of the games I developed

Line Match Game

The line match game was heavily inspired by games like candy crush. In this game, the user draws a line, and has to match 3 or more of the same icons

To keep it simple, the icons are all in a grid, and the player must match with the icons around the selected icon. This was done using a 2d array, and some for loops for the neighbor checks. When the player drags across an adjacent matching icon, the system marks that icon as the current selected on.

Since the player cannot go back to a previous icon, this was a little tricky. But I quickly solved this by tracking all the icons they have in their line using a list, and perform a simple check when they hover over an icon, to see if its already selected.

Another tricky section was procedurally generating new icons. Since there is no score in this minigame, and our app's theme was to keep the players entertained, I decided against adding a losing state, as this could frustrate the player. As a result, the generation wasn't fully random, as there always had to be a match for the player to perform. Luckily, since we only had 5 icons, the instance where there are no matching groups was rare, and I implemented an edge case solution.

Many of the systems were designed to be modular and easily tweakable, so the main designer could adapt the systems to their liking. In the event that a system was not easily changable through the Unity Inspector, I created tools to help the designer with these systems. By allowing this degree of freedom, the designer was able to easily use my systems and quickly make adjustments.

Line Match Game
The game is similar to most match 3 games.

The line match game was heavily inspired by games like candy crush. In this game, the user draws a line, and has to match 3 or more of the same icons

To keep it simple, the icons are all in a grid, and the player must match with the icons around the selected icon. This was done using a 2d array, and some for loops for the neighbor checks. When the player drags across an adjacent matching icon, the system marks that icon as the current selected on.

Since the player cannot go back to a previous icon, this was a little tricky. But I quickly solved this by tracking all the icons they have in their line using a list, and perform a simple check when they hover over an icon, to see if its already selected.

Generation Example.

Another tricky section was procedurally generating new icons. Since there is no score in this minigame, and our app's theme was to keep the players entertained, I decided against adding a losing state, as this could frustrate the player. As a result, the generation wasn't fully random, as there always had to be a match for the player to perform. Luckily, since we only had 5 icons, the instance where there are no matching groups was rare, and I implemented an edge case solution.


Word Search Game
The words can go right, down, and diagonal, and can intersect each other.

The word search game is... well... a word search game. The replayability arises in the procedurally generated positions and directions of the words.

Similar to the line match game, this game uses a grid to place the letters. The entire grid is stored as a 2d array, which is used by the generation to determine if all the words are in valid positions on the board.

The flow of the generation is rather simple. Generate the positions of the words, then fill in the blank areas with random letters. To make this easily changable, I implemented a scriptable object system, where the scriptable object contains the data for the word search, which are the words the player has to find, and all the random letters that can appear along the board. In order for some words to fit on the board, they may need to intersect with some other words, and this system accounts for that.

The gameplay system is also simple. The user selects the first letter, and drags to the final letter of the word. After lifting their finger, the system checks all the letters from point a to point b. As each letter prefab maintain's its index on the board, this check is simple.

There is a possibility that the random generation generates one of the words, when generating the random letters. In this instance, there would be two of the same word on the board. In this case, I didn't want the player to feel bad if they found the accident, since it wasn't the already placed word, so I allowed the player to be correct in this instance.

There are many more systems that I worked on during this game, and if you would like to talk about them, feel free to contact me!