flame-tutorials

Flame 屏幕手柄/摇杆

Wednesday, May 20, 2020

可以看到, 目前最主流的手机游戏都使用屏上手柄/摇杆进行控制, 比如: [caption id=“attachment_1286” align=“aligncenter” width=“700”] League of Legends Mobile (英雄联盟手游)[/caption] [caption id=“attachment_1284” align=“aligncenter” width=“700”] PUBG Mobile (和平精英)[/caption] [caption id=“attachment_1288” align=“aligncenter” width=“700”] Minecraft PE(我的世界手机版)[/caption] 以上游戏都在当前手游榜(2020.04)排名前五. [epcl_box type=“information”]看得出来, 目前的核心玩法、操作交互都离不开手柄/摇杆![/epcl_box] 所以, 本篇文章就来教大家在使用Flame框架时, 在屏幕上展示摇杆, 并控制某些component! 我们要做的项目名称为Lame Tank 360(Lame坦克360). 本项目将完整支持360°的旋转. 并将坦克的"炮塔"与"坦克身体"分开. 因此, 我们必须建立两个摇杆. 需具备的条件 若想顺利学习本篇教程, 你需要具备: 掌握Flutter的基础用法. 已完整学习Flame系列教程. [epcl_box type=“notice”]如果你没有满足上述条件, 你将无法顺利完成这篇教程. 建议先阅读《Flutter游戏开发-Flame教程》 ![/epcl_box] 开始 创建Flutter项目 flutter create lame_tank_360 [epcl_box type=“information”]阿航的教程, 只要涉及到创建项目、命名的相关操作, 身为读者的你可以用阿航教程提供的, 你也可以自己起名! 别忘了替换代码中牵扯的名称为你自己的![/epcl_box] 初始化项目设置 现在项目是可以运行的, 但是只是Flutter默认生成的 清空./lib/main.dart, 并添加以下内容: import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; Future main() async { WidgetsFlutterBinding.

Flutter 游戏开发(flame) 05 收尾和打包(5/5)

Sunday, Apr 19, 2020

完成一个项目是世界上最爽的感觉之一. 你呕心沥血的做某件事, 最终想法变成了现实. 最后, 欢迎来到本系列的终章. 当然, 只有你一步一步跟随阿航的教程, 终章才有意义. 如果你还没有看过之前的章节, 还请你循序渐进, “一章一个脚印”! 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) Flutter 游戏开发(flame) 02 图形和动画(2/5) Flutter 游戏开发(flame) 03 界面和弹窗(3/5) Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) Flutter 游戏开发(flame) 05 收尾和打包(5/5) 本章 需具备的条件 本系列教程之前的全部要求👈 更多的资源包 – 本教程提供了资源包, 但你也可以使用自己的. 推荐资源网站Open Game Art . 我们将使用与前一部分相同的编码规范👩‍🏫 最终的资源包 这个最后的资源仅有一个图像, 但是它有5种不同的尺寸. 当游戏安装在设备上时, 图像将作为玩家APP目录的启动图标. <img src="images/01-1.jpg" alt=""> 点击图片或者此链接下载资源包! 🔴 注意: 如果你遵循本教程, 则可以使用上述资源包. 本资源包是Github上Langaw(原作者) 项目的一部分, 该项目获得CC-BY-NC-ND许可证的许可. 这意味着您可以共享、复制或者重新分发资源. 你必须在感谢中提到, 提供许可证的链接, 并标明你是否进行了更改. 你不得将资源用于商业目的. 如果混合, 转换或者构建资源, 则不能分发修改后的资源.

Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5)

Friday, Apr 17, 2020

