Circluzzle

Instead of a regular square puzzle, I've opted to make it circular. Using scaling and rotating, this puzzle is refreshing and new. Change how many segments, the radius or even use your own image.

Comment 8

Note: No Dashes were harmed in the making of this puzzle!

Circluzzle

Platforms

You can try it out on

Or build on your device from the public repo

Watch the older versions in the playlist on YouTube

Inspiration

I wanted to do a new take on the normal square moving puzzle and decided to use a circular shape instead.

What it does

You have 2-6 circles that contain 3-32 puzzle pieces each, you can rotate them to stay in the respective circle or move them up/down a circle. The puzzle piece will rotate or scale automatically.

How we built it

Using my knowledge of Flutter and geometry and with many google searches of course!

Challenges we ran into

The difficult part was obviously rotation and scaling. You want the pieces to be able to move and scale, but the part of the image that it contains should still be kept. I didn't have many hours to spend on the project, so it may be a bit simple in graphics.

Desktop experiences

This was my first project that I've build on desktop. I wanted to explain a bit the experience and trouble I had. I've followed the guide from Flutter.dev

macOS

macOS worked right out of the box, I did not have any trouble building, uploading or making it available in the app store. Kudos to the Flutter team!

Windows

This was a bit more difficult, there was more configuration needed and just_audio doesn't support windows out of the box, you need to add just_audio_libwinmedia. This plugin caused other issues, but I was able to resolve them following this issue by deleting nuget.config file located in AppData\Roaming\nuget\ . and rebuilding.

The biggest trouble with Windows I encountered was actually the store. I added the app for review, but got rejected after a couple of days. According to the reviewer, my app is not a "game", even though they have Sliding puzzles in the Microsoft store. I contacted Microsoft through an email they provided on the rejected page, but didn't get any response. So I added it again in review and waited another few days. This time it did pass.

Linux

Linux was a whole other issue, first of all I don't have a Linux desktop available, so I tried using WSL 2. This doesn't support snap and you need to do some extra stuff for this, there's a great article you can follow. Even though building may work, creating a snap still fails. Again the issue is with just_audio_libwinmedia. This requires a cmake version > 3.15, but the supported cmake version for flutter-snap is 3.11. There is a PR open for this and the author was generous enough to provide a gist that shows how to build Flutter from git and with base20 (which resolves the issue with the cmake version).

Unfortunatly, the snap build is still failling, the issue is that cmake create a CMakeCache.txt file, this file contains the directory in which it was made, but we copy it to another place. By removing this file before flutter build, this issue is also resolved and the build processes fine! The override-build method of the app parts in snapcraft.yaml:

  circluzzle:
    after: [ flutter-git ]
    source: .
    plugin: nil
    override-build: |
      set -eux
      mkdir -p $SNAPCRAFT_PART_INSTALL/bin
      flutter upgrade
      flutter config --enable-linux-desktop
      flutter doctor
      flutter pub get
      rm build/linux/x64/release/CMakeCache.txt
      flutter build linux --release -v
      cp -r build/linux/*/release/bundle/* $SNAPCRAFT_PART_INSTALL/bin/

Accomplishments that we're proud of

I'm proud of the scaling and gesture detection. This is always tricky, but by converting the x & y to theta & distance, this was much easier. I'm also proud to say that the app is truly cross platform, not only Android, iOS and web, but also macOS, Windows and Linux!

What we learned

At first I wanted to skew the image aswel so you would have pizza slices in the center. This was a bit too ambitious and I had to focus on the cropping first. I had done a simpler version of the cropping before see my custom image crop, but changing between image types is not as straight forward as I'd like.

What's next for Circular puzzle

If time permits, I'd love to implement custom images, some settings (for now, the parameters are set up dynamic, yet hard-coded to their current value) I found the time to add this :-). I would've loved a designer to help out with the overal look, feel and animations. That would've made it even better.

Built With

+ 22 more
Share this project:

Updates