Cocos Creator3.8 项目实战(四)巧用九宫格图像拉伸

简介: Cocos Creator3.8 项目实战(四)巧用九宫格图像拉伸

一、为什么要使用九宫格图像拉伸


相信做过前端的同学都知道,ui (图片)资源对包体大小和内存都有非常直接的影响。

  • 通常ui 资源都是图片,也是最占资源量的资源类型,游戏中的ui 资源还是人机交互的最重要的部分,因此质量要求都非常高,通常都是使用rgb32位真彩色,这就导致资源量比较大。
  • 通常ui资源在打包时,都会以图集的形式展现,在加载到内存的时候,是整块加载,如果ui 没优化好,则会增大内存的开销。

因此为了减少资源量,增强ui 资源的复用,解决图片被拉伸变形、模糊的问题, 通常使用九宫格ui 的方式来对资源进行优化。


如下图:

我们可以看到,图像周围有一圈绿色的线条,表示当前九宫格分割线的位置。

将鼠标移动到分割线上,可以看到光标形状改变了,这时候就可以按下并拖拽鼠标来更改分割线的位置。

我们分别拖动上下左右四条分割线,将图像切分成九宫格,九个区域在 Sprite 尺寸(size)变化时会应用不同的缩放策略。



二、九宫格图像拉伸使用步骤


(1)、设置 Sprite 组件使用 Sliced 模式


(2)、在资源管理器中,选择需要调整九宫格的 spriteFrame 资源


(3)、在属性检查器中,选择最下方的“Edit”编辑按钮


(4)、在九宫格编辑窗口,编辑上、下、左、右边框的位置


三、九宫格图像拉伸调整技巧

  • 可以鼠标滚轮放大图片预览试图,便于精准调整边框位置。
  • 如果不知道边框位置应该调整到多少合适,可以参考美术设计图的圆角角度进行调整。
    如图,我们需要以九宫格拉伸实现以下带圆角的背景框效果:


我们根据蓝湖上,设计图的圆角角度(此处为12) ,依次调整边框位置,即可达到预期效果:


编辑器调整:



相关文章
|
JavaScript Windows
Cocos Creator3.8 项目实战(十)使用 protobuf详细教程
Cocos Creator3.8 项目实战(十)使用 protobuf详细教程
1556 0
CocosCreator 面试题(十六)Cocos Creator 节点池的基本原理是什么?如何使用?
CocosCreator 面试题(十六)Cocos Creator 节点池的基本原理是什么?如何使用?
849 0
|
存储
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
578 0
|
存储
CocosCreator3.8研究笔记(十一)CocosCreator Prefab(预制件)理解
CocosCreator3.8研究笔记(十一)CocosCreator Prefab(预制件)理解
985 0
|
存储 JSON 缓存
CocosCreator3.8研究笔记(十五)CocosCreator 资源管理Asset Bundle
CocosCreator3.8研究笔记(十五)CocosCreator 资源管理Asset Bundle
999 0
|
安全 网络安全 数据安全/隐私保护
CocosCreator 面试题(十四)Cocos Creator WebSocket 、Socket.IO分别是什么?
CocosCreator 面试题(十四)Cocos Creator WebSocket 、Socket.IO分别是什么?
745 0
|
8月前
|
存储 API 图形学
Unity 给Animator动画添加事件(动态的)
在 Unity 中,通过动画事件系统可在动画播放的特定时间点触发自定义函数。动态添加事件的步骤包括获取 `AnimationClip` 对象,创建并添加 `AnimationEvent`,最后调用 `Rebind()` 更新动画控制器。示例代码展示了如何在动画开始、中间和结束时触发事件,实现与游戏逻辑的交互。
|
索引 Windows
CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解
CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解
806 0
CocosCreator3.8研究笔记(二十一)CocosCreator Tween系统理解(1)
CocosCreator3.8研究笔记(二十一)CocosCreator Tween系统理解
1556 0
|
计算机视觉
CocosCreator 面试题(十九) Cocos Creator 材质 shader 分别是什么?
CocosCreator 面试题(十九) Cocos Creator 材质 shader 分别是什么?
559 0