初探 Flutter 跨端游戏开发

发表于 1年以前  | 总阅读数:2957 次

背景

笔者在公司前前后后做了有小一年Flutter 开发,从入门到后面业务方变动,到暂时放弃Flutter。对于Flutter争议不提,我们得承认Flutter 是一款很优秀的跨端解决方案,到前段时间的Flutter3.0的提出,3.0对游戏做了很友好的支持,笔者又重新开始以游戏为切入点 去上手Flutter。所以我们探索一下Flutter3.0 对于游戏的支持力度,是否可以低成本写出一个自己的小游戏呢?

Why?为什么要做Flutter游戏开发?

  • 一套代码多端运行(Flutter 特性):可以想想开发一款游戏,既能争安卓市场,苹果市场还能挣Web市场的钱,是不是很好?
  • 比较流畅的仿原生环境,与纯原生环境相比流畅度无太大的降低;
  • 游戏很挣钱,apple store 收入70%来自游戏;
  • Flutter 3.0 新出了对广告、应用内购买、Firebase、Play 服务和游戏中心等服务的预构建集成加快游戏开发;(方便发布游戏,3.0对游戏支持很友好)。
  • Flutter 侧重2d游戏,3D游戏 参考其他技术,如 unity3d

Flutter3.0环境准备

  • 以Mac 电脑为例,去准备Flutter 环境
  • Flutter 3.0 SDK 下载
  1. 下载以下安装包以获取 Flutter SDK 的最新稳定版本:
Intel芯片 M1 芯片
flutter_macos_3.0.1-stable.zip flutter_macos_arm64_3.0.1-stable.zip

2 . 解压SDK

   cd ~/development
 unzip ~/Downloads/flutter_macos_arm64_3.0.1-stable.zip

3 . 添加环境变量:(关于Mac 环境变量 不累述:参考)

  export PATH="$PATH:`pwd`/flutter/bin"
open ~/.bash_profile
source  ~/.bash_profile
  - 查看Flutter环境完整性:flutter doctor
  flutter doctor

环境常见问题

1 . 问题1:CocoaPods环境依赖安装cocoapods

  sudo gem install cocoapods
Error: To set up CocoaPods for ARM macOS, run:
  arch -x86_64 sudo gem install ffi
  arch -x86_64 sudo gem install ffi、
Building native extensions. This could take a while...
Successfully installed ffi-1.15.5
Parsing documentation for ffi-1.15.5
Done installing documentation for ffi after 3 seconds
1 gem installed 

2 . 问题2:Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

  flutter doctor --android-licenses

完整环境如下:非必须,缺失部分环境不影响开发

    [✓] Flutter (Channel stable, 3.0.1, on macOS 12.4 21F79 darwin-arm, locale
        zh-Hans-CN)
    [✓] Android toolchain - develop for Android devices (Android SDK version
        32.1.0-rc1)
    [✓] Xcode - develop for iOS and macOS (Xcode 13.4)
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 2021.2)
    [✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
    [✓] VS Code (version 1.67.2)
    [✓] Connected device (4 available)
    [✓] HTTP Host Availability

    • No issues found!

第一个游戏模板

这个 Flutter 示例游戏 repo 预先集成了应用内购买、移动广告 SDK 和许多其他成功游戏的模块;

    cd flutterdemo 
    git clone https://github.com/flutter/samples.git

Flutter 中的入门游戏,具有移动端(iOS 和 Android)游戏的所有到发布基本集成,包括以下功能:

  • 声音
  • 音乐
  • 主菜单画面
  • 设置
  • 广告 (AdMob)
  • 应用内购买
  • 游戏服务(游戏中心和 Google Play 游戏服务)
  • 崩溃报告 (Firebase Crashlytics)
lib
├── src
│   ├── ads//广告
│   ├── app_lifecycle//生命周期
│   ├── audio//音频
│   ├── crashlytics//崩溃日志
│   ├── game_internals//
│   ├── games_services//游戏服务
│   ├── in_app_purchase//应用内购买
│   ├── level_selection//等级
│   ├── main_menu//menu
│   ├── play_session//
│   ├── player_progress//用户进度
│   ├── settings//设置
│   ├── style
│   └── win_game//胜利
├── ...
└── main.dart
cd samples/game_template/
flutter run
Multiple devices found:
[1]: ANA AN00 (NAB5T20525007949)
[2]: iPhone 12 (159CF48A-D131-4187-9E51-391759D8ADC8)
[3]: macOS (macos)
[4]: Chrome (chrome)
Warning: CocoaPods not installed. Skipping pod install.
  CocoaPods is used to retrieve the iOS and macOS platform side's plugin code
  that responds to your plugin usage on the Dart side.
  Without CocoaPods, plugins will not work on iOS or macOS.
  For more info, see https://flutter.dev/platform-plugins
To install see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.

启动工程

flutter clean
flutter pub get
flutter run

通过以上模板,我们发现关键引入信息如下

  games_services: ^2.0.7  # 成就和排行榜
  google_mobile_ads: ^1.1.0  # 广告
  in_app_purchase: ^3.0.1  # 应用内购买

广告id切换:ios/Runner/Info.plist android/app/src/main/AndroidManifest.xml

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-1234567890123456~0987654321</string>

<meta-data
   android:name="com.google.android.gms.ads.APPLICATION_ID"
   android:value="ca-app-pub-1234567890123456~1234567890"/>

games_services

  • 要启用游戏服务,请先在 iOS 上设置Game Center ,在 Android 上设置Google Play 游戏服务

登录

让用户登录游戏中心 (iOS) 或 Google play 游戏服务 (Android)。在进行任何操作(例如发送分数或解锁成就)之前,应该先登录。

 GamesServices.signIn();

判断登录

检查当前用户是否登录游戏服务(ios游戏中心或者Google play 游戏服务)

GamesServices.isSignedIn;

登出

让用户退出 ios游戏中心/Goole Play 服务。调用后,将无法再对该用户的帐户进行任何操作。

 GamesServices.signOut();

显示成就界面

GamesServices.showAchievements();

显示排行榜-入参需要ios_leaderboard_id和android_leaderboard_id

 GamesServices.showLeaderboards(iOSLeaderboardID: 'ios_leaderboard_id', androidLeaderboardID: 'android_leaderboard_id');

提交分数

提交分数到排行榜

/**
入参需要android_leaderboard_id和ios_leaderboard_id
*/
GamesServices.submitScore(score: Score(androidLeaderboardID: 'android_leaderboard_id',
                                       iOSLeaderboardID: 'ios_leaderboard_id',
                                       value: 5));

解锁成就

/**
android_id
ios_id
percentComplete` 成就的完成百分比,这个参数在iOS的情况下是可选的
`steps` Android 的成就步骤
*/
GamesServices.unlock(achievement: Achievement(androidID: 'android_id',
                                              iOSID: 'ios_id',
                                              percentComplete: 100,
                                              steps: 2)); 

增加步骤 (Android Only)

增加安卓成就的步骤

final result = await GamesServices.increment(achievement: Achievement(androidID: 'android_id', steps: 50));
print(result);

显示接入点 (iOS Only)

GamesServices.showAccessPoint(AccessPointLocation.topLeading);

隐藏接入点 (iOS Only)

GamesServices.hideAccessPoint();

获取Player id

final playerID = GamesServices.getPlayerID();

获取Player name

final playerName = GamesServices.getPlayerName();

小结

以上介绍了Flutter3.0和3.0对游戏友好的支持,可以方便的打通移动端,方便的接入广告等服务,可以让开发者更专注游戏本身开发,而非 广告、音频控制、用户排名,应用支付等,下面我们介绍一下Flutter 游戏的核心,常用的游戏引擎和使用。

游戏引擎

Flame engine:https://github.com/flame-engine/flame/blob/main/i18n/README-ZH.md

Flame 引擎的目的是为使用 Flutter 开发的游戏会遇到的常见问题提供一套完整的解决方案,Flame 利用了 Flutter 的强大功能,并提供了一种轻量级的方法来为所有平台开发 2-D 游戏。

目前 Flame 提供了以下功能:

  • 游戏循环 (game loop)
  • 组件/对象系统 (FCS)
  • 特效与粒子效果
  • 碰撞检测
  • 手势和输入支持
  • 图片、动画、精灵 (sprite) 以及精灵组
  • 一些简化开发的实用工具类

除了以上的功能以外,你可以使用一些桥接 Flame 的 package 来增强引擎本身的功能。通过这些桥接 package,你可以访问 Flame 的组件、帮助程序, 或是与其他 package 进行绑定,从而达到平滑集成的效果。目前我们有以下的桥接 package(Flame 引擎是模块化的,允许用户选择他们想要使用的 API):

  • Flame – 核心包,提供游戏循环、基本碰撞检测、Sprite 和组件。

  • flame_audio 桥接 AudioPlayers :可同时播放多个音频。

  • flame_bloc 桥接 Bloc :BloC 状态管理。

  • flame_fire_atlas 桥接 FireAtlas :为游戏创建纹理图集。

  • flame_forge2d 桥接 Forge2D :基于 Box2D 的物理引擎,具有高级碰撞检测的物理引擎,从 Box2D 移植到与 Flame 一起使用

  • flame_lint - 引擎的代码格式规则 (analysis_options.yaml)。

  • flame_oxygen 桥接 Oxygen :轻量的实体-组件-系统 (ECS)。

  • Oxygen 是一个用 Dart 编写的轻量级实体组件系统框架,专注于性能和易用性。Oxygen 在设计上是不可知的,您想要使用的任何游戏引擎都可以与 Oxygen 一起使用。

    目标 Oxygen 深受 ECSY 的启发,因此它具有相同的设计原则。Oxygen 的主要目标是轻巧、高性能和易于使用。借助 API 尝试并帮助您充分利用 ECS 设计模式,而不会限制您构建逻辑。

  • flame_rive 桥接 Rive :创建可交互的动画。https://rive.app/get-started/

  • RiveAnimation.asset('assets/truck.riv');
    
  • flame_svg 桥接 flutter_svg :在 Flutter 中绘制 SVG。

  • final String assetName = 'assets/image.svg';
    final Widget svg = SvgPicture.asset(
    assetName,
    semanticsLabel: 'Acme Logo'
    );
  • flame_tiled 桥接 Tiled :二维平面的地图编辑器。

  • 下载

  • flame_audio– 为 Flame 游戏添加音频功能的模块。

2D游戏小例子

  1. dependencies:
    flutter:
     sdk: flutter
    flame: 1.1.1

2 .

  runApp(const App());-> GameWidget(game)& 一个自定义pad 布局
  class Joypad extends StatefulWidget {
  //自定义pad 略 可以参考:https://pub.dev/packages/control_pad
}

1 .

  class Player extends SpriteComponent with HasGameRef{
 @override
  Future<void> onLoad() async {
    super.onLoad();
    // TODO 1
    sprite = await gameRef.loadSprite('player/player.png');
    position = gameRef.size / 2;
  }
}

Plyaer:

2 .

 class MyGame extends FlameGame {
  final Player _player = Player();

  @override
  Future<void> onLoad() async {
    add(_player);
    // empty
  }
}
  //Joypad(onDirectionChanged: onJoypadDirectionChanged) 方向控制pad
void onJoypadDirectionChanged(Direction direction) {
    // TODO 2
    game.onJoypadDirectionChanged(direction);
  }

4 . game->player->更新方向

5 .

  //Player update 更新频率为 16毫秒左右
@override
  void update(double delta) {
    super.update(delta);
    //移动小孩
    movePlayer(delta);
    print('update 更新时间---》${(DateTime.now().microsecondsSinceEpoch - _timeNow)}');
    _timeNow = DateTime.now().microsecondsSinceEpoch;
  }

60hz=16毫秒刷新

1 . 关于移动速度和方向

void movePlayer(double delta) {
    // TODO
    switch (direction) {
      case Direction.up:
        moveUp(delta);
        break;
      case Direction.down:
        moveDown(delta);
        break;
      case Direction.left:
        moveLeft(delta);
        break;
      case Direction.right:
        moveRight(delta);
        break;
      case Direction.none:
        break;
    }
  }
  final double _playerSpeed = 300.0;
 void moveUp(double delta) {
    position.add(Vector2(0, -(delta * _playerSpeed)));
  }

  void moveDown(double delta) {
    position.add(Vector2(0, delta * _playerSpeed));
  }

  void moveRight(double delta) {
    position.add(Vector2(delta * _playerSpeed, 0));
  }

  void moveLeft(double delta) {
    position.add(Vector2(-delta * _playerSpeed, 0));
  }

如果游戏视图的直径为 2500×2500 像素,则您的玩家从坐标 x:1250, y:1250 的中间开始。调用 moveDown 会为玩家的 Y 位置增加大约 300 像素,用户在向下方向握住手柄时,会导致精灵向下移动游戏视口。

1 . 地图

  //地图也是精灵,所以加载方式跟精灵一样
class MyMap extends SpriteComponent with HasGameRef {
  @override
  Future<void>? onLoad() async {
    sprite = await gameRef.loadSprite('player/rayworld_background.png');
    size = sprite!.originalSize;
    return super.onLoad();
  }
}
//地图加载
class MyGame extends FlameGame {
  final Player _player = Player();
  final MyMap _map = MyMap();
  @override
  Future<void> onLoad() async {
     await add(_map);//添加地图
     add(_player);
  }
} 

2 . 添加会动的精灵 player

player_spritesheet

  Player extends SpriteAnimationComponent with HasGameRef{
  @override
  Future<void> onLoad() async {
    super.onLoad();
     _loadAnimations().then((_) => {animation = _standingAnimation});
  }
 Future<void> _loadAnimations() async {
    final spriteSheet = SpriteSheet(
      image: await gameRef.images.load('player/player_spritesheet.png'),
      srcSize: Vector2(29.0, 32.0),//1个精灵的像素大小
    );
    _runDownAnimation =
        spriteSheet.createAnimation(row: 0, stepTime: _animationSpeed, to: 4);

    _runLeftAnimation =
        spriteSheet.createAnimation(row: 1, stepTime: _animationSpeed, to: 4);

    _runUpAnimation =
        spriteSheet.createAnimation(row: 2, stepTime: _animationSpeed, to: 4);

    _runRightAnimation =
        spriteSheet.createAnimation(row: 3, stepTime: _animationSpeed, to: 4);

    _standingAnimation =
        spriteSheet.createAnimation(row: 0, stepTime: _animationSpeed, to: 1);
  }

  void movePlayer(double delta) {

    switch (direction) {
      case Direction.up:
        //动画方向切换
         animation = _runUpAnimation;
        moveUp(delta);
        break;
      case Direction.down:
        animation = _runDownAnimation;
        moveDown(delta);
        break;
      case Direction.left:
         animation = _runLeftAnimation;
        moveLeft(delta);
        break;
      case Direction.right:
         animation = _runRightAnimation;
        moveRight(delta);
        break;
      case Direction.none:
        break;
    }
  }
}

至此我们的利用Flame 做的一个游戏入门就结束了

当然游戏开发很复杂,想象力最重要!

Bonfire

Bonfire 引擎:(RPG 类)可以创造 Flutter.2D 游戏的引擎,基于 Flame

本文由哈喽比特于1年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/eMYaYtyhKX3XWGgwPtPW5g

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:7月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:7月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:7月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:7月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:7月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:7月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:7月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:7月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:7月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:7月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:7月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:7月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:7月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:7月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:7月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:7月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:7月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:7月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:7月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:7月以前  |  398次阅读  |  详细内容 »
 相关文章
如何有效定位Flutter内存问题? 3年以前  |  14839次阅读
Flutter的手势GestureDetector分析详解 4年以前  |  10936次阅读
Flutter插件详解及其发布插件 4年以前  |  10724次阅读
在Flutter中添加资源和图片 5年以前  |  7971次阅读
 目录