【轉】NGUI製作按鈕圖標

原文地址:http://blog.csdn.net/chenggong2dm/article/details/25594059


   Atlas是NGUI的圖集。我的理解是:Atlas把你的一些零散的圖片,合併成一張圖。這樣做的好處是,可以降低Draw Call。我不瞭解它的底層運作機制,我猜應該也是再行進DXT之類的紋理壓縮,所以,最好把圖集的尺寸,也做成128, 256,512,1024之類的大小,以方便其進行格式壓縮。


概念:

Atlas : 圖集。把美術給你提供的素材,用 NGUI 的 Atlas Maker 工具,合成一張圖片(準確的說,還同時生成了prefab、mat )。

Sprite:精靈。由於Atlas已經把你的圖片都合成一張了,那怎麼單獨調用呢?就是用Sprite。


1,準備素材

新建一個文件夾,命名爲UITexture。具體操作爲:在Project面板中,右鍵-->【Create】-->【Folder】,然後命名。

把下面兩張圖片(start.png 和pause.png)拷貝到 UITexture 文件夾下。注意,這兩張小圖都是128*128像素的。

    


2,創建Atlas

在Project面板中,進入UITexture 文件夾,選中這兩張圖片,然後 右鍵-->【NGUI】-->【Atlas Maker】,之後你會看到 Atlas Maker 的界面:

在 Atlas Maker 界面中,點擊【Create】按鈕。

之後給這個Atlas 起名爲MyAtlas.prefab,點擊【保存】。


3*,預覽Atlas和Sprite

保存之後,這個新的Atlas 就創建好了。可以點擊一下【View Sprites】,預覽一下創建好的精靈。

再來看一下這個新建好的Atlas,可以看到,自動變成了一張 256*512 的圖(要知道,我們的每張小圖是128*128的)。這樣一來,它有很多空白的地方。我對此的理解是:

Atlas的長寬比例都是以2的指數冪爲單位,比如128 256 1024 2048等。這樣做的目的,應該是爲了可以採用某種紋理壓縮格式,而做的強制轉換。


4,運用Atlas 和Sprite 製作一個圖片按鈕

下面,我們接着上一篇文章的 Button 那個例子,繼續做。首先,刪除掉Simple Button的 Label。

然後在檢視面板上,UI Script(Script)組件中,點擊【Atlas】選項:


在彈出的Select an Atlas面板中,點擊【Show  ALL】,會出現項目中所有的Atlas,選擇我們剛創建的MyAtlas。如下圖:

在檢視面板上,UI Script(Script)組件中,點擊【Sprite】選項:

在彈出的Select a Sprite面板中,選擇start 圖標(也就是精靈)。

選中後,如果在game視圖下看,我們會發現按鈕已經變成圖片按鈕了,但是嚴重變形。所以,我們要根據圖片的原始大小,進行設置:找到Dimensions選項,單擊後面的【Snap】按鈕。或者手動調整一下數值。

好了,在game視圖中,可以看到圖片按鈕,和我們預想的一樣!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章