Box2D Flutter Slide Puzzle

Here is my submission to the 2022 Flutter Puzzle Hack.

It uses Box2D physics to create an interesting gameplay mechanic where you need to manage a bit more than a simple slider. The code is all pure Flutter with widgets, animations, and CustomPaint. It doesn’t use any Flutter game engine.

The goal is to fill up the containers with the particles, to be able to see the container’s number. Then do the normal Slide Puzzle ?.

Need more particles? Press the RAIN button, and make it rain. But be careful. You take a time penalty each time.

Nerd Tools ?

Play around with the physics of the game yourself. Set the weight and bounciness (elasticity) of the balls and boxes. Alter gravity. Control the world.

Getting Started

Clone the repository:

git clone https://github.com/funwithflutter/flutter_slide_puzzle

Create platform folders:

flutter create

Then flutter run for your desired platform. Performance is not great in Debug mode, for Flutter Web. Desktop works great. Mobile should be fine ?.

Resources

Below I share some resources that helped me make this game. If there is enough interest from the community, I’d be happy to elaborate a bit more with a YouTube video or article ?.

Some of the logic to handle the Box2D logic/painting might also be worth extracting to a separate package.

Base logic

The base example that Very Good Ventures made is a good starting point, and a lot of that code was used as a starting point for this application. They’ve made various tutorials and other resources to explain their implementation.

State management

I chose to use Riverpod for state management, as Riverpod is awesome ? and I’m familiar with it. Unfortunately, I didn’t have enough time to clean up everything, and sometimes I opted in for the “hacky” approach to get the game across the finish line.

Box2D

Box2D is a 2D rigid body simulation library for games. Programmers can use it in their games to make objects move in realistic ways and make the game world more interactive. From the game engine’s point of view, a physics engine is just a system for procedural animation.

Here I owe a thank you to the Flame team for making and supporting Forge2d.

As a basic summary, you can create a “physical” world, add bodies to it, and have those bodies interact with physical forces, such as gravity and collisions.

As a Flutter dev, I had to represent this world information on screen using Flutter widgets and painting.

Here are some interesting files in this repo that are worth looking at:

• box2d_flutter.dart – A class to make handling a Box2D world easier. It contains methods to convert pixel size to and from world size. Take what is present in the “physical world” and represent it on a screen with certain dimensions.
• box2d_paint_debug.dart – This was used during the early stage of development to paint world object using a Flutter CustomPaint. This class can be expanded a lot more in the form of a package.
• puzzle_paint.dart – Paints the boxes and balls to the screen, using logic from, or similar to, the above two files.

Physics

If you want to delve into more of the physics, I highly recommend The Nature of Code, especially the section on Physics Libraries, a lot of this code inspired what I wrote and helped me understand how to use Box2d.

The box2d_controller.dart and box2d_state.dart files puts the above information into a Flutter application.

Design

Sometimes I can design, and sometimes I can’t. This was one of those where I couldn’t.

I took GREAT inspiration from the following Dribbble design, made by Lia.

It took a lot of playing around to get all the components on screen to resize and play along nicely (and represent the Box2D world as closely as possible). End result is not too bad if I say so myself.