本期我們給大家?guī)淼氖?a href="http://m.1cnz.cn/v/tag/228/" target="_blank">HarmonyOS開發(fā)者創(chuàng)新大賽決賽一等獎作者九弓子（張旭乾）的分享，希望能給你的HarmonyOS開發(fā)之旅帶來啟發(fā)~

作為一名Web開發(fā)者，深入研究了HarmonyOS兩年，關(guān)注HarmonyOS的原因很簡單，就是JS語言可以做原生手機APP開發(fā)，于去年年底上架了一款自己的HarmonyOS手機APP——XstoryMaker。

我個人比較喜歡玩天黑請閉眼、狼人殺之類的推理游戲，做這個APP的初衷其實是想做一個工具，讓視覺小說這種表達形式工具化。APP上架到華為應(yīng)用市場后，受到用戶們廣泛好評，下載量超8萬，評分達4.7分。

在參加HarmonyOS第二屆創(chuàng)新大賽時，我又用JS開發(fā)了服務(wù)卡片、Xbone 2D骨骼動畫等功能，經(jīng)過多輪激烈角逐，榮膺本次開發(fā)者創(chuàng)新大賽一等獎。

XstoryMaker華為應(yīng)用市場界面

一、XstoryMaker作品介紹

XstoryMaker是一款鴻蒙生態(tài)的應(yīng)用工具,用戶利用這款應(yīng)用在手機端即可完成簡單場景動畫劇本制作；通過內(nèi)置2D骨骼動畫引擎，能快速制作游戲動畫，且支持將動畫導(dǎo)出為JSON格式，方便更多平臺運行與再創(chuàng)作。

說明：什么是2D骨骼動畫？

2D骨骼動畫主要是為了解決2D平面游戲動畫制作中的一個古老的痛點，讓骨骼能夠自由發(fā)生形變運動。

該APP主要能實現(xiàn)以下功能：

1. 劇情設(shè)計功能

(1) 劇本快速排序+角色倉庫

通過劇幕切換的思路，設(shè)計劇情流水與人物對話

人物倉庫快速復(fù)用

(2) 分支劇情藍圖設(shè)計

抽象劇幕為圖形模塊

分支器出入口聯(lián)通劇情轉(zhuǎn)場

劇情設(shè)計功能

2.2D骨骼動畫制作

用戶在手機端即可完成PNG美術(shù)素材的切圖組合及動畫制作，Xbone 2D動畫引擎提供了2D動畫在手機端制作的可能與工作流程。

(1)動畫素材姿勢擺放：通過觸摸的人機交互過程完成一個動畫所需素材的擺放組合與圖層管理。

(2)圖片快速網(wǎng)格化：美術(shù)素材可以通過網(wǎng)格化操作自動快速識別透明區(qū)域進行主體識別。

(3)骨骼綁定形變：通過觸摸即可完成對網(wǎng)格素材的權(quán)重綁定，不同骨骼作用于綁定的頂點，移動頂點對圖形進行類似肌肉與骨骼的運動設(shè)計。

(4)動畫關(guān)鍵幀插入與預(yù)覽：輕觸時間軸選擇不同的時間軸，擺放畫面到新的位置，引擎會自動為用戶進行補幀與動畫預(yù)覽的操作。

2D骨骼動畫引擎

通過XstoryMaker生產(chǎn)的動畫具備體積更小、產(chǎn)出更快、可視化分支走向等優(yōu)勢；同時利用HarmonyOS分布式特性可以分享作品給身邊的朋友。

二、HarmonyOS技術(shù)應(yīng)用

在開發(fā)XstoryMaker的過程中，最讓我印象最深的是“分布式文件”開發(fā)能力及“ArkUI”開發(fā)框架。

