egret 使用spine骨骼动画

这些骨骼动画本来是在cocos中使用，现在需要在egret wing中直接使用这些骨骼动画

最开始是使用 PIXI 在 html 里面直接使用

<script egret="lib" src="../js/pixi/pixi.js"></script>
<script egret="lib" src="../js/pixi/pixi-spine.js"></script>
<script>

    function createAnibyPixi(strpath, parent) {
        // var renderer = new PIXI.CanvasRenderer(80, 80);
        var renderer = new PIXI.CanvasRenderer(80, 80, {
            // backgroundColor: 0x1099bb
            antialias: false, transparent: true, resolution: 1
        });
        document.body.appendChild(renderer.view);
        var stage = new PIXI.Container();
        PIXI.loader.add('spineCharacter', strpath)
            //        PIXI.loader.add('spineCharacter', 'data/skeleton.json')//Boy_ShortsShirt_Angry.json
            .load(function (loader, resources) {
                var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);
                stage.addChild(animation);
                animation.state.addAnimationByName(0, 'beiji', true, 0);
                animation.x = 40;
                animation.y = 70;
                animation.scale.x = 1;
                animation.scale.y = 1;
                animate();
                function animate() {
                    requestAnimationFrame(animate);
                    renderer.render(stage);
                }
            });

    }
</script>

 在main.ts中调用

 var strpath = 'resource/assets/data/1/skeleton.json';
 window["createAnibyPixi"](strpath,this);

但是这样写，不方便，所有放弃了这个办法。

我们是想要在ts文件中直接使用，方便控制位置，层级。

所以又查找了一堆大佬写得代码，最后还是需要生成库文件，然后添加依赖。

然后根据一位大佬得代码修改了下

class Demos extends egret.DisplayObjectContainer {
    private atlasArr2: Object = {}
    private imgArr2: any = {}
    private demoData2: Object = {}
    private skes: Array<spine.SkeletonAnimation> = [];//骨骼动画
    private pos = [
        [100, 100],
        [600, 600],
        [200, 200],
        [400, 400]
    ];//动画位置
    public async runDemo() {
        await this.loadResource()
        this.InitData();
    }
    private async loadResource() {
        try {
            await RES.loadConfig("resource/default.res.json", "resource/");
            await RES.loadGroup("preload")
            console.log("res group loading done！")
        }
        catch (e) {
            console.error(e);
        }
    }
    private InitData() {
        this.atlasArr2 = {
            ['skeleton']: RES.getRes("skeleton_atlas"),
        }
        this.imgArr2 = {
            ['skeleton.png']: RES.getRes("skeleton_png")
        }
        this.demoData2 = {
            ["skeleton"]: {
                "atlas": "skeleton"
            }
        }
        this.startShowDemo("skeleton");
        this.startShowDemo("skeleton");
        this.startShowDemo("skeleton");
        this.startShowDemo("skeleton");
    }
    private async startShowDemo(skeletonName: string) {
        // console.warn("===skeletonName:", skeletonName);
        let atlasName = this.demoData2[skeletonName].atlas;
        // console.warn("===atlasName:", atlasName);
        let atlas = this.atlasArr2[atlasName];
        this.ab2str(atlas, this.getAnimation.bind(this));
    }
    /**
     * 二进制转string
     * u:二进制数据
     * f:回调方法
     */
    private ab2str(u, f) {
        var b = new Blob([u]);
        var r = new FileReader();
        r.readAsText(b, 'utf-8');
        r.onload = function () { if (f) f.call(null, r.result) }
    }

    /**
     * 获取骨骼动画
     */
    private getAnimation(atlasStr) {
        // console.warn("===atlasStr:", atlasStr);
        let texAtlas = spine.createTextureAtlas(atlasStr, this.imgArr2);
        // console.warn("===texAtlas:", texAtlas);
        let json = RES.getRes("skeleton_json")
        // console.warn("===json:", json);
        let skelData = spine.createSkeletonData(json, texAtlas);
        // console.warn("===skelData:", skelData);
        let ske = new spine.SkeletonAnimation(skelData);
        this.skes.push(ske);
        this.playAnimation();
    }
    /**
     * 播放骨骼动画
     */
    private playAnimation() {
        let stage = egret.lifecycle.stage;
        for (var i = 0; i < this.skes.length; i++) {
            stage.addChild(this.skes[i]);
            this.skes[i].x = this.pos[i][0];
            this.skes[i].y = this.pos[i][1];
            this.skes[i].scaleX = this.skes[i].scaleY = 2;
            this.skes[i].play("beiji");
        }
    }
}

这个代码主要是碰到了一个问题，主要还是自己太菜，折腾了半天

就是在获取atlas得时候，得到不是和大佬一样得字符串，而是二进制数据

所以需要转换一下，使用ab2str这个方法转换之后，就可以正常使用了。