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

工具代码
/**
* 参考 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
}
}
}