The Abduction

Choose your own image and then start swiping or swapping! This app process your image in a separate isolate on mobile and in a service worker on web. UFO, cow, and sky animations are done with Rive.

Comment

Inspiration

I've always been fascinated with UFOs and extraterrestrials. In this puzzle, a rogue UFO attempts to abduct an unlucky cow in broad moonlight.

What it does

Image Selection

This application allows the user to select what image they want to use in the puzzle. When they select "Choose Image", the device-specific file picker will open up and the user can select from a number of supported image types.

Image Processing

When the user selects "Start", a square is cropped from the center of the image. This square is then further cropped into 9 equally sized squares that will be used in the puzzle grid. On mobile, this is completed in a separate isolate so the background animations don't freeze. On web, this is completed in a separate service worker (This only works in debug mode. There seems to be an issue with how dart2js works in release mode).

Puzzling

Once the puzzle is started, you can see how many moves and swaps you've used. You can also see how long you have been working on the puzzle.

Pieces can be moved four different ways:

  • Swiping
  • Tapping
  • Keyboard arrows on web/desktop
  • Swapping by tapping on two pieces in "Swap Mode"

Image Filtering

When a puzzle piece is in an incorrect position, its image will have a greyscale filter. When the piece moves into the correct location, the filter is removed.

Animations

The UFO, cow, and night sky animations were built with Rive. The UFO and cow are both state machines that react to different types of user inputs (shuffling, swapping, etc).

How we built it

This application was built in Flutter with a focus on responsive design and web-compatibility.

Challenges we ran into

The dart2js tool produces different outputs for debug and profile/release modes which gave me a pretty nice headache.

Accomplishments that we're proud of

Users can select any image from their phone and regardless of the size or shape, it will be cropped to fit in the puzzle grid. In debug mode, the isolate and service workers are able to perform this work on separate threads so none of the animations stall.

What we learned

Test in release mode sooner. Rive is awesome.

What's next for The Abduction

I will continue to troubleshoot the dart2js issue and hopefully publish the app to a larger audience.

Built With

Share this project:

Updates