关闭

HTML5游戏制作之路_09_2D骨骼动画工具DragonBone

标签: html5游戏制作egret2d
431人阅读 评论(0) 收藏 举报
分类:

/*

我目前使用的egret版本为2.5

*/

DragonBone是制作动画或骨骼动画的工具,具体使用教程地址:DragonBone

很简单很暴力,省去了大量的时间。

我在这里主要介绍如何使用DragonBone导出后的文件,将其应用在程序中。

一.先让骨骼动画动起来~~

献上带啊吗:

{
	"resources": [
		{
			"name": "bgImage",
			"type": "image",
			"url": "assets/bg.jpg"
		},
		{
			"name": "egretIcon",
			"type": "image",
			"url": "assets/egret_icon.png"
		},
		{
			"name": "description",
			"type": "json",
			"url": "config/description.json"
		},
		{
		  "name": "NewDragon",
		  "type": "json",
		  "url": "assets/NewDragon.json"
		},
		{
		  "name": "texturejson",
		  "type": "json",
		  "url": "assets/texture.json"
		},
		{
		  "name": "texture",
		  "type": "image",
		  "url": "assets/texture.png"
		}
	],
	"groups": [
		{
			"name": "preload",
			"keys": "bgImage,egretIcon"
		},
		{
		  "name": "drangonbone",
		  "keys": "NewDragon,texturejson,texture"
		}
	]
}

/**
 * Created by 13641 on 2015/11/20.
 */
class DragonBone extends egret.DisplayObjectContainer{

    public constructor(){
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.mainFunc,this);
    }

    private mainFunc():void{

        this.loadDragonResource();
    }

    /**
     * 加载组
     */
    private loadDragonResource():void{
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.loadDragonComplete,this);
        RES.loadConfig("resource/default.res.json","resource/");
        RES.loadGroup("drangonbone");
    }

    /**
     * 加载dragonbone游戏资源
     * @param event 组加载完成事件
     */
    public loadDragonComplete(event:RES.ResourceEvent):void{
        var skeletonData = RES.getRes("NewDragon");
        var texturejsondata = RES.getRes("texturejson");
        var texturepng = RES.getRes("texture");

        /*
            将以上资源添加到factory中
        */
        //创建dragonbone显示
        var factory = new dragonBones.EgretFactory();
        //解析dragon的json数据,然后加载到工厂中
        factory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(skeletonData));
        // 添加一个纹理集
        factory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texturepng,texturejsondata));

        //建立骨骼框架,参数为他命名。返回一个armature类型,骨架负责动画的显示和动画的播放
        var armature = factory.buildArmature("armatureName");

        //armaturedisplay用户显示
        //armature用于控制播放
        var armatureDisplay = armature.getDisplay();
        this.addChild(armatureDisplay);
        armatureDisplay.x = 300;
        armatureDisplay.y = 360;
        //对此骨架进行时间控制
        dragonBones.WorldClock.clock.add(armature);
        armature.animation.gotoAndPlay("stand",0,-1,0);
        egret.Ticker.getInstance().register(function(advancedTime){
            dragonBones.WorldClock.clock.advanceTime(advancedTime/1000);
        },this)
    }

}
显示结果,

二.关于其中很重要的Ticker类

在2.5中已经不推荐使用了。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39003次
    • 积分:1057
    • 等级:
    • 排名:千里之外
    • 原创:67篇
    • 转载:8篇
    • 译文:0篇
    • 评论:9条
    最新评论