巧用九宫格以减少UI资源量
UI资源量对资源包大小和内存的影响
UI资源具有以下特点:
(1)UI资源几乎都是图片,而图片是最占资源量的资源类型之一。
(2)Unity不支持外部压缩,即使在外部将一个10MB的图片压缩到只剩1MB,导入引擎之后它也会被解压出来变成10MB,然后转换为各平台特有的格式。
(3)UI资源一般都贴着相机视窗显示在最上层,也是游戏中人机交互的重要部分,一般需要保证高质量,所以一般都使用RGB32位色(真彩色),这会让资源量更大。
(4)UI资源一般涉及大量图标、背景框等,如果要保证高分辨率,它们将会导致资源量很大。
而且因为UI资源几乎都是以图集形式展现,所以在加载的时候,它会被整个一块儿加载进内容,如果不优化好UI医院两,会增大内存的开销。
什么是九宫格UI
九宫格,顾名思义,就是9个格子,这9个格子并不要求一定要相同大小,是一种做UI常见的方式,来增强UI资源的复用性并减少资源量。九宫格的主要目的是处理图片拉伸效果,因为图片一旦被拉伸,他就会出现形变、模糊等问题,但是,有的图片它的某一些部分又是允许被拉伸的。例如,一个UI背景框,它的中间部分几乎是一个纯色,允许被拉伸(纯色被拉伸不会发生质量问题),但是,边缘的4个角可能有一些特殊花纹或则倒角不允许被任意拉伸,这个时候即可以用九宫格,来使4个角不进行拉伸放大,只让中间部分进行拉伸放大,达到一个小框拉大成一个大背景框使用的同时图片质量又不会发生损伤的目的。
如何让美术提供合适的九宫格UI资源
让美术尽量地提供九宫格资源,主要有以下一些原则:
(1)不到万不得已的情况下,对于大面积地板性质的UI,尽量只在4个角上做文章,其他地方用可用于拉伸的纯色。
(2)凡是左右可以缩短的UI、上下可以缩短的UI,都尽量使用九宫格切短了交给程序来做。九宫格不一定是9个格子,也可以是3个格子等。
如何在NGUI中划分九宫格
当美术将一个资源图片合并成一个非常精简小巧的图片交给客户端程序后,客户端程序需要对这个图片进行切割九宫格。切割方法为如下。
(1)将这个UI原件制作到图集中去。
(2)选中图集的Atlas预设文件,在Inspector界面。
(3)在Sprite Details中单击Sprite按钮,会弹出这个图集中所有精灵的预览图,从中选中要切割九宫格的那个Sprite。
(4)调整Border设置项,这个Border就是切割九宫格所需要的设置。它一共需要设置4个参数:Left、Right、Bottom、Top,这4个项代表着:从左边朝右X像素位置处划一条竖着的线,从右边朝左X像素位置处划一条竖着的线,从下边朝上X像素处划一条横着的线,从上边朝下X像素处划一条横着的线。这样4条线就将一个Sprite切成了九宫格。
如何使用九宫格UI
使用九宫格UI的时候,必须保证这个Sprite是已经切好了九宫格。然后创建这个Sprite,将它的模式设置为Sliced即可。
Fill Center选项是自动拉伸九宫中的中心格子来充满中心被拉大的区域,如果不勾选Fill Center选项,则九宫格被拉伸之后,中心格子不会自动充满,会出现一个空隙。
也可以将图片设置为Advance高级模式,高级模式的本质区别是,允许对划分的九宫格的每一块设置一个Type,比如左上角的格子平铺、中心各自拉伸等。
去掉Mipmap以进一步降低资源包大小和内存占用
在Unity中,MipMap纹理图片的一个属性,有开启和关闭两种状态。比如说一张1024*1024的纹理图片,在导入引擎之后它的默认状态下MipMap是开启状态的,这会导致它会自动生成512*512、256*256、128*128、64*64、32*32的这么多张额外的图片。主要用途是,当这个纹理离摄像机足够远时(例如一个人跑到了很远的地方去),这个纹理图片在游戏摄像机中就会很小,这个时候为了节省性能和达到更好的显示效果,Unity会自动选用之前自动生成的众多MipMap小纹理中的一张来替代最初的纹理。
NGUI生成的UI图集也是一张纹理图片,它的默认状态下也是选中了MipMap的,但是,UI是附着在摄像机视窗最上层的,几乎不会存在像人物一样跑到很远的地方去的情况。所以,可以选中UI图集的图片文件,在图片类型红选择Advance高级类型,然后取消掉MipMap的选项,再Apply应用保存即可。
巧用九宫格以减少UI资源量的更多相关文章
- 巧用Drawable 实现Android UI 元素间距效果
源文地址: 巧用Drawable 实现Android UI 元素间距效果 在大部分的移动UI或者Web UI都是基于网格概念而设计的.这种网格一般都是有一些对其的方块组成,然后它们组合成为一个块.使用 ...
- Android 性能优化之减少UI过度绘制
什么是过度绘制(OverDraw) 在多层次重叠的UI结构里面,如果不可见的UI也在做绘制的操作,会导致某些像素区域被绘制了多次.这样就会浪费大量的CPU以及GPU资源.过度绘制最直观的影响就是会导致 ...
- 如何减少UI设计师产品与前端工程师的沟通成本
在日常工作中,UI设计师/产品与前端工程师难免会有一些冲突,这是我的一些小建议. 1.如何减少时间成本 先制作UI组件,再拼接页面 如果UI给前端的是一堆页面,前端需要花一些时间去整理提取UI组件.另 ...
- PHP也玩并发,巧用curl 并发减少后端访问时间
首先,先了解下 php中的curl多线程函数: # curl_multi_add_handle# curl_multi_close# curl_multi_exec# curl_multi_getco ...
- 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程
1.1. 为图片添加九宫格信息 在UI编辑器中添加一张图片 使用Photoshop打开这张图片 放大这张图片,使用切片工具,选取LeftTop(左上角固定不变的位置) 双击切片,找到尺寸信息 将尺 ...
- Cocos2d-JS项目之四:UI界面的优化
测试环境: iphone4.iOS6.1.2.chrome 37.2062.60,Cocos2d-js 3.6 之前写了不少,实际项目也按这个去优化了,也有效果,但到最后才发现,尼玛,之前都搞错了,之 ...
- 高级UI晋升之View渲染机制(二)
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 优化性能一般从渲染,运算与内存,电量三个方面进行,今天开始说聊一聊Android ...
- 游戏UI框架设计(三) : 窗体的层级管理
游戏UI框架设计(三) ---窗体的层级管理 UI框架中UI窗体的"层级管理",最核心的问题是如何进行窗体的显示管理.窗体(预设)的显示我们前面定义了三种类型: 普通.隐藏其他.反 ...
- UI型Bug定义的处理方法
[UI型Bug定义] 这里指的UI型指以下两种Bug: 第一种是文字型Bug,即和给定的字符资源不一致的Bug,比如文字/字符/提示语/引导语/用户协议等文字方面的不一致. 第二种是UI效果不一致的B ...
随机推荐
- python django第一天
django第一天,上一次是使用了virtualenv(沙盒),这一次就直接用virtualenv直接建一个django的环境,用来自己练着试试django: source django/Script ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- ORA-01034: ORACLE not available
ora-01034:oracle not available ora-27101:shared mermory realm does not exist 解决办法: ...
- 【模拟ACM排名】ZOJ-2593 Ranking (Andrew Stankevich’s Contest #5)
真心是道水题,但找bug找的我想剁手了/(ㄒoㄒ)/~~ 注意几个坑点, 1.输入,getline(cin); / gets(); 一行输入,注意前面要加getchar(); 输入运行记录的时候可 ...
- 【杨氏矩阵+勾长公式】POJ 2279 Mr. Young's Picture Permutations
Description Mr. Young wishes to take a picture of his class. The students will stand in rows with ea ...
- ConcurrentHashMap和Hashtable区别
Hashtable:synchronized是针对整张Hash表的,即每次锁住整张表让线程独占安全的背后是巨大的浪费 ConcurrentHashMap和Hashtable主要区别就是围绕着锁的粒度以 ...
- iOS开发者如何提高自己的水平(转)
阅读. 把一大堆的知识塞进脑子里.随着时间流逝,终归有一些会留在脑海里.我觉得有些东西读起来还挺有意思,那么也能算作一种愉快的消遣. 分析. 多去熟悉并了解一些工具,从高层的到底层的,不要害怕去使用他 ...
- css3 transition 实现图片放大缩小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Redis 命令 - Lists
BLPOP key [key ...] timeout Remove and get the first element in a list, or block until one is availa ...
- SignalR 2.0入门
下载已完成的项目 本教程展示如何使用那么 SignalR 创建一个实时聊天应用程序.你会那么 SignalR 添加一个空的 ASP.NET web 应用程序,创建一个 HTML 页面发送并显示消息. ...