Cocos Creator 剪裁精灵图片方法记录（7）

于 2024-09-27 23:00:00 发布
阅读量190 收藏 3
点赞数 5
分类专栏： Cocos creater 文章标签： cocos creater ps
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wswq2505655377/article/details/139198033
版权

Cocos Creator 剪裁精灵图片方法记录

start

最近拿到一些图片资源，但是都需要自己手动切割。类似unity的话有专门点击精灵工具自动帮你切割了，但是目前没有找到cocos中有这种工具。所以记录一下相关方法、

解决方案-Photoshop

最好的方式就是直接用 Photoshop 去切割了。其实很简单，一分钟。

用ps打开图片，然后选择切片工具，右键我们的图片
在这里插入图片描述

选择划分切片。大多数的游戏素材是比较有规律的，可以按照对应的规律设置对应的参数去剪辑。
如果不是有规律的素材，可以手动去选择去切片

在这里插入图片描述
我这里的小猪有12个，所以，我选择12，然后点击确定。

文件-导出-存储为web所用格式。选择对饮文件目录即可。

导出的效果如下
在这里插入图片描述

lazy_tomato
关注
专栏目录
CocosCreator教程（入门篇）
标题
09-20 1万+
目录一、项目结构二、资源分类三、资源小知识点四、场景小知识点五、子系统重点六、脚本开发七、发布游戏 系列教程CocosCreator教程（初识篇）CocosCreator教程（编辑器篇） 一、项目结构 ProjectName（新建项目） ├──assets ├──library ├──local ├──packages ├──settings ├──temp └──project....
cocoscreator 保存图片到本地
04-15
在Cocos Creator中，保存图片到本地是一个常见的需求，尤其对于游戏开发或者任何涉及用户交互的应用来说。这个过程涉及到图像处理和本地存储两个关键部分。接下来，我们将详细探讨如何使用Cocos Creator实现这一功能...
CocosCreator之Sprite精灵
神兽白泽
09-29 1851
>>>>> 官方文档：https://docs.cocos.com/creator/manual/zh/components/sprite.html //Sprite(渲染精灵组件) let Sprite = this.node.getComponent(cc.Sprite);//获取渲染精灵组件 //设置图片纹理，这么干会导致spriteFrame的引用不会增加，增加风险，别这么写。请使用动态加载。 Sprite.spriteFrame = b.spriteFrame;
Cocos Creator文档学习记录
蜡笔小新1980的博客
07-29 797
Cocos Creator包括开发和调试、商业化 SDK 的集成、多平台发布、测试、上线这一整套工作流程，可多次的迭代重复。 Cocos Creator 包含游戏引擎、资源管理、场景编辑、游戏预览和发布等游戏开发所需的全套功能，并且将所有的功能和工具链都整合在了一个统一的应用程序里。
CocosCreator 随笔记录
addas0的博客
01-14 518
这将会是一个逐步更新的内容，用于记录各种想法。
CocosCreator3.8研究笔记（十）CocosCreator 图像资源的理解
w风雨无阻w的专栏
09-08 3879
精灵帧资源，用于 2D/UI 制作。Cocos Creator 的 SpriteFrame 管理图像的裁剪和九宫格信息，默认持有一个与其同级的 Texture2D 资源引用，是 UI 渲染基础图形的容器。目录下，除了正常生成图集资源以外，也会同时生成原始 spriteFrame 生成的 texture 以及 image 资源，如果对图集的资源有明确的使用范围。当渲染一张贴图的时候，动态合图系统会自动检测这张贴图是否已经被合并到了图集中，如果没有，并且此贴图又符合动态合图的条件，就会将此贴图合并到图集中。
Cocos Creator游戏开发教程 学习笔记
时时师师的博客
05-11 7682
课程内容：学完之后制作2D小游戏。 制作不需要安装打开就可以玩的小游戏。 地道的中文，便于阅读、学习。 官网的开发文档：Introduction · Cocos Creator https://docs.cocos.com/creator/manual/zh/ 要会程序设计：Swing入门和Swing高级。这个要自学。 ....................................
CocosCreator + JavaScript游戏开发
weixin_47964837的博客
11-17 7398
cocos游戏开发
cocos creator 优化之相机渲染 drawcall优化
github_38633141的博客
03-05 1056
相机的渲染对于游戏的优化也很重要，有时候游戏中我们需要多个相机，ui相机，玩家相机，小地图相机等等，多一个相机的渲染就会多一些draw call 相机的设置非常重要，看一下cocos creator的相机属性文档 cullingMask是决定渲染部分的，每个相机可以选择要渲染的，尽量不要多个相机都勾选同一个部分，因为多个相机都渲染同一个部分，会增加一倍甚至更多的draw call, 我在游戏中就犯了一个错误，一个主摄像机照射所有，一个ui相机照着UI,还有一个player相机，跟随玩家，player.
6、Cocos Creator 2D 渲染组件：​Sprite 组件​
qq_38248841的博客
03-30 406
当我们制作一个弹出式的 UI 对话框时，对话框的背景默认不会截获事件。也就是说虽然它的背景挡住了游戏场景，但是在背景上点击或触摸时，下面被遮住的游戏元素仍然会响应点击事件。这时我们只要在背景所在的节点上添加这个组件，就能避免这种情况。该组件没有任何 API 接口，直接添加到场景即可生效。BlockInputEvents 组件将。，一般用于上层 UI 的背景。
cocosCreator支持gif图片demo-使微信小游戏支持gif图片
01-13
网上找了个基于cocosCreator使用libgif.js的插件来支持gif图片的方案，pc浏览器能加载出来，但微信开发者工具和真机上就报错了，因此优化了下源码，使cocosCreator支持gif图片，pc浏览器、微信开发者工具、微信小...
FairyGUI-cocoscreator:Cocos Creator 的灵活 UI 框架
07-24
FairyGUI-cocoscreator A flexible UI framework for Cocos Creator, working with the FREE professional Game UI Editor: FairyGUI Editor. Official website: 关于版本 master 适用于CocosCreator 2.4或更新的...
实现cocoscreator对图片透明区域穿透的处理
07-29
1、cocoscreator实现图片透明区域的穿透，解决了多图片重叠时的问题。 2、预览请移步：https://pan.baidu.com/s/11v096Bbi3PmqbAEL7Uonew#list/path=/我的分享/CSDN/TouchProj 3、版本creator2.0.8，如有疑问请...
cocos creator 2.4推箱子源码
11-13
《Cocos Creator 2.4 推箱子游戏源码解析》 在游戏开发领域，Cocos Creator 是一款广受欢迎的2D游戏引擎，它提供了一套完整的开发工具链，支持跨平台发布，并且具备强大的可视化编辑功能。在这个“cocos creator ...
基于asp.net的教师授课系统设计与实现.docx
最新发布
09-27
基于asp.net的教师授课系统设计与实现.docx
基于Springboot和Vue的精简博客系统源码 精简博客系统代码（程序，中文注释）
09-27
精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统-精简博客系统 1、资源说明：精简博客系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDE
基于asp.net的客户资源管理系统设计与实现.docx
09-27
基于asp.net的客户资源管理系统设计与实现.docx
嵌入式开发入门指南：硬件基础与软件实践
09-27
嵌入式系统是集成了计算机硬件和软件的专用计算系统，广泛应用于各种设备和行业，如家电、汽车、医疗设备和工业自动化等。嵌入式开发涉及
cocos creator 代码更换图片
03-21
在Cocos Creator中，可以通过代码来更换图片。下面是一种常见的方法： 1. 首先，确保你已经在Cocos Creator中创建了一个场景，并且已经添加了一个精灵(Sprite)节点。 2. 在代码中，首先需要获取到要更换图片的精灵节点。可以通过节点的名字或者标签来获取节点对象，例如： ```javascript var spriteNode = cc.find("Canvas/SpriteNode"); // 通过节点名字获取节点对象 // 或者 var spriteNode = cc.findWithTag(1); // 通过节点标签获取节点对象 ``` 3. 获取到精灵节点后，可以使用`Sprite`组件的`spriteFrame`属性来更换图片。`spriteFrame`属性表示精灵节点当前显示的图片资源。可以通过加载新的图片资源来替换当前的图片，例如： ```javascript var newSpriteFrame = cc.loader.getRes("新图片资源路径", cc.SpriteFrame); // 加载新的图片资源 spriteNode.getComponent(cc.Sprite).spriteFrame = newSpriteFrame; // 替换精灵节点的图片资源 ``` 注意，这里的"新图片资源路径"是指新图片资源在项目中的路径，可以是本地路径或者远程路径。 4. 最后，如果需要连续更换多张图片，可以在适当的时机重复上述步骤即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lazy_tomato

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值