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

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

引言

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

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

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

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

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

1. 分析一下游戏

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

  1. 动态切割图片:由于玩家切割的位置具有不确定性,我们需要根据玩家切割的线去具体分割图片,因此不能通过预先准备好资源的形式。

  2. 成功与失败的判定:玩家使用完切割次数后,需要判断海盗与主角是否完全分离来判断成功与失败。

  3. 表现效果:切割完成后,需要对图片进行一段位移,然后再进行下沉。

2. 动态切割图片

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

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

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

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

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

  1. 创建自定义渲染组件:首先,在Cocos Creator中创建一个自定义渲染组件。这个组件将负责绘制图片并进行切割。您可以通过继承cc.Assembler类来实现自定义的Assembler。

  2. 重写Assembler的绘制方法:在自定义Assembler中,重写updateRenderData方法。在这个方法中,您可以计算顶点的位置和纹理坐标,以实现图片切割。根据您的需求,您可以根据切割的大小和位置来动态计算顶点的位置和纹理坐标。

  3. 设置渲染数据:在updateRenderData方法中,您需要设置渲染数据,包括顶点坐标、纹理坐标和颜色等。这些数据将被用于绘制图像。

  4. 添加自定义组件到节点:将自定义的渲染组件添加到要进行图片切割的节点上。

  5. 调整节点属性:根据您的需求,您可能需要调整节点的属性,比如位置、大小等,以正确显示切割后的图像。

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

1.资源准备

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

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

https://forum.cocos.org/t/topic/103699

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

https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.8.x/demo/2dP1/Creator3.8.0_2D_SpriteSplit

2.源码解析

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

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

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

  1. createData(com: SplitRender) :创建渲染数据。根据传入的 SplitRender

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bean对象拷贝工具封装

在平时后端开发的过程中&#xff0c;经常要把对象封装成DTO,VO对象&#xff0c;来与前端进行交互 下面就是自己封装的对象拷贝工具&#xff1a; public class BeanCopyUtils {private BeanCopyUtils() {}public static <V> V copyBean(Object source,Class<V> cl…

【剑指offer】顺时针打印矩阵

题目链接 acwing leetcode 题目描述 输入一个矩阵&#xff0c;按照从外向里以顺时针的顺序依次打印出每一个数字。 数据范围矩阵中元素数量 [0,400]。 输入&#xff1a; [ [1, 2, 3, 4], [5, 6, 7, 8], [9,10,11,12] ] 输出&#xff1a;[1,2,3,4,8,12,11,10,9,5,6,7] 解题 …

C语言动态分配数组

指针方式 可以使用指针&#xff0c;并在需要时通过malloc函数动态分配内存。下面是一个示例&#xff1a; #include <stdio.h> #include <stdlib.h>// 定义包含动态数组的结构体 struct DynamicArray {int size;int *array; };// 初始化结构体及动态数组 void ini…

【AutoML】一个用于图像、文本、时间序列和表格数据的AutoML

一个用于图像、文本、时间序列和表格数据的AutoML AutoGluon介绍安装AutoGluon快速上手 参考资料 AutoGluon自动化机器学习任务&#xff0c;使您能够在应用程序中轻松实现强大的预测性能。只需几行代码就可以训练和部署有关图像&#xff0c;文本&#xff0c;时间序列和表格数据…

记录在项目中引用本地的npm包

1、先把需要的包下载下来&#xff0c;以Photo Sphere Viewer 为引用的npm包、项目以shpereRepo为例子 git clone https://github.com/mistic100/Photo-Sphere-Viewer2、拉下代码后修改之后执行 ./build.sh build.sh #!/usr/bin/env bashyarn run build targetDir"../sh…

c# 设置图片透明度

逐个像素进行Alpha值的设置&#xff0c;网上其他的代码不能处理有透明背景的图片&#xff0c;因此要对Alpha、R、G、B均为0的透明色进行特殊处理&#xff0c;不做转换。 private Bitmap SetImageOpacity(Image srcImage, int opacity){Bitmap pic new Bitmap(srcImage);for (i…

mysql安装及操作

一、Mysql 1.1 MySQL数据库介绍 1.1.1 什么是数据库DB&#xff1f; DB的全称是database&#xff0c;即数据库的意思。数据库实际上就是一个文件集合&#xff0c;是一个存储数据的仓库&#xff0c;数据库是按照特定的格式把数据存储起来&#xff0c;用户可以对存储的数据进行…

【pytest、playwright】allure报告生成视频和图片

