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


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


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

  • 通常ui 资源都是图片,也是最占资源量的资源类型,游戏中的ui 资源还是人机交互的最重要的部分,因此质量要求都非常高,通常都是使用rgb32位真彩色,这就导致资源量比较大。

  • 通常ui资源在打包时,都会以图集的形式展现,在加载到内存的时候,是整块加载,如果ui 没优化好,则会增大内存的开销。


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


如下图:

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

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

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


在这里插入图片描述


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


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

在这里插入图片描述


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

在这里插入图片描述


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

在这里插入图片描述


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

在这里插入图片描述


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

  • 可以鼠标滚轮放大图片预览试图,便于精准调整边框位置。

  • 如果不知道边框位置应该调整到多少合适,可以参考美术设计图的圆角角度进行调整。

    如图,我们需要以九宫格拉伸实现以下带圆角的背景框效果:

在这里插入图片描述


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

在这里插入图片描述


编辑器调整:

在这里插入图片描述


  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

w风雨无阻w

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

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

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

打赏作者

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

抵扣说明:

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

余额充值