flutter-clutter

Posted on Jul 24, 2020 • Originally published at flutterclutter.dev

Flutter game tutorial: Fruit Slicing

#flutter #dart #tutorial #appdevelopment

The goal

The goal of this tutorial is to develop a clone of the game Fruit Ninja in a basic way. We will not use any frameworks so that you as a reader can learn from scratch how things work.

What you will learn

After having completed this tutorial, you will be able to

Use a GestureDetector
Draw on the screen
Implement basic collision checks
Implement a basic gravity simulation

The implementation

For the basic version of our game, there are the following problems to be solved:

Implementing a "slicer" that follows the path we create by swiping with our finger
Implementing the appearance of fruits
Implementing gravity that pulls the fruits down
Checking for collision of the slicer and the fruits

The slicer

Let's start with the slicer that is supposed to appear when we drag across the screen:

class SlicePainter extends CustomPainter {
  SlicePainter({this.pointsList});

  List<Offset> pointsList;
  final Paint paintObject = Paint();

  @override
  void paint(Canvas canvas, Size size) {
    _drawPath(canvas);
  }

  void _drawPath(Canvas canvas) {
    Path path = Path();

    paintObject.color = Colors.white;
    paintObject.strokeWidth = 3;
    paintObject.style = PaintingStyle.fill;

    if (pointsList.length < 2) {
      return;
    }

    paintObject.style = PaintingStyle.stroke;

    path.moveTo(pointsList[0].dx, pointsList[0].dy);

    for (int i = 1; i < pointsList.length - 1; i++) {
      if (pointsList[i] == null) {
        continue;
      }

      path.lineTo(pointsList[i].dx, pointsList[i].dy);
    }

    canvas.drawPath(path, paintObject);
  }

  @override
  bool shouldRepaint(SlicePainter oldDelegate) => true;
}

The SlicePainter is something that expects a number of points and draws them on the screen with a connecting line in between them. For this, we create a Path, move the starting point to the coordinates of the first element of the point list and then iterate over each element, starting with the second one and draw a line from the previous point to the current point.

The CustomPainter itself has no value if it is not used anywhere. That's why we need a canvas that recognizes the finger swipes, captures the points and puts them into the constructor of our newly created CustomPainter so that the path is actually drawn.

List<Widget> _getStack() {
  List<Widget> widgetsOnStack = List();

  widgetsOnStack.add(_getSlice());
  widgetsOnStack.add(_getGestureDetector());

  return widgetsOnStack;
}

Our widget consists of a Stack. At the bottom there will be the slice that is produced by our swipe gestures, on top of that we want to have the GestureDetector because we do not want anything to block the detection.

class TouchSlice {
   TouchSlice({
     this.pointsList
   });
   List<Offset> pointsList;
}

First, we create a model class, representing the slice. We call it TouchSlice and let it expect a list of Offsets as the only parameter.

Widget _getSlice() {
  if (touchSlice == null) {
    return Container();
  }

  return CustomPaint(
    size: Size.infinite,
    painter: SlicePainter(
      pointsList: touchSlice.pointsList,
    )
  );
}

We then implement the _getSlice() method which returns a CustomPaint that paints the slice we created before based on the pointlist of the TouchSlice instance of the CanvasArea widget. The TouchSlice is always null. Let's do something about it by adding a GestureDetector.

Detecting the swipe gesture

Widget _getGestureDetector() {
  return GestureDetector(
    onScaleStart: (details) {
      setState(() {
        _setNewSlice(details);
      });
    },
    onScaleUpdate: (details) {
      setState(() {
        _addPointToSlice(details);
      });
    },
    onScaleEnd: (details) {
      setState(() {
        touchSlice = null;
      });
    }
  );
}

The GestureDetector listens to three events:

onScaleStart is the event that is triggered when we start swiping. This should add a new TouchSlice to the state that has a single point
onScaleUpdat gets called when we move our finger while it's on the screen. This should add a new point to the existing point list of our TouchSlice
onScaleEnd is called when we release the finger from the screen. This should set the TouchSlice to null in order to let the slice disappear

Let's implement the methods!

void _setNewSlice(details) {
  touchSlice = TouchSlice(pointsList: [details.localFocalPoint]);
}

void _addPointToSlice(ScaleUpdateDetails details) {
  touchSlice.pointsList.add(details.localFocalPoint);
}

void _resetSlice() {
  touchSlice = null;
}