目录 1、修改插件pytest_playwright 2、conftest.py配置 3、修改pytest.ini文件 4、运行case 5、注意事项 1、修改插件pytest_playwright pytest_playwright.py内容如下&#xff1a; # Copyright (c) Microsoft Corporation. # # Licensed under the Apache License, Ver…

公网部署ctfd+ctfd_whale问题解决

参考博客 赵师傅&#xff1a;https://www.zhaoj.in/read-6333.html/comment-page-1 docker swarm&#xff1a;https://www.jianshu.com/p/77c4c62d9afe ctfd动态靶场搭建 https://blog.csdn.net/Java_ZZZZZ/article/details/131510368 docker swarm 节点标记 注意需要用以…

WPF 自定义按钮类实现

1.创建自定义按钮类 &#xff08;CustomButton.cs&#xff09; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Media;…

Redis 的内存回收策略

Redis的内存回收策略用于处理过期数据和内存溢出情况&#xff0c;确保系统稳定性和性能。作为一个高性能的键值存储系统&#xff0c;它通过内存回收策略来维护内存的高效使用 主要包括过期删除策略和内存淘汰策略。 过期删除策略&#xff1a; Redis的过期删除策略是通过设置…

yarn的安装以及使用案例

作为资深前端专家&#xff0c;对于各种前端工具和技术有着深入的了解和实践经验&#xff0c;其中Yarn就是一个重要的依赖管理工具。以下是对Yarn的安装以及使用案例的详细说明&#xff1a; 一、Yarn的安装 Yarn的安装相对简单&#xff0c;通常可以通过npm&#xff08;Node Pa…

Redis的持久化机制是怎样的?

Redis提供了两种持久化的机制&#xff0c;分别的RDB和AOF。 RDB RDB是将Redis的内存中的数据&#xff08;以快照的形式&#xff09;定期保存到磁盘上&#xff0c;以防治数据在Redis进程异常退出或服务器断电等情况下丢失。 RDB的优点是&#xff1a;快照文件小、恢复速度快&am…

Maven package classifier测试

package package阶段会生成一个jar文件&#xff0c;包含了main文件夹下编译后的资源。可作为其他项目的依赖引用。 classifier install后&#xff0c;在仓库中存放的artifact的最终文件&#xff0c;即将package最终文件存入仓库&#xff0c;若在打包时需要加以定制&#xff…

双目的Occupancy——Occdepth

文章目录 论文链接&#xff1a;[https://arxiv.org/pdf/2302.13540.pdf](https://arxiv.org/pdf/2302.13540.pdf)、代码链接&#xff1a; [https://github.com/megvii-research/OccDepth](https://github.com/megvii-research/OccDepth) 网络结构&#xff1a;Stereo moudule 通…

政策导向与行业发展

方向一&#xff1a;政策导向与行业发展 政府工作报告中对计算机行业的政策导向主要包括促进信息技术与实体经济深度融合、推动数字化转型升级、加强网络安全和数据保护等。这些政策的出台将直接影响着计算机行业的发展方向和企业的经营策略。 首先&#xff0c;政府将进一步推…

C 指向数组的指针

组名本身是一个常量指针&#xff0c;意味着它的值是不能被改变的&#xff0c;一旦确定&#xff0c;就不能再指向其他地方。 因此&#xff0c;在下面的声明中&#xff1a; double balance[50];balance 是一个指向 &balance[0] 的指针&#xff0c;即数组 balance 的第一个元…

Orcale一些面试题20道

1. 下面哪个用户不是ORACLE缺省安装后就存在的用户( A ) A . SYSDBA B. SYSTE C. SCOTT D. SYS 2、带有&#xff08;B&#xff09;字句的SELECT语句可以在表的一行或多行放置排他锁。 A .? FOR INSERT B.? FOR UPDATE C.? FOR DELETE D.? FOR REFRESH 3. 在Oracle中&am…

【线段树二分】第十三届蓝桥杯省赛C++ A组/研究生组 Python 研究生组《扫描游戏》(C++)

【题目描述】 有一根围绕原点 O 顺时针旋转的棒 OA&#xff0c;初始时指向正上方&#xff08;Y 轴正向&#xff09;。 在平面中有若干物件&#xff0c;第 i 个物件的坐标为&#xff08;,)&#xff0c;价值为 。 当棒扫到某个物件时&#xff0c;棒的长度会瞬间增长 &#xff…

解决: MAC ERROR [internal] load metadata for docker.io/library/openjdk:17

错误信息&#xff1a; ERROR [internal] load metadata for docker.io/library/openjdk:17 ERROR: failed to solve: openjdk:17: error getting credentials - err: exit status 1, out: 解决方法&#xff1a; running this command rm ~/.docker/config.json before …