Sliding Scene

Puzzle View
Main Menu

Inspiration

Sliding Scene is a Sliding Puzzle game. I believe that the art and music soothes the player while attempting to solve the puzzle.

It also has a competitive aspect with the Moves and Timer features for those who would like to make it to the top of the leaderboards.

How I built it

Sliding Scene is built mainly with Flutter & Rive.

Coming from web frameworks like React and Vue, it was natural for me to use flutter_redux as the state management library than Bloc.

The leaderboards was easy to implement. I used Firebase with the Firestore database to have realtime data. The Flutterfire CLI took care of everything related to Firebase integration and I barely had to add code for it to work as smooth as it does.

Challenges I ran into

Working with Rive was a bit challenging as I had to learn how to use a completely different tool than writing code. It was also quite difficult to render the different tiles.

When attempting to render the 15 tiles, what I tried to do first was having one Rive artobard with all the possible animations. That was tricky to achieve and felt very buggy. I tried to use custom ClipPath(s) to clip the artboard into 15 pieces. That turned into a buggy experience, especially when controlled by a state management library.

I solved it by utilizing Rive and splitting the main artboard to 15 different artboards. Each artboard contained a nested artboard that points to the main artboard. The tile's value determined which artboard should be rendered at what position.

What I learned

With Flutter's framework, amazing community and evolving ecosystem, your project can meet all that you have imagined. I never thought I would have developed a sliding puzzle from scratch without prior knowledge in both the framework and programming language and with art and animation that I created by myself that I am very proud of.

What's next for Sliding Scene

Only time will tell, I will definitely like to add some more art and animations when I get the time. Maybe clean up the code and make it more modular as I originally planned to do for the project to be ready for collaborations and contributions.

p.s. If you're an artist who wants to try out rive and add your art to my project, I welcome you to do so!