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 教學:第二步 9宮格的小圖

  1. 在你的Panel遊戲物件選取的狀態下,使用Widget精靈來新增一個小圖,把Template(模板)部分選擇為Sliced Sprite,Sprite部分選擇Dark。第一次接觸到9-slicing?或許你可以參考這頁(維克:官網連結的網頁似乎已經失效,會被重導到其他頁面。下面這頁面是adobe解釋的9-slicing,可以參考看看:這裡)
  2. 把大小(Scale)調整為(500,500,1)。
  3. 新增一個Sliced Sprite,調整大小為(500, 40, 1)。
  4. 調正第二個sprite的位置為(0, 230, 0)。
  5. 把Sprite從Dark改成Light。(維克:這其實可以在新增的時候就直接選Light)。
  6. 調整到你喜歡的顏色。
  7. 調整深度讓sliced sprites在彩色的圖形後面。
然後你就會得到類似下面的這個圖。
(維克:官網好像少講那三個彩色圖是怎麼出來的= ="。補充一下Template選Sprite,Sprite選Dark,建立好後再改顏色就可以了)
 

後記:

超尷尬!!我要寫第四步的時候,官網就把它移掉啦

我才剛看到一半阿XD"。

大概是不想讓舊版的教學留在官網吧(可是試用版的是舊版的阿XD")。

好吧 反正這就停在這了,不過我還是找了一下關於這份教學的後續,參考以下吧:

http://www.cg.com.tw/NGUI/NGUI.asp

 
 

  按個讚!~支持本站!~

FB推薦載入中