如何开发一个可维护、可扩展、跨平台的换装游戏，本文涵盖产品设计、龙骨动画、前端以及后端如何管理等，介绍骷髅换装游戏从0到1的实现过程。项目背景我们一直在思考如何激发学生自主学习的动力？星星靠的是课堂表现好、课后作业及时完成等，但这些学生在星星太多后就没有兴趣了。我们需要一种方法让学生的星星变得有价值，从而良性循环来激励学习。在这样的背景下，我们设计了一套这样的系统。我们的学生可以通过星星兑换不同的虚拟衣服，穿上之后，他们可以穿上这件衣服，在课前点名的时候展示在我们的IPS上，所有的学生都可以看到。同时，他们也可以收养小宠物，收养宠物。之后可以进行各种学习，比如：“编程启蒙”，让孩子感受编程的魅力。今天，我们就来说说更衣的具体实施方案。体验地址：小demo：https://activity.firstleap.cn/egretLeapDemo/index.html考虑到技术选型的跨平台性，我们需要在app、服务号、白板等场景使用，所以我们决定使用H5开发，然后对比了一些游戏引擎Cocos2d-js和Egret等，最后决定使用Egret+Dragonbones来实现。官网：https://egret.com/基本概念首先说一下骨骼动画中的一些基本概念。只有了解了这些，才能进行后续的游戏开发和系统管理设计。1)骨架骨架是骨骼的集合，骨架中至少包含一个骨骼。下图中的根和它下面的树结构就是一个典型的骨架。2)骨骼骨骼是骨骼动画的基础部分。骨骼可以旋转、缩放、平移。下图中的身体和嘴巴都是骨头。上图中root下的指针形式就是骨骼一根一根。3)Slotslot是图像的容器，是骨骼和图像之间的桥梁。换句话说，就是把换过的衣服、武器等的图片放在槽位里。一个骨骼下可以有多个槽位，一个槽位下可以有多个图片，但一次只能显示一张图片，其他图片会被隐藏。插槽中的图片也可以全部隐藏。插槽的位置、缩放和旋转都会相应地改变图片。这些插槽的属性值非常重要。每个项目的位置可能不同。比如金箍棒的坐标是x:-190,y:78,scale:0.8，其他物品的坐标可能不是这个，比如这个西瓜扇，他的属性值和那些不一样的金箍棒。所以我们后面创建新的物品（衣服，道具等）的时候，除了上传图片，这些值也需要是可编辑的。另一件值得注意的事情是插槽是分层的。比如帽子要戴在头发的上方，眼镜要戴在眼睛和眉毛的上方。但是戴上帽子后，后面会镂空一部分，看起来很假，没有立体感。在这种情况下，就需要在脑后加一个槽，用来放置帽子的后部并环绕头部。这样是不是比较自然，所以后面我们新建一个item的时候，需要填写它包含哪些slot，然后编辑每个slot的图片（影片剪辑，龙骨）。4）图文并茂，通俗易懂。换衣服的基本方式就是换图。Dragonbones支持纹理集和单个图像。5）骨骼动画的动画设计就不多说了。它与Flash非常相似。就交给我们的UI老师吧。我们只需要调用动画名称即可播放animation.play("stand");6),数据格式龙骨角色搭建完成后，选择导出。导出界面如下：你会得到3个文件，一个是纹理集，一个是纹理集的配置，一个是龙骨的骨骼数据。之后在后台创建角色时需要上传这三个文件。前端H5程序实现我们拿到文件后，应该如何在我们的页面上展示呢？这个文件也写的很清楚，不会太复杂。1)、实例化资源letdragonbonesData=RES.getRes("mobi_ske_json");让textureData=RES.getRes("mobi_tex_json");lettexture=RES.getRes("mobi_tex_png");2)、DragonBones的动画由工厂类进行管理，可以使用EgretFactory对象来处理所有的动画数据和贴图。将解析数据添加到工厂letegretFactory:dragonBones.EgretFactory=dragonBones.EgretFactory.factory;egretFactory.parseDragonBonesData(dragonbonesData);egretFactory.parseTextureAtlasData(textureData,texture);3)、提取所需骨架系统让armatureDisplay:dragonBones.EgretArmatureDisplay=egretFactory.buildArmatureDisplay("robot");4)、添加到舞台this.addChild(armatureDisplay);armatureDisplay.x=200;armatureDisplay.y=300;5)、播放动画armatureDisplay.animation.play("Walk");6)让hairSlot=armatureDisplay.armature.getSlot("hair");varhairImg:egret.Bitmap=newegret.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);制作了龙骨动画，还给了他一套新装。设计后台管理系统了解了以上这些，如何设计一个可扩展且易于维护的后台系统呢？首先，我们需要知道要管理什么。首先管理角色，我想在不同体型之间切换，比如在小豆豆和机器人之间切换，所以创建角色的时候需要上传龙骨的三个文件。体型创建好后，我们需要方便的管理体型下的服装。我们首先要添加一个类别，比如帽子、衣服、裤子、武器等等，类别应该有哪些属性呢？就拿我们前面提到的帽子来说，肯定有一个类别名称和一个缩略图，以及它下面包含的插槽。另一个重要的属性是这是否可以为空。为什么会有这样的设定？换衣服的时候，我们是点击穿上，然后点击脱下物品，所以如果不允许为空，就无法脱下。比如我们要改眼睛、嘴巴等，那我们就不能脱，不然想一想就知道了。添加完这些之后，我们就可以一个一个的添加物品了，比如我们上面提到的西瓜帽。填写我们刚刚分配的资源信息。这里的资源类型可以是图片、影片剪辑或龙骨。这样一个item就创建成功了。该层基本上由开发人员配置。匹配后，您可以添加产品。产品的概念是什么？其实就是一个待售品，增加了商品的一些属性，比如降价促销等等。这样架好货架后，就可以在前端店铺看到商品了。可以看到我们的店铺还支持套装，就是把每个类目的产品打包在一起卖。每个类别最多选择一个项目，其他属性与该项目相同。至此，我们换装游戏的前端+管理系统就基本说完了。附：龙骨导出文件：https://fcs-activity.oss-cn-beijing.aliyuncs.com/egretLeapDemo/mobbyDragonDemo.zip有兴趣的道友可以试试。
