内容简介:The goal of this tutorial is to develop a clone of the game Fruit Ninja in aAfter having completed this tutorial, you will be able toFor the basic version of our game, there are the following problems to be solved:
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
GestureDetector
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 Offset
s 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 newTouchSlice
to the state that has a single point -
onScaleUpdate
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 ourTouchSlice
-
onScaleEnd
is called when we release the finger from the screen. This should set theTouchSlice
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 Fruit
s. 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 foot 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:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java Servlet&JSP经典实例
(美)佩里 / 朱涛江、邹红霞、林琪 / 中国电力出版社 / 2005-7 / 86.00元
本书将用于帮助指导Java web开发人员的日常任务,提供典型的web相关问题的快速解决方案。本书集中介绍了如何用Java初始化某些与web相关的任务,而不是教会读者如何使用Java语言,或者事无巨细地解释servlet和JSP API。书中包含了大量关于复杂的日常开发任务的技巧,这些技巧涵盖了许多与Servlet 2.4和JSP 2.0规范相关联的新特性,包括ServletRequestList......一起来看看 《Java Servlet&JSP经典实例》 这本书的介绍吧!