NGUI Tutorial: Step 3

NGUI Tutorial: Step 3

  1. With your Panel game object selected, use the Widget Wizard to add a Sprite using the Dark sprite from the atlas and change it to be a Sliced type sprite. New to the concept of 9-slicing? Perhaps this page will help.(維克:失效連結,我把它移除了)
  2. Adjust the Scale to (500, 500, 1).
  3. Add another Sliced Sprite and set its Scale to (500, 40, 1).
  4. Change the position of the second sprite to be (0, 230, 0).
  5. Change the Sprite from Dark to Light.
  6. Play with the colors of the two sliced sprites until you like what you see.
  7. Adjust the Depth so that the sliced sprites are behind the colored sprites.

You now should have something that resembles a window.

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做為字型。

閱讀全文:NGUI Tutorial: Step 2

NGUI Tutorial: Step 1

NGUI Tutorial: Step 1 Creating Your UI

  1. Create a brand-new scene.
  2. Select and delete the Main Camera.
  3. Open the NGUI menu and select Create a New UI — this will open up the UI Creation Wizard.
  4. On this panel you can choose which layer to place your UI on, but we’ll just use the Default layer. Click theCreate Your UI button.
  5. That’s it. Your UI is now ready to be used.

NGUI 教學:第一步 建立使用者介面

  1. 建立一個全新的場景。
  2. 選擇主攝影機,並且將其刪除。
  3. 打開NGUI選單然後選擇Create a New UI — 這會打開一個UI(使用者介面)建立精靈。
  4. 在這個面板中你可以選擇要將UI放到哪個layer(層), 但這裡我們使用原本的Default layer. 按下Create Your UI 按鈕。
  5. 就這樣,UI已經準備好可以使用了。

閱讀全文:NGUI Tutorial: Step 1

NGUI: UICamera


NGUI: UICamera

UICamera script is a key component of every functional UI. It’s responsible for sending out NGUI events to the colliders of all objects drawn by that camera. If you have one camera in the scene, make sure it has UICamera script on it. If you have more than one, make sure that at least the camera that’s drawing the UI has it. Placing this script on your main camera used to draw your scene allows your in-game objects to receive all the OnClick, OnHover, OnDrag and other events as well.

UICamera 腳本是各種功能UI(使用者介面)的重要組件。他負責送出NGUI事件給所有由該攝影機所繪出物件的碰撞器。假如你場景中有一個攝影機,就要確定它有UICamera腳本在其中。假如你有多個的攝影機,要確定至少用來繪出UI的攝影機有這個腳本。把這個腳本放到你的主要攝影機中會讓你所有在遊戲中的物件也都能接受到OnClick, OnHover, OnDrag與其它的NGUI事件。

閱讀全文:NGUI: UICamera