当前位置:   article > 正文

flutter flame基本结构

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,谢谢!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/97753
推荐阅读
相关标签
  

闽ICP备14008679号