网站后台 行间距调整,微信长图的免费模板网站,庆阳在线网,软文营销的本质一、为什么要使用九宫格图像拉伸 相信做过前端的同学都知道#xff0c;ui #xff08;图片#xff09;资源对包体大小和内存都有非常直接的影响。 通常ui 资源都是图片#xff0c;也是最占资源量的资源类型#xff0c;游戏中的ui 资源还是人机交互的最重要的部分#xff…
一、为什么要使用九宫格图像拉伸 相信做过前端的同学都知道ui 图片资源对包体大小和内存都有非常直接的影响。 通常ui 资源都是图片也是最占资源量的资源类型游戏中的ui 资源还是人机交互的最重要的部分因此质量要求都非常高通常都是使用rgb32位真彩色这就导致资源量比较大。 通常ui资源在打包时都会以图集的形式展现在加载到内存的时候是整块加载如果ui 没优化好则会增大内存的开销。
因此为了减少资源量增强ui 资源的复用解决图片被拉伸变形、模糊的问题 通常使用九宫格ui 的方式来对资源进行优化。 如下图
我们可以看到图像周围有一圈绿色的线条表示当前九宫格分割线的位置。
将鼠标移动到分割线上可以看到光标形状改变了这时候就可以按下并拖拽鼠标来更改分割线的位置。
我们分别拖动上下左右四条分割线将图像切分成九宫格九个区域在 Sprite 尺寸size变化时会应用不同的缩放策略。 二、九宫格图像拉伸使用步骤 1、设置 Sprite 组件使用 Sliced 模式 2、在资源管理器中选择需要调整九宫格的 spriteFrame 资源 3、在属性检查器中选择最下方的“Edit”编辑按钮 4、在九宫格编辑窗口编辑上、下、左、右边框的位置 三、九宫格图像拉伸调整技巧 可以鼠标滚轮放大图片预览试图便于精准调整边框位置。 如果不知道边框位置应该调整到多少合适可以参考美术设计图的圆角角度进行调整。 如图我们需要以九宫格拉伸实现以下带圆角的背景框效果 我们根据蓝湖上设计图的圆角角度此处为12 依次调整边框位置即可达到预期效果 编辑器调整
