很多引擎现在都配备了统一尺寸的图集切割的功能，但是creator 2.x没有，导致很多萌新小伙伴都不知所措
今天参照godot写一份图集分割功能，让cocos creator 2.x也能拥有自己的勇者传说，哈哈哈 
首先itch.io上下载资源当资源为多个图块集合且大小统一的条件下
例如：
像素资源导入项目后需要设置point
导入引擎后添加如下的组件
Hframes 为横向的数量
Vframes 为纵向的数量
frame 为从左到右、上到下计算分割后的当前帧
m_spriteFrame 设置图集资源
以上就是所有内容了，希望大家能喜欢。
在最近unity又闹出幺蛾子，希望有新的血液能够加入cocos creator，助一份力
示例项目下载：
AnimaAtlas2D-project.zip (891.8 KB)
每个字都看懂了，就是没看懂这个是什么东西
就是不需要图集 自动切割成序列帧
不是很懂你的意思，图集和序列帧有什么不一样吗？序列帧最后不也是要打包成图集？
自动化的，可以。是个好东西
有点bug，属性会莫名重置
是会有，修改了一下。
const { ccclass, property, executeInEditMode } = cc._decorator;
@ccclass
@executeInEditMode
export default class AnimaAtlas2D extends cc.Component {
@property({
type: cc.Integer,
tooltip: "水平方向帧数",
min: 1
})
Hframes = 1;
@property({
type: cc.Integer,
tooltip: "垂直方向帧数",
min: 1
})
Vframes = 1;
private _frame = 0;
@property({ type: cc.Integer })
get frame() {
return this._frame;
}
set frame(v) {
const max = this.Hframes * this.Vframes - 1;
this._frame = cc.misc.clampf(v, 0, max);
this.splitTexture();
//this.updateFrame();
}
@property({ type: cc.Sprite })
sprite: cc.Sprite = null;
@property({ type: cc.SpriteFrame })
m_spriteFrame: cc.SpriteFrame = null;
private spriteFrames: cc.SpriteFrame[] = [];
frameWidth: number = 0;
frameHeight: number = 0;
onLoad() {
if (!this.sprite) this.sprite = this.getComponent(cc.Sprite);
this.splitTexture();
}
private splitTexture() {
if (!this.sprite || !this.m_spriteFrame) return;
const original = this.m_spriteFrame;
const tex = original.getTexture();
const rect = original.getRect();
console.log(tex.width, tex.height);
this.frameWidth = tex.width / this.Hframes;
this.frameHeight = tex.height / this.Vframes;
this.spriteFrames = [];
for (let row = 0; row < this.Vframes; row++) {
for (let col = 0; col < this.Hframes; col++) {
const sf = new cc.SpriteFrame();
sf.setTexture(tex);
sf.setRect(cc.rect(
col * this.frameWidth,
row * this.frameHeight,
this.frameWidth,
this.frameHeight
));
sf.setOffset(original.getOffset());
this.spriteFrames.push(sf);
}
}
this.updateFrame();
}
private updateFrame() {
if (!this.sprite || this.spriteFrames.length === 0) return;
if (this._frame >= this.spriteFrames.length) return;
this._frame = Math.floor(this._frame);
this.sprite.spriteFrame = null;
this.sprite.spriteFrame = this.spriteFrames[this._frame];
}
}
这种方式其实是存在弊端的，图片中透明像素过多
嗯，只是在于给萌新一些处理这种序列图的方案，做的一个通用工具
比如偷别人的包破解获得一张包含序列帧的图集，但是没有plist文件对应。下载了你的插件、软件，可以直接切割每一个小图出来，然后识别大概轮廓直接给我组合成序列帧的顺序？
资源为多个图块集合且大小统一的条件下,统一大小，没有检测不规则图形呢
有些网上买的资源包就是这様一张的图， 没有plist， 很多引擎提供了这种自动切割的功能
有总比没有好 