flutter

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官方文档中的前三步

Flutter可以开发游戏啦! Flame游戏开发框架测评

Wednesday, Apr 15, 2020

Flutter作为近年来的新兴混合开发语言, 一直备受关注. 既然Flutter这么好用, 并且宣传渲染帧率可高达60fps. 那我们是不是可以用它开发游戏呢? 答案是肯定的, 某个Flutter大神制作了一款框架, 名为Flame. 如果你没有代码基础, 想开发一款自己的游戏, 那么Flutter + Flame也许是比较好的选择. 先来看一下使用Flutter + Flame做的几款游戏吧: DarknessDungeon 地牢游戏 4 in A Row 四子棋益智游戏 嗯…看起来还不错 阿航在之前的空闲时间也使用了该框架进行了游戏开发, 体验还不错. 这个是游戏大体的框架结构: 使用Flame开发游戏, 只需要先创建Game loop(游戏循环/游戏场景), 维护好update函数(计算各种数值)以及render函数(渲染屏幕). 在这里贴出一个Flutter开发与其他游戏开发引擎的对比: Flutter + Flame Unity、虚幻等主流开发引擎 适合独立开发 很适合 适合 需要掌握的技术 仅Flutter 开发语言+软件使用 学习难度 容易 中等甚至困难 开发难度 容易 中等甚至困难 国内文档支持 较少, 阿航的技术小站将会提供中文文档 丰富 3d支持 暂无 3d支持很好 开发大型游戏 适合 非常适合 开发小型游戏 非常适合 适合 我已经在博客里写了这个框架的教程以及实例教学！ 立即访问《Flutter 游戏开发(flame) 01 初识Flame 》开始学习! 对文章有任何问题、 建议, 欢迎在评论区下方评论.

终于出书了, 竟然还免费! 闲鱼Flutter技术解析与实战大公开(附下载链接)

Sunday, Apr 12, 2020

若图片资源无法加载, 请访问我的官方博客 众所周知, 阿里是国内Flutter的技术先驱团队. 阿里比较有名的开源项目有: Flutter Go flutter 开发者帮助 APP，包含 flutter 常用 140+ 组件的demo 演示与中文文档. 官网 Fish Redux Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架， 它特别适用于构建中大型的复杂应用。 这回, 阿里闲鱼技术又出书了! 而且, 完全免费😍! 那就是: 《Flutter 技术解析与实战》 不得不说, 阿里的开源精神仍然是国内一流的.🤭🤭🤭 为了节省各位的时间, 阿航在这里直接把书的目录放出来: 看得出来, 书的内容丰富, 十分用心. 具体内容还需各位自行查阅. 下载链接 微信关注"阿航的技术小站", 发送"flutter技术解析与实战", 即刻获取网盘下载链接! 阿航的技术小站公众号 对文章有任何问题、 建议, 欢迎在评论区下方评论. 作者将会尽力、尽快回复. 最新、更多、更好的教程/博客/资讯, 欢迎访问我的官网: 阿航的技术小站

Flutter 踩坑 A package may not list itself as a dependency

Friday, Apr 10, 2020

在使用 Flutter 开发APP时, 运行flutter package get命令, 控制台报了 A package may not list itself as a dependency 的错误. 问题展示 运行flutter package get, 控制台报错如下: Because my_app depends on my_app which doesn't exist (could not find package my_app at http://pub.dartlang.org), version solving failed. pub get failed (1; could not find package my_app at http://pub.dartlang.org) exit code 1 A package may not list itself as a dependency 原因 检查你的Flutter项目, 是否与即将导入的第三方库重名. 解决方案 方案一: 修改项目名 (推荐) 修改你的项目名称.

Flutter 数据存储 SharedPreferences

Thursday, Apr 9, 2020

我们在做APP开发时, 经常会涉及到用户的 数据存储(比如保存用户登录token、用户的某些偏好设置等). 开发过Android的朋友应该知道有 SharedPreferences. 在 Flutter 中, 同样为我们提供了十分相似的(甚至名字都一样)组件, 为我们提供数据存储的能力. 本篇教程将用一个简单的小Demo, 让你完全掌握 数据存储之SharedPreferences 的用法. 若图片展示异常, 请访问我的官方博客 效果 有图有真相, 我们先来看一下我们最终的效果: SharedPreferences最终效果 仓库地址 所有源码(含注释)均已上传至开源仓库: Github 码云 准备工作 开发环境 本博客的环境一览: 环境 版本号 Flutter 1.14.6 beta Dart 2.8.0-dev.5.0 Android Studio 3.5.2 注意您的环境和文中的差异, 避免出现不兼容的情况哦! 需具备的条件 要顺利阅读本文, 假定您已经具备以下条件: 一台电脑(能同时运行IDE、APP模拟器). Android Studio 或 VSCode(或任何你喜欢的代码编辑器). Flutter开发环境. 您掌握了Flutter的开发基础(至少了解目录结构、Dart语言基本知识). 实战开始 创建Flutter项目 创建一个新的Flutter项目, 命名为my_shared_preferences_demo(您可以随意起名, 但是在下面也要替换名字为您自己的). 注意: Flutter项目名不要和引入的某个第三方库重名, 否则会报: A package may not list itself as a dependency 详见这里 代码截图: 初始化项目 清理代码 因为我们的项目过于简单, 暂时不需要进行测试.

Flutter 底部导航栏 / BottomNavigationBar

Tuesday, Apr 7, 2020

几乎99%的应用类APP都需要一个底部导航栏. 这篇教程为 Flutter 语言中, 如何写一个主流的 底部导航栏 . 并使用 Flutter 官方提供的 BottomNavigationBar 组件. 几乎每一个APP都拥有一个底部导航栏, 所以这篇教程将会十分有用🤭 效果 有图有真相, 我们本次要实现 底部导航栏 的最终效果如下🙊: 底部导航栏最终效果 仓库地址 全部代码均已上传至开源仓库(含完整注释): Github 码云 用途 虽然如此普遍, 但我们还是要更直观的看下哪里需要用到底部导航栏, 如下图: 用到底部导航栏的主流APP 可以得知, 最流行的、最主流的APP都需要导航栏 实战开始 创建导航页面 创建lib/main.dart文件, 内容: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Bottom Navigation', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( '底部导航栏演示', ) ), ); } } 这个页面就作为我们的导航页了, 继续.

Flutter 指纹验证/人脸识别

Tuesday, Apr 7, 2020

指纹验证/指纹识别 以及 人脸识别 是我们在平常使用各种APP时常用的功能, 这篇教程将使用第三方库 local_auth 来实现 Flutter 中的指纹验证以及人脸识别. 效果 有图有真相, 我们本次要实现的最终效果如下: 指纹识别图片效果展示 仓库地址 全部代码均已上传至开源仓库(含完整注释): Github 码云 用途 这个在支付相关功能中最常见了, 用于二次验证当前操作者是否为本人. 当然, 有时我们保护的不仅是现金. 实战开始 导入第三方库: local_auth 在./lib/pubspec.yaml中导入: dependencies: local_auth: ^0.6.1+3 修改MainActivity 进入./android/app/src/main/***/MainActivity.java或MainActivity.kt,导入依赖: import io.flutter.embedding.android.FlutterFragmentActivity; 修改: class MainActivity: FlutterActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } 为: class MainActivity: FlutterFragmentActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } 这里主要是修改了FlutterActivity为FlutterFragmentActivity 代码截图1 AndroidManifest.xml增加权限 进入 android/app/src/main/AndroidManifest.xml, 在<manifest>中, 添加: <uses-permission android:name="android.permission.USE_FINGERPRINT"/> 代码截图2