码迷,mamicode.com
首页 > 编程语言 > 详细

Unity插件之NGUI学习(8)—— Table和NGUI尺寸转换为世界坐标系尺寸

时间:2014-10-15 16:44:41      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:unity   ngui   uitable   

根据 Unity插件之NGUI学习(2),创建一个UI Root,在UI Root下创建一个Texture作为背景图,并设置图片,在Wiget下调整大小;然后在UI Root下再创建一个Panel。

bubuko.com,布布扣

在Hierarchy窗口选中Panel,然后选择菜单Component->NGUI->Interaction->Table,查看Inspector窗口,在Panel的属性中增加了UITable。

bubuko.com,布布扣

Columns 表示每行有几个元素

Direction 表示超过每列的元素后添加元素的方向

Sorting 元素排序的方式

Hide Inactive 默认勾选,所有看不到的子节点在排列时被忽略

Padding x,y方向的间隔,这里的值是基于NGUI的


创建一个Level的Prefab,在Hierarchy窗口下,添加多个Level,然后选中Panel,在Inspector中,用鼠标右击UITable,并执行Execute,就可以在预览窗口看到排列好的Table界面了。

bubuko.com,布布扣


因为Panel在Inspector窗口的坐标是可以调整的,但是它的大小也是基于NGUI的,为了能使整个Tabel界面居中放置,我必须计算其大小,然后将调整整个Panel的位置。

这里遇到一个问题,Level是用UISprite创建的,所以获得的高度和宽度也是基于NGUI的,并非是基于世界坐标系的,UITable的Padding也同样是。

问题的关键在于,所有的NGUI控件都是基于UIWidget的,所以从源码入手,会发现:

public override Vector3[] worldCorners
{
get
{
Vector2 offset = pivotOffset;


float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight;


Transform wt = cachedTransform;


mCorners[0] = wt.TransformPoint(x0, y0, 0f);
mCorners[1] = wt.TransformPoint(x0, y1, 0f);
mCorners[2] = wt.TransformPoint(x1, y1, 0f);
mCorners[3] = wt.TransformPoint(x1, y0, 0f);


return mCorners;
}
}

其坐标和尺寸都是通过Transform.TransformPoint()方法转换的——变换位置从自身坐标到世界坐标。好了,下面就是我创建的TableTest 脚本,是挂在Panel上面的。

using UnityEngine;
using System.Collections;


public class TableTest : MonoBehaviour {

private UISprite level;
private UITable table;
private float tableWidth, tableHeight;


// Use this for initialization
void Start () {
table = GetComponent<UITable>();
level = GetComponentInChildren<UISprite>();
int columns = table.columns;

// 计算Table的row
int count = transform.childCount;
int rows = count % columns == 0 ? count / columns : count / columns + 1;

// 计算Table的宽度和高度,基于NGUI也就是自身原本的尺寸
tableWidth = columns * (level.width + 2 * table.padding.x);
tableHeight = rows * (level.height + 2 * table.padding.y);
Debug.Log("level width=" + level.width + ", height=" + level.height);
Debug.Log("table width=" + tableWidth + ", height=" + tableHeight);

// 将Table的宽度高度转换到世界坐标系的偏移
Vector3 delta = transform.TransformPoint(new Vector3(-tableWidth / 2, tableHeight / 2, 0));
transform.Translate(delta);
}

// Update is called once per frame
void Update () {

}

}


这样再运行游戏的话,就能看到整个Table会居中在整个预览窗口。

bubuko.com,布布扣

Unity插件之NGUI学习(8)—— Table和NGUI尺寸转换为世界坐标系尺寸

标签:unity   ngui   uitable   

原文地址:http://blog.csdn.net/xcookies/article/details/40110343

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!