这还能叫Flutter?用它复原一个叫《是男人就坚持100秒》的游戏|技术点评

简介: 我说Flutter的跨端一致性并非首创但凡你用过Unity3D,Unreal等游戏引擎,你就会发现 这些不都是跨端的吗?不都是开局一块画布,剩下随便整么?既然和游戏引擎作对比那么我们真的拿Flutter来做个游戏吧

FLAME引擎


image.png


这里我用了一款基于的Flutter的游戏引擎,名为FLAME。使用它开发游戏,基本用不到Flutter里的那些Widget,所以就有了标题里的提问


一个Flutter应用不使用Flutter的Widget,那还叫Flutter吗?


不管了,先把这篇文章写完,抽空再用widget重做一次这个游戏


游戏引擎基础


引入Flame


dependencies:
  flame: ^1.0.0-rc5


开发游戏,最基础就是这三件事


  • 刷新机制(update)
  • 渲染画布(renderer)
  • 输入事件(events)


Flame中,一个基础的游戏框架代码如下


class MyGameSubClass extends Game {
  @override
  void render(Canvas canvas) {
    // TODO: implement render
  }
  @override
  void update(double t) {
    // TODO: implement update
  }
}
main() {
  runApp(
    GameWidget(
      game: MyGameSubClass(),
    )
  );
}


刷新,渲染都有了,事件呢,在本游戏中我们加入拖动事件


class MyGameSubClass extends BaseGame with PanDetector


渲染图形元素


  • 飞机


image.png


飞机的图形素材是一个精灵图,其中前面两帧是飞行状态,后面三帧是爆炸状态


playerSpriteSheet = SpriteSheet(
  image: await images.load('player.png'),
  srcSize: playerSize,
);
//运行状态下的精灵图动画
player = SpriteAnimationComponent(
  size: playerSize,
  animation: playerSpriteSheet.createAnimation(row: 0, stepTime: .1, to: 2),
);


然后我们通过add方法,将图形元素展示到画面中


add(player);
//放到x:100,y:100的坐标,大家感受一下坐标系
player.x=player.y=100;


image.png


  • 子弹


image.png


bulletImage = await images.load('bullet.png');


一颗子弹的出现逻辑以及生命周期是这样的


  1. 从屏幕外生成
  2. 向着飞机当前坐标的方向移动
  3. 移出屏幕即销毁


//添加一颗子弹
void addBullet() {
final bullet = SpriteComponent.fromImage(bulletImage, size: bulletSize);
double bulletX;
double bulletY;
//随机在显示区四周的矩形边上生成
if (Random().nextBool()) {
  bulletX = Random().nextDouble() * (screenSize.width + bulletSize.x) -
      bulletSize.x;
  bulletY = Random().nextBool() ? -bulletSize.y : screenSize.height;
} else {
  bulletX = Random().nextBool() ? -bulletSize.x : screenSize.width;
  bulletY = Random().nextDouble() * (screenSize.height + bulletSize.y) -
      bulletSize.y;
}
//给与子弹初始坐标
bullet.x = bulletX;
bullet.y = bulletY;
//添加到场景中
add(bullet);
//加入bullet管理数组,稍后用于更新子弹飞行坐标以及碰撞检测
bullets.add({
  "component": bullet,//子弹控件实例
  "speed": (1+gameTime/10) + Random().nextDouble()*3,//飞行速度
  "angle": atan2(((bulletY + bulletSize.y/2) - (player.y + playerSize.y / 2)),
      ((bulletX + bulletSize.x) - (player.x + playerSize.x / 2)))
});//向量角度
}


通过调用这个addBullet的方法,我们就能在屏幕中朝着飞机所在位置发射一颗子弹了


image.png


为了发射多颗,我们再新建一个函数addGroupBullet


//添加一组子弹
void addGroupBullet() {
    int groupCount = 10+Random().nextInt(gameTime+1);
    for (int i = 0; i < groupCount; i++) {
      addBullet();
    }
}


刷新机制


Flame提供的update方法中我们需要更新所有子弹的位置,因为子弹不是静止的,需要一直移动呀!


@override
void update(double dt) {
    super.update(dt);
    //遍历子弹数组,对所有子弹进行更新
    for (int i = bullets.length - 1; i >= 0; i--) {
          var bulletItem = bullets[i];
          //获得子弹实例
          SpriteComponent bullet = bulletItem["component"] as SpriteComponent;
          double angle = bulletItem["angle"];
          double speed = bulletItem["speed"];
          //让子弹根据发射时的向量角度进行移动
          bullet.x -= cos(angle) * speed;
          bullet.y -= sin(angle) * speed;
          //当子弹移动到屏幕外时销毁它
          if (isNotInScreen(bullet.x, bullet.y)) {
                print("bullet removed");
                remove(bullet);
                bullets.removeAt(i);
                continue;
          }
    }
}


开始有点带感了吧?


image.png


飞机的移动


void onPanUpdate(DragUpdateDetails details) {
    super.onPanUpdate(details);
    if (!isGameStart) return;
    //由于飞机对象的坐标点在左上角,所以移动是要注意偏移一下
    player.x = details.globalPosition.dx - playerSize.x / 2;
    player.y = details.globalPosition.dy - playerSize.y / 2;
}


image.png


碰撞检测


在每次刷新子弹坐标的时候,去检测一下是否和当前飞机的坐标重合了,重合了游戏就结束啦


if (isHitPlayer(bullet.x, bullet.y)) {
    gameOver();
}


这里用了一个简单的判断机制,并没有精确到飞机的外轮廓。


一是精确到外轮廓将带来更大的运算量,也比较复杂。


二是那样的游戏体验不见得好,毕竟在手机玩的话,手指要挡住大部分飞机的图形。


//飞机和子弹碰撞判断
bool isHitPlayer(double x, double y) {
    double _x = (x + bulletSize.x / 2 - (player.x + playerSize.x / 2)).abs();
    double _y = (y + bulletSize.y / 2 - (player.y + playerSize.y / 2)).abs();
    //求出子弹和飞机坐标的直线距离
    double distance = sqrt(_x * _x + _y * _y);
    //当直线距离小于判定为碰撞的距离时则返回true/false
    if (distance <= hitDistance) return true;
    return false;
}


游戏结束


void gameOver() {
    isGameStart = false;
    //取消定时发射子弹的定时器
    if(timer!=null)timer.cancel();
    //播放飞机爆炸动画
    player.animation = playerSpriteSheet.createAnimation(
        row: 0, stepTime: .1, loop: false, from: 2, to: 6);
    print("game over");
}


后话


这么写,从代码层面看,和Flutter关系不大,但利用Flutter的跨端能力,我们可以很容易的开发一个横跨Mac,Linux,Windows,Web,iOS,Android端的小游戏。如果你不会用那些开发游戏的IDE,比如Unity3D等,那Flutter也是一个不错的选择。



相关文章
|
2月前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
2月前
|
Dart 前端开发 安全
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
【4月更文挑战第30天】本文探讨了Flutter中线程管理和并发编程的关键性,强调其对应用性能和用户体验的影响。Dart语言提供了`async`、`await`、`Stream`和`Future`等原生异步支持。Flutter采用事件驱动的单线程模型,通过`Isolate`实现线程隔离。实践中,可利用`async/await`、`StreamBuilder`和`Isolate`处理异步任务,同时注意线程安全和性能调优。参考文献包括Dart异步编程、Flutter线程模型和DevTools文档。
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
|
2月前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
2月前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
2月前
|
Dart 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
【4月更文挑战第30天】Flutter Profiler是用于性能优化的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者识别性能瓶颈,如CPU过度使用、渲染延迟、内存泄漏和网络效率低。通过实时监控和分析,开发者能优化代码、减少内存占用、改善渲染速度和网络请求,从而提升应用性能和用户体验。定期使用并结合实际场景与其它工具进行综合分析,是实现最佳实践的关键。
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
|
2月前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
2月前
|
Dart 前端开发 Java
【Flutter前端技术开发专栏】Flutter中的内存泄漏检测与解决
【4月更文挑战第30天】本文探讨了Flutter应用中的内存泄漏检测与解决方法。内存泄漏影响性能和用户体验,常见原因包括全局变量、不恰当的闭包使用等。开发者可借助`observatory`工具或`dart_inspector`插件监测内存使用。解决内存泄漏的策略包括避免长期持有的全局变量、正确管理闭包、及时清理资源、妥善处理Stream和RxDart订阅、正确 disposal 动画和控制器,以及管理原生插件资源。通过这些方法,开发者能有效防止内存泄漏,优化应用性能。
【Flutter前端技术开发专栏】Flutter中的内存泄漏检测与解决
|
2月前
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局(避免复杂嵌套,使用`const`构造函数)、管理内存、优化动画、实现懒加载和按需加载,以及利用Flutter的性能工具(如DevTools)都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例,展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
|
2月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
|
2月前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用