1. 分布式文件分布式文件是我開發(fā)過程中被驚艷的系統(tǒng)開發(fā)能力，在這樣的設(shè)計下，只需要將文件通過簡單的轉(zhuǎn)存，另一臺設(shè)備就可以像本機一樣輕松訪問。 我在開發(fā)XstoryMaker關(guān)于視覺小說的分布式流轉(zhuǎn)的時候根本沒有感受到這是兩臺設(shè)備在做數(shù)據(jù)傳輸?shù)拈_發(fā)，兩個端的開發(fā)代碼只需要按照一個設(shè)備的資源訪問考慮方式就可以，不需要太多關(guān)于網(wǎng)絡(luò)環(huán)境與數(shù)據(jù)索引的開發(fā)，這大大提高了多設(shè)備數(shù)據(jù)訪問的開發(fā)效率，在多設(shè)備互聯(lián)互通，萬物互聯(lián)的開發(fā)場景下，HarmonyOS太好用了。

XstoryMaker關(guān)于分布式文件運作機制示意圖

說明：分布式文件運作機制示意圖

各設(shè)備相同的APP都有獨立的分布式文件存儲空間，在進行分布式文件開發(fā)的時候，考慮的對象是APP在配網(wǎng)環(huán)境下的獨立軟件設(shè)計，系統(tǒng)中關(guān)于分布式文件的框架同樣提供了新增訂閱發(fā)布的設(shè)計，從而不需要考慮其他網(wǎng)絡(luò)與文件路徑問題。

2. ArkUI

市面上從Flash年代開始，就一直有著2D骨骼動畫的解決方案。主要思路是通過用戶交互給需要變形的圖像綁定一個抽象的“骨骼”，通過移動骨骼將圖片變形。聽起來好像不是很復(fù)雜，但目前來說并沒有任何一個具體的圖像編輯軟件將該功能徹底開源。所以我在參加HarmonyOS應(yīng)用創(chuàng)新大賽的時候，在XstoryMaker中加入了Xbone 2D骨骼動畫的功能。

Xbone動畫展示

在HarmonyOS系統(tǒng)內(nèi)開發(fā)這樣的圖形圖像功能，使用ArkUI來實現(xiàn)，Canvas組件大部分API都是W3C標(biāo)準(zhǔn)，可以直接調(diào)用，大大減少了代碼的輸入；同時ArkUI的實時界面預(yù)覽功能，讓開發(fā)效果視覺化呈現(xiàn)，避免了重復(fù)開發(fā)，有效幫助開發(fā)者們提升應(yīng)用界面的開發(fā)效率。

三、Xbone動畫制作教程

1. 華為應(yīng)用市場下載APP：XstoryMaker。2. 進入應(yīng)用首頁新建Xbone，選擇資源（推薦選擇png格式美術(shù)素材）。3. 輸入“項目名稱”，進入Xbone動畫制作場景。4. 簡單的位移與縮放。

位移與縮放操作

5. 簡單的骨骼配置：如果沒有美術(shù)素材，應(yīng)用內(nèi)默認(rèn)存放了一套SD人物的素材包。存儲位置為：應(yīng)用首頁 --> Xbone項目列表，第一個項目為網(wǎng)友贊助，點擊“進入預(yù)覽”，骨骼的配置需要提前將圖片元素放置畫布，并且完成網(wǎng)格化。

骨骼配置操作

6. 骨骼動畫：骨骼動畫的關(guān)鍵幀存儲，只需要在擺放骨骼到需要的位置后“插入關(guān)鍵幀”即可，Xbone動畫引擎會幫助你完成兩幀之間骨骼的動畫補幀。

說明：什么是關(guān)鍵幀？

計算機動畫術(shù)語，指角色或者物體運動變化中關(guān)鍵動作所處的那一幀，相當(dāng)于二維動畫中的原畫。

插入關(guān)鍵幀

具體制作教程請查看開源地址：

https://gitee.com/harmonyos/event/tree/digixActivity2022/xboneruntime

目前XstoryMaker已上架了手機端APP，手機端的目的是讓用戶快速創(chuàng)作；想要生產(chǎn)更精細(xì)的作品，桌面端必不可少，XstoryMaker的PC端及寬屏設(shè)備已經(jīng)在開發(fā)，通過HarmonyOS分布式，相信可以提供一套更順暢的數(shù)據(jù)創(chuàng)作流程。

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

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