【开发者说】栏目是为HarmonyOS开发者提供的展现和分享平台，在这里，大家能够发表本人的技术洞察和见解，也能够展现本人的开发心得和成绩。欢送大家踊跃投稿，HarmonyOS开发者公众号后盾回复【投稿】，即可取得投稿渠道。期待你们的分享~
本期咱们给大家带来的是HarmonyOS开发者翻新大赛决赛一等奖作者九弓子（张旭乾）的分享，心愿能给你的HarmonyOS开发之旅带来启发~

作为一名Web开发者，深入研究了HarmonyOS两年，关注HarmonyOS的起因很简略，就是JS语言能够做原生手机APP开发，于去年年底上架了一款本人的HarmonyOS手机APP——XstoryMaker。
我集体比拟喜爱玩天黑请闭眼、狼人杀之类的推理游戏，做这个APP的初衷其实是想做一个工具，让视觉小说这种表达形式工具化。APP上架到华为利用市场后，受到用户们宽泛好评，下载量超8万，评分达4.7分。
在加入HarmonyOS第二届翻新大赛时，我又用JS开发了服务卡片、Xbone 2D骨骼动画等性能，通过多轮强烈角逐，荣膺本次开发者翻新大赛一等奖。

      XstoryMaker华为利用市场界面

一、XstoryMaker作品介绍

XstoryMaker是一款鸿蒙生态的利用工具,用户利用这款利用在手机端即可实现简略场景动画剧本制作；通过内置2D骨骼动画引擎，能疾速制作游戏动画，且反对将动画导出为JSON格局，不便更多平台运行与再创作。
阐明：什么是2D骨骼动画？
2D骨骼动画次要是为了解决2D立体游戏动画制作中的一个古老的痛点，让骨骼可能自在产生形变静止。
该APP次要能实现以下性能：
1. 剧情设计性能
(1) 剧本疾速排序+角色仓库
通过剧幕切换的思路，设计剧情流水与人物对话
人物仓库疾速复用
(2) 分支剧情蓝图设计
形象剧幕为图形模块
分支器出入口联通剧情转场

             剧情设计性能

2. 2D骨骼动画制作
用户在手机端即可实现PNG美术素材的切图组合及动画制作，Xbone 2D动画引擎提供了2D动画在手机端制作的可能与工作流程。
(1) 动画素材姿态摆放：通过触摸的人机交互过程实现一个动画所需素材的摆放组合与图层治理。
(2) 图片疾速网格化：美术素材能够通过网格化操作主动疾速辨认通明区域进行主体辨认。
(3) 骨骼绑定形变：通过触摸即可实现对网格素材的权重绑定，不同骨骼作用于绑定的顶点，挪动顶点对图形进行相似肌肉与骨骼的静止设计。
(4) 动画关键帧插入与预览：轻触时间轴抉择不同的时间轴，摆放画面到新的地位，引擎会主动为用户进行补帧与动画预览的操作。

            2D骨骼动画引擎

通过XstoryMaker生产的动画具备体积更小、产出更快、可视化分支走向等劣势；同时利用HarmonyOS分布式个性能够分享作品给身边的敌人

二、HarmonyOS技术利用

在开发XstoryMaker的过程中，最让我印象最深的是“分布式文件”开发能力及“ArkUI”开发框架。
1. 分布式文件
分布式文件是我开发过程中被惊艳的零碎开发能力，在这样的设计下，只须要将文件通过简略的转存，另一台设施就能够像本机一样轻松拜访。
我在开发XstoryMaker对于视觉小说的分布式流转的时候基本没有感触到这是两台设施在做数据传输的开发，两个端的开发代码只须要依照一个设施的资源拜访思考形式就能够，不须要太多对于网络环境与数据索引的开发，这大大提高了多设施数据拜访的开发效率，在多设施互联互通，万物互联的开发场景下，HarmonyOS太好用了。

XstoryMaker对于分布式文件运作机制示意图

阐明：分布式文件运作机制示意图
各设施雷同的APP都有独立的分布式文件存储空间，在进行分布式文件开发的时候，思考的对象是APP在配网环境下的独立软件设计，零碎中对于分布式文件的框架同样提供了新增订阅公布的设计，从而不须要思考其余网络与文件门路问题。
2. ArkUI
市面上从Flash年代开始，就始终有着2D骨骼动画的解决方案。次要思路是通过用户交互给须要变形的图像绑定一个形象的“骨骼”，通过挪动骨骼将图片变形。听起来如同不是很简单，但目前来说并没有任何一个具体的图像编辑软件将该性能彻底开源。所以我在加入HarmonyOS利用翻新大赛的时候，在XstoryMaker中退出了Xbone 2D骨骼动画的性能。

            Xbone动画展现

在HarmonyOS零碎内开发这样的图形图像性能，应用ArkUI来实现，Canvas组件大部分API都是W3C规范，能够间接调用，大大减少了代码的输出；同时ArkUI的实时界面预览性能，让开发成果视觉化出现，防止了反复开发，无效帮忙开发者们晋升利用界面的开发效率。

三、Xbone动画制作教程

1. 华为利用市场下载APP：XstoryMaker。
2. 进入利用首页新建Xbone，抉择资源（举荐抉择png格局美术素材）。
3. 输出“项目名称”，进入Xbone动画制作场景。
4. 简略的位移与缩放。

              位移与缩放操作

5. 简略的骨骼配置：如果没有美术素材，利用内默认寄存了一套SD人物的素材包。存储地位为：利用首页 --> Xbone我的项目列表，第一个我的项目为网友资助，点击“进入预览”，骨骼的配置须要提前将图片元素搁置画布，并且实现网格化。

                骨骼配置操作

6. 骨骼动画：骨骼动画的关键帧存储，只须要在摆放骨骼到须要的地位后“插入关键帧”即可，Xbone动画引擎会帮忙你实现两帧之间骨骼的动画补帧。
阐明：什么是关键帧？
计算机动画术语，指角色或者物体静止变动中要害动作所处的那一帧，相当于二维动画中的原画。

插入关键帧
具体制作教程请查看开源地址：https://gitee.com/harmonyos/e...
目前XstoryMaker已上架了手机端APP，手机端的目标是让用户疾速创作；想要生产更精密的作品，桌面端必不可少，XstoryMaker的PC端及宽屏设施曾经在开发，通过HarmonyOS分布式，置信能够提供一套更顺畅的数据创作流程。
最初，作为一名深入研究HarmonyOS零碎两年，并开发上架了本人APP的开发者，我粗浅的感触到HarmonyOS在开发效率、多端互联等方面的先进性，值得开发者们退出进来！