Hello! We are proud to present: Fight the fluff

{"name":"613023","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/4\/4\/440392d06764b859c82b88f45d640884.gif","w":600,"h":338,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/4\/4\/440392d06764b859c82b88f45d640884"}

Play online (with post-competition bugfix for small screens)
Original submission

Entry page: https://tins.amarillion.org/entry/228/
Source code: https://github.com/amarillion/tins21

How to play:

• Drag the tiles from the top-right corner into the screen and create a path.

• Fill up the bar in the bottom right by moving your cargo from the box to the spaceship

• If the exploding bunnies (a.k.a. the fluff) get too annoying, you can drag them away too.

• From level 3 on, placing tiles gets tricky. For the triangles, it's good to realize that an up-side-down triangle will be rotated 180 degrees before placement. The pentagons are not equilateral, so there is only exactly one orientation that they can go. Look for which way the "top" of the pentagon is pointing.

About the game:

I wrote the code, OliviaGS did the artwork, and hexagonal music was made by Donall.

As you can see from the image, I used this as an excuse to mess around with unusual geometry, and Olivia used is as an excuse to draw bunnies. And I recently learned TypeScript, so this was also an opportunity to practice a new language. The game was built with TypeScript and Phaser 3.

The game is designed to run on tablets, I tested on an iPad during the competition. It will also work quite well on a mobile phone if you use the version with post-competition bugfix. Use the QR code in the menu to easily open the game on your device.

I counted 33 hours of work in total. And there is a lot I still want to improve. There is a big usability issue when it comes to placing rotated tiles (from level 3 onwards). I wanted to make it rotate while dragging, but that didn't work out. To be honest, I probably spent too much time on geometry. Especially making the tiles link properly was tricky.

Yeah, that's true. I had thought of a cool solution for this, UI-wise, but I didn't have time anymore to implement it. I really ran out of time on this one.

It's not true, like some reviewer posted, that the tiles are placed randomly (although I can understand it seems that way). When I play myself, I use these tricks to make the later levels playable:

• In the level with triangles, it's good to realize that when you place a triangle in an "upside down" slot, they are flipped 180 degrees. For both orientations, rotate your tile so that the path looks like a 'v' and it's easy to make a path.

• In the level with pentagons, it doesn't matter how you rotate your pentagon because it can only go in one way. Look at the next open grid slot. Look for the base of the pentagon. Then figure out which paths you want, relative to the base (for example: bottom and top-left). Then cycle through your pentagons until you get the one you need.

• In the level with diamonds, look for tiles that look like a horizontal line (-) or a diagonal line (\). The horizontal lines go on the left of each "cube". The diagonal lines go on the right of each cube. Crosses (x) can go anywhere, so these are useful to fill in the last piece.

What I discovered during the making of this is that each tiling pattern has its own unique character. For example, the diamond tiles can be rotated in several directions, but the pentagons can only go in in one way. It makes each level somewhat unique.