NGUI Tutorial: Step 2

NGUI Tutorial: Step 2 Sprite

Now that our UI has been set up in the previous step, let’s add few widgets: NGUI menu -> Create a Widget.

This wizard lets you create some of the basic widgets. You will need to select the atlas you will want to use, as well as the font. Since you are in a brand-new project, clicking the buttons won’t have much of an effect as they only show you recently used elements. What you will want to do is Drag & Drop the atlas and font you wish to use into the fields beside the buttons. Let’s choose the SciFi Atlas for the atlas, and SciFi Font – Normal for the font.

NGUI 教學:第二步 建立小圖

(維克:altas是很多小圖集合而成的一張大圖,而sprite是大圖裡面中的小圖,有人叫他精靈,當然它也是雪碧的名字 。)

現在我們的UI在上一步驟中已經建立好了。讓我們來加入一些小工具:NGUI menu -> Create a Widget.

上面這個精靈讓你夠建立一些基本的工具,你需要先選擇你想要使用的圖集(atlas),以及字型。因為你現在是在新的專案下,所以按下按鈕沒有啥用處,因為按鈕是用來顯示你最近使用過的圖集或是字型。你要做的是把你要用的圖集以及字型拖到按鈕旁邊框框內。讓我們選擇 SciFi Atlas來做為我們的圖集,以及SciFi Font – Normal做為字型。

Next comes the Template field. Here you can select what type of widget you wish to create by choosing from a list of available templates. Note that I said “templates”, by the way — this wizard is merely here for your convenience that should help you get started. Once you get a hang of using NGUI, you will likely spend much more time copy/pasting entire widgets than using this wizard. But — I am getting ahead of myself. For now, let’s create your first widget!


(維克:模板指的是使用者介面中常用到的幾個功能模板,像是按鈕 輸入框 標簽等等,在模板框中選擇你要的模板,就可以快速地建立按鈕,輸入框等,各種多樣化的使用者介面。)

  1. Assuming you’ve chosen the SciFi Atlas as noted above, select the “Dark” sprite.
  2. Click the Add To button (if the button is greyed out for you, it means you forgot to add the atlas — just find the SciFi Atlas and drag it onto the field). If you are not sure how to find it: in the Project window there is a search field next to the “Create” drop-down. Type “scifi” there.
  3. Your sprite has now been created and it is currently selected. It’s also very, very small! Let’s change that. When working with NGUI, you will always be moving widgets around, scaling them, and rotating them exactly the same as any other game object — by modifying their Transform.
  1. 假設你已經照上面講的選擇了SciFi Atlas,接下來把Sprite部分的框框選擇“Dark”這個小圖。(維克:請參考上面的圖。)
  2. 按下Add To按鈕(假如按鈕變成灰色的,代表你忘記加入圖集了— 只要找出SciFi Atlas,再把他拖進去框框內就可以了).假如你不確定該如何找到他:在專案視窗中,在"Creat"下拉選單旁邊有一個搜尋框,在裡面打"scifi"就可以搜尋到了。
  3. 你的小圖被建立,並且是在選取狀態。它也非常非常的小:讓我們來改變這點。當你使用NGUI進行工作時,你總是會藉由改變物件的 Transform屬性來移動,放大縮小以及旋轉該物件。

One important thing to note is that the Z part of the Transform is not used when working with widgets from the same atlas. Instead, you can bring them forward or push them back by adjusting the Depth parameter. If later on you end up working with multiple atlases (or multiple UI Panels), you will need to adjust the Z. The reason for this is simple — this lets you create completely flat windows that you can turn to the side without their widgets messing up the order in which they are drawn.

有一個重點要注意的是,當工具集使用同一個atlas時,Transform 屬性的Z軸部分是沒有用的。但你可以藉由調整深度(Depth)參數來把widgets往前面移動,或是往後面移動。假如你有多個圖集(或是多個UI Panels),你才會需要調整Z軸。這理由很簡單— 你可以建立一個完全平坦的視窗,而且也不會在換到另外一邊時把繪圖的順序弄亂。

Add a couple more widgets before moving on to the next part of the tutorial. Try changing the type of the sprite to Sliced (a sprite using 9-slicing, ideal for creating borders), Tiled (a sprite that fills the entire area defined by the transform’s Scale), and Filled (a sprite that has an extra parameter that controls how much of it is visible — ideal for progress bars and sliders). If you can’t figure out one of them, don’t worry — they will be covered in the next tutorial.