远程加载 TexturePacker 图集并解析有好方法吗?

网上参考改了下,但 TexturePacker 版本不一样了,里面有些参数也不太了解。

image

工具代码

/**
 * 参考 https://www.jianshu.com/p/4801629d0261
 */
export default class Atlas {
    public static getSpriteFrame(plist: any, texture: cc.Texture2D, key: string): cc.SpriteFrame {
        const frameData = plist['_$nativeAsset']['frames'][key]
        if (!frameData) {
            cc.error('Atlas.getSpriteFrame key %s 不存在', key)
            return
        }

        const rect = this.getRect(frameData['textureRect'])
        const offset = this.getOffset(frameData['spriteOffset'])
        const size = this.getSize(frameData['spriteSourceSize'])

        const spriteFrame = new cc.SpriteFrame()
        spriteFrame.setTexture(texture, rect, frameData['textureRotated'], offset, size)

        return spriteFrame
    }


    private static getRect(rectStr: string): cc.Rect {
        const rectList = rectStr.split(',')

        return new cc.Rect(parseInt(this.trim(rectList[0], '{},')), parseInt(this.trim(rectList[1], '{},')), parseInt(this.trim(rectList[2], '{},')), parseInt(this.trim(rectList[3], '{},')),)
    }

    private static getOffset(offsetStr: string): cc.Vec2 {
        const offsetList = offsetStr.split(',')

        return new cc.Vec2(parseInt(this.trim(offsetList[0], '{},')), parseInt(this.trim(offsetList[1], '{},')))
    }

    private static getSize(sizeStr: string): cc.Size {
        const sizeList = sizeStr.split(',')

        return new cc.Size(parseInt(this.trim(sizeList[0], '{},')), parseInt(this.trim(sizeList[1], '{},')))
    }


    private static trim(str: string, trims: string): string {
        if (trims) {
            for (let i = 0; i < trims.length; i++) {
                const char = trims[i]
                str = str.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '')
            }

            return str
        } else {
            return str.replace(/^\s+|\s+$/g, '')
        }
    }
}

使用

import Atlas from "./util/Atlas"

const { ccclass, property } = cc._decorator


enum LoadType {
    Local,
    Remote,
}


@ccclass
export default class AtlasScene extends cc.Component {
    @property({ type: cc.Enum(LoadType) })
    private loadType: LoadType = LoadType.Local

    private sprite: cc.Sprite
    private btnTest: cc.Node

    private atlas: cc.SpriteAtlas

    private atlasTexture: cc.Texture2D
    private atlasPlist: any

    private idx: number = 0


    protected onLoad(): void {
        this.sprite = this.node.getChildByName('sprite').getComponent(cc.Sprite)

        this.btnTest = this.node.getChildByName('btnTest')
        this.btnTest.on('click', this.onBtnTest, this)

        if (this.loadType == LoadType.Local) {
            this.loadLocal()
        } else {
            this.loadRemote()
        }
    }

    protected onDestroy(): void {
        this.btnTest.off('click', this.onBtnTest, this)
    }


    private onBtnTest(_et: cc.Button) {
        this.showSprite()
    }


    private loadLocal() {
        cc.log('AtlasScene.loadLocal')
        cc.resources.load('atlas/color', cc.SpriteAtlas, (err: Error, atlas: cc.SpriteAtlas) => {
            if (err) {
                cc.error('AtlasScene.loadRes atlas/color err:', err)
                return
            }

            this.atlas = atlas
            this.showSprite()
        })
    }

    private loadRemote() {
        cc.log('AtlasScene.loadRemote')
        cc.assetManager.loadRemote('http://localhost:8080/hello/atlas/color.png', (err: Error, texture: cc.Texture2D) => {
            if (err) {
                cc.error('AtlasScene.loadRemote atlas/color png err:', err)
                return
            }

            cc.assetManager.loadRemote('http://localhost:8080/hello/atlas/color.plist', (err: Error, plist: cc.Asset) => {
                if (err) {
                    cc.error('AtlasScene.loadRemote atlas/color plist err:', err)
                    return
                }

                this.atlasTexture = texture
                this.atlasPlist = plist
                this.showSprite()
            })
        })
    }


    private showSprite() {
        cc.log('AtlasScene.showSprite idx:', this.idx)
        if (this.loadType == LoadType.Local) {
            this.sprite.spriteFrame = this.atlas.getSpriteFrame(this.idx.toString())
        } else {
            this.sprite.spriteFrame = Atlas.getSpriteFrame(this.atlasPlist, this.atlasTexture, this.idx.toString() + '.png')
        }

        this.idx++
        if (this.idx >= 13) {
            this.idx = 0
        }
    }
}