Implementing a Maintainable, Scalable Cross‑Platform Dress‑Up Game with Egret and DragonBones

Project background – To motivate students to earn virtual "Mobi Stars" with real value, the MobiShow platform was created, allowing learners to exchange stars for virtual clothing and pets, which can be displayed during class attendance.

Technical selection – Because the solution must run on apps, service accounts, and whiteboard terminals, an H5 approach was chosen. After comparing Cocos2d‑js and Egret, the team settled on Egret combined with DragonBones for skeletal animation.

Basic concepts of skeletal animation – The article introduces the key elements: Skeleton (a collection of bones), Bone (rotatable, scalable, translatable units), Slot (container for images such as clothing or weapons, with position, scale, rotation, and layering), Image (textures used by slots), and Animation (playable sequences defined in DragonBones).

Data format – Exporting a DragonBones character yields three files: a texture atlas, its configuration, and the skeleton data. These three files must be uploaded to the backend when creating a new character.

Frontend H5 implementation – After obtaining the files, the following steps display the animation on a page:

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

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

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

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

armatureDisplay.animation.play("Walk");

To change a piece of equipment, the slot is retrieved and a new bitmap is set:

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);

Backend management system – The backend stores character assets (the three DragonBones files) and defines categories such as hat, clothing, pants, weapon, each with attributes like thumbnail, associated slots, and an "allow empty" flag. Items are created by linking resources (images, video clips, or DragonBones data) to slots. Products bundle these items with pricing, discounts, and can be grouped into sets for the in‑app shop.

Conclusion and resources – The article finishes with links to the demo source code repository, the DragonBones export zip, and a brief author bio (Yao Huitao, Front‑end Engineer at TAL). It invites readers to explore the implementation and adapt it for their own projects.