cocosCreator 精灵图片加载（一键还原大小+动态修改图片）

最新推荐文章于 2024-07-12 16:46:59 发布
最新推荐文章于 2024-07-12 16:46:59 发布
阅读量3k 收藏 1
点赞数
分类专栏： cocosCreator 文章标签： cocosCreator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanghuipost/article/details/102657471
版权

问题：在cocosCreator中没找到对图片重置大小的按钮（在cocos2d-x中，图片可以通过重置大小来快速还原图片的原本大小）

所以在cocosCreator中替换资源的时候，图片资源和原来不同时，会出现变形。

 

解决办法：打开sprite手册

这里 Size Mode 的三种模式介绍

要想使用图片原尺寸，就选择Trimmed或者Raw

有时候需要动态改变图片的大小或者形状的，比如剪切头像、就可以选择Custom

 

从Cocos2D-x使用习惯后再用Cocos creator 有点不习惯，实际上都有手册。控件属性看起来也不会太麻烦。

huanghuipost
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CocosCreator客户端优化系列（一）：加载优化（上）
BigBear的博客
12-17 1万+
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/85053758   最近打算花点时间，把客户端这边常用的一些优化方法总结一下，分享出来。计划大概分为四个部分：加载优化、渲染优化、内存优化、CPU占用以及性能优化。这些措施每一个都会带来多方面的优化效果，但也有部分措施拥有一定的局限性，因此需要各位理解后根据项目实际情况选择使用。 ...
cocos creator 动态生成图片，改变大小问题
a8154881的博客
12-25 1万+
问题由来: 做微信小游戏，需要动态加载微信头像，动态生成图片代码为: let pic = item.getChildByName('pic'); let sprite = pic.getComponent(cc.Sprite); cc.loader.load({url:user.avatarUrl,type:'png'},function (err,img) { sprite.spriteFram...
【Cocos频道】还原CocosCreator资源（四）
MOMO
04-02 6043
还原CocosCreator资源 cocos 3.x 的资源
精灵图制作及使用
最新发布
Ice__wine的博客
07-12 329
为了减小游戏体积，加快加载游戏，使用精灵图来达到效果。
还原CocosCreator资源配置 还原图集plist和动画配置文件
qq_42935776的博客
04-04 1677
资源还原
CocosCreator知识库<三>关于CocosCreator中更换图片的三种方式_通用方式_"当前"尺寸_"原有"尺寸
热门推荐
⎝⎝⎝MaximilianLiu⎠⎠⎠的博客
12-26 1万+
CocosCreator知识库关于CocosCreator中更换图片的两种方式 首先,准备两张图,建立resources文件夹并且将该两张图放入该文件夹下,拖其中一张图至Canvas下并且挂上我们唯一的脚本. //************************************核心代码*************************************// //****
一周搞定Cocos creator（cocos creator 入门篇） 5 - Sprite（精灵）
CannyRunnig的专栏
10-01 898
Sprite 精灵也是游戏开发中必不可少的元素 游戏中看到的障碍物 怪兽 等，这么说 能看到的图片 他的属性基本都是Sprite 这里看下Creator的Sprite 在层级管理器-右键-创建节点-创建渲染节点（这里注意） 或者是直接控件库拖拽 新建完成后 看下Sp的属性 依然 上面部分也就是Node的常用属性 大小 锚点 等，着重看下后面 SpriteFrame，这里可以直接拖拽需要的Sprite过来， 上面看下Atlas 也就是代表是否用的图集，这里跟2dx的方式还是不一样的 后面的其他属
cocoscreator 保存图片到本地
04-15
在Cocos Creator中，保存图片到本地是一个常见的需求，尤其对于游戏开发或者任何涉及用户交互的应用来说。这个过程涉及到图像处理和本地存储两个关键部分。接下来，我们将详细探讨如何使用Cocos Creator实现这一功能...
cocos creator 加载本地图片实现动态预览demo源码
05-04
//最近在研究creator html5开发，喜欢交流的加扣扣群427719099，各种资源各种技术应有尽有
实现cocoscreator对图片透明区域穿透的处理
07-29
1、cocoscreator实现图片透明区域的穿透，解决了多图片重叠时的问题。 2、预览请移步：https://pan.baidu.com/s/11v096Bbi3PmqbAEL7Uonew#list/path=/我的分享/CSDN/TouchProj 3、版本creator2.0.8，如有疑问请...
cocosCreator支持gif图片demo-使微信小游戏支持gif图片
01-13
网上找了个基于cocosCreator使用libgif.js的插件来支持gif图片的方案，pc浏览器能加载出来，但微信开发者工具和真机上就报错了，因此优化了下源码，使cocosCreator支持gif图片，pc浏览器、微信开发者工具、微信小...
cocos-creator点击按钮切换界面,动态加载页面，按钮缩放
06-30
在Cocos Creator中，开发2D游戏或交互式应用时，常常需要实现用户点击按钮后切换界面、动态加载页面以及按钮的缩放效果。这些功能是游戏和应用中常见的交互设计，增强了用户体验并提升了产品的可玩性。下面将详细...
LazyAn-—CocosCreator优化系列（一）：加载优化
qq_39014369的博客
04-13 2979
ps：本系列转载自大佬-BigBear023，为了方便日后学习，查阅和分享，现对系列文章重新进行整理、排版并对部分内容进行修改；如有不妥，请大佬联系我删除。原文链接： https://blog.csdn.net/zzx023/article/details/85318028 本系列分为四个部分：加载优化、渲染优化、内存优化、CPU占用以及性能优化。 这些措施每一个都会带来多方面的优化效果，但也有部分措施拥有一定的局限性，因此需要各位理解后根据项目实际情况选择使用。 图片资源的处理...
cocos creator 根据图片形状 实现代码动态创建多边形碰撞器的点PolygonCollider，因为cocos的多边形Regenerate Points功能只能在编辑器使用
github_38633141的博客
09-03 2517
cocos creator 2.4.4 因为需要这样一个功能，不知道图片的形状，但是要实现图片和其他物体碰撞 所以开始觉得没问题，因为cocos creator的PolygonCollider中在编辑器Regenerate Point可以实现生成图片的多边形碰撞点， 后来看到代码中获取不到Regenerate Point的方法，看了编辑器的底层代码，是只有在编辑器中才能使用 所以只能自己实现获取图片的轮廓点，把得到的点赋值给多边形的points数组就可以了 1,主要使用的代码就...
cocostudio 九宫格拉伸
打酱油的专栏
07-15 6504
参考： 九宫格 九宫格是利用一张很小的图片来绘制大区域图片却不失真的技术。 绘制时会遵循下面的规则：   a. 保持4个角部分不变形 b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸） c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）   Cocos Studio
Cocos Creator3.8 项目实战（四）巧用九宫格图像拉伸
w风雨无阻w的专栏
10-04 2234
通常ui 资源都是图片，也是最占资源量的资源类型，游戏中的ui 资源还是人机交互的最重要的部分，因此质量要求都非常高，通常都是使用rgb32位真彩色，这就导致资源量比较大。通常ui资源在打包时，都会以图集的形式展现，在加载到内存的时候，是整块加载，如果ui 没优化好，则会增大内存的开销。将鼠标移动到分割线上，可以看到光标形状改变了，这时候就可以按下并拖拽鼠标来更改分割线的位置。我们可以看到，图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。可以鼠标滚轮放大图片预览试图，便于精准调整边框位置。
在cocos2d中实现真正意思上的图片放大和缩小
weixin_30402085的博客
03-11 541
http://www.cnblogs.com/dinghing154/archive/2012/08/05/2623970.html 在编写程序的时候我们常常使用self.scale来让我们使用的图片放大和缩小，但这种变化并没有真正意义上让我们的图片的大小发生改变，当我们要对这种图片进行点击或其他操作的时候常常会发生错误，这里我使用另外一种方法实现这个效果，完成真正意义上的图片放大和缩小。 这...
cocos 图片放缩变化
阿豪
12-28 316
原文链接: cocos 图片放缩变化 上一篇: ...
Cocos Creator3.x中使用Sprite
qq_34589620的博客
08-02 912
近日使用Cocos开发了两款游戏，第一款使用的是Cocos 2.x ， 第二款使用的是Cocos 3.x，使用Cocos 3.x时发现好多2.x可以直接用的一些操作 3.x不行了 就先拿这个Sprite来说说吧 ！ 官方Sprite 组件使用介绍： Sprite（精灵）是 2D 游戏中最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片,这个是官网对Sprite的解释 添加 Sprite 组件之后，通过从 资源管理器 中拖拽 Texture 或.
Cocos Creator 动态加载
04-06
Cocos Creator 是一款基于 JavaScript 的游戏开发工具，支持动态加载资源。动态加载资源是指在游戏运行时，根据需要动态加载游戏所需的资源，例如图片、声音、动画等。 动态加载资源的优点在于可以减少游戏的启动时间和内存占用，同时也可以提高游戏的灵活性和可维护性。下面介绍一下 Cocos Creator 中如何进行动态加载资源。 1. 加载图片资源 使用 cc.loader.loadRes() 方法可以加载项目中的资源，例如图片资源。示例代码如下： ``` cc.loader.loadRes("image/test", cc.SpriteFrame, function (err, spriteFrame) { if (err) { cc.error(err.message || err); return; } var node = new cc.Node("New Sprite"); var sprite = node.addComponent(cc.Sprite); sprite.spriteFrame = spriteFrame; node.parent = cc.director.getScene(); }); ``` 该代码会加载项目中的 "image/test" 路径下的图片资源，并创建一个新的 Sprite 对象，将图片资源赋值给 Sprite 的 spriteFrame 属性，最后将 Sprite 对象添加到场景中。 2. 加载声音资源 使用 cc.loader.loadRes() 方法也可以加载声音资源。示例代码如下： ``` cc.loader.loadRes("audio/test", cc.AudioClip, function (err, audioClip) { if (err) { cc.error(err.message || err); return; } cc.audioEngine.play(audioClip, false, 1); }); ``` 该代码会加载项目中的 "audio/test" 路径下的声音资源，并播放该声音。 3. 加载动画资源 使用 cc.loader.loadRes() 方法也可以加载动画资源。示例代码如下： ``` cc.loader.loadRes("animation/test", cc.AnimationClip, function (err, animationClip) { if (err) { cc.error(err.message || err); return; } var node = new cc.Node("New Animation"); var animation = node.addComponent(cc.Animation); animation.addClip(animationClip); animation.play("test"); node.parent = cc.director.getScene(); }); ``` 该代码会加载项目中的 "animation/test" 路径下的动画资源，并创建一个新的 Animation 对象，将动画资源添加到 Animation 中，最后播放名为 "test" 的动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值