首页 > Unity3D频道 > 【NGUI研究院之Unity插件】 > NGUI研究院之开发项目的一些使用心得比较细节(五)
2012
07-29

NGUI研究院之开发项目的一些使用心得比较细节(五)

         不知不觉MOMO使用NGI插件已经有一段时间了,感觉NGUI真的是目前Unity3D中最好用的UI插件。但是它也有一些不是BUG的BUG,这些问题可能会让新人摸不着头脑,那么这篇文章MOMO将总结一下这段时间用NGUI的一些开发心得,这些也好几个朋友问题我的一些问题,我将这些东西列出来。 哇咔咔~

 

1.对图片的限制

如果是移动平台中iPhone 或Android请保持的你的图片尺寸在小于等于1024 X 1024 ,否则载入的图片将无法显示,绘制图片的地方会是一片黑漆漆的东西,PC平台的话图片最大使用的尺寸是4096X4096 。

注意!这还没完、如下图所示,无论在任何平台中请保持你的图片宽或高的尺寸和下图中的一样。比如 32X32 、32X64 、 128 X 32、 1024 X519、 1024 X1024、 512 X 32 像这样和下图所出现的尺寸数值一样的比例才行。 

 

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 1

 

举个例子,比如美术给你出了一张960X640的图片,此时你直接放在程序中,NGUI会自动将这张图片拉伸。所以你需要让美术把这张960X640的图片放在1024X1024 尺寸的图中给你,这样图片就不会拉伸了,如下图所示,就好像这样,这张图的尺寸是 1024X1024 但是程序中通过精灵切割的只是 960X640这部分,所以这个图就不会在iPhone或Android中拉伸。

 

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 2

 

接着是材质,对材质着色器的选择也有一点要求.如下图所示,请选择你的材质着色器为Unlit/Transparent Colored  如果你选择的不是它将会造成你的UI无法显示背景透明的图片喔。

 

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 3

 2.精灵预设或者字体预设

在导航栏中创建用NGUI创建一个新UI后,并且在Project视图中已经创建了精灵预设和字体预设后。然后在Panel(面板)中创建新部件时,如下图所示,点击Atlas 或 Font后如果发现找不到对应的预设。不要紧张其实很简单,只需你将Project视图中的精灵或字体预设先拖拽至Hierarchy视图中,此时在重新点击创建新部件,然后在点击Atlas或Font就会出现你需要的精灵或字体预设。选择完毕再将Hierarchy视图中拖拽的预设删掉即可。 对于任何一个新精灵预设或字体预设都要用一次这样的方法,再次使用就不会出现这个问题。

(补充,引用评论中的一句,鼠标在Project视图中点一下就可以  感谢回复~~)

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 4

 

3.在3D世界之上创建你的UI。

比如3D游戏中界面中选择技能、物品、人物状态等的一些UI。这些UI不会以因主角移动而发生位置的改变,并且永远出现在界面最前面。如下图所示,把你游戏世界中原本的摄像机放在UI Root (2D)下面,并且让所有的UI都是这个Camera的子类,这么做是为了解决摄像机发生移动后所有的UI也能和他保持原本的距离关系,至于其它的3D游戏对象请保持与UI Root (2D) 为同级关系即可。因为需要显示3D物体,请设置你的摄像机Projection为Perspective。

 

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 5

 

4.Scroll View列表的显示区域

如何修改Scroll View列表的显示区域。这个问题我记得有好几个朋友都问过我,我觉得这个问题是NGUI的一个BUG。 但是我们使用另外一种方式可以很好的解决这个问题,那么MOMO和大家说说我的开发心得。

如下图所示,在这里可以修改ScrollView中整体的显示区域,但是请注意这里紧紧是修改它的显示区域,,因为之前设定在ScrollView中的item的位置是不会因为scrollView显示区域的修改而修改。建议修改ScrolleView显示的宽 和高 在这里修改,但是显示的X Y轴坐标就不要在这里改了,因为改了也没用。

 

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 6

 

 

如果你要修改Scroll View显示X Y轴坐标的话,如下图所示,直接在Hierarchy视图中选择ScrollView显示的父面板对象,然后在Scene视图中更改这个对象的XYZ坐标即可,这样对应下方所有的ScrollView 的item也会跟着修改。继而达到完美修改NGUI ScrollView的显示区域喔。

 

NGUI研究院之开发项目的一些使用心得比较细节(五) - 雨松MOMO程序研究院 - 7

 

最后,这篇文章也没什么代码,不过MOMO希望能给一些刚刚入门NGUI的朋友一些帮助,哇咔咔。

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

NGUI研究院之开发项目的一些使用心得比较细节(五)》有 58 条评论

  1. lin 说:

    NGUI的tween动画用了之后有事界面会丢失是什么情况?

  2. Ton Chen 说:

    我的是正版的AlphaGif

  3. 十九 说:

    请问,为什么NGUI的按钮,打开界面时进行了isenable = false,第一次打开时没有效果,只有第二次打开时才会有反应?

  4. viagra 说:

    Thats pretty cool!…

    firt aid kits?…

  5. 文杰 说:

    master雨松,古道热肠啊

  6. 仗剑走天涯 说:

    松松,不好意思又来问问题了。public virtual void OnClick (){if (enabled){if (!mStarted) Start();if(targetLabel.text.Equals(“FunctionA”)){InvokeRepeating(“ClockTimer”, 1, 1);}else if(targetLabel.text.Equals(“FunctionB”)){CancelInvoke(“ClockTimer”);passedSeconds = 0;}}}void ClockTimer (){passedSeconds ;timeLabel.text = string.Format(“{0:00}:”, passedSeconds/3600) string.Format(“{0:00}:”, passedSeconds/60) string.Format(“{0:00}”, passedSeconds`);}这段代码我加在NGUI的UIButtonColor.cs里,为什么点击FunctionB按钮,没有停止ClockTimer? 试过,执行到CancelInvoke这里了,可是timeLabel.text里的计数时间还在一秒一秒的加,困惑。

  7. 仗剑走天涯 说:

    松松,不好意思又来问问题了。public virtual void OnClick (){if (enabled){if (!mStarted) Start();if(targetLabel.text.Equals(“FunctionA”)){InvokeRepeating(“ClockTimer”, 1, 1);}else if(targetLabel.text.Equals(“FunctionB”)){CancelInvoke(“ClockTimer”);passedSeconds = 0;} }}void ClockTimer (){passedSeconds++;timeLabel.text = string.Format(“{0:00}:”, passedSeconds/3600) + string.Format(“{0:00}:”, passedSeconds/60) +string.Format(“{0:00}”, passedSeconds%60);}这段代码我加在NGUI的UIButtonColor.cs里,为什么点击FunctionB按钮,没有停止ClockTimer? 试过,执行到CancelInvoke这里了,可是timeLabel.text里的计数时间还在一秒一秒的加,困惑。

  8. 西凡纳斯 说:

    想请教一下 ngui 屏幕自适应 的问题。 安卓手机的屏幕分辨率很多。怎么兼容比较方便呢?

  9. liubin0908 说:

    请问momo,uilabel在clip的时候没有切割是怎么解决的?

  10. 若水秋荷 说:

    雨松大哥,请问下NGUI在Android屏幕自适应率的问题,如何才能让NGUI屏幕自适应呢?这个问题一直困扰找我,能不能给详细说下?

  11. 若水秋荷 说:

    谢谢雨松大哥,在这里我学到了很多东西,希望多出些关于NGUI的东西,最好写本书。永远支持你。

留下一个回复

你的email不会被公开。