【實作】可拖曳式UI - Draggable UI (UGUI)

【實作】可拖曳式UI - Draggable UI (UGUI)

   晚上8:31       林子安

---

適用情境：實作一個如虛擬Home鍵 / Facebook訊息APP頭像 的按鈕(可拖曳與觸發點擊)

C#

public void OnDrag(){ transform.position = (Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x,Input.mousePosition.y,100))); //滑鼠 if(Input.touchCount>0&& Input.GetTouch(0).phase==TouchPhase.Moved) { Ray ray = Camera.main.ScreenPointToRay(Input.touches[0].position); //觸控 } }

將上述Script丟進要拖曳的UI中
新增Event Trigger，點Add New Event Type，選Drag事件
將UI自己拖進Object中，右邊選剛剛的Script名稱跟OnDrag方法

若是需要同時具備OnClick跟Drag事件，也就是同一個UI具備兩種觸發則需要
新增Canvas Group
Event Trigger新增Begin Drag與End Drag
Begin中選禁用互動(interactable)功能(就是下面框框不要打勾)
End中選開啟互動(interactable)功能(下面框框打勾)

不過也可以直接禁用或開啟上方Button的互動功能，這邊是有另外需求才採用Canvas Group

Read More

【實作】滑鼠/鼠標/觸控點擊特效系統

【實作】滑鼠/鼠標/觸控點擊特效系統

   凌晨1:25       林子安

---

【適用情境】當專案需要滑鼠/觸控點擊的時候產生一個粒子效果

有2種呈現方法

1.常駐型粒子效果，適用於滑鼠
2.點擊/觸控產生粒子效果並隔數秒後銷毀

【法1】

1.創建一個粒子系統(particle system)，或導入現成的粒子prefab

2.將以下Script導入粒子系統物件上

