UI制作中的九宫格批量输出

为了优化游戏UI资源,通过将图片划分为九宫格并去除中间纯色部分,可以实现资源的压缩和重用。本文介绍了一款使用Air编写的批量处理九宫格图片的工具,美术只需输入border值即可自动化处理。工具通过记录九宫格的每个小块并按border值拼接,支持三宫格特殊情况,提高效率和资源可重用性。
摘要由CSDN通过智能技术生成

游戏的UI制作中,出于对资源的压缩和重用,会对一些有规则的图片划分九宫格,例如下图




中间部分如果是纯色的话,完全可以挖去,然后在U3D的图集精灵的border中设置对应的top,right,bottom,left,这样既可以节省资源,又可以重用到不同大小的但具有一样颜色的地方。

传统的photoshop可以挖去中间部分,但是项目中的美术大哥觉得还是批量处理比较有效率,所以用Air写了一个批量处理九宫格图片的工具。

在这个工具中,美术需要把九宫格的四个border值填充到名字,顺序为top, right, bottom, left例如




top=20px, right=20px, bottom=20px, left=20px,那么图片的命名为Button#21#22#23#24.png

(Button#top#right#bottom#left.png)

这样多个图片导入工具中,导出来的效果


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UI九宫是一种在制作UI界面常用的技术,它以是否发生形变为基准。九宫可以帮助我们在UI设计应对不同尺寸的屏幕,同时最大程度地节省纹理资源。在UnityUI(UGUI九宫纹理拉伸是一种常见的使用方式,不论是游戏还是应用UI都可以使用九宫纹理拉伸。通过九宫拉伸,我们可以任意缩放图片而保持良好的显示效果。九宫的顺序是固定的,左边在九宫对应的位置是4,右边是5。因此,在对UI进行水平拉伸时,只会改变位置5的形变;而在垂直拉伸时,位置4和5都会发生形变。通过理解九宫的原理和使用方法,我们可以更好地应对UI的变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Unity学习笔记——UI九宫的原理](https://blog.csdn.net/m0_52058484/article/details/129057073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [unity3d UGUI九宫纹理拉伸的使用](https://blog.csdn.net/andyhebear/article/details/50476802)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值