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

原创 2015年11月20日 05:08:59

/*

我目前使用的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中已经不推荐使用了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

java工程师走向前端学习心路历程(二)

no.3、温故而知新——HTML布局篇  第一篇中写了一些java工程师需要兼顾做前端开发需要准备的工具、知识库,并且分享了一个实例。这也是我在学习过程中亲身经历的一些东西,希望对大家有用!前期...

HTML5之Cancas基础篇

/* W3c:http://www.w3school.com.cn/tags/html_ref_canvas.asp 推荐本书:Html5游戏编程和新技术与实战 使用的工具:DW 在每个实例中可能会出...

HTML5游戏制作之路_04_来做个动画吧

/* 使用的egret版本:2.5 编辑器采用webstrom */ 通过上一篇03成功可以加载资源,这一篇我们在上一篇的基础上,通过位图来搞一个动画。 如果想参看注释请回到上一篇。 直接...

HTML5游戏制作之路_07_egret的声音播放的三种方式

/* 我目前使用的版本是egret2.5 */ egret支持的声音格式是mp3.获取资源的方式和之前的一样。 1. 使用URLLoader方式加载 /** * 这是使用URL方法加载...

HTML5游戏制作之路_06_egret关于精灵表单spritesheet

/* 采用位图的版本:2.5 采用的编辑器webstrom */ 精灵表单就是将很多图片合成在一张图片中,然后 我们可以获取其中的任何一张图,这样做可以加快游戏的图片加载,类似于unity‘中的图集,...

HTML5游戏制作之路_08_egret对于声音的控制

/* egret版本:2.5 */ 一.点击发声 /** * 这是使用RES方法加载。 * Created by 13641 on 2015/11/19. */ class So...

HTML5游戏制作之路_03_egret的资源加载机制

/* 前一篇的链接: 使用的egret版本为2.5 */ h5支持矢量图(目测),自带的那个例子可以自由缩放,可以自适应(这让我很爽)。在egret里面叫bitmap(位图)实际上这个名称并不...

HTML5游戏制作之路_02_剖析项目目录结构&&在浏览器中输出helloworld

/* 上一篇:h5游戏制作之路1 声明: 使用的egret游戏引擎版本为2.5. 编辑器用的webstrom */ 复习一下新建一个工程: 1.打开node.js的cmd 2....

HTML5游戏制作之路_06_egret文本及相关属性

一.创建文本 显示结果: 二.添加一些属性 三.绘制矩形并添加文字描边 /** * Created by 13641 on 2015/11/19. */ class Textt...

HTML5游戏制作之路_01_白鹭引擎&&相关必要的配置安装&&创建第一个H5项目

/* html5相关的信息我都不想说了,没写过网页,新接触,搞游戏直接从引擎入手吧,也有兴趣,以后有机会慢慢往底层走。 */ 一. 白鹭引擎官网:http://www.egret-labs.org/ ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_09_2D骨骼动画工具DragonBone
举报原因:
原因补充:

(最多只允许输入30个字)