preface

After successive iterations of Flutter, the 2 year old project BladeofGod/Tank_combat (github.com) was found to be unable to run, so adaptation and code refactoring were carried out.

Compared to the old project, the refactored project is more formal, reasonable, and detailed in code, design, and annotations, which I hope beginners can learn from. In addition, because it is a learning demo, so I did not think carefully, if there is any unreasonable or not rigorous design, please correct me.

Ps: Player invincibility :DCopy the code

Flame

This project relies on Flame, a Game engine library based on Flutter.

The Flame engine is designed to provide a complete solution to common problems encountered by games developed with Flutter.

Flame currently offers the following features:

  • Game Loop
  • Component/Object System (FCS)
  • Special effects and particle effects
  • Collision detection
  • Gesture and input support
  • Images, animations, sprites, and Sprite groups
  • Some utility classes to simplify development

Flame itself provides a number of components to assist in managing the life cycle of Game Entity, calculations, and more. But the project is not fully used, mainly hope to be able to more custom view(drawing) related code, to assist beginners to practice drawing.

TankCombat

In this project, you will not only learn about drawing, but also gain a preliminary understanding of Flutter mixins, interfaces, abstract classes, factory constructors, extension and other language features, as well as some simple design patterns.

The following is a brief description of each node.

draw

Since I have covered this series before, I will not repeat it here. Please refer to the previous articles and code comments. Flutter&Flame — TankCombat game development (part 1) — nuggets (juejin. Cn)

Mixin

In the entry class TankGame, we can see mixin and compound mixin applications.

Ps: Compound mix, I made up the name. :DCopy the code

Compound mix:

Interfaces and Inheritance

You can see the simple use of abstract classes and interfaces in files like tank_model.dart.

Design patterns

In the mixin TankTheater class, we can see the simple application of agent, factory,Builder, and other design patterns by tracking the generation of the computer tank.

Structure diagram of the agent class ComputerTankSpawner.

Factory constructor and Extension

Factory constructor

To facilitate the creation of standardized objects, for example, during tank firing, a tank can fire n shells, so we need to create copies of objects that are relatively independent but related to the tank

Abstract class BaseBullet extends WindowComponent{///... /// BaseBullet copyWith({int? tankId, Size? activeSize, Offset? position, double? angle, BulletStatus status = BulletStatus.none, }); / / /... } // * Class PlayerBullet extends BaseBullet{PlayerBullet({required int tankId, required Size activeSize}) : super(tankId: tankId, activeSize: activeSize); / / /... @override PlayerBullet copyWith({int? tankId, Size? activeSize, Offset? position, double? angle, BulletStatus status = BulletStatus.none}) { final PlayerBullet pb = PlayerBullet(tankId: tankId ?? this.tankId, activeSize: activeSize ?? this.activeSize); pb.position = position ?? Offset.zero; pb.angle = angle ?? 0; pb.status = status; return pb; }}Copy the code

extension

By using extension with List, you can simplify the traversal call to List< Componenet > :

extension GameExtension<T extends WindowComponent> on List<T>{

  void onGameResize(Vector2 canvasSize) {
    forEach((element) => element.onGameResize(canvasSize));
  }

  void render(Canvas canvas) {
    forEach((element) => element.render(canvas));
  }

  void update(double dt) {
    forEach((element) => element.update(dt));
  }


}
Copy the code

This concludes the introduction of the main nodes. More implementation details can be found in the project. Thank you for reading.

The project address

bladeofgod/tank_combat (github.com)

Refer to the article

Flame/readme.md at main · Flame -engine/flame (github.com)

Flutter&Flame — TankCombat game development (part 1) — nuggets (juejin. Cn)

Other articles

Flutter plugin – Simple and useful image editor – Juejin

Flutter_hybird_webview practical technique sharing for cross-process rendering

Flutter – the Touch event distribution process of native View

What does the Native layer do when Flutter launches on Android?

Flutter imitates flush list of self-selected stocks