文.圖:林昭自

 本文轉載自聯成電腦技術論壇,歡迎點選此連結,前往駐站專欄與講師互動。 

20140619pic000  

20140619pic002

前言
      在前幾篇的介紹中,我們陸陸續續為各位示範許多NGUI內建的元件,但是目前我們在使用這些內建元件時,都是用NGUI所提供的圖片,在這篇技術分享文章中,我們將為各位說明要如何自己來製作這些圖片,讓我們的不管是按鈕,或是底圖,都能使用我們自己的美術圖檔。

20140619pic001


關於Atlas
     所謂的Atlas,在遊戲業界或是圖學的領域中,是指由許多小圖片所組合成的大圖片,一般說來,會使用Atlas的原因主要都是因為效能上的需求,對於Rendering Pipeline中,切換材質是相對昂貴的工作,許許多多的小圖往往意味著在Rendering Pipeline中會導致過度頻繁的材質切換,而導致效能不彰。(關於這個議題可以參考遊戲引擎設計或是圖學的書籍)因此一個商業等級的遊戲在製作上往往會選擇使用Atlas來作為顯示UI圖片的方式,NGUI這個外掛也提供了相同的功能,讓我們來使用。製作Atlas的步驟如下:


1.首先將我們要用的圖片匯入Unity中,通常就是那些按鈕的圖片。
2.接著在場景中加入一個空物件,並且在此空物件中,加入UIAtlas腳本,這個UIAtlas腳本是NGUI事先提供好的,我們直接加入即可。
3.接著新增一個材質,這個材質是要給我們的Atlas使用的,Shader可以設定成Unlit/Transparent Colored(不打光,並且具有透明屬性),新增完畢之後,將此材質指定到Atlas中的Material欄位。
4.接著將此物件重新命名,並拖曳到Project中,使這個物件變成Prefab。
5.接著我們由上方選單 NGUI -> Open -> Atlas Maker,將Atlas Maker打開。
6.Atlas Maker用來編輯我們的Atlas包含哪些圖片,如果目前不是選擇到我們剛剛所製作的Atlas的話,可以利用Show All的功能,NGUI會去更新清單。
7.接著在Unity的Project View中挑選你要的圖片,由Atlas Maker中的”Add Update”功能,Atlas Maker便會將此圖片加入到我們的Atlas中。
8.製作完的Atlas我們便可以由Sprite元件中來挑選指定。

20140619pic003

20140619pic004

結論
     在這篇文章中,為各位介紹NGUI中的兩個通用控制項,在下一篇文章中,我們將為各位繼續介紹其它好用的元件。

 

延伸閱讀

聯成電腦昭自老師專欄:超好用Unity外掛-NGUI介紹 (一)

聯成電腦昭自老師專欄:超好用Unity外掛-NGUI介紹 (二)

聯成電腦昭自老師專欄-NGUI介紹(三)Widget及Anchor

聯成電腦昭自老師專欄:NGUI介紹(四)-Label及Button

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()