本期我們給大家帶來的是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/event/tree/digixActivity2022/xboneruntime

目前XstoryMaker已上架了手機端APP，手機端的目的是讓用戶快速創作；想要生產更精細的作品，桌面端必不可少，XstoryMaker的PC端及寬屏設備已經在開發，通過HarmonyOS分布式，相信可以提供一套更順暢的數據創作流程。

最后，作為一名深入研究HarmonyOS系統兩年，并開發上架了自己APP的開發者，我深刻的感受到HarmonyOS在開發效率、多端互聯等方面的先進性，值得開發者們加入進來！

【開發者說】欄目是為HarmonyOS開發者提供的展示和分享平臺，在這里，大家可以發表自己的技術洞察和見解，也可以展示自己的開發心得和成果。