ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> HTML教程 >> 集成骨骼动画Spine的几点经验

集成骨骼动画Spine的几点经验

来源:网络整理     时间:2015-09-26     关键词:

本篇文章主要介绍了"集成骨骼动画Spine的几点经验",主要涉及到方面的内容,对于HTML教程感兴趣的同学可以参考一下: 最近开始用cantk做些复杂的游戏,其中一个游戏的DragonBones骨骼动画的JSON文件就达600K,导出之后显示各种不正常,可能是太复杂了,有些方面达到...

最近开始用cantk做些复杂的游戏,其中一个游戏的DragonBones骨骼动画的JSON文件就达600K,导出之后显示各种不正常,可能是太复杂了,有些方面达到了DragonBones的极限。拿到官方的补丁仍然还有些问题,不爽的是新版本有一万多行代码,是老版本的三倍之多。据说骨骼动画Spine做得更好,而且Spine.js只有两千多行代码,决定为cantk加上Spine的支持。

为cantk写一个插件支持Spine是非常简单的,只要增加一个ShapeCreator就行了:

functionUISpineCreator() {var args = ["ui-spine", "ui-spine", null, true];

    ShapeCreator.apply(this, args);
    this.createShape = function(createReason) {var g = new UISpine();
        return g.initUISpine(this.type, 200, 200);
    }

    return;
}

ShapeFactoryGet().addShapeCreator(new UISpineCreator());

在集成过程中,下面几点比较有意思:

  • 一、使用TexturePacker打包图片。缺省例子的图片是分离的,有好几十张小图片,这并非好的做法。我决定像DragonBones一样把它们打包成一张大图。Spine.js写得非常好,这个改动很轻松:
var rootPath = this.textureJsonURL +'#';

    var json = new spine.SkeletonJson({
        newRegionAttachment: function(skin, name, path) {var src = rootPath + path + ".png";
            var attachment = new spine.RegionAttachment(name);

            attachment.rendererObject = WImage.create(src);

            return attachment;
        },
        newBoundingBoxAttachment: function(skin, name) {returnnew spine.BoundingBoxAttachment(name);
        }
    });

WImage是对HTML Image的包装,支持TexturePacker打包的图片和几种自动切图的方式。

  • 二、播放完成时的回调函数。游戏通常需要在播放一个动作之后做些处理,比如播放声音或发射武器之类的东西。官方例子里并没有这种用法,看了一下实现的代码,里面已经提供相应的机制:
UISpine.prototype.gotoAndPlay = function(animationName, repeatTimes, onDone, onOneCycle) {var me = this;
    this.animationName = animationName;

    if(this.spineState) {
        var track = this.spineState.setAnimationByName(0, animationName, true, 0);

        track.repeatTimes = repeatTimes ? repeatTimes : 0xffffffff;
        track.onComplete = function(i, count) {this.repeatTimes--;
            if(this.repeatTimes <= 0) {
                this.loop = false;
                if(onOneCycle) {
                    onOneCycle.call(me);
                }
                if(onDone) {
                    onDone.call(me);
                }
            }
            else {
                if(onOneCycle) {
                    onOneCycle.call(me);
                }
            }
        }
    }

    returnthis;
}
  • 三. 缩放的处理。我发现只有在加载时才能指定scale,不太灵活,所以决定在绘制时自己缩放吧:
    var ay = this.h;
    var ax = this.w >> 1;
    var scale = this.animationScale;
    this.update(canvas);

    canvas.translate(ax, ay);
    canvas.scale(scale, scale);
    ...

参考:

CanTK: https://github.com/drawapp8/cantk

Spine Runtimes: https://github.com/EsotericSoftware/spine-runtimes/

以上就介绍了集成骨骼动画Spine的几点经验,包括了方面的内容,希望对HTML教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_181115.html

相关图片

相关文章