At Caribou Contests, the work that you do is very self-driven. For the most part, you are able to choose what you want to work on, from a list of GitHub issues. On my second day of the co-op term, I decided that I wanted to work on issue #620, “Interactive Game: Tangram 3D”. This issue was a 3 sentence, extremely vague idea for an online version of John Conway’s Conway Puzzle. Over the next 4 months, I turned this idea into reality. This blog post documents my thought process and shows some progress pictures taken during the development process. It will in no way include everything, I just want a place to show what I did.
The Process
Research & Planning
I had literally no idea where to start. I figured that I would be using three.js, since it was the only “easy” way to do 3D stuff in a browser (that I had heard of). There was not much more planning other than that, pretty much just “use this and make it”.
Progress Pictures & Notes
The first thing I did was try and get a grid on the screen. I added the basic OrbitCamera,
to allow the user to look around. Visually, I wanted it to look
similar to the images on the Conway Puzzle Wikipedia page. So, that’s the first thing I did,
add the ability to place cubes on a grid.
Then, the next step was to make the grid 3D. I added the ability to add cubes on all sides
of the grid, and off of other cubes as well.
I wanted a simple version of the game to be playable, so I added all the shapes from the Conway Puzzle. When the user clicks one of the shapes, it selects that shape and allows it to be placed on the grid. I also added the ability to rotate the shapes, so they can be used to actually finish the puzzle.
It was also at the point where I decided to add some absolutely horrendous lighting. To this
day, I have no idea why I thought this was a good idea. It looks horrible, but don’t worry, it
does get fixed later on.
At first, the grid system was based on this
three.js example. This example worked well, however it was made to only handle cubes. This
obviously did not work for me, as I needed to be able to handle possibly any shape. I ended up having
to write a completely custom system for placing shapes on the grid. This was a huge pain, and took many
iterations, but it eventually worked. I also added the ability to remove shapes from the grid, which was
very useful as my grid system was not perfect at this point, and frequently let you place blocks halfway
into other blocks, outside of the grid, etc.
Above, you can see that it lets you place the blue block above the yellow block, but not inside it (turns red to indicate that it is not a valid placement). You can also left click a placed block to remove it.
I then added the ability to show how many of each shape you have left to place. This was a
essential to the game, as it is a puzzle game and you need to know what you have left to place.
I was pretty happy with this state of the game, considering it only took around 2 weeks to get to this point, while also working on other things. The player was able to win the game (check if there are any blocks left to be placed, if not, they win), controls felt pretty solid, and it visually looked decent (I hadn’t realised how horrible the lighting was at this point). The next step, was to add more levels.
At this point in the process, the 5x5x5 grid seen in the images above was hard-coded into the game logic. This obviously is not ideal, as I wanted to be able to have different difficulties, levels, etc. The next puzzle I wanted to add after the original Conway Puzzle was easier, a 3x3x3 puzzle. At first I hard coded this in as well, but then I realised that I could just make the grid size a variable, and have the game logic adjust to that.
Soon after, I realised that it would be good to be able have grids with different sizes on each
axis, like a 3x5x7 grid. This was more difficult to implement, as the three.js GridHelper
only allows for a single size variable. I ended up having to write my own grid helper, which had everything
I needed. Below is an image of a 3x5x7 puzzle, made using my custom grid helper.
I also added a 3x3x9 puzzle.
The goal was for other future co-op students to be able to easily add new puzzles to the game. I added the ability to create a grid with any size dimensions, which ment I had to completely rewrite the positioning logic for the blocks. It was initially hard coded (noticing a trend?) for 3, 5, 7, and 9 sized grids, but I changed it to make it work for any size grid.
Then, the miracle happened. I changed the lighting. It actually looks decent now, because
each side of the block is lit up with a different luminosity. It makes the game look significantly
better, as blocks & the side of each blocks are now easily distinguishable. I can’t believe
it took so long for me to make such a simple change.
I also started loading the puzzles from a JSON file, as opposed to (you guessed it!) hard coding them in the game logic. This was a huge improvement, as it allowed me to easily add new puzzles to the game without having to change any code. The structure for a puzzle was very straightforward, and looked like this:
{
"title": "5x5x5 2",
"width": 5,
"height": 5,
"depth": 5,
"blocks": [
[2, 2, 2],
[2, 1, 2],
[3, 1, 1],
[4, 1, 2]
],
"remaining": [1, 1, 3, 13],
"colors": ["#32cd32","#ffd700","#4169e1","#ff8c00"]
},At this point, Packing was in a mostly-finished state. The game worked and was playable on the Caribou Contests website. I was not done developing it though, as there were many unpolished parts of the game. I spent the next couple weeks implementing some quality of life changes that make the game much more enjoyable to play. Some of these include:
- Improving the user interface
- Adding instructions/controls
- Changing most buttons to icons instead of text
- Adding colour to the buttons
- Show how many blocks are left to place in a more visually appealing way
- Fix any bugs that I could find
- Fixed issue where a grey cube would appear when the clear button is clicked
- Fixed issue where if blocks were all used, then user deletes a block, the rollover mesh stays invisible
- Fixed issue where a grey cube would appear if a block is not selected and the user presses space
- Fixed issue where buttons would not update when user clicks clear (ex. if 4x2x1 block is the selected block before clearing, all 3 buttons would still appear despite no block being selected)
- Many, many more
- Added many more puzzles
- Added fireworks when the user wins
And that was it for the game itself. The last couple things I had to add was a dedicated page for future co-op students to add new puzzles to the game, and a way to easily add the game to a math contest.
Conclusion
From the absolute beginning of the project, to having a working MVP, took exactly 2 weeks. This is a very short amount of time, and I am very happy with how quickly I was able to get a working prototype. The game was not finished at this point, but it was playable. The game was finished after around 2 months of work, with the last month being spent on polishing the game. I am very happy with how the game turned out, and I hope that it is enjoyed by many people.
If you want to try out Packing, you can play it here. Thank you for reading.