[C#]
public float Distance = 10;
void Update(){
Ray effect_ray = Camera.main.ScreenPointToRay(Input.mousePosition);
Vector3 pos = effect_ray.GetPoint(Distance);
transform.position = pos;

【法2】

這邊參考了Caz的用法，雖然上面說會自動銷毀，但實際測試好像不會就加入了Destroy

[Unityscript]

#pragma strict

var MyEffect:GameObject ;

var hit : RaycastHit;

var cooldown : float;

private var effect:GameObject;

private var g_camera : Camera;

private var g_camTransform : Transform;

function Awake()

{

   g_camera = Camera.main;

   g_camTransform = g_camera.transform;

}

function Update ()

{

 if(cooldown>0){cooldown-=Time.deltaTime;}

 var mousePos = Input.mousePosition;

 var ray = Camera.main.ScreenPointToRay (Input.mousePosition);

 var vecMousePosition = g_camera.ScreenToWorldPoint(Vector3(mousePos.x, mousePos.y-15,20));

 if(Input.GetMouseButton(0) &&cooldown<=0)

 {

  effect=Instantiate(MyEffect, vecMousePosition , Quaternion.identity);

  cooldown=0.15;

  Destroy(effect,0.4);

 } 

}

2016.01.14補充：

此方法其實還需要調整一些東西，不然生成的prefab會在UI後方

但一般來說點擊的效果都是在最前面的

解決方案是在Canvas上調整Render Moder改成Camera模式

然後Main camera丟進去後，產生的prefab就可以調整到UI前面了

Read More

【翻譯】Unity官方教學 - UI EVENTS AND EVENT TRIGGERS(UGUI)

【翻譯】Unity官方教學 - UI EVENTS AND EVENT TRIGGERS(UGUI)

   晚上8:45       林子安

---

翻譯：
場景中的UI常常會有很多互動，而使用者輸入和UI元素則是由Event(事件)控制
當Canvas加入後，EventSystem(事件系統)物件也會被加入，這個gameobject包含事件系統組件以及各種輸入模組，當一個場景開始事件系統，他就會檢測輸入的對象，根據檢測到的模組，以及確定輸入與UI元素之間的關係
Event System中的屬性
First Selected(第一選定對象)可以指定預設切換到本場景的第一個UI為選定狀態
這裡我們來指定一個按鈕，隨後啟動場景之後，會看到按鈕顏色略有不同，這代表按鈕處於被選取的狀態這裡常是按下空白鍵，按鈕就會呈現被按下的狀態，無須用滑鼠點擊，這是不用滑鼠或控制器，這常用於創建菜單系統

Input Module(輸入模組)
一開始輸入模組默認有兩組，一組是滑鼠/鍵盤/遊戲手把，另一組是觸控輸入
在Standalone(獨立)輸入模組中，有Submit Button(提交)和Cancel(取消)按鈕
在Input Actions per second中可以調整接收輸入訊號的頻率，每秒輸入動作，預設是10也就是每秒可接受10個輸入訊號，代表兩個輸入之間有0.1秒的延遲
Allow Activation On Mobile是允許在行動裝置上使用(→這個在5.0之後好像沒該選項)

＊此處還多了兩個選項，Repeat Delay(重複延遲) 跟 Force Module Active(強制模組驅動)，而後者我想應該跟Allow Activation On Mobile是類似的選項，只是有改名字而已

在Touch(觸控)輸入模組中，有Allow Activation On Standalone(5.0也改成 Force Module Active)
代表觸控的輸入也可以在獨立模式中驅動

在Button中有Onclick()事件，可以按"+"新增事件，onclick本身也由移動到button上、點擊、放開等組成，而在image中並沒有觸發事件，不過可以在屬性欄新增Event>Event Trigger來驅動
教學中是選PointerEnter，然後一樣是按"+"新增事件對象，再把對象拖曳到上面，而旁邊的function則可以選取很多種預設的功能模組，這裡也可以調用自己編寫的Script的function，該函數類型是public(公共)，返回值是void(空)，函數必須是以下幾個型態，int/float/string/object reference

Read More

【翻譯】Unity官方教學 - UI Imgae (UGUI)

【翻譯】Unity官方教學 - UI Imgae (UGUI)

   凌晨1:11       林子安

---

圖像(Imgae)組件是一個顯示在螢幕的可視化UI元素，可用於Button、Panel、Slider上
Source Image是圖片來源
Color是圖像的顏色，可以調節色度、明暗、透明度
Material(紋理)，通常是none沒有紋理
Image Type：預設是Simple，會延伸到RectTransform的大小
               Sliced(切片)：將圖片切成9等份；會多出一個fill center選項可以填充中心
               Tiled(磁磚)：則會重複顯示圖片像是磁磚一樣
               Filled(填滿)：則會將圖片填滿整個image物件；會多出fill method(填充法)跟 origin(填                                        充原點)，Fill Amount則是填充的量，Clockwise則是順時鐘，類似車速表
Preserve Aspect：保留長寬比，勾選的話，調整大小按鈕會保留比例
Set Native Size：則是設定原始來源大小

Read More

【翻譯】Unity官方教學 - UI Button (UGUI)

【翻譯】Unity官方教學 - UI Button (UGUI)

   凌晨12:44       林子安

---

翻譯：
按鈕是通過檢測使用者輸入的觸發事件的元件，對於一般使用者輸入按鈕的圖形、滑鼠點擊或移動到上方產生不同的效果

要創建現有按鈕：右鍵>UI>Button
按鈕跟其他UI元素一樣必須是canvas的child子物件，如果沒有canvas直接創建button則會自動產生一個canvas，有關更多canvas詳細訊息可以參考canvas影片

New一個button會帶有一個text，這個text是一個可選的，button中不一定要有text(例如純圖示的按鈕)，因此創建後不需要也可以直接刪掉，有關image跟text的詳細訊息可以參考其影片

按鈕中的Interactable(可互動性)是定義按鈕是否可接受輸入，如果要禁用按鈕可以把他勾掉(例如子選單彈出時，避免母畫面的button被觸發就可以禁用)
Transition(變換模式)
是指按鈕在一般狀態(normal) / 焦點(highlight) / 按壓(pressed) / disabled(離開)等狀態切換，一開始button預設是ColorTint模式

Transition(變換模式)此外還有none(無)模式，不會有任何變換效果
SpriteSwap(精靈切換模式)：這個可以透過不同的sprite來呈現不同狀態，sprite通常是做為圖片型態的按鈕
Animation(動畫模式)：這個模式則是透握大量的動畫來呈現按鈕不同的效果
在動畫模式中可以從window(視窗)中點選animation來叫出動畫編輯器(windows中是Ctrl+6)
在動畫編輯器左上角有個Normal這是按鈕狀態，點下可以彈出其他狀態，因此可以在各種狀態中放入需要的動畫，如果多個按鈕共享一個動畫效果的話，也可以利用Animator controller，把所有的按鈕點選後，切換成動畫模式後，再新增Animator組件，再把Animator Controller拖曳上去就可以讓所有按鈕都套用同一個controller的效果
(Animation官方也有另外一部教學)

Target Graphic可以指定按鈕的圖片
normal為按鈕平常的顏色
highlight為焦點(滑鼠移在按鈕上)的顏色
pressed為按壓未放開時的顏色
disabled為不能使用時的顏色

按鈕最常見的是最為一個觸發事件，其中On Click會出現在Button的屬性欄
上面會有一個On Click(Button)的列表
按下"+"可以新增對象跟觸發事件(function)，此外也可以自己編寫script，而後面欄位則是參數
這裡的Click function都是做為public void也就是公共、不回傳值

Read More

【實作】Unity音樂/音效開關與調整音量大小(UGUI)

【實作】Unity音樂/音效開關與調整音量大小(UGUI)

   凌晨1:06       林子安

---

音樂/音效勾選鍵與控制條

適用情景：當你的遊戲在選項選單中需要勾選開啟音樂/音效以及調節音量大小控制條

結果圖如下：

【步驟】

1.創建UI Toggle，Toggle底下有個Label是說明文字可以改成你要的字樣，或是整塊取消掉改成用底下的Background圖片當作按鈕也OK，這邊用預設的方式。

2.創建UI Slider，調整條也可以套用客製的圖片或效果，這邊也是用預設的

3.新增Audio Souce，然後可以把一個mp3或其他音訊檔匯入Unity中(直接拖曳)，然後放到Audio Source中的AudioClip，這邊先勾選Mute(靜音)跟Play on awake(場景起始直接播放)跟Loop(重複播放)，Volume(音量)調整成0.5，也可以根據專案需求去做調整，調成0則無聲音，調成1則音量為最大

4.在Slider中預設Value是0.5，或可以調整成跟剛剛Volume同樣，底下On Value Changed按"+"號，並且對象改成音訊檔物件Audio，然後右邊下拉式選單改成AudioSource.volume這樣調整條就跟音量做連動了

5.Toggle底下Graphic可以改成想要的選取圖片，這邊用預設的，在底下On Value Changed按兩次"+"號，一個對象是Slider，下拉式為Slider.enabled這樣未勾選時調整條就鎖住不能動，此外這邊可以考慮使用別的圖示或顏色去讓使用者知道右邊的調整條被鎖住，而另一個對象是Audio，下拉式是AudioSource.enabled，這樣音樂就可以開與關了

＊音效的呈現方式也亦同

＊這邊的概念是勾選就重頭播放，但也有別種方式可以讓音樂直接撥放，未勾選時靜音，這樣就不會中斷主題曲或BGM的播放進度，不過這部分需求則是依照專案而定。

Read More

【實作】Unity公告系統(UGUI)

【實作】Unity公告系統(UGUI)

   凌晨12:11       林子安

---

Unity 公佈欄 / 公告 / 說明框 UI系統
適用情景：當你的遊戲需要再開始畫面有一個公佈欄或是更新日誌


示意圖如下：

結果圖如下：

【步驟】

1.創建UI Image

2.在Image中添加Scroll Rect

3.在Image中添加Mask

4.在Image底下添加一個Text

5.在Image底下添加一個Scrollbar，在Direction中選擇Bottom to Top，Value調整1，下面On Value Changed按"+"號，選擇上面添加的Text

【解說】

首先通常會有一個背景圖，所以會創建一個UI Image當作背景，可以在屬性欄中Source image選擇圖片，或是練習過程如本次結果圖中在Color那邊做一個半透明的白色背景，然後新增一個Text在底下當作是內文，接著可以換成矩形工具模式，將內文拉長到能夠顯示完整內文，超出畫面也可以，然後在Image中增加Scroll Rect是為了可以滾動內文，Mask是為了遮蓋超出Image背景範圍的內文，

通常在Text中會放入內文，不過實際上會另外寫Script接收Server每次更新項目的Text

＊注意當版面中有很多UI時，每個UI最好都另外取名字，像是主畫面的Text就叫做Title，Button的Text就叫做Button_text，如果Button功能是Menu_StartGame，那底下Text就叫做Menu_StartGame_Text會比較清楚，避免專案越來越複雜的時候命名的元件完全不知道他到底是哪一個Text。

Read More

【翻譯】Unity官方教學- Rect Transform (UGUI)

【翻譯】Unity官方教學- Rect Transform (UGUI)

   凌晨12:51       林子安

---

翻譯：
Rect Transform被用於所有的UI上，傳統的物件我們會變換對象的角度與位置，Rect Transform是針對對象中心位置的高度與寬度，在顯示中是一個簡單的2D矩形，Z軸作為對象的位置，也可以用來在3D環境下做變化，Rect Transform跟一般的Transform的差別就是錨的概念，如果父子物件都是Rect Transform，那你可以固定子物件的父物件，父UI元素的定位對象基於所指定的位置與大小而去移動、變大變小等等，在某UI底下的子UI一定會定錨在父UI身上

如果要調整Rect Transform請點選左上角的矩形工具或使用快捷鍵"T"

在Rect模式中你可以移動縮放旋轉，可以單擊邊緣拉長短或放大縮小
如果加上Shift則會等比例放大縮小
如果要旋轉則是在角落的點外圍單擊拖動
如果你要調整大小/旋轉你需要知道支點位置，一般單位的預設軸點在正中央，他會顯示一個藍色圈圈，單擊拖曳就可以改變支點位置
而子物件會有一個父物件的錨點，長得像花瓣，是四個三角形，每個三角形對應到矩形的拐角，這四個三角形可以分別拉開，而子物件的Anchors的Min/Max是針對父物件相對位置的


Lza心得：簡單來說Rect Transform跟一般的位置系統差在錨的概念，他可以將一組父子關係的UI定錨，例如父panel子是Button，想讓Button永遠在canvas的中心，就可以定錨後不管怎樣移動或放大縮小panel都不會改變其相對的位置
點擊Center/middle有個瞄準圖案會出現Anchor Presets可以調整錨點位置
而錨點可以很好的配置UI的位置而不用手動拉來拉去還會容易因為螢幕大小改變而使位置產生偏移。

Read More

【翻譯】Unity官方教學- UI Text(UGUI)

【翻譯】Unity官方教學- UI Text(UGUI)

   凌晨12:55       林子安

---

The Text component, used to render text onscreen for various purposes such as labels, buttons, and other information.
文本組件，主要是用於呈現文字在螢幕上，並用於例如標籤，按鈕，和其他訊息

Text主要是渲染文本在螢幕上，主要的功能就是顯示內文(Text)，欄位為顯示在螢幕上的字符串，可以是簡單的文字或是動態顯示分數等等
如果換行會UI顯示上也會換行，所以最好在底下留下新的空白處
Character風格
Font 字體，支援TureType, OpenType, Dafont字體，中文的部分請點這
Font Style 風格如粗體、斜體
Fon Size 字體大小調整，若字體大小超出格子則會不顯示，可勾選overflow填滿
Line Spacing 間距，為了更容易閱讀也可以用Line spacing調整文字間距
Rich Text 富文本為可以嵌入RTC&HTML等格式
Paragraph段落
Alignment 校準，可以調整整個段落位置
Horizontal Overflow：Warp會自動換行，overflow則會直接溢出(超過格子只有一行這樣)
Vertical Overflow：Truncate則是會切斷垂直超過格子範圍的，同理overflow則允許超過
Best Fit 最佳配適，會讓文字自動適應格子大小
勾選Best Fit之後會出現Max/Min Size是期望出現自動適應字體大小的最大與最小值

Lza hint：如果要調整Text的邊界框框，需要選擇紅框內的選取模式

Color 顏色：就是字體顏色
Material 材質：影片中提到通常紋理材質是不會對字體有影響的

最後如果要動態變動文本的話，可以在script中new一個text，然後在update()中就可以更動內文
可以參考官方API文件

Lza心得：
這部分算是比較簡單，並沒有比較複雜的元素，在blog第一篇有提到中文字體的處理方案

Read More

【翻譯】Unity官方教學- UI Canvas(UGUI)

【翻譯】Unity官方教學- UI Canvas(UGUI)

   凌晨12:51       林子安

---

前言：這個系列是翻譯Unity官網上的UI教學，暫時沒有時間做成中文字幕，翻譯的如果沒有很好請多包涵XD

先簡單介紹一下Unity的UI史

OnGUI時期(Unity4.6以前)

在Untiy4.6以前官方式提供OnGUI函數來提供UI，而且不支援可視化開發，並且始終在3d object上方，也因此後來ArenMook就開發出一套NGUI plug-in讓UI這塊變得更容易開發，也可以顯示3d model跟粒子效果，網路上也有大量的教學，幾乎也被視為Unity的必備插件之一

UGUI時期(Unity4.6以後)

而4.6版本後出現了新版的UGUI，也是NGUI作者ArenMook從2012年11月加入Unity協助開發GUI讓UI的呈現更優化，因此在選擇GUI上通常會選擇UGUI，但NGUI仍然有持續更新也有使用者持續使用，如果已經使用NGUI的專案或是熟悉的開發者通常也會選擇繼續使用

到底要用UGUI還是NGUI：

有用過/正在用NGUI→選擇NGUI

沒用過NGUI的開發者→直接使用原生的UGUI即可

大致上是這樣，網路上也有一些比較專業的分析文，去針對兩者比較與效能表現

例如Drawcall數量，記憶體配置等等，不過大致上都是可用，而不如當初OnGUI可用性極低

所以兩者之中選擇影響並不會太大，而以下則是4.6版本時期的介紹，延用至5.0的今天也是OK的

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

UI CANVAS

版本檢查: 4.6 / 難度: 新手 / 日期: 24 Jul 2015

The Canvas is the root component for rendering all UI objects in Unity.

Canvas(畫布)是渲染所有UI物件的根容器

重點整理：

在UGUI中，只要添加任何UI到場景中就會自動生成Canvas跟Event System

所以的UI都必須位於Canvas底下

翻譯內容：

Canvas(畫布)

1.Canvas是一個控制將被渲染UI元素的組件

2.所有UI都必須是Canvas的子物件

3.同一個場景中是有可能有超過一個以上的canvas出現

4.使用UI元素至少需要一個可用canvas，如果沒有canvas而加入一個UI時會自動生成一個canvas並且讓其UI附在底下

5.每個canvas有不同的渲染模式可以設置

6.每個渲染模式可以在Render Mode pop-up menu(渲染模式彈出選單)中設定

Lza解說：
簡單來說，就是Canvas就是UI的母容器，而沒有canvas就直接new個UI就會生成1個canvas&1個eventsystem，而場景可以有多個canvas來控制或切換所需的UI
(例如一個是遊戲畫面UI，按ESC跳到另一個canvas進入選單畫面)
而渲染模式則是改良原本OnGUI僅有Overlay模式，也就是UI僅在最上層，下面會提到三種渲染模式

Screen Space - Overlay(覆蓋)

是最常見的渲染模式，也是canvas預設的渲染模式

在Overlay中，UI會覆蓋在場景上，而所有的UI都會渲染在所有場景最上層\

在這個模式中，canvas會自動填滿螢幕，並且根據螢幕設定改變自動調整大小

在Overlay模式中，canvas是由Rect Transform組件來驅動的，而canvas會變成不可編輯的

如果對Rect Transform有興趣，可以參考另外一隻教學(本期會翻譯)

這個渲染模式有一個Pixel Perfect(完美像素)選項

當勾選這個選項，UI會被調整到最近的像素

可以在某些情況下銳化UI元素的外觀

Screen Space - Camera(攝影機)

相較於覆蓋模式他是由一個場景特定的攝影機來呈現

他被允許一個特定攝影機設定螢幕場景UI的攝影機

最常使用的是立體攝影機給UI一個深度

在這個模式canvas會自動充滿整個攝影機視角

並且當攝影機的視角設定改變會自動調整

而這個模式一樣有Pixel Perfect的選項
Render Camera則是選取你要把UI渲染上去的目標攝影機，若沒設定攝影機則會回到預設的Overlay模式
Plane Distance為調整攝影機與UI的距離(調整大小會讓場景中UI元件變大或小，不過在預覽畫面是不變的)，如果沒有設置距離的話，渲染出來的UI可能會被裁減掉
還可以根據Depth(深度)來調整UI，如果要詳細研究可以參考Camera教學(之後會翻譯)

World Space

1.這個模式不由RectTransform驅動
2.有可能擁有1個以上的canvas來作為UI渲染
3.屬性欄位中Event Camera是接受事件的攝影機
4.Receives Events為是否受到事件點擊或暫停所影響，如果取消的話，這個UI則會忽略該事件
5.Sorting Layer跟Order Layer則是相對於場景中其他渲染，用來控制canvas的呈現順序

Lza解說：
在這個模式中很適合用於RPG常常需要進入情境動畫或是切換視角來做不同UI的呈現，又或是簡單如本影片最後範例可以當作切換UI前後順序等等，主要是跟事件有緊密的關係。

備註其他欄位：

Blueprint：啟用後，物體不會旋轉和缩放。

Raw Edit：啟用後，調整物體的Pivot和Anchor不會改變物體的位置和尺寸。

Render Mode : 

  Screen Space  - Overlay - 將UI元件在場景中最上面渲染，螢幕縮放自動會改變大小。

  Screen Space  - Camera - 將UI元件指定某個攝影機前一定距離上，螢幕縮放自動會改變大小跟攝影機設定有關。

  World Space   - 將UI元件在空間中，大小由RectTransform調整，善用於3D上不要在2D上。

Pixel Perfect     - 保持實際大小，不會自動調整大小。

Render Camera - 渲染的攝影機

Event Camera   - 接收事件的攝影機

Plane Distance  - 距離

Sorting Layer    - 渲染的層級

Order in Layer   - 渲染的層級

Ui Scaler Mode :

1.   Constant Pixel Size      - 使UI元件保留相同的大小(以像素为单位)無論屏幕大小。
2.   Scale With Screen Size - 使UI元件自動調整屏幕。

Screen Math Mode 

1.     Mathc Width Or Height  依寬度or高度
2.     Reference Resolution X Y  寬高大小
3.     Mathc Width Or Height
4.     Math

每個Canvas都有一個Graphic Raycaster，用於獲取用戶選中的uGUI控件。

多個Canvas之間通過設置Graphic Raycaster的priority來設置事件響應的先後次序。

當Canvas採用World Space或Camera Space時，Graphic Raycaster的Block選項可以用來設置遮擋目標。

Read More