1. 程式人生 > >unity3d的GUI元素的界面坐標系統總結(有公式)

unity3d的GUI元素的界面坐標系統總結(有公式)

lin oid con app rgb 公式 nbsp 多說 tar

大家好,我是孫廣東,我近期在做一個遊戲,UI就是使用了系統提供的GUI。遇到非常多的問題。相信大家經常使用的就是NGUI或者2DTOOLKIT.活不多說。

Unity有四個重要的坐標系統。

能夠查看例如以下文章進行了解:

我今天主要是要說的內容就兩個:GUIText 和GUITexture

1、GUIText

錨點(Anchor)的概念我就不介紹了。像NGUI和tookit2d還有 Cocos2d中都有這個重要的概念,對於圖片我們能夠覺得是圖片自身的原點。

而GUIText 對象本身也是支持設置錨點的,可是僅僅有9個選項。用於設置顯示的Text文本的總體的自身坐標原點。

技術分享

不論什麽對象都會有Transform組件,而在GUIText對象中的實用的就是Position。 這個Position代表了什麽呢?

一個重要的公式:

整個Text文本的的總體的自身坐標原點在窗體屏幕上的位置:

pos(x,y) = (Position.x*Screen.width + PixelOffset.x, Position.y*Screen.height + PixelOffset.y)

這個Position它代表了整個Text文本的的總體的自身坐標原點的位置的基礎,Position.x是整個窗體屏幕的寬度的倍數,Position.y是整個窗體屏幕的高度的倍數。

註意屏幕的坐標原點是左下角為(0,0)。

你最好還是能夠嘗試的試試這些值。觀察變化。

其它的屬性這裏不做介紹。

2、GUITexture

這個是沒有錨點的,圖片的自身原點就是在左下角為(0,0,)。

一個重要的公式:

整個GUITexture圖片的總體的自身坐標原點在窗體屏幕上的位置:

pos(x,y) = (Position.x*Screen.width +PixelInset.x, Position.y*Screen.height +PixelInset.y)

這個Position它代表了整個Text文本的的總體的自身坐標原點的位置的基礎,Position.x是整個窗體屏幕的寬度的倍數,Position.y是整個窗體屏幕的高度的倍數。

兩個值的自己能夠嘗試著去修改。觀察現象。

最後給大家做這個邏輯: 例如以下的一個遊戲結束的效果。

技術分享

對象的邏輯是這種,GameOver是一個空對象。

BG_End 是遊戲結束的大背景圖

技術分享

以下是三個文本GUIText

和還有GUITexture ”本次獲得積分“圖片。

和一個button形狀的GUITexture圖片

技術分享

為了讓整個的邏輯不變形。就是讓前面的各個小的UI元素做遊戲結束的大背景圖的子對象。 我們讓子對象和父對象都是相對於Transform.Position.x,y的值(要註意), 可能覺得我設置子對象的Transform.position.x.y都是 0,0,。註意子對象從父對象那繼承了。對子對象一樣。這樣我們就這是子對象的PixelInset.x,y 調整到合適的位置。

我們記錄button假圖片的這個值。

如上圖:我們編寫代碼顯示真正的button時要用到。

以下編寫代碼來顯示這個button:

voidOnGUI() //顯示button //

{

GUI.skin= myGUI;

if(GUI.Button(newRect(Screen.width*0.5f-26.3f,Screen.height*0.5f+178.71f-67f,61f,67f),"",GUI.skin.GetStyle("ContinueButton")))

{

Application.LoadLevel("mainMenu");

}

}

這裏要註意一個基本的內容是“繪制GUI界面的坐標系以屏幕的左上角為(00)點

Button的位置公式:

(Screen.width*(子Position.x+父Position.x)+子PixelInset.x的原值,Screen.height*(子Position.y+父Position.y)+ 子PixelInset.y的絕對值值-子PixelInset.h)

大小遊戲中一般就是美工提供的原圖大小。

自己好好領悟吧。

unity3d的GUI元素的界面坐標系統總結(有公式)