flutter flame基本结构

flame是一个十分轻便适合做小游戏的引擎，基于dart语言的flutter框架。简单点来说，他就是分为以下几步
开始→循环（换帧→渲染）几步，很容易理解
所以我们现在便开始吧！

开始

在开始之前，建议先安装flame包

flutter pub add flame

装好之后呢，他会自动在pubspec.yaml文件中的36,37行引入包


接着便在main.dart下导入包

import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/timer.dart';
1
2
3

这几个包常会用到，但第一个包是必须要装的！

flame的基本组成

flame下可以在搭建一个类，这个便是主体部分

class xxx extends FlameGame{
  void render(Canvas canvas){
    super.render(canvas);

  }
  void update(double dt){
    super.update(dt);

  }
}
1
2
3
4
5
6
7
8
9
10

xxx可以取自己喜欢的名字
其中render就是渲染，负责处理每帧刷新时的动画，canvas就是画图，来画游戏界面的，update就是帧，dt就是帧
这就是flame的大致结构，每帧都会调用这两种方法，而每种方法都有自己的作用。

玩家/角色

接下来就是为这个界面创建角色。
我们为了方便一般都会独自定义一个类

class BulletComponent{

  final Vector2 position;
  double speed;
  double tox;
  double toy;

  final double radius;
  late Paint paint = Paint()..color = Colors.orangeAccent;
  late Path path = Path()
    ..addOval(Rect.fromLTWH(position.x - radius, position.y - radius, radius * 2, radius * 2));


  BulletComponent({required this.position, this.speed = 1.0,this.tox = 0,this.toy  = 0, this.radius = 10});
  void render(Canvas canvas){
    canvas.drawCircle(position.toOffset(), radius, paint);
  }

  void update(double dt){
    position.setValues(position.x + tox * speed , position.y + toy  * speed);
    path.reset();
    path.addOval(Rect.fromLTWH(position.x - radius, position.y - radius, radius * 2, radius * 2));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这个类中，我们定义了它的位置（position），速度（speed），方向/角度（tox,toy），半径（radius），颜色（Paint）等属性，以及每帧要做的事（渲染）
在这里可能会用到三角函数（sin,cos），但毕竟还没学到，变随便导入个Random包来弥补一下。
其中的update便是在每帧下使这个球x坐标和y坐标在原有的基础下分别添加tox * speed 和 toy * speed，然后重新刷新一下path（碰撞检测点）
render则是不断的再update的基础下画圆
如果说来分个类
render就是负责画面上的绘图
update就是负责后端上的计算
其中BulletComponent({required this.position, this.speed = 1.0,this.tox = 0,this.toy = 0, this.radius = 10});这个十分重要，这个是后面搭建的重要部分，也是把这个引入主体的连接部分。
这些代码搞定过后一个球的样貌格式也便搭建完毕，接下来便是引用了

引用

如果你想创建一个球，那么可以用

late BulletComponent ballgame;
1

在开始的方法Future<void>? onLoad() async中添加

ball = ballgame(position: Vector2(canvasSize.x/2, canvasSize.y/2),radius: radius.toDouble(),tox:forX,toy:forY, speed: speed)
1

这里的radius等要自己设置！而这里位置是生成在画布中间（canvasSize.x等时表示画布宽和高）
然后在render的方法下加入

ball.render(canvas);
1

在update下添加

ball.update(dt);
1

这样就算完事了
这样一个球便实现了
而flame的基本结构也正是如此，定义一个类，然后在主体中创建，调用，最后在投射在每一帧中
这就是这次的全部内容，有问题可以在下方评论区ask，谢谢！