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

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

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

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

DragonBones导出骨骼动画供cocos2d-x使用

先下载cocos2d-x对应的  DragonBones,原版不能用。 按网上教程说的装完DragonBones插件到FlashPro上之后,打开软件发现窗口->其他面板里没有Skeleto...
  • GrimRaider
  • GrimRaider
  • 2013年12月17日 11:39
  • 3056

quick-cocos2dx 骨骼动画制作 使用dragonbones插件

本人小菜鸟第一次写博客,写的不好请大婶勿喷 公司的项目要用骨骼动画,以前没有接触过骨骼动画就在quick群里问了下怎么做。还好有人回我,并且给了我一个博客地址。http://zengrong.net...
  • zuihoudeliulang
  • zuihoudeliulang
  • 2014年02月28日 20:53
  • 3945

【Unity&DragonBones】像素角色人物骨骼动画教程(一)PS文件如何导入DragonBones

使用到三个工具Unity,DragonBones,PS 首先使用PS 工具(或者PSCC,SAI等绘画工具)画出像素角色的素体,最好是使用 有图层 的绘画工具 把素体的每一个身体部分都新建一个图层...
  • BuladeMian
  • BuladeMian
  • 2016年12月05日 15:21
  • 2207

设计师2大必备HTML动画工具

近三年HTML 5的增长迅猛,已经成为Web开发者当中最流行的语言之一。在本文将为您推荐十个HTML 5动画工具,其中包括Mixeek、Animatron、Tumult Hype、Mugeda等。希望...
  • thjyx1234
  • thjyx1234
  • 2015年03月13日 10:38
  • 336

HTML5 坦克大战游戏的制作思路

BattleCity(坦克大战) github地址 在线试玩(使用ES6完成,浏览器版本过低无法打开) 整个游戏为我个人独立完成,基本上复原了85版的游戏,因为一开始写这个游戏的时候说实话连ca...
  • jinboker
  • jinboker
  • 2016年08月05日 13:37
  • 3607

dragonBones骨骼动画格式说明

{ // DragonBones 数据名称 "name": "dragonBonesName", // 数据版本 "version": "4.5", // 动画...
  • W_han__
  • W_han__
  • 2016年10月14日 17:51
  • 1658

Flash 插件面板 DragonBonesDesignPanel 的绿色安装方法

Flash安装插件的时候,需要Adobe Extension Manager ,但是安装Adobe Extension Manager 是一个很繁琐的过程,不一定成功,有时候还需要重新安装Flash,...
  • mokt2001
  • mokt2001
  • 2014年09月17日 10:22
  • 6972

游戏制作之路

  设计制作电脑游戏这一行,可能是当今世界上能够找到的为数不多的迷人工作之一。在高科技的不断带动下,她让你充分享受创作和玩耍游戏的乐趣。而像id Software 这样一夜成名的传奇经历,更让成千上万...
  • jlmugua
  • jlmugua
  • 2007年05月20日 13:23
  • 886

一款很有挑战下的HTML5制作的小游戏 嘿嘿~~~

html5关卡过关小游戏代码 * { margin:0; padding:0; } #canvas { display:block; margin:10px auto; border:1px s...
  • qq_40028934
  • qq_40028934
  • 2017年08月30日 16:15
  • 309
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_09_2D骨骼动画工具DragonBone
举报原因:
原因补充:

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