Testing time!

Let's have a look at how this looks in action by building and starting the app.

Oh! We forgot to limit the length of the line we can draw. Let's correct it by limiting the amount of points of the line to 16.

void _addPointToSlice(ScaleUpdateDetails details) {
  if (touchSlice.pointsList.length > 16) {
    touchSlice.pointsList.removeAt(0);
  }
  touchSlice.pointsList.add(details.localFocalPoint);
}

Okay, if we have more than 16 points, we remove the first one before adding the last one. This way we draw a snake.

Colorful background

White line on a black background looks quite boring. Let's create a more appealing look by using a colorful background.

  List<Widget> _getStack() {
    List<Widget> widgetsOnStack = List();

    widgetsOnStack.add(_getBackground());
    widgetsOnStack.add(_getSlice());
    widgetsOnStack.add(_getGestureDetector());

    return widgetsOnStack;
  }

Container _getBackground() {
  return Container(
    decoration: new BoxDecoration(
      gradient: new RadialGradient(
        stops: [0.2, 1.0],
        colors: [
          Color(0xffFEB692),
          Color(0xffEA5455)
        ],
      )
    ),
  );
}

A radial gradient should make the whole thing a little bit less gloomy.

Adding fruits

Okay, let's come to the part that creates the fun! We are going to be adding fruits to the game.

class Fruit {
  Fruit({
    this.position,
    this.width,
    this.height
  });

  Offset position;
  double width;
  double height;

  bool isPointInside(Offset point) {
    if (point.dx < position.dx) {
      return false;
    }

    if (point.dx > position.dx + width) {
      return false;
    }

    if (point.dy < position.dy) {
      return false;
    }

    if (point.dy > position.dy + height) {
      return false;
    }

    return true;
  }
}

Our fruit should hold its position so that we can draw it on the screen and manipulate the position later. It should also have a sense of its boundary because we should be able to check if we hit it with our slice. In order to help us determine that, we create a public method called isPointInside that returns if a given point is inside the boundary of the fruit.

List<Fruit> fruits = List();
...
widgetsOnStack.addAll(_getFruits());
...
List<Widget> _getFruits() {
  List<Widget> list = new List();

  for (Fruit fruit in fruits) {
    list.add(
      Positioned(
        top: fruit.position.dy,
        left: fruit.position.dx,
        child: Container(
          width: fruit.width,
          height: fruit.height,
          color: Colors.white
        )
      )
    );
  }

  return list;
}

In order to store the data of every fruit currently on the screen, we give our widget state a new member variable called fruits which is a list of the Fruit class we have just created. We position the fruits from the list by using a Positioned widget. We could also go for a CustomPaint widget like we did with the Slice but for the sake of simplicity let's just go for the widget tree approach.
As a first iteration we display a white square instead of an actual fruit because this step is about displaying something and checking for collision. Beautifying can be done later.

For the collision detection to work, we need to check for collision every time a point is added to our Slice.

...
onScaleUpdate: (details) {
  setState(() {
    _addPointToSlice(details);
    _checkCollision();
  });
},
...
_checkCollision() {
  if (touchSlice == null) {
    return;
  }

  for (Fruit fruit in List.from(fruits)) {
    for (Offset point in touchSlice.pointsList) {
      if (!fruit.isPointInside(point)) {
        continue;
      }

      fruits.remove(fruit);
      break;
    }
  }
}

We iterate over a new list that is derived from the fruit list. For every fruit we check for every point if it's inside. If it is, we remove the fruit from the Stack and break the inner loop as there is no need to check for the rest of the points if there is a collision.

Now we have a list of fruits and a method that displays them, but yet there is no fruit in the list. Let's change that by adding one Fruit to the list on initState.

@override
void initState() {
  fruits.add(new Fruit(
    position: Offset(100, 100),
    width: 80,
    height: 80
  ));
  super.initState();
}

Cool, we can draw a line on the screen and let a rectangle disappear. One thing that bothers me is the it instantly disappears once we touch it. Instead, we want the effect of cutting through it. So let's change the _checkCollision algorithm a little bit.

_checkCollision() {
  if (touchSlice == null) {
    return;
  }

  for (Fruit fruit in List.from(fruits)) {
    bool firstPointOutside = false;
    bool secondPointInside = false;

    for (Offset point in touchSlice.pointsList) {
      if (!firstPointOutside && !fruit.isPointInside(point)) {
        firstPointOutside = true;
        continue;
      }

      if (firstPointOutside && fruit.isPointInside(point)) {
        secondPointInside = true;
        continue;
      }

      if (secondPointInside && !fruit.isPointInside(point)) {
        fruits.remove(fruit);
        break;
      }
    }
  }
}

