Fix the gaps in the rollercoaster by dragging in fractional pieces that sum to the given number. Drag larger pieces onto smaller ones in the inventory to divide them. Use the settings menu before each round to change your difficulty and customize your experience!
Tasked with creating a math-themed Serious Game, I came up with the idea of using fractions to build a train bridge across a ravine. The rest of my small team massaged that into the rollercoaster you see above, which is of course infinitely better. Our professor was disappointed that we didn't manage to include screaming riders whose noise level increased depending on the slope of the track, or at least ragdolling crash test dummies, but I'm still very happy with the result.
For our beta, I worked mainly on the inventory system. The Inventory singleton keeps track of the player's available Pieces, each of which originally included both a Draggable and Cuttable component. We had a special tool dedicated to cutting the fractional pieces into smaller ones, so it was necessary to toggle between whether the Draggable or Cuttable was interactable depending on if the tool was active. If the player selected the Draggable, a final component, a Placeable, was created in the scene. The Placeable was the one which actually interacted with the BuildZones.
I had a lot of fun with the BuildZones. By using a sprite mask, I was able to make it appear that there really was a gap in the coaster, a single image given to me by the artist. As the player adds pieces, I do a little math and scale down the mask so that not only does the gap shrink, it does so with an accurate visual representation of the ratio of the amount of track added to the size of the original gap. Basically, if a player adds a 1/2 piece, the gap shrinks twice as much as if they had added a 1/4.
It became clear very quickly that we needed a strategy for determining gap lengths and pieces to distribute to the player to fill them. I wasn't involved with much of the math behind that process, but after doing a set of proofs which demonstrated how the player could "soft-lock" themselves from winning, we decided that a straight programmatic approach was not feasible. Instead, we developed a master list of gap sizes and pieces to distribute for them. This actually figures into our difficulty settings as well, as we chose to make the difficulties represent the amount of pieces needed to fill each gap, from one to five. Obviously the player may be able to combine their pieces in different ways than the intended solution, but doing so will no longer soft-lock them. This solution was safer and simpler, once the master list had been created.
Speaking of difficulty settings, we included a settings screen displayed before every round, where the user can also change things like whether they are working with improper fractions or mixed numbers, special gap width settings, and even an option for unlimited inventory. Since this is obviously meant to be a game for gradeschoolers, we also included some fun cosmetic options, like the color of the coaster or the decals splashed across it.
When offered the chance to continue with the game for a little extra credit, there were a few things we immediately targeted to fix. First, the cut tool went away. To keep with the click-and-drag aesthetic, we instead allow the player to drag a piece onto another piece in the inventory, and if it can be subdivided evenly into pieces of that second length, it is. For this, and for the undo functionality, I added an AnimatedPiece to my list, which flies towards a given location and destroys itself when it gets there, updating the Inventory count or taking whatever other action it needs to. The biggest change for the final game was a result of my push to have a non-static track. For some reason, the artist was not able to make interchangeable sections that we could swap between at runtime, so I looked into other options and found a spline generation tool. It was well-worth the investment, because it allowed us to just randomly draw points, group them into a Section, then connect the end of one Section with the beginning of the next, with automatic interpolation. We solved some annoying problems with my sprite masks no longer working with the default spline settings, and a particularly nasty one resulting from certain browsers not supporting WebGL 2.0 functionality, and now we've got a great little math game that I'm really proud of. Apparently it's really fun on touch screens!