Cocos游戏开发中的动态切割图片

点击上方亿元程序员+关注和★星标

引言

Cocos游戏开发中的动态切割图片

近日，由于笔者发现了另外一个非常有趣的画线切割小游戏，沉迷于夺回秋雅无法自拔，导致断更了一周多。（尊嘟假嘟）

言归正传，游戏体验过之后，非常感兴趣这个游戏中的切割效果是如何实现的呢？

今天给大家介绍一下如何在Cocos游戏开发中实现动态切割图片的效果。

本文源工程在文中获取，小伙伴们自行前往。

1. 分析一下游戏

我们先来分析一下实现这个游戏有哪些关键点：

动态切割图片：由于玩家切割的位置具有不确定性，我们需要根据玩家切割的线去具体分割图片，因此不能通过预先准备好资源的形式。
成功与失败的判定：玩家使用完切割次数后，需要判断海盗与主角是否完全分离来判断成功与失败。
表现效果：切割完成后，需要对图片进行一段位移，然后再进行下沉。

2. 动态切割图片

本游戏最大的实现难度应该是动态切割图片进行分离。

经过查阅资料发现，我们可以通过Assembler动态切割图片的效果。

在Cocos Creator中，Assembler是用于实现自定义渲染组件的底层框架之一。

通过Assembler，您可以直接操作渲染节点的绘制过程，包括顶点和片段的计算，从而实现高度定制化的渲染效果。

实现基于Assembler的图片切割，您可以按照以下步骤进行：

创建自定义渲染组件：首先，在Cocos Creator中创建一个自定义渲染组件。这个组件将负责绘制图片并进行切割。您可以通过继承cc.Assembler类来实现自定义的Assembler。
重写Assembler的绘制方法 ：在自定义Assembler中，重写updateRenderData方法。在这个方法中，您可以计算顶点的位置和纹理坐标，以实现图片切割。根据您的需求，您可以根据切割的大小和位置来动态计算顶点的位置和纹理坐标。
设置渲染数据 ：在updateRenderData方法中，您需要设置渲染数据，包括顶点坐标、纹理坐标和颜色等。这些数据将被用于绘制图像。
添加自定义组件到节点：将自定义的渲染组件添加到要进行图片切割的节点上。
调整节点属性：根据您的需求，您可能需要调整节点的属性，比如位置、大小等，以正确显示切割后的图像。

3. 实现动态切割图片的效果

1.资源准备

由于实现起来比较复杂，加上笔者也忙于生存，本次节目效果，我们站在巨人的肩膀上去表现。

首先是大神渡鸦关于Assembler的介绍《基于Assembler实现的图片切割及自定义遮罩》:

forum.cocos.org/t/topic/103...

以及大神木限东的实现源码：

gitee.com/yeshao2069/...

2.源码解析

首先自定义了一个名为 AssemblerSplit 的类，实现了 IAssembler 接口。

该类用于处理图像切割的渲染操作，主要包括创建渲染数据、重置数据、更新渲染数据等功能。

让我们逐个分析每个方法的作用：

createData(com: SplitRender) ：创建渲染数据。根据传入的 SplitRender 组件，确定顶点数量和索引数量，并创建相应的渲染数据，最后返回渲染数据。
resetData(com: SplitRender) ：重置渲染数据。根据传入的 SplitRender 组件的多边形顶点，重新计算顶点数量和索引数量，并清空原有的渲染数据，重新设置渲染数据的长度和大小。
updateRenderData(com: SplitRender) ：更新渲染数据。根据 SplitRender 组件的顶点位置、纹理坐标和颜色信息，更新渲染数据。如果顶点数据需要更新，则调用 resetData 方法重新初始化渲染数据，并更新顶点位置、纹理坐标和颜色。
updateWorldVerts(com: SplitRender, verts: Float32Array) ：更新世界坐标系下的顶点位置。根据传入的 SplitRender 组件和顶点数组，计算多边形顶点在世界坐标系下的位置，并更新顶点数组。
fillBuffers(com: SplitRender, renderer: any) ：填充缓冲区数据。根据 SplitRender 组件的多边形顶点和渲染数据块，生成索引数组，并更新世界坐标系下的顶点位置，最后填充缓冲区的索引数据。
updateVertexData(com: SplitRender) ：更新顶点数据。根据 SplitRender 组件的多边形顶点和渲染数据块，更新渲染数据的顶点位置信息。
updateUvs(com: SplitRender) ：更新纹理坐标数据。根据 SplitRender 组件的多边形顶点和精灵帧的纹理信息，计算多边形顶点的纹理坐标，并更新渲染数据的纹理坐标信息。
updateColor(com: SplitRender) ：更新顶点颜色数据。根据 SplitRender 组件的颜色信息和渲染数据，更新渲染数据的顶点颜色信息。

然后定义了一个名为 SplitRender 的类，它是一个继承自 Renderable2D 的组件，用于在 Cocos Creator 中渲染图像切割效果。

让我们逐个分析核心部分的作用：

属性定义：
- _spriteFrame：精灵帧对象，用于设置图像切割的纹理。
- _type：纹理类型，用于指定渲染纹理的类型。
- editing：标记是否处于编辑模式。
- _polygon：多边形顶点数组，用于定义图像切割的区域。
- _assembler：渲染组件的装配器，用于处理渲染过程。
_applySpriteSize() 方法：根据精灵帧的原始尺寸，调整节点的大小以适应切割区域。
_render() 方法：执行实际的渲染操作。
_flushAssembler() 方法：刷新装配器，初始化渲染数据并更新材质。

最后通过给节点添加SplitRender组件进行使用：

typescript 复制代码

init() {
    let node = new Node();
    let t = node.addComponent(SplitRender);
    node.parent = this.textureRoot;
    node.layer = Layers.Enum.UI_2D;
    t.spriteFrame = this.pic;
    this.textures.push(t);
}

并且通过克隆新的节点修改polygon修改多边形的顶点，从而修改渲染范围，实现图片的分离。

typescript 复制代码

private splitTexture(texture: SplitRender, polygons: Vec2[][]) {
    texture.polygon = polygons[0];
    texture.flyFlag = true;
    for (let i = 1; i < polygons.length; i++) {
        let node = new Node();
        node.layer = Layers.Enum.UI_2D;
        let t = node.addComponent(SplitRender);
        node.parent = this.textureRoot;
        node.setPosition(new Vec3(texture.node.position.x, texture.node.position.y));
        t.spriteFrame = this.pic;
        t.polygon = polygons[i];
        t.flyFlag = true;
        this.textures.push(t);
    }
}