引言 曾想过开发一款自己的电子游戏吗? 来对地方了. 本系列教程就是教你如何开发一个属于自己的2D休闲游戏. 本教程是第一章 的延续, 是针对任何水平的指南. 在这一章我们将会做一个"打鸟"类型的游戏. 这个游戏起名为"Langaw", 翻译过来就是"小飞蝇". 玩家的任务就是在小飞蝇到达垃圾堆前尽可能的多消灭小飞蝇(阿航在这里不得不吐槽下原作者, 我们为啥要保护垃圾啊真是的😒). 玩家只需要在屏幕上简单的点击就可实现击杀的效果(别用榔头砸手机🤣).这一章中, 我们暂时不会渲染图片, 所以暂时将小飞蝇展示为绿色方块, 当击中小飞蝇后, 变为红色方块并坠落至屏幕底部. 你可以在文章底部查看效果视频. 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) 本章 Flutter 游戏开发(flame) 02 图形和动画(2/5) Flutter 游戏开发(flame) 03 界面和弹窗(3/5) Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) Flutter 游戏开发(flame) 05 收尾和打包(5/5) 需具备的条件 如果你完整的学习了第一章 , 那么你应该已经准备好进行开发了🤩. 以防万一, 在这里重复一下: 本文将假设您已是一名有一定经验的开发人员, 且拥有了"程序员思维". 如果你是小白, 没关系! 本篇教程非常入门. 只要兴趣足够, 你也将成为一名"游戏开发者"✌✌. 你也需要一个配置足够的电脑, 可以运行IDE、编译并运行Android模拟器. 如果你的电脑配置不够高, 你也可以直接连接Android手机, 在真机上运行和调试. Flutter可以同时构建Android和IOS APP. 本文将围绕Android进行开发. 开发完成后, 你可以运行不同的build, 使你也可以在IOS上玩游戏. 要顺利阅读本文, 假定您已经具备以下条件👇:

Flutter 游戏开发(flame) 02 图形和动画(2/5)

Friday, Apr 17, 2020

引言 在本系列教程的这一章, 我们将会把重心放在图形和动画上. 我们在上一章《开发2D休闲游戏：消灭小飞蝇》 中创建了一款拥有交互的休闲手游. 游戏的核心不变, 但是我们需要为其增加更多的位移和更好的图像. 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) Flutter 游戏开发(flame) 02 图形和动画(2/5) 本章 Flutter 游戏开发(flame) 03 界面和弹窗(3/5) Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) Flutter 游戏开发(flame) 05 收尾和打包(5/5) 需具备的条件 本系列教程第一部分 的全部要求. 图像资源文件- 图像资源可在网上的游戏资源网站找到(比如Open Game Art ), 但是要确保感谢原作者. 代码的规则和此前的章节一致. 图像资源 正如你在上一章中看到的上图, 我们实际上已经为小飞蝇准备好了图像资源. 这是一张来自于Open Game Art的小飞蝇图片 . 它被授权为CC0意思是可用于公共域, 也就是随便用. 但是我们不会用上面的那个, 而是用这些: 点击下载 🔴 注意: 如果你遵循本教程, 则可以使用上述资源包. 本资源包是Github上Langaw(原作者) 项目的一部分, 该项目获得CC-BY-NC-ND许可证的许可. 这意味着您可以共享、复制或者重新分发资源. 你必须在感谢中提到, 提供许可证的链接, 并标明你是否进行了更改. 你不得将资源用于商业目的. 如果混合, 转换或者构建资源, 则不能分发修改后的资源. 你不得应用法律条款或技术措施, 在法律上限制他人做许可证允许的任何事情.

Flutter 游戏开发(flame) 03 界面和弹窗(3/5)

Friday, Apr 17, 2020

引言 我们在这一章将为游戏编写不同的屏幕(界面)和对话框. 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) Flutter 游戏开发(flame) 02 图形和动画(2/5) Flutter 游戏开发(flame) 03 界面和弹窗(3/5) 本章 Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) Flutter 游戏开发(flame) 05 收尾和打包(5/5) 需具备的条件 本系列教程之前的全部要求👈 更多的资源包 - 本教程提供了资源包, 但你也可以使用自己的. 推荐资源网站Open Game Art . 我们将使用与前一部分相同的编码规范👩‍🏫 如果你还没有阅读以前的部分, 你最好回顾下! 从第一章 开始. 👉在Github 或码云 上查看本章的代码. 新资源包 我们将使用此资源包, 其中包含游戏所需的第二组图片资源. <strong>点击下载资源包</strong> 🔴 注意: 如果你遵循本教程, 则可以使用上述资源包. 本资源包是Github上Langaw(原作者) 项目的一部分, 该项目获得CC-BY-NC-ND许可证的许可. 这意味着您可以共享、复制或者重新分发资源. 你必须在感谢中提到, 提供许可证的链接, 并标明你是否进行了更改. 你不得将资源用于商业目的. 如果混合, 转换或者构建资源, 则不能分发修改后的资源. 你不得应用法律条款或技术措施, 在法律上限制他人做许可证允许的任何事情. 点击此处了解有关 CC-BY-NC-ND 许可证的更多信息 阿航在这里提醒: 目前国内的版权保护做的不够好.

Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5)

