DEV Community

Cover image for Flutter game tutorial: Fruit Slicing
flutter-clutter
flutter-clutter

Posted on • Originally published at flutterclutter.dev

Flutter game tutorial: Fruit Slicing

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.

Flutte Fruit Ninja Clone Animation

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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,
    )
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
      });
    }
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Testing time!

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

Flutter draw on screen

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);
}
Enter fullscreen mode Exit fullscreen mode

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)
        ],
      )
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Flutter draw on screen radial gradient

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

Flutter Fruit Ninja collision detection simple

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;
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Flutter Fruit Ninja advanced collision

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.

Melon vector overview

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
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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.

Flutter fruit cut half

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
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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)
  );
  ...
}
Enter fullscreen mode Exit fullscreen mode

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.

Flutter Fruit Ninja gravity

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
  ...
}
Enter fullscreen mode Exit fullscreen mode

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.

Flutte Fruit Ninja Clone Animation

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)

Collapse
 
pablonax profile image
Pablo Discobar

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... 


Collapse
 
amananandrai profile image
amananandrai

Nice blog with a lot of explanation. It will help a lot of beginners to start learning flutter.

Collapse
 
flutterclutter profile image
flutter-clutter • Edited

Thank you for your apprecation :).

Collapse
 
mightytechno profile image
Mighty

Nice one

Collapse
 
xs005 profile image
Chris Sun

Like your blog, I have never tried React Native, looks very similar to React Webapp