龙骨动画--控制骨骼运动

  在实际项目制作过程中,***有时候仅仅播放预先设置的骨骼动画是不够的,还需要角色具有动态可控的动作。DragonBones提供了访问并控制骨骼框架里的每一根骨头的方法,可以让角色能够有丰富多样的交互效果。***

  在示例中,通过鼠标拖拽方块,小龙人根据与方块的距离去播放stand或者walk的动画,根据与方块的角度问题,小龙人的头部与手部会有一个角度的变化。

本需求的重点就是:获取头部与手部的骨骼,然后设置骨骼的旋转角度。

本示例的关键代码如下:

private head: dragonBones.Bone;
private armL: dragonBones.Bone;
private armR: dragonBones.Bone;
//获取骨骼
this.head = this.armature.getBone("head");
this.armL = this.armature.getBone("armUpperL");
this.armR = this.armature.getBone("armUpperR");

通过dragoneBones.Armature.getBone("骨骼名字")来获取某个骨骼,骨骼对象中的offset属性是一个DBTranform对象,是专门用于给开发者设置叠加的变换信息的,包括平移,旋转,缩放等。

this.head.offset.rotation = _r *0.3       
this.armR.offset.rotation = _r *0.8;
this.armL.offset.rotation = _r * 1.5;

ps:这里的offset的值是叠加到骨骼现有的变化上,并不是取代骨骼的现有变换。

下面是整个示例的完整代码:

/**
 * 该类主要是用来学习 如何控制骨骼动画中骨骼的运动
 */
class DBTestScene2  extends egret.Sprite{
    // private factory:dragonBones.EgretFactory;
    // private armature:dragonBones.Armature;//骨架
    // private armatureDisplay:dragonBones.EgretArmatureDisplay;//骨架显示对象
    // private head:dragonBones.Bone;//头骨骼
    // private armL:dragonBones.Bone;//左臂骨骼
    // private armR:dragonBones.Bone;//右臂骨骼
    // private bird:egret.Shape;

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

    }

    private onStage(){
        this.graphics.beginFill(0xff0000,0.3);
        this.graphics.drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight);
        this.graphics.endFill();

        this.initGame();

    }

    private factory:dragonBones.EgretFactory = new dragonBones.EgretFactory();
    private armature: dragonBones.Armature;
    private armatureClip:egret.DisplayObject;
    private head: dragonBones.Bone;
    private armL: dragonBones.Bone;
    private armR: dragonBones.Bone;
    private lark: egret.Bitmap;
    private initGame(): void 
    {
        // 获取骨骼数据
        var skeletonData = RES.getRes("Dragon_ske_json");
        // 获取纹理数据
        var textureData = RES.getRes("Dragon_tex_json");
        var texture = RES.getRes("Dragon_tex_png");
        // 解析骨骼数据与纹理数据
        this.factory.parseDragonBonesData(skeletonData);
        this.factory.parseTextureAtlasData(textureData,texture);
        
        // 获取骨架
        this.armature = this.factory.buildArmature("Dragon");
        // 注意!!!!!这里要获取骨架上的display 才可以在骨架移动的时候贴图一起移动
        this.armatureClip = this.armature.getDisplay();
        // 如果这样子获取armatureDisplay 骨骼移动之后 贴图并不会动
        // this.armatureClip = this.factory.buildArmatureDisplay("Dragon");
        this.armatureClip.x = 200;
        this.armatureClip.y = 450;
        this.addChild(this.armatureClip);
        
        dragonBones.WorldClock.clock.add(this.armature);

        this.armature.animation.play("stand");

        this.head = this.armature.getBone("head");
        this.armL = this.armature.getBone("armUpperL");
        this.armR = this.armature.getBone("armUpperR");
     
        egret.startTick(this.onTicker, this);

        this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.onTouchMove,this);
        this.lark = new egret.Bitmap(RES.getRes("button_down_png"));
        this.addChild(this.lark);
    }

    private _time:number;

    private onTicker(timeStamp:number) {

        if(!this._time) {
            this._time = timeStamp;
        }

        var now = timeStamp;
        var pass = now - this._time;
        this._time = now;

        this.checkDist();
        this.updateMove();
        this.updateBones();

        dragonBones.WorldClock.clock.advanceTime(pass / 1000);

        return false;
    }

    
    private mouseX: number = 0;
    private mouseY: number = 0;
    private dist: number = 0;
    private moveDir: number = 0;
    private speedX: number = 0;
    private onTouchMove(evt: egret.TouchEvent): void
    {
        this.mouseX = evt.stageX;
        this.mouseY = evt.stageY;
        this.lark.x=this.mouseX - 39;
        this.lark.y=this.mouseY - 34;
    }
    private checkDist():void
    {
        this.dist = this.armatureClip.x-this.mouseX;
        if(this.dist<150)
        {
            this.updateBehavior(1);
        }
        else if(this.dist>190)
        {
            this.updateBehavior(-1)
        }
        else
        {
            this.updateBehavior(0)
        }
                    
    }
    private updateBehavior(dir:number):void
    {
        if(this.moveDir == dir) {
            return;
        }
        this.moveDir=dir;
        if (this.moveDir == 0)
        {
            this.speedX = 0;
            this.armature.animation.gotoAndPlay("stand");
        }
        else
        {
            this.speedX=6*this.moveDir;
            this.armature.animation.gotoAndPlay("walk");
        }
    }
    private updateMove():void
    {
        if (this.speedX != 0) 
        {
            this.armatureClip.x += this.speedX;
            if (this.armatureClip.x < 0) 
            {
                this.armatureClip.x = 0;
            }
            else if (this.armatureClip.x > 800) 
            {
                this.armatureClip.x = 800;
            }
        }
    }
    private updateBones():void
    {
        //update the bones' pos or rotation
        var _r = Math.PI + Math.atan2(this.mouseY - this.armatureClip.y+this.armatureClip.height/2, this.mouseX - this.armatureClip.x);
        if (_r > Math.PI)
        {
            _r -= Math.PI * 2;
        }
        this.head.offset.rotation = _r *0.3       
        this.armR.offset.rotation = _r *0.8;
        this.armL.offset.rotation = _r * 1.5;
        this.lark.rotation=_r*0.2;
    }


   

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容