摩比秀換裝遊戲系統設計與實現

時間 2020-06-15

標籤換裝遊戲系統設計實現欄目遊戲简体版

原文原文鏈接

如何開發一個可維護性，可擴展，跨平臺的換裝遊戲呢，本文從產品設計、龍骨動畫、前端再到後端如何管理等角度，來介紹骨骼換裝遊戲從0到1的實現過程。

項目背景

咱們一直在思考，如何能激勵學員自主學習的積極性？從上課表現良好、app上及時完成課後練習等途徑掙的星星，但這些學員得到的星星多了也沒有興趣了，咱們須要一個途徑能讓學員的星星有價值，這樣就能產生一個良性的循環來激勵學習。這樣的背景下，咱們設計了一套這樣的系統。javascript

咱們的學員能夠在經過星星來兌換不一樣虛擬服裝，穿上後在課前點名環節就能夠穿着這件衣服展現在咱們的IPS上，同窗們均可以看到，同時還能夠領養小寵物，領養寵物以後就能夠進行各類各樣的學習了，好比：「編程啓蒙」，讓孩子們感覺程序的魅力。html

今天就來講一說換裝這一塊具體的實現方案。前端

體驗地址：java

小demo ：https://activity.firstleap.cn/egretLeapDemo/index.html編程

技術選型

咱們考慮到跨平臺性，須要在App裏、服務號、白板端等場景下使用，決定用H5來開發，而後又對比了一些遊戲引擎Cocos2d-js和Egret等,最終決定採用Egret+Dragonbones來實現。json

官網：https://egret.com/後端

基本概念

首先來講一下骨骼動畫裏的一些基本概念，只有瞭解了這些，才能進行後面的遊戲開發、系統管理的設計等。微信

1）骨架

骨架是骨骼的集合，骨架中至少包含一個骨骼。
下圖中的root及其如下的樹狀結構即是一個典型的骨架。app

2）骨骼

骨骼是骨骼動畫的基本組成部分。骨骼能夠旋轉，縮放，平移。下圖中的body、mouth等都是骨骼。
上圖中root下的指針形式的就是一個個的骨骼。運維

3）插槽

插槽是圖片的容器，是骨骼和圖片的橋樑。換句話來講就是換裝的衣服、武器等的圖片是放在插槽裏的。一個骨骼下面能夠有多個插槽，一個插槽下能夠有多張圖片，但同一時間只能有一張圖片處於顯示狀態，其餘的圖片會處於隱藏狀態。插槽內的圖片也能夠所有處於隱藏狀態。插槽的位置，縮放，旋轉那麼圖片也跟着進行相應的變化。

插槽的這幾個屬性值很重要，每個物品的位置可能都不是同樣的，好比金箍棒這個的座標是x: -190,y:78,scale:0.8,其餘的物品的座標可能就不是這個了，好比這個西瓜扇子，

他的這幾個屬性值就和金箍棒的不同了。因此咱們後邊新建物品（服裝、道具等）的時候，除了傳圖片這幾個值也是要可編輯的。

另一個值得注意的是插槽是有層級的，好比說，帽子按道理講是要在頭髮的上面，眼鏡是要在眼睛眉毛的上面等。

可是這個帽子放上來後呢，後面會鏤空一部分，看上去假假的，不立體。這種狀況就須要在腦殼的後面在加一個插槽，用來放帽子的後面部分，把腦殼圍起來。

這樣是否是就天然多了，因此咱們後邊新建一個物品的時候，須要填寫他都包含了哪些插槽，而後對每一個插槽的圖片（影片剪輯、龍骨）進行編輯。

4）圖片

圖片就很好理解啦，換裝基本的就是經過更換圖片的方式了。Dragonbones支持紋理集和單個的圖片。

5）骨骼動畫

動畫設計這塊就很少說了，跟Flash很相似，交給咱們的UI老師就好了，咱們只須要調用動畫名播放就能夠了

animation.play("stand");

6）數據格式

那一個龍骨的人物建好以後選擇導出，導出界面以下：

會獲得3個文件，一個是紋理集，一個是紋理集的配置，一個是龍骨的骨骼數據。以後後臺建立角色的時候就須要上傳這三個文件。

前端H5程序實現

咱們拿到文件後，該怎麼顯示到咱們的頁面上呢？這個文檔裏也寫的挺清楚了，不算太複雜。

1)實例化資源

let dragonbonesData = RES.getRes( "mobi_ske_json" );  
let textureData = RES.getRes( "mobi_tex_json" );  
let texture = RES.getRes( "mobi_tex_png" );

2)DragonBones動畫由工廠類進行管理，可使用EgretFactory對象來處理全部的動畫數據以及貼圖。解析數據添加進工廠

let egretFactory: dragonBones.EgretFactory = dragonBones.EgretFactory.factory;
egretFactory.parseDragonBonesData(dragonbonesData);  
egretFactory.parseTextureAtlasData(textureData, texture);

3)提取出須要的骨架系統

let armatureDisplay: dragonBones.EgretArmatureDisplay = egretFactory.buildArmatureDisplay("robot");

4)添加到舞臺

this.addChild(armatureDisplay);
armatureDisplay.x = 200;
armatureDisplay.y = 300;

5)播放動畫

armatureDisplay.animation.play("Walk");

6)換裝

let hairSlot = armatureDisplay.armature.getSlot("hair");            
var hairImg:egret.Bitmap = new egret.Bitmap();            
hairImg.texture = RES.getRes("yang_png" );            
hairImg.x = hairSlot.display.x;            
hairImg.y = hairSlot.display.y;            
hairImg.anchorOffsetX = hairImg.width/2;            
hairImg.anchorOffsetY = hairImg.height/2;            
hairSlot.setDisplay(hairImg);

到這裏就顯示出來咱們剛創建的一個龍骨動畫，而且給他換了件行頭。