acres | Devpost

Inspiration

This puzzle is inspired by my childhood passion for space-filling curves, the construction of which can often be both complex and satisfying.

What it does

In this game, you complete puzzles of increasing complexity by arranging tiles such that water can propagate from "source" tiles throughout the entire board. As per the competition, the tiles can only be rearranged by sliding them into the single empty space on the grid.

How I built it

Rather than using the starter sample, I built the app from the ground up, as I knew some parts of the starter had much more functionality than I needed, and I also wanted to integrate my own animations.

I started by building the underlying data structures for the puzzle, and the functions on that data structure to facilitate operations like generating initial state, moving tiles, propagating connections, and checking for completeness.

Then, I used a Stack with AnimatedPositioned widgets to render the puzzle, such that I could easily animate the movement of the tiles - using a built-in Curve to make the tiles feel satisfying to slide.

Once I had the functionality and skeleton of the puzzle in place, I used Rive to construct basic animations for the tiles. Rive's State Machine tool made it simple to connect the game logic in the code with the various animation states within the Rive editor.

Once I had the whole puzzle built, I spent a considerable amount of time tuning the animation speeds, colour palette, and random puzzle generation to create a fluid, enjoyable experience. I also used MediaQueries to make the app as responsive as possible, and ensured all my code and assets worked across Web, iOS, and Android platforms.

Challenges we ran into

As Rive is still relatively new, the client was quite buggy at times, which considerably slowed down development whenever I had to tune certain aspects of the animations. It was also challenging to troubleshoot the Flutter Rive runtime, as there aren't many examples, tutorials, or additional documentations available at this point in time. In the end, these tools still proved quite powerful, and worked very well after some experimentation and self-troubleshooting.

Accomplishments that we're proud of

As a solo first-time Flutter dev, I'm very happy with the app I was able to build from end-to-end, from blank project to data structures to visuals and animations to cross-platform deployment.

What we learned

Being a complete novice to all the technologies featured in this hackathon, I learned to use Dart, Flutter, Rive, and Firebase Deploy from the ground up through the course of this hackathon.

This hackathon concept really opened my eyes to the potential of Flutter. From the outside, my preconception was that Flutter was only for building standard office/lifestyle/tool apps. However, building my own puzzle in the framework showed me that Flutter can be used to build highly dynamic apps, such as games, without sacrificing its cross-compatibility, excellent underlying language, and suite of developer tools.