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';

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

flame的基本组成

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

class xxx extends FlameGame{void render(Canvas canvas){super.render(canvas);}void update(double dt){super.update(dt);}
}

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));}
}

在这个类中，我们定义了它的位置（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;

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

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

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

ball.render(canvas);

在update下添加

ball.update(dt);

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

flutter flame基本结构相关推荐

Flutter Flame 小游戏
使用Flutter Flame Engine写的一个练习小游戏项目链接:https://github.com/kmarryme/flutter_games_demo
Flutter教程之使用 Flutter Flame 快速轻松地创建 2D 游戏(教程含源码)
Flutter 使您能够从单个代码库开发适用于 Android.iOS.桌面和 Web 等平台的应用程序.作为一个多平台的 UI 工具包,Flutter 团队致力于让各类开发者能够快速构建和发布应用. ...
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见学习Dart 基础知识移步这里安装flutter环境相关移步这里 flutter基础组件使用相关移步这里文章目录一 ...
第 1-4 课：Flutter 项目结构及配置文件详解
对于一门新语言或新技术的学习来说,在新建了项目之后,了解其项目结构及含义.配置文件的编写,这些对后续的开发和深入学习起到很重要的作用.俗话说磨刀不误砍柴工,Flutter 的学习也同理,我们在新建了 ...
[译] MDC-101 Flutter：Material Components（MDC）基础（Flutter）
原文地址:MDC-101 Flutter: Material Components (MDC) Basics (Flutter) 原文作者:codelabs.developers.google.com ...
Flutter面试常见开发问题
本文主要介绍Flutter面试常见开发问题 Flutter 使用了一种全新的方法,您可以使用 widgets代替 Views .Android 中的 View 主要是布局的一个元素,但在 Flutte ...
flutter 图片转base64_京东技术中台的Flutter实践之路
作者 | 京东 ARES 跨端团队编辑 | Yonie 在 2019 年,Flutter 推出了多个正式版本,支持的终端越来越多,使用的项目也越来越多.Flutter 正在经历从小范围尝鲜到大面积应 ...
技术干货 | Flutter 混合开发基础
导读:Flutter 支持以独立页面.甚至是 UI 片段的方式,集成到现有的应用中,即所谓的混合开发模式.本文主要谈谈 Android 平台下, Flutter 的混合开发与构建. 文|李成达网易云 ...
鸿蒙系统起飞！Flutter 完全适配指南
鸿蒙系统 (HarmonyOS)是华为推出的一款分布式操作系统,那么如何在保证开发迭代效率的前提下,以相对低的成本将移动应用快速移植到鸿蒙平台上呢?美团外卖 MTFlutter 团队近期做了一次技术探 ...

flutter flame基本结构

开始

flame的基本组成

玩家/角色

引用

flutter flame基本结构相关推荐

最新文章

热门文章