【游戏扩展】图集动画分割AnimaAtlas2D

Creator 2.x
#1

很多引擎现在都配备了统一尺寸的图集切割的功能，但是creator 2.x没有，导致很多萌新小伙伴都不知所措

今天参照godot写一份图集分割功能，让cocos creator 2.x也能拥有自己的勇者传说，哈哈哈 :smiley:

首先itch.io上下载资源当资源为多个图块集合且大小统一的条件下
例如：

char_blue_1
char_blue_1448×616 9.41 KB

像素资源导入项目后需要设置point

image
image978×360 20.7 KB

导入引擎后添加如下的组件

image
image623×1002 31.7 KB

Hframes 为横向的数量
Vframes 为纵向的数量
frame 为从左到右、上到下计算分割后的当前帧
m_spriteFrame 设置图集资源

demo

以上就是所有内容了，希望大家能喜欢。

在最近unity又闹出幺蛾子，希望有新的血液能够加入cocos creator，助一份力 :smiley:

示例项目下载：
AnimaAtlas2D-project.zip (891.8 KB)

5赞
#2

每个字都看懂了，就是没看懂这个是什么东西

#3

就是不需要图集 自动切割成序列帧

#4

不是很懂你的意思，图集和序列帧有什么不一样吗？序列帧最后不也是要打包成图集？

#5

自动化的，可以。是个好东西

#6

有点bug，属性会莫名重置

#7

是会有，修改了一下。

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];

    }

}
#8

这种方式其实是存在弊端的，图片中透明像素过多

#9

嗯，只是在于给萌新一些处理这种序列图的方案，做的一个通用工具 :smiley:

#10

比如偷别人的包破解获得一张包含序列帧的图集，但是没有plist文件对应。下载了你的插件、软件，可以直接切割每一个小图出来，然后识别大概轮廓直接给我组合成序列帧的顺序？

1赞
#11

资源为多个图块集合且大小统一的条件下,统一大小，没有检测不规则图形呢

#12

有些网上买的资源包就是这様一张的图， 没有plist， 很多引擎提供了这种自动切割的功能

1赞
#13

有总比没有好 :rofl: