新聞中心 - 聯成電腦｜政府認定 AI 培訓班，轉職Python/室內設計課程首選

NGUI介紹(四)-Label及Button

文.圖：林昭自前言在上一篇介紹內，我們說明了在NGUI中如何藉由Widget及Anchor做到針對不同螢幕尺寸較為彈性的對位需求。在這篇文章中，我們接著為各位介紹在使用者界面中也是相當常見的兩種元件：Label及Button。關於Label 我們在製作UI元件時，常常會有要顯示文字的需求，在NGUI中是藉由Label這個元件來幫助我們達成。新增Label的方式為從上方選單NGUI Create Label，新增之後，就可以在Hierarchy視窗中發現Label物件被產生出來。接著我們在Inspector中注意到Label中也有Widget以及Anchors等屬性可以編輯，剛好呼應了上一篇所提到的對位設定。關於屬性設定的說明可以參見下表：關於Button 按鈕則是另一個相當常見的控制元件，在NGUI中，新增按鈕的方式與前述的方式略有不同，我們先到專案管理視窗，在搜尋欄位輸入control，接著我們可以在搜尋的結果中找到Control - Simple Button這個預製物，接著將這個預製物加入到UIRoot底下即可。在NGUI中，按鈕被設計成由一個Sprite父物件加上一個Label子物件而成。其中Sprite副物件是為了要顯示按鈕的底圖，以及接受按下，按住，或是放開等事件，而Label子物件通常是為了要拿來顯示按鈕上方的文字，當然如果你的按鈕不需要文字，這個子物件是可以直接刪除的。另外在按鈕物件上的碰撞器組件則是要拿來接收事件用的，請不要將它刪除，免得按鈕會沒有任何反應。最後如果要從腳本內處理按鈕被按下的事件，則可以新增或是選擇現有的腳本，加入一個函示，函式的簽名(Signature)必須為回傳void同時不接收任何參數。接著在此函式中實作當按鈕按下要做的事情，最後將此腳本物件拖拉到On Click Notify欄位中，如此一來，當按鈕按下時，NGUI會通知你所實做的函式。結論在這篇文章中，為各位介紹NGUI中的兩個通用控制項，在下一篇文章中，我們將為各位繼續介紹其它好用的元件。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

NGUI介紹(三)Widget及Anchor

文.圖：林昭自前言在上一篇介紹內，我們說明了在NGUI中如何新增Sprite元件以讓我們在場景中設置一些圖片。事實上幾乎所有的NGUI的元件中幾乎都包含一個叫做Widget的控制項，在這篇文章中，我們就來為各位介紹什麼是Widget。此外，針對不同螢幕尺寸，我們可以透過設定Anchor的方式來達到更動態更彈性的排版方式。關於Widget Widget這個控制項在NGUI中被設計成一個通用型的控制元件，由於幾乎所有的UI物件都需要可以設定顏色，或是對齊方式等功能，這些共通性的設定就由Widget這個控制項來實作。首先第一個欄位可以讓我們針對個別UI物件設定色偏，接著Pivot可以讓我們設定UI物件的對齊方式，共有左上，左下，右上，右下，水平置中，垂直至中等，借由組合Pivot的設定。通常在製作UI時，我們常常會遇到要設定個別元件的深度值，以決定哪個元件在上，哪個元件在下，我們可以利用Depth欄位的值來決定。Dimensions則可以讓我們設定UI元件的尺寸，如果要讓UI元件的大小直接跟圖片的大小相同，則可以透過Snap功能達成。如果希望固定元件的長寬比，我們可以利用Aspect Ratio來設定，計算長寬比的依據有自由設定，基於元件寬度，與基於元件高度等三種模式。關於Anchor Unity本身是一個跨平台的遊戲引擎，因此由Unity所製作的遊戲會被發佈在許多不同的平台上。不同平台的螢幕有大有小，因此如果我們將UI元件的位置或是尺寸設定成定值，並不能滿足不同螢幕尺寸的問題。在NGUI中，個別UI元件可以透過設定Anchor來動態計算UI元件的位置或是尺寸，概念上我們可以透過Anchor設定中，先指定一個參考用的物件，通常是父物件或是UIRoot物件，然後我們再指定此元件的上下左右邊界，與參考元件的距離，這樣即使遇到不同的螢幕解析度，任何UI元件總是能透過參考元件的尺寸，反推出本身物件的位置或是尺寸，進而達到自動計算UI元件排版的效果。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

超好用Unity外掛-NGUI介紹 (二)

文.圖：林昭自前言在上一篇介紹內，我們說明了如何安裝NGUI外掛到Unity中，同時也介紹了NGUI內附的範例，在這篇文章中，我們要繼續來為大家介紹NGUI的一些常見元件，以及他們的使用方式。在開始前，請先在Unity中新增一個NGUI的2D UI根物件，新增的方式為NGUI Create 2D UI。關於Sprite 首先要為各位介紹NGUI內一個最常見的UI元件- Sprite，新增的方式為NGUI Create Sprite，新增完之後，我們會在UI Root物件底下得到一個名稱為Sprite的新物件，Sprite在NGUI中扮演了很重要的角色，任何在NGUI中想要畫出圖片，幾乎都是透過Sprite物件。首先我們可以在SceneView中發現Sprite物件外圍有九個藍色的控制點，這些藍色的控制點可以讓我們設定UISprite的大小，如果將滑鼠的游標稍微往控制點外面移，讓游標的形狀變成旋轉的狀態，在這個狀態底下，我們可以用15度的倍數來旋轉Sprite物件。 Sprite物件由UISprite這個腳本來設定，在UISprite中，Atlas與Sprite這兩項設定，可以讓我們指定Sprite要顯示的圖片，步驟是先透過Atlas對話視窗決定要使用哪一個Atlas，決定好Atlas之後，我們便可以透過Sprite選項來選定需要的圖片。接著是Sprite Type，可以用來設定Sprite的種類，共有Simple，Sliced，Tiled，Filled以及Advanced共五種。Simple就是直接將Sprite的圖片畫出來，而不做任何其他額外的處理。Sliced則會將Sprite的原始圖片切割成九等份，如果今天Sprite的圖片有外框，那麼扣除中間的部分，外框剛好為八等份，這樣的好處是如果我們在SceneView中去改變Sprite的大小，那麼NGUI只會改變內框的大小，圖片可以保持不會因為拉大拉小而導致模糊。Tiled模式會讓Sprite的圖片用小圖的方式重複畫出來。Filled模式則可以讓我們用動態的方式去把Sprite的圖片填滿。填滿的方式可以在Fill Dir欄位中設定，共有四種，分別為Horizontal (水平填滿)，Vertical(垂直填滿)，Radial90(圓形狀填滿90度)，Radial180(圓形狀填滿180度)，Radial360(圓形狀填滿360度)，這種特殊的填滿方式，可以讓我們來做一般遊戲很常見的計量表。要設定填滿的程度我們可以在下方的Fill Amount來設定，Fill Amount介於0到1，0代表完全沒有填，1則代表填滿。Invert Fill則可以讓我們改變填圖的方向。結論在這篇文章中，為各位介紹NGUI中最常見的元件，在下一篇文章中，我們將為各位繼續介紹其它好用的元件。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

名師專欄：超好用Unity外掛-NGUI介紹(一)

