本期我們給大家?guī)?lái)的是HarmonyOS開(kāi)發(fā)者創(chuàng)新大賽決賽一等獎(jiǎng)作者九弓子（張旭乾）的分享，希望能給你的HarmonyOS開(kāi)發(fā)之旅帶來(lái)啟發(fā)~

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

我個(gè)人比較喜歡玩天黑請(qǐng)閉眼、狼人殺之類(lèi)的推理游戲，做這個(gè)APP的初衷其實(shí)是想做一個(gè)工具，讓視覺(jué)小說(shuō)這種表達(dá)形式工具化。APP上架到華為應(yīng)用市場(chǎng)后，受到用戶(hù)們廣泛好評(píng)，下載量超8萬(wàn)，評(píng)分達(dá)4.7分。

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

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

一、XstoryMaker作品介紹

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

說(shuō)明：什么是2D骨骼動(dòng)畫(huà)？

2D骨骼動(dòng)畫(huà)主要是為了解決2D平面游戲動(dòng)畫(huà)制作中的一個(gè)古老的痛點(diǎn)，讓骨骼能夠自由發(fā)生形變運(yùn)動(dòng)。

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

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

(1) 劇本快速排序+角色倉(cāng)庫(kù)

通過(guò)劇幕切換的思路，設(shè)計(jì)劇情流水與人物對(duì)話(huà)

人物倉(cāng)庫(kù)快速?gòu)?fù)用

(2) 分支劇情藍(lán)圖設(shè)計(jì)

抽象劇幕為圖形模塊

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

劇情設(shè)計(jì)功能

2.2D骨骼動(dòng)畫(huà)制作

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

(1)動(dòng)畫(huà)素材姿勢(shì)擺放：通過(guò)觸摸的人機(jī)交互過(guò)程完成一個(gè)動(dòng)畫(huà)所需素材的擺放組合與圖層管理。

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

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

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

2D骨骼動(dòng)畫(huà)引擎

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

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

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

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

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

說(shuō)明：分布式文件運(yùn)作機(jī)制示意圖

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

2. ArkUI

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

Xbone動(dòng)畫(huà)展示

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

三、Xbone動(dòng)畫(huà)制作教程

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

位移與縮放操作

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

骨骼配置操作

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

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

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

插入關(guān)鍵幀

具體制作教程請(qǐng)查看開(kāi)源地址：

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

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

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

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