The algorithm now only interprets a movement as a collision if one point of the line is outside of the fruit, a subsequent point is within the fruit and a third one is outside. This ensures that something like a cut through is happening.

A white rectangular fruit looks not very tasty. It also does not create the need to cut through. Let's change that by replacing it with a more appealing image.

I don't have a lot of talent in design and arts. I tried to create some simple vector graphics that look kind of the states we need of a melon. A whole melon, the left and right part of a melon and a splash.

Let's take care that we see the whole melon when it appears and the two parts when we cut through.

List<Widget> _getFruits() {
  List<Widget> list = new List();

  for (Fruit fruit in fruits) {
    list.add(
      Positioned(
        top: fruit.position.dy,
        left: fruit.position.dx,
        child: _getMelon(fruit)
      )
    );
  }

  return list;
}

Widget _getMelon(Fruit fruit) {
  return Image.asset(
      'assets/melon_uncut.png',
      height: 80,
      fit: BoxFit.fitHeight
  );
}

Let's start with the easy part: replacing the white rectangular. Instead of returning a Container, we return the return value of getMelon() which accepts a Fruit and returns an Image, specifically the one we have created the assets for.

Okay, now we want the melon to be turned into two once we cut it.

class _CanvasAreaState<CanvasArea> extends State {
  List<FruitPart> fruitParts = List();
  ...
  List<Widget> _getStack() {
    List<Widget> widgetsOnStack = List();

    widgetsOnStack.add(_getBackground());
    widgetsOnStack.add(_getSlice());
    widgetsOnStack.addAll(_getFruitParts());
    widgetsOnStack.addAll(_getFruits());
    widgetsOnStack.add(_getGestureDetector());

    return widgetsOnStack;
  }

  List<Widget> _getFruitParts() {
    List<Widget> list = new List();

    for (FruitPart fruitPart in fruitParts) {
      list.add(
        Positioned(
          top: fruitPart.position.dy,
          left: fruitPart.position.dx,
          child: _getMelonCut(fruitPart)
        )
      );
    }

    return list;
  }

  Widget _getMelonCut(FruitPart fruitPart) {
    return Image.asset(
      fruitPart.isLeft ? 'assets/melon_cut.png': 'assets/melon_cut_right.png',
      height: 80,
      fit: BoxFit.fitHeight
    );
  }

  _checkCollision() {
    ...
    for (Fruit fruit in List.from(fruits)) {
    ...
        if (secondPointInside && !fruit.isPointInside(point)) {
          fruits.remove(fruit);
          _turnFruitIntoParts(fruit);
          break;
        }
      }
    }
  }

  void _turnFruitIntoParts(Fruit hit) {
    FruitPart leftFruitPart = FruitPart(
        position: Offset(
          hit.position.dx - hit.width / 8,
          hit.position.dy
        ),
        width: hit.width / 2,
        height: hit.height,
        isLeft: true
    );

    FruitPart rightFruitPart = FruitPart(
        position: Offset(
          hit.position.dx + hit.width / 4 + hit.width / 8,
          hit.position.dy
        ),
        width: hit.width / 2,
        height: hit.height,
        isLeft: false
    );

    setState(() {
      fruitParts.add(leftFruitPart);
      fruitParts.add(rightFruitPart);
      fruits.remove(hit);
    });
  }
}

class FruitPart {
  FruitPart({
    this.position,
    this.width,
    this.height,
    this.isLeft
  });

  Offset position;
  double width;
  double height;
  bool isLeft;
}

We introduce a new class called FruitPart, which represents both of the parts of our fruit. The properties are slightly different to those of our Fruit class. position, width and height are kept, but there is an addition bool variable called isLeft, which determines if this is the left or the right fruit part. Also, there is no need for a method to check if a point is inside.
We then add a new member variable to our state: fruitParts, which represents a list of fruit parts currently on the screen. They are added to the Stack underneath the Fruits. The isLeft property determines if we load the image asset of the left or the right cut.
When a collision between a slice and a fruit is happening, in addition to removing the fruit, we place the two fruit parts.

It's raining fruits

