Creating a Christmas-themed Match 3 Game

A postmortem of a mobile game developed with JavaScript and WebGL

02.01.2024 - 10:23
Last Christmas, I developed a Tetris app for my sister, because she had asked for one a few months earlier. Luckily, she liked her present, but the best result was that my whole family started to play the game and compete for the #1 high score. With this in mind, I wanted to create another game this year - this time officially intended for all family members and friends.

I had the idea of creating a Christmas-themed Match 3 game, where you have to match 3 symbols by swapping two neighboring tiles. Like last year, I made it a progressive web app (PWA), which is a web app that can also be installed on mobile devices so it works offline. However, given that I had spent most of the year working with WebGL, I switched from HTML 5 to my Sparrow WebGL engine.

Idea and Game Design

As mentioned, my idea was to create a Match 3 game with tile swapping. There are a million mobile games with this principle. However, I rarely play mobile games and I haven’t played any of them. I didn’t download any to research the gameplay either (maybe I should have).

The game has 7 basic symbols and starts with a random tile arrangement. The randomness means that there can be multiple matches on the board already including chains with more than 5 tiles. This means the first move typically has a lot of matches and while this is RNG, it’s also fun and gives the player an early point boost compared to a procedurally generated setup without any existing matches.



The biggest requirement for the game was that it HAD to have a leaderboard to create a competition. This means that you cannot endlessly swap tiles and the game has to end at some point. Rather than arbitrarily limiting the game to 10 minutes in which you have to get the most points possible, I went with lives instead. You start the game with 3 lives and every time, one of your moves does not result in a match, you lose a life. This by itself would have ended the game quite quickly because after the initial good one-move setups are exhausted, you would need two moves to create another match.

When tiles are matched, they are destroyed and the board is refilled with new tiles from the top. To create another source of tile destruction, I added special bomb tiles to the game, which take a few turns to explode and when they do, they destroy all adjacent tiles. With this, there is a steady influx of new tiles, which increases the chance of good match setups, but the bombs come with the cost of negative points when they destroy tiles.

To add even more strategic planning to the game, I added two more special tiles: Skulls and Hearts. As you can probably guess, these lose and gain lives when they are destroyed by a bomb. They have a low chance of appearing, but when they do, you have to pay attention to where they are relative to nearby bombs and if possible swap them out of or into the range of a bomb.

Programming

Programming the game wasn’t that difficult and most of the tasks were straightforward. However, keeping track of the tiles required some planning. Initially, when two tiles were “swapped”, the tiles themselves remained where they were and I only swapped their types. When I added the bombs, however, this approach didn’t work anymore because the bomb tiles had to store additional data besides their type. Therefore, I had to rework the swapping algorithm and actually swap the tiles including their positions in the board arrays.

Another difficult part was the large number of possible tile arrangements and combinations, which made testing very difficult. For example, it was possible for two (or more) bombs that exploded in the same turn to destroy the same skull tile multiple times, which could lead to an unexpected instant game over. I’m still not entirely sure whether there are some weird edge cases that are problematic. I’ve had a few situations when playing the game when something felt wrong, but they were part of a combo, so it was impossible to check. Besides adding a replay system that saves everything to analyze after playing, I cannot do anything about it.

Since the basic gameplay of swapping tiles isn’t very exciting, I wanted to make matches feel rewarding and compelling. First, I created an effect that highlights the matched tiles for a brief moment before they are destroyed. Additionally, all matched tiles spawn stars that animate from the tile location to the points at the top. Finally, I also added falling animations for the tiles that fill the empty spaces and come in from the top. I had plans of creating even more effects like a particle emitter when the tiles break, but I ran out of time before Christmas.

Art

When I started to work on the game, I assumed I would use pixel art because it’s what I typically use for 2D games. I even drew a pixel art Christmas ornament to use as initial placeholder art.

However, given the ongoing AI hype, I decided to try an AI image generator too, and created a few assets with it. My first prompt was something like “create an image of a Christmas ornament with a transparent background” and the AI obliged: It generated a decent-looking Christmas ornament with a “transparent” background. Turns out, the transparent background was just the grey and white checkerboard pattern that image programs use to indicate transparency, and the image was fully opaque (it was a jpg file too, which doesn’t support transparency).

I changed the prompt to give me a white background instead and it worked better. However, even then the background wasn’t perfectly white, but with an increased threshold on the wand selection tool, I was able to make it transparent. Like with greenscreens, however, the edge wasn’t good and had white fringes.

Disappointed with the AI workflow and results and generally disliking AI-generated content, I tried another approach: Blender. Typically, Blender is a 3D modeling program, but that doesn’t mean you cannot use it to create 2D assets. I created a 3D model of a Christmas ornament (which is basically just a sphere with a cylinder on top) and set up a square camera that looks at it from the side. With a simple reflective material and some lights, I rendered the image and it immediately looked a lot better than the AI images. Most of the Christmas symbols I wanted to make were relatively easy to model, so I decided to use Blender for all art assets and I think it was a good decision.

Sound Effects

I always struggle with sound effects when creating games. While hitting random objects in front of a microphone is fun, I don’t have a lot of experience what’s the best way to produce the desired effect (the sound effects in games and movies are rarely what you would expect). However, I’m quite happy with how the two most important sound effects of the game turned out: Matching tiles and collecting stars. I created them in Audacity with the pluck sound generator and a few random effects. The other sound effects in the game don’t sound as good, but since you hear them a lot less often, I can live with them.

Discussion

Now, a few days after Christmas with 150+ tracked rounds and some feedback, let’s talk about the result. First of all, and arguably the most important: Everybody seems to generally like the game. However, it has a big issue: It takes too long. I intended it as a casual game that shouldn’t take more than 15 minutes or so, but if you wanted to compete for the #1 spot on the leaderboard for the smallest playing size, you would almost certainly need significantly over an hour. For a casual mobile game, this is too long in my opinion, especially in the two bigger game modes.

I overestimated how often you would have to make a move that doesn’t result in a match. This means that you can stay alive for a long time. Accumulating points is also quite slow because exploding bombs lose points according to the tile values of the destroyed tiles. It’s a bit like 3 steps forward, 2 steps back. However, I don’t want to change the scoring system because that would invalidate all existing scores. Balancing a game during testing is always difficult and it’s hard to get right. I’m not sure whether and which steps I’m going to take to balance the game with a potential update.

Play the Game

Unlike last year when I wasn’t sure about the legalities of posting my Tetris clone online, I’m pretty sure that I can publish this year’s game, so feel free to try it too:

https://pingpoli.de/snowflake_shuffle/

---