Collision can be of various types and in various dimensions but as we are making game with flame we will probably deal with head on collision and in this blog we will be checking and visualizing collision in detail.
class MyGame extends BaseGame with DoubleTapDetector, HasCollidables {}
Well I will be providing a link to full code at the end of this blog but for now, Let us understand this piece of code. Base game that I was discussing in previous blogs is from flame, you can understand it like in flutter we extend class to staefulwidget similarly here we are extending our game class to base game. You can see it if you mouse over with VS Code, it's in the flame package also doubletapdetector is from flame. We added hascollidable which is also from flame. Once you add collidable to the base game you can then add collidables and hitbox to the individual sprite components and that is how we can then able to detect collision between sprite components.
Steps
Making different class for different sprite components
To make it easier to see, I'm going to use separate classes for each of the components on the screen.
Let's extract boy out first.
class Boy extends SpriteComponent with Hitbox, Collidable {
Boy({
Vector2 position,
Vector2 size,
}) : super(position: position, size: size) {
debugMode = true;
addShape(HitboxRectangle());
}
So in the above code we made Boy class and extends it to spritecomponent class with mix-in collidable and hitbox also from flame.
Creating class for girl.
class Girl extends SpriteAnimationComponent with Hitbox, Collidable {
Girl({Vector2 position, Vector2 size})
: super(position: position, size: size);
Girl.fromFrameData(
ui.Image image,
SpriteAnimationData data, {
Vector2 position,
Vector2 size,
}) : super(position: position, size: size) {
animation = SpriteAnimation.fromFrameData(image, data);
debugMode = true;
addShape(HitboxRectangle());
}
}
As the girl is animating, so we extended girl class to spriteanimationcomponent, which then added with mix-in hitbox and collidable. So in the previous blog we had set properties for girl like position and size in spriteanimationcomponent, go to VS Code and click on spriteanimationcomponent you will reach to sprite_animation_component.dart, from there you can see the constructor as shown in below pic.
From that file, which is helpful if you are a beginner or and if you want to take reference you can take from there as it is impossible for anyone to remember all things.
So for the girl, I have used properties like position and size also in sprite_animation_component.dart there it has shown how to handle the properties as in the girl class I have used girl.fromFrameData to do that. By doing so, the girl have named constructor.
Similarly, for the boy add constructor, as the boy is static, so we have not used dot thing like we have used for girl as she was animating.
There is debugmode built in flame for this sprite called collision detection, so we can see what's going on a bit easier. Put it to true as shown in the above code and add a shape(HitboxRectangle used here, you can choose shape of your choice) to see the boundary of components and to see how they will collide as show in the pic below.
We can clearly see in the above pic that how the boundaries are defined with respective positions, this is because we on the debug mode just to visualize how they will collide that I will show down in the video.
As we have enabled has collidable on the base game, this is setting up, so we can have a very scalable game here with many collidable objects. You can add action onto either components to detect collision, I am using on boy as if girl will hit boy we could detect it.
@override
void onCollision(Set<Vector2> points, Collidable other) {
super.onCollision(points, other);
print('hit');
}
Adding this piece of code after the constructor in the boy class and now if there is collision we are going to print hit just to make sure if it is working and hence collision detection is going to be implemented. As shown in the video below, red arrow pointing where the hit will print in terminal window.
With this we are set to make a simple 2d gaming app using flame, next blog will be on making a complete app using all the basics covered till this blog.
Refer to the link below if any doubt in code
https://gitlab.com/mdnazisharman/collision_detection