Now we want the fruits to behave like in Fruit Ninja: spawned at a certain point, they are "thrown" in a certain directory and constantly pulled down by the simulated gravity.

class Fruit extends GravitationalObject {
  Fruit({
    position,
    this.width,
    this.height,
    gravitySpeed = 0.0,
    additionalForce = const Offset(0,0)
  }) : super(position: position, gravitySpeed: gravitySpeed, additionalForce: additionalForce);

  double width;
  double height;
  ...
}

class FruitPart extends GravitationalObject {
  FruitPart({
    position,
    this.width,
    this.height,
    this.isLeft,
    gravitySpeed = 0.0,
    additionalForce = const Offset(0,0)
  }) : super(position: position, gravitySpeed: gravitySpeed, additionalForce: additionalForce);

  double width;
  double height;
  bool isLeft;
}

abstract class GravitationalObject {
  GravitationalObject({
    this.position,
    this.gravitySpeed = 0.0,
    this.additionalForce = const Offset(0,0)
  });

  Offset position;
  double gravitySpeed;
  double _gravity = 1.0;
  Offset additionalForce;

  void applyGravity() {
    gravitySpeed += _gravity;
    position = Offset(
      position.dx + additionalForce.dx,
      position.dy + gravitySpeed + additionalForce.dy
    );
  }
}

We create a new abstract class called GravitationalObject and let both the Fruit and the FruitPart extend that class. A GravitationalObject has a position, a gravitySpeed and an additionalForce as constructor arguments. The gravitySpeed is the amount by which the the object is pulled down. Every time the applyGravity() method is called, this speed is increased by _gravity to simulate a growing force. additionalForce represents any other force that is acting upon that object. This is useful if we don't want the fruits to just fall down, but be "thrown" up or sideways. We will also us it to let the fruit parts fall apart when cutting through the fruit.

Now, what's left to do to make the gravitation start to have an effect is regularly applying the force to the fruits, updating their position.

@override
void initState() {
  fruits.add(new Fruit(
    position: Offset(0, 200),
    width: 80,
    height: 80,
    additionalForce: Offset(5, -10)
  ));
  _tick();
  super.initState();
}

void _tick() {
  setState(() {
    for (Fruit fruit in fruits) {
      fruit.applyGravity();
    }
    for (FruitPart fruitPart in fruitParts) {
      fruitPart.applyGravity();
    }
  });

  Future.delayed(Duration(milliseconds: 30), _tick);
}

void _turnFruitIntoParts(Fruit hit) {
  FruitPart leftFruitPart = FruitPart(
      ...
      additionalForce: Offset(hit.additionalForce.dx - 1, hit.additionalForce.dy -5)
  );

  FruitPart rightFruitPart = FruitPart(
      ...
      additionalForce: Offset(hit.additionalForce.dx + 1, hit.additionalForce.dy -5)
  );
  ...
}

We create a new method _tick() that is executed every 30 milliseconds and updates the position of our fruits. The initially displayed fruit gets an addition force that let it be thrown up and right. When a fruit is turned into parts, we give every part an additional force in the opposite direction.

The devil is in the details

Okay the basic game mechanic is there. Let's improve a bunch of details.

First of all, the slice doesn't look very appealing as it's only a line. Let's create an actual blade!