Friday, Apr 17, 2020

引言 分数和高分记录是任何游戏中不可或缺的一部分. 有些游戏根据收集的金币数量计算得分, 有些基于杀敌数, 有些则基于存活时间. 同样不能忽视音效和BGM(背景音乐). 加上它们, 游戏将会蜕变🦋. 如果一个游戏无声, 它就是不完整的. 欢迎来到Flutter+Flame系列的第四章. 如果你还没有读过之前的章节, 建议你先阅读一下哦!🤭 🔴 注意: 本教程的背景音乐有些过时. 你可以先学本章教程, 之后再替换为这篇教程 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) Flutter 游戏开发(flame) 02 图形和动画(2/5) Flutter 游戏开发(flame) 03 界面和弹窗(3/5) Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) 本章 Flutter 游戏开发(flame) 05 收尾和打包(5/5) 需具备的条件 本系列教程之前的全部要求👈 更多的资源包 – 本教程提供了资源包, 但你也可以使用自己的. 推荐资源网站Open Game Art . 音效和音乐资源 - 这些也可以在游戏资源网站上找到, 比如Open Game Art . 还有专门的音频资源比如BenSound.com . 同样, 你必须查看许可并在游戏中表示感谢. 我们将使用与前一部分相同的编码规范👩‍🏫 👉在Github 或码云 上查看本章全部代码 新的资源包 这一部分中, 我们需要另一个资源包, 包含额外的图形、背景音乐和一些音效.

Flutter 游戏开发(flame) 00 Flame介绍

Thursday, Apr 16, 2020

如果你对Flutter有一定的了解, 那么应该知道它可以同时转为Android、IOS APP. 并且会在后续的版本支持Web、Mac以及Windows设备. 那么, 用Flutter开发游戏似乎是一件很棒的事情😝😝. 我在《Flutter可以开发游戏啦! Flame游戏开发框架测评 》中简单的对Flutter的Flame框架进行了测评. 有些朋友希望进一步在Flutter上发展, 并且创建属于自己的游戏. 若你是这一类人, 那么本博客应该是你不错的选择. 本教程将会把重心放在概念上, 而不是立刻制作一个精美、可上线的游戏. 如果对博客有任何问题, 欢迎在下方留言, 阿航会尽力、尽快回复🙂. 开发环境 本博客的环境一览: 环境 版本号 Flutter 1.14.6 beta Dart 2.8.0-dev.5.0 Android Studio 3.5.2 🔴注意: 检查你的环境和文中的差异, 以避免出现不兼容的情况 需具备的条件 本文将假设您已是一名有一定经验的开发人员, 且拥有了"程序员思维". 如果你是小白, 没关系! 本篇教程非常入门. 只要兴趣足够, 你也将成为一名"游戏开发者". 你也需要一个配置足够的电脑, 可以运行IDE、编译并运行Android模拟器. 如果你的电脑配置不够高, 你也可以直接连接Android手机, 在真机上运行和调试. Flutter可以同时构建Android和IOS APP. 本文将围绕Android进行开发. 开发完成后, 你可以运行不同的build, 使你也可以在IOS上玩游戏. 要顺利阅读本文, 假定您已经具备以下条件: IDE (Android Studio 或者 Microsoft Visual Studio), 以及其所需的Flutter和dart插件 Android SDK. 这是开发Android应用的必备条件. Flutter SDK. 本篇将使用Flutter以及Flame进行游戏开发. 请阅读Flutter官方文档 , 完成圈内的教程 条件3: 完成Flutter官方文档中的前三步