文.圖：林昭自在使用Unity無論是製作2D或是3D遊戲本身的過程中，透過Unity內建的GUI工具來製作UI時，絕大多數的開發者都覺得並不是這麼好用。無論是GUITexture組件或是直接透過在Script中的OnGUI函式來製作UI時，都會面臨相同的問題，就是必須要自己去計算螢幕當時的解析度，再回過頭來計算每個UI元件合適的位置及尺寸。如果今天的遊戲規模很小，UI的元件數量很少，那麼這件事情還勉強可以被接受。但若是一個規模稍大的遊戲，UI 元件的數量很多時，那麼這件事情就變成了一個災難。Unity官方已經承諾會在UI工作上做出一定程度的改善，但是對全球的開發者來說，時間是非常寶貴的，在這邊為大家介紹一個UI製作工具的替代方案NGUI。 NGUI的全名為Next-Gen UI Kit，意思是下一個世代的UI。我們可以在Asset Store上面或是NGUI的官網上找到免費試用版，NGUI本身是要收費的，不過價格並不是太貴，加上可以有持續升級的支援，我個人認為是一項很值得的投資。如果有任何的疑慮，也可以先考慮試用他們所提供的免費試用版。 NGUI的特色完整跟Inspector整合。不需要按下Play才能看到你的UI結果。我們在SceneView中看到的樣子，就是我們在GameView中看到的結果。符合Unity的組件式設計哲學：組合你需要的功能，透過寫最少的程式碼，完成最多的功能。完整的跨平台支援。支援Web，Windows，Mac OSX， Android， iOS等。具有彈性的事件處理機制。只需要最少的Draw Call，就可以畫出相當複雜的UI。我們可以在編輯器中製作Atlas不需要透過額外的工具。製作出來的UI元件可以支援光照，法線貼圖等。支援元件的可視裁切。支援多國語系。內建易用的動畫腳。乾淨簡短且最佳化的C#程式碼。沒有DLL或是其他不必要的資源。 NGUI官網 http://www.tasharen.com/?page_id=140 NGUI Asset Store https://www.assetstore.unity3d.com/#/content/2413 安裝NGUI 安裝NGUI的方式可以從Asset Store上或是前往NGUI的官網下載。NGUI本身也被包裝成一個unitypackage。下載完之後直接匯入到你的Unity專案中即可。官方範例 NGUI包裝檔中包含了許許多多的使用範例，當我們將NGUI匯入到Unity之後，範例會一併被匯入，位置在 Assets/NGUI/Examples/Scenes/資料夾中。 Example 0 - Control Widgets 包含了NGUI中所有常見的UI控制項，像是按鈕，文字輸入欄，下拉式選單，卷軸等等。 Example 1 - Anchors 示範了Anchor的用法。Anchor在NGUI中指的定位點，在製作UI元件時，我們往往需要指定特定UI元件的位置，同時也要考慮在不同螢幕解析度或者是長寬比下的問題，Anchor能幫助我們輕易地解決這個問題。 Example 2 - Interaction 示範如何使用按鈕元件來傳遞訊息，進而控制其他元件。在這個範例中，我們還可以理解到NGUI也同時支援3D的介面呈現。 Example 3 - Menu 示範一個常見的選單製作方式，同時結合內建的Tween系統，來達成選單切換的動畫效果。 Example 4 - Controller Input 雖然看起來跟範例三長得一模一樣，但這個範例主要提供使用者可以藉由鍵盤輸入來控制UI的流程。 Example 5 - Lights and Refraction 示範UI控制項本身可以指定材質，同時接受場景光源打光的效果。我們可以額外指定法向量貼圖Normal Map來做一些更進階的效果。 Example 6 - Draggable Window 示範一個可以拖拉移動的視窗。 Example 7/8 - Scroll View 示範捲動元件的用法。 Example 8 - Quest Log 示範一個任務對話框的用法，任務的細節說明可以藉由展開UI元件的方式來查看。 Example 10 - Localization 示範NGUI如何製作多國語系的介面。 Example 11 - Drag n Drop 示範一個可以拖拉位移的UI元件製作方式。 Example 12 - Chat Window 示範一個簡易的聊天對話框。 Example 13 - Tab 製作分頁。 Example 14 - Endless Scroll View 示範一個可以循環顯示的卷軸視窗。 Example X - Character 示範如何從NGUI結合常見的腳色換裝系統。以上這些範例示範了如何藉由NGUI來實現常見的UI元件。對於想要徹底了解NGUI系統的我們來說是相當實用的資源，這邊會先從整個UI概念開始介紹。概念 NGUI的概念是所有的UI元件也是被放在場景中，也就是它們其實也算是3D物件。NGUI會透過一台獨立的正交投影攝影機專門去顯示這些UI元件，又由於場景中存在超過兩台攝影機，因此決定攝影機繪圖的先後順序變得非常重要。一般說來UI元件多半會蓋在我們的場景之上，因此用來Render使用者介面的攝影機的順序必須要在場景攝影機之後。我們可以藉由觀察場景攝影機與UI攝影機中的Depth欄位來確認這件事情。一般說來UICamera的Depth必須要大於Scene Camera，才能確保UI Camera的繪製順序。建立我們的第一個UI，當成功匯入NGUI之後，在Unity的主選單上會多了NGUI的選單。要建立整個UI系統，我們可以從NGUI Create 2D UI來建立。我們的UI建立完之後，會在場景中產生下列物件： UI Root Camera 其中UI Root會幫助我們去根據不同螢幕的尺寸大小來調整個別UI元件的尺寸，他有三種縮放元件的模式，分別為： Pixel Perfect Fixed Size Fixed Size On Mobile Pixel Perfect代表的意思為，如果你有任何一個元件是200x300的尺寸，那麼實際呈現在畫面上就會剛好是200x300 pixel，無論實際的螢幕尺寸為何。這樣的作法跟Unity內建的GUI想法是一致的。好處是我們請美術畫的GUI元件是多大就是多大。由於不會自動縮放，可以確保圖片的精緻度，但是缺點是缺少了自動調整大小的機制。 Fixed Size則是會根據螢幕的大小來動態調整，如果在場景中我們擺放了一個大小是整個螢幕大小25%的元件，那麼不管實際上我們的螢幕多大，這個UI元件就會是螢幕尺寸的25%。 Fixed Size On Mobile：如果今天遊戲是一般桌機的版本，那麼縮放的模式是Pixel Perfect，如果遊戲跑在行動裝置上，縮放的模式則會變成Fixed Size。接下來我們說明UIRoot底下的第一個子物件Camera。這個Camera物件本身帶有Unity內建的Camera Component。重點在於它將投影模式設定成Orthorgraphic(正交投影)，另外正交投影的尺寸會被固定在1。才能夠讓UI元件是Pixel Perfect。 Camera則是我們之前所提到專門用來繪製UI元件用的攝影機之後所有的NGUI元件都需要放在Camera這個物件的子物件，除了Camera組件之外另外還有UICamera組件。UICamera主要負責傳遞各種UI的事件，換句話說他會負責派發各項事件到不同的UI元件上。後記到目前為止我們已經準備好要開始製作我們的第一個UI。在下篇教學中，我們將會示範各種NGUI常見元件使用方式。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