void _drawBlade(Canvas canvas, Size size) {
  Path pathLeft = Path();
  Path pathRight = Path();
  Paint paintLeft = Paint();
  Paint paintRight = Paint();

  if (pointsList.length < 3) {
    return;
  }

  paintLeft.color = Color.fromRGBO(220, 220, 220, 1);
  paintRight.color = Colors.white;
  pathLeft.moveTo(pointsList[0].dx, pointsList[0].dy);
  pathRight.moveTo(pointsList[0].dx, pointsList[0].dy);

  for (int i = 0; i < pointsList.length; i++) {
    if (pointsList[i] == null) {
      continue;
    }

    if (i <= 1 || i >= pointsList.length - 5) {
      pathLeft.lineTo(pointsList[i].dx, pointsList[i].dy);
      pathRight.lineTo(pointsList[i].dx, pointsList[i].dy);
      continue;
    }

    double x1 = pointsList[i-1].dx;
    double x2 = pointsList[i].dx;
    double lengthX = x2 - x1;

    double y1 = pointsList[i-1].dy;
    double y2 = pointsList[i].dy;
    double lengthY = y2 - y1;

    double length = sqrt((lengthX * lengthX) + (lengthY * lengthY));
    double normalizedVectorX = lengthX / length;
    double normalizedVectorY = lengthY / length;
    double distance = 15;

    double newXLeft = x1 - normalizedVectorY * (i / pointsList.length * distance);
    double newYLeft = y1 + normalizedVectorX * (i / pointsList.length * distance);

    double newXRight = x1 - normalizedVectorY * (i / pointsList.length  * -distance);
    double newYRight = y1 + normalizedVectorX * (i / pointsList.length * -distance);

    pathLeft.lineTo(newXLeft, newYLeft);
    pathRight.lineTo(newXRight, newYRight);
  }

  for (int i = pointsList.length - 1; i >= 0; i--) {
    if (pointsList[i] == null) {
      continue;
    }

    pathLeft.lineTo(pointsList[i].dx, pointsList[i].dy);
    pathRight.lineTo(pointsList[i].dx, pointsList[i].dy);
  }

  canvas.drawShadow(pathLeft, Colors.grey, 3.0, false);
  canvas.drawShadow(pathRight, Colors.grey, 3.0, false);
  canvas.drawPath(pathLeft, paintLeft);
  canvas.drawPath(pathRight, paintRight);
}

This looks more complicated than it is. What we are doing here is drawing two paths that are parallel to the one that follows our finger. This is achieved by using some geometry. Given a point, we calculate the distance to the previous one using Pythagoras. We then divide the components by the length. This gives us the orthogonal vector between the center line and the left side. The negated value is the respective vector for the right side.

We multiply it by the current index divided by the number of points times the distance we set to 15. This way there are not two parallel curves but rather two curves that grow in their distance to the middle line.

In order to close both of the paths we then iterate from the last point to the first and draw lines from point to point until we reach the first point again.

If we were to spawn multiple fruits at once, every object would have the same rotation. Let's change that by giving it a random rotation.

  List<Widget> _getFruits() {
    List<Widget> list = new List();

    for (Fruit fruit in fruits) {
      list.add(
        Positioned(
          top: fruit.position.dy,
          left: fruit.position.dx,
          child: Transform.rotate(
            angle: fruit.rotation * pi * 2,
            child: _getMelon(fruit)
          )
        )
      );
    }

    return list;
  }

  Widget _getMelonCut(FruitPart fruitPart) {
    return Transform.rotate(
      angle: fruitPart.rotation * pi * 2,
     ...
    );
  }

  void _turnFruitIntoParts(Fruit hit) {
    FruitPart leftFruitPart = FruitPart(
        ...
        rotation:  hit.rotation
    );

    FruitPart rightFruitPart = FruitPart(
      ...
      rotation:  hit.rotation
    );

class Fruit extends GravitationalObject {
  Fruit({
    ...
    rotation = 0.0
  }) : super(..., rotation: rotation);
}

class FruitPart extends GravitationalObject {
  FruitPart({
    ...
    rotation = 0.0
  }) : super(..., rotation: rotation);
}

abstract class GravitationalObject {
  GravitationalObject({
    ...
    this.rotation
  });

  ...
  double rotation;
  ...
}

We add a new field to our GravitationalObject: a rotation. The rotation is a double determining the number of 360 ° rotations. We then wrap the lines where we display the fruit and the fruit parts with a Transform.rotate widget whose angle is the rotation times pi * 2 because it expects the rotation to be given as a radian (in which 2 * pi is a 360 ° rotation). In _turnFruitIntoParts() we take care of the parts having the same rotation as the original fruit to make it look more natural.

After having changed the background color a bit, displaying a score and triggering the spawn of a melon every now and then, we are finished for now. It's up to your imagination where to go from here.

Final thoughts

Without the usage of a framework, we implemented a very basic version of the game Fruit Ninja. Yet, it's only slicing and collecting points, but I am sure you guys have plenty of ideas about how to continue from here. Adding more fruit types, splashes, bombs, levels, high scores, a start screen etc. could be the next steps. You can find the full source on GitHub:

https://github.com/flutter-clutter/flutter-fruit-ninja-clone

Top comments (5)

Pablo Discobar • Jun 22 '21

Helpful article! Thanks! If you are interested in this, you can also look at my article about Flutter templates. I made it easier for you and compared the free and paid Flutter templates. I'm sure you'll find something useful there, too. - dev.to/pablonax/free-vs-paid-flutt...  