简单3步,OpenHarmony上跑起ArkUI分布式小游戏 精华
转自:OpenAtom OpenHarmony
在9月30日更新的 OpenHarmony3.0 LTS 上,标准系统新增支持了方舟开发框架(ArkUI)、分布式组网和 FA 跨设备迁移能力等新特性,因此我们结合了这三种特性使用 ets 开发了一款如下动图所示传炸弹应用。
打开应用在通过邀请用户进行设备认证后,用户须根据提示完成相应操作,然后通过分布式流转实现随机传递炸弹给下一位用户的效果。那么这样一款传炸弹应用如何进行开发呢?
完整的项目结构目录如下:
我们可以分为如下 3 步:编写声明式 UI 界面、添加分布式能力和编写游戏逻辑。
一、编写声明式UI界面
1. 新增工程
在 DevEco Studio 中点击 File -> New Project ->Standard Empty Ability->Next,Language 选择 ETS 语言,最后点击 Finish 即创建成功。
图1 新建工程
2. 编写游戏页面
图2 游戏界面效果图
效果图如上可以分为两部分:
- 顶部状态提示栏
首先在 @entry 组件入口 build() 中使用 Stack 作为容器,达到图片和文字堆叠的效果;
接着依次写入 Image 包裹的两个 Text 组件;
- 中间游戏炸弹九宫格区域
使用 Grid 网格容器来编写九宫格区域;
在 GridItem 中 Stack (容器依次添加方块背景图片和炸弹图片;
在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的位置;
通过 onClick 点击事件和 GestureGroup 组合手势加入单击、双击和长按的监听事件;
3. 添加弹窗
- 创建规则游戏弹窗
1)通过 @CustomDialog 装饰器来创建自定义弹窗,使用方式可参考:
2)规则弹窗效果如下,弹窗组成由两个 Text 和两个 Image 竖向排列组成,所以我们可以在 build()下使用 Column 容器来包裹,组件代码如下;
图3 游戏规则
3)在 @entry 创建 CustomDialogController 对象并传入弹窗所需参数,后面可通过该对象 open() 和 close() 方法进行打开和关闭弹窗;
- 创建游戏失败弹窗,并添加动画效果
图4 游戏失败弹窗动画
1)编写弹窗布局:将游戏失败文本、炸弹图片和再来一局按钮图片放置于 Column 容器中;
2)用变量来控制动画起始和结束的位置:用 Flex 容器包裹炸弹图片,并用 @State 装饰变量 toggle,通过变量来动态修改 [Flex]的direction 属性;
3)设置动画效果:使用 animateTo 显式动画接口炸弹位置切换时添加动画,并且设置定时器定时执行动画;
二、添加分布式流转
分布式流转需要在同一网络下通过 DeviceManager 组件进行设备间发现和认证,获取到可信设备的 deviceId 调用 FeatureAbility.startAbility(parameter),即可把应用程序流转到另一设备。
原本分布式流转应用流程如下:
- 创建 DeviceManager 实例;
- 调用实例的 startDeviceDiscovery(),开始设备发现未信任设备;
- 设置设备状态监听 on('deviceStateChange',callback),监听设备上下线状态;
- 设置设备状态监听 on('deviceFound',callback),监听设备发现;
- 传入未信任设备参数,调用实例 authenticateDevice 方法,对设备进行 PIN 码认证;
- 若是已信任设备,可通过实例的 getTrustedDeviceListSync() 方法来获取设备信息;
- 将设备信息中的 deviceId 传入featureAbility.startAbility 方法,实现流转;
- 流转接收方可通过featureAbility.getWant() 获取到发送方携带的数据;
- 注销设备发现监听 off('deviceFound');
- 注销设备状态监听 off('deviceStateChange');
项目中将上面设备管理封装至 RemoteDeviceManager,通过 RemoteDeviceManager 的四个方法来动态维护 deviceList 设备信息列表。
图5 分布式流转
项目实现分布式流转只需如下流程:
1. 创建RemoteDeviceManager实例
1)导入 RemoteDeviceManager
2)声明 @Provide 装饰的设备列表变量 deviceList,和创建 RemoteDeviceManager 实例。
2. 刷新设备列表
在生命周期 aboutToAppear 中,调用刷新设备列表和开始发现设备。
aboutToAppear 定义:函数在创建自定义组件的新实例后,在执行其 build 函数之前执行。
3. 设备认证
4. 跨设备流转
从 deviceList 中获取设备列表在线的设备 Id,通过 featureAbility.startAbility 进行流转。
5. 注销监听
在声明周期 aboutToDisappear 进行注销监听。
aboutToDisappear 定义:函数在自定义组件析构消耗之前执行。
三、编写游戏逻辑
1. 开始游戏
2. 判断输赢
编写判断逻辑,用于不同的点击事件中调用。
3. 游戏失败
游戏失败,弹出游戏失败弹框。
四、项目下载和导入
项目仓库地址:
https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame
1)git下载
2)项目导入
打开 DevEco Studio,点击 File->Open->下载路径/FA/Entertainment/BombGame
五、约束与限制
1. 设备编译约束
- 获取OpenHarmony源码(OpenHarmony 版本须 3.0 LTS 以上):https://www.openharmony.cn/pages/0001000202/#%E5%AE%89%E8%A3%85%E5%BF%85%E8%A6%81%E7%9A%84%E5%BA%93%E5%92%8C%E5%B7%A5%E5%85%B7
- 安装开发板环境:https://www.openharmony.cn/pages/0001000400/#hi3516%E5%B7%A5%E5%85%B7%E8%A6%81%E6%B1%82
- 开发板烧录:https://www.openharmony.cn/pages/0001000401/#%E4%BD%BF%E7%94%A8%E7%BD%91%E5%8F%A3%E7%83%A7%E5%BD%95
2. 应用编译约束
- 参考应用开发快速入门:https://www.openharmony.cn/pages/00090000/
- 集成开发环境(DevEco Studio 3.0.0.601版本以上)下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta
- OpenHarmony SDK 3.0.0.0 以上;
666
欢迎围观学习~
请问下,实现分布式流转必须使用ets吗,如果用arkui中传统的类web的js语法,是不是无法直接实现分布式,必须借助Java?
您好,这一类HarmonyOS开发问题,建议您在HarmonyOS官方论坛(传送门:https://developer.huawei.com/consumer/cn/forum/block/application)发帖提问哈,HarmonyOS论坛有专门的华为资深工程师为大家解答开发问题,可以给您更准确、专业的回复噢。