如何將Unity開發的遊戲上架到Google Play

文.圖：林昭自前言在上一篇文章之中，我們提到如何將你所開發的Unity遊戲安裝到手機上進行測試，但實際上要能夠放到像是Google Play或是AppStore等線上商店供全世界的玩家下載，其實我們只完成了一半的步驟。在本篇文章之中，我們將以Google Play線上商店為範例，為各位說明如何將你的Unity遊戲上架。步驟清單 1. 成為Google Play Developer。 2. 在Google Play Developer Console中，設定遊戲APP的必要資訊。 3. 將Unity遊戲App簽署金鑰，並且設定Icon。 4. 將Unity遊戲App上傳並且等待通過審核。 1. 成為Google Play Developer 要上架自己開發的遊戲到Google Play商店上販賣供人下載，首先第一步就是需要成為Google的開發人員。一般說來，雖然我們都有Google的帳號，但是一般的Google帳號是不具有開發人員的權限的，因此我們需要先申請成為開發人員，成為開發人員之後您便可以上架自己開發的Unity遊戲，也包含Android的APP。首先我們前往 https://play.google.com/apps/publish/signup/，並且登入您的Google帳號。成為Google Play的開發者人員需要繳費，費用是25塊美金，差不多是七八百台幣。收費是一次性的。Google的理由是希望這個步驟能確保開發出來的App是比較有品質的，如果您覺得很貴的話，那麼我可以告訴你AppStore的費用是每年100美金，大約3000多台幣。相較之下，Google簡直是佛心來者。在上圖的頁面中，確認好你要的開發者帳號之後，就可以透過信用卡付款，如下圖所示：在此頁輸入信用卡資訊，完成付款之後，你可以在電子信箱收到來自Google的確認信，此時我們正式成為Google開發人員，可以準備把Unity遊戲上架到Google的線上商店。 2.設定商店資訊，上傳APK Google本身有提供開發者一個管理App或是遊戲的專用後台界面，叫做Google Play Developer Console，來到Google Play Developer Console，可以看到如同下圖的網頁內容：由於我們可能會發佈不止一套的Unity遊戲，在我們的第一個頁面可以看到我們所有已發佈或是即將發佈的遊戲清單。如果我們是第一次要發佈，請點擊[新增應用程式]。在接下來的頁面中，我們要設定商店資訊，如下圖所示：這邊的商店資訊包含了你的遊戲的名稱，說明，以及截圖。到時候等到遊戲上架之後，這些資訊會自動出現在Google Play上，值得注意的是，通常一般線上虛擬商品會需要設定一些關鍵字，方便使用者做過濾搜尋的功能，而Google的做法則是他會去自動檢查你所寫的商品說明，自動產生關鍵字與分類，因此我們得到一個結論，就是如果你希望你的Unity遊戲能夠很容易被玩家搜尋到的話，那說明要寫得越詳細越好，這是一個小技巧。此外商店資訊的分類部分記得選成[遊戲]。定價與發佈在[定價與發佈]的頁面中，我們可以決定Unity遊戲的售價，以及要販售的國家，關於定價策略的部分，取決于很多因素，好的定價策略可以有效最大化最後的營收，這部分就不在這邊贅述。至於設定上架的國家為什麼需要個別選擇的原因之一是，如果你的遊戲的內容有爭議性，例如牽涉到宗教，政黨等議題，那需要考慮適不適合在那些國家上架。另外就是法律問題，像是成人遊戲，涉及到性，暴力等議題，由於不同國家的法律規範也有所不同，在這邊需要審慎思考這些問題。應用程式內商品這一頁就是我們常見的內購機制，也就是In App Purchase。這一塊算是進階議題，牽扯到線上金流的知識。不在此贅述。 3.將Unity遊戲App簽署金鑰，並且設定Icon。完成了商店資訊的設定之後，我們接著回到Unity準備發佈遊戲。再上一篇文章中，我們已經詳述如何產生APK以及如何將APK安裝到測試手機上進行測試，但是那些步驟我們所產生的APK是屬於要拿來除錯開發用的版本，也就是跟實際上最後要上架的版本是不同的。最後要上架版本的APK本身需要對它做簽署金鑰的動作。為什麼需要這個動作呢？因為Google需要管理來自全世界的 App，但是要盡最大的可能確保這些App不是惡意的程式，試想萬一你從Google Play上刷卡買的App結果裡面都是病毒這樣對嗎？因此為了確保每一隻在Google Play上面販售的App來源是可靠的，開發者在上架前，必須先對自己的遊戲簽署一個數位金鑰，這個動作等於是宣告說，這支遊戲是我開發的，我擔保他不是惡意程式，如果是，我願意負責，這種意涵在裡面。通常簽署金鑰需要用一個叫做keytool的工具，這個工具包含在JDK中，用起來不是那麼直覺，因為要透過命令提示字元直接輸入指令的方式來執行。還好Unity有提供輔助的功能，回到Unity中，從選單Edit Project Settings Player中，切換到Android平台的設定，找到Publish Setting的欄位，如下圖所示：第一次我們要先建立好一個Keystore(金鑰庫)，這個Keystore會用來存放你的金鑰，因此先選Create New Keystore，接著透過Browse Keystore來選擇你的Keystore要存放的位置，在建立之前別忘了要將Keystore的密碼設定好，免得隨便任意的人都可以有辦法拿到你的金鑰。接著在Key(金鑰)的選項底下，Alias原本預設是Unsigned Debug，這個意思就是說，在預設的情況下，我們的APK是沒有做簽署金鑰的動作，因為是要拿來開發或是除錯的用的，但此時我們已經準備要發佈了，因此Alias選擇Create Key，代表我們要實際產生一把金鑰，並且簽署到我們的遊戲上，最後這個金鑰也需要替他設定一個密碼，這個密碼跟Keystore應該是要不同的，不過對一般人來說，應該很不方便也很不直覺，我相信很多人都會直接設定成一樣的密碼。做完這些設定之後，回到選單 File Build Settings 在執行Build，來發佈我們的APK，此時我們終於得到一個簽署過金鑰的APK檔。 4. 將Unity遊戲App上傳並且等待通過審核。最後我們回到Google Play Developer Console 在所有應用程式 APK的選項中將您的APK上傳至發佈階段接著就是靜候審核等待上架的好消息結論在本篇文章中，我們為各位介紹了Google Play的上架流程，下一篇將為各位介紹一個超好用的使用者界面外掛NGUI。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

搜尋近期熱門

搜尋近期熱門

關於我們

友站連結

AI賦能專區

產學就業班

單元證照班

政府公費班

企業服務

特別企劃

Unity

NGUI介紹(四)-Label及Button

NGUI介紹(三)Widget及Anchor

超好用Unity外掛-NGUI介紹 (二)

名師專欄：超好用Unity外掛-NGUI介紹(一)

如何將Unity開發的遊戲上架到Google Play