Unity - 貓咪都會的簡易Animator 2D BlendTree

  使用Unity內建的Animator 2D BlendTree來建立一個簡單的二維動畫漸變。新的Animator功能滿不錯的,如果可以好好利用的話也許不錯,也可以減少程式要去Code的部分,哈。


Unity - 使用Pixels來判斷物件在畫面中所佔的比例

  判斷一個物件在畫面當中所佔的比例,如果是正方形、圓形等等固定形狀就很容易計算面積,同時如果是2D平面的物件又會比3D物件來的好算,在不考慮紀錄每個三角點座標計算每個三角形的體積,同時還要判斷是否重疊的情況下,這邊使用的是一個簡單的方法,雖然在效能上可以說很糟,畢竟是每個Pixel都跑一次判斷,但是可以簡單判斷各種形狀物件佔畫面的比例,不過還是要避免每個Frame或太常做這個判斷。
  簡單來說就是擷取兩張攝影機畫面,一張全畫面一張只有背景,然後比對每個Pixel,以此來計算比例。

 

Unity - 取得Android手機中的圖檔來做為材質

  一般來說如果遊戲要使用Resources資料夾的東西,用Unity提供的API像是Resources.Load就可以了,如果在編輯器底下也可以用Resources.LoadAssetAtPath()之類的方法,這邊使用的是另一種取得外部檔案的方式,也就是讓Unity呼叫在Plugin裡面預先製作好的方法,在Android手機中去取得外部檔案並回傳給Unity,然後在Unity執行中即時使用這個檔案建立材質。


CryEngine 學習筆記 5 - 道路跟河流

  編輯器工具使用部分,建立完地形之後就開始場景的擺設,先從簡單的道路跟河流開始,編輯器當中的配置道路有好用的拉線工具,此部分只有點擊配置控制點來調整線段即可,道路的寬、傾斜角度、材質等等都可以在屬性欄設定。


Unity編輯器版本2048 !

  不知道你玩過最近很流行的2048了沒有?如果還沒有的話建議可以先到2048的官方頁面去玩看看(http://gabrielecirulli.github.io/2048/),有鑑於最近2048很夯,於是參考了原著,我就把它修改成在Unity編輯器下也可以玩的版本啦。不過沒有做得很仔細,不知道會不會有Bug就是了。


Vertex and fragment shader 14 - 2D過場淡入淡出(Fade in/out) - 翻頁效果(斜角)

  水平的翻頁效果似乎有點單調,於是就想說做的三角形的好了,稍微花了點時間做了個計算,不過效果似乎還可以。

呈現的效果大概是如此。

Unity - 如何在Script中使用自己製作的PropertyAttribute

使用自己定義的Property並且在Inspector視窗中顯示自訂輸入格式。

  一般來說使用Unity的編輯器很方便,在類別裡建立一個Public的變數Unity就會自動把它序列化顯示在Inspector中可以編輯,而編輯這些數值基本上沒有太多的限制,也因此有可能會出現數值輸入出現意外的狀況,預防這種狀況一種就是在Script運作中加判斷,除此之外還可以在Inspector中就預先限制編輯人員可以輸入的範圍或是類別,也就是PropertyAttribute的方法。


北方之塔6

  之前花了不少時間在裝備欄那邊,後來才暫時決定裝備欄的系統設計,後來背包也是暫時製作了一下,還沒有時間仔細的去調整。
  目前就是可以把背包的資料撈出來顯示,不過這邊我使用的方式是在遊戲開的時候便撈一次全部的背包資料,並且建立各個物品格,之後在遊戲中切換打開背包也就只是切換顯示,只顯示過濾過的類別,除非有數量上或資料的改變,也就只要單獨更新那個資料格及介面格而已,基本上遊戲開始後就不會再撈資料,藉此來減少打開背包的delay,雖然這個delay幾乎感覺不出來就是了。



CryEngine 學習筆記 4 - 地形材質

  地形建立完成了,但是會發現顏色都是棋盤格,這是因為還沒有設定材質顏色,所以現在先來製作貼圖材質,幫場景上色,目前都是使用SDK內附的素材來做練習。



Unity - 如何使用LayerMask來讓RayCast正確過濾Layer做判斷

  在使用Unity當中RayCast的方法,有時候會想要經由Layers來做過濾,這樣子就可以只在目標的Layer下判斷,不過在使用上似乎有些問題,直接使用Layer ID來做為Mask會發現結果根本不是所預期的狀況。


Vertex and fragment shader 13 - 2D過場淡入淡出(Fade in/out) - 螺旋型(Spiral)

  最近剛好看到關於螺旋的文章,覺得是個滿有趣的效果,就試著來修改成為一個螺旋的過場吧。關於螺旋的計算是參考這篇(http://stackoverflow.com/questions/4638317/how-to-implement-this-rotating-spiral-in-webgl)。

修改後呈現的效果大概是這樣

另外一種方式

當然原本的旋轉也有

Vertex and fragment shader 12 - 2D過場淡入淡出(Fade in/out) - 速度線/風吹砂(SpeedLine)

  簡單的過場效果差不多要結束了,這次是做速度線的效果,以及類似風吹沙礫或者是雜訊的那種效果,這兩個效果看起來不一樣,但是在判斷上其實只有一個差別而已,一個只判斷Y軸,一個是XY軸都判斷。

呈現的效果大概是這樣

Unity - 如何取得Animator目前的狀態

  Unity的Animator是個很好用的功能,同時還提供圖形化的操控,但是在使用Animator的時候要如何去判斷目前的狀態是什麼呢,因為掛載Animator的物件身上只有這一個controller並沒有Animation,所以該如何取得目前的狀態就會有個小問題。



CryEngine 學習筆記 3 - 建立地形

  一些教學的部分就直接開始建立地形了,目前也是從建立地形開始,使用CryEngine內建強大的地形編輯器,可以輕鬆的編輯出一些地形,同時內建一些可用的場景物件,可以看情況使用,畢竟一開始也沒有自己的物件可以用。
  還沒有開始Code以前,我覺得如果能先把內建的東西玩一玩,可以順便熟悉操作。



Unity - 遊戲中擷取畫面(Screenshot)

  最簡單的方法就是使用Unity提供的API來擷取遊戲畫面,例如:Application.CaptureScreenshot("filename.png")
就會直接把畫面存成PNG檔案。


  另外一種使用ReadPixels來貯存畫面資料,因為使用第一種方法會先把檔案存下來,要使用的話還必須Load檔案才行,不過若只要單純的擷取圖片使用這個即可。如果想要操弄擷取的畫面又或者是不需要存檔的話,建議可以使用ReadPixels,這個也只要再加上檔案寫入的方法,也同樣可以把圖片存下來。


Code:
public Camera myCamera;
IEnumerator Screenshot() {
     //在擷取畫面之前請等到所有的Camera都Render完
     yield return new WaitForEndOfFrame();
  
     Texture2D texture = new Texture2D((int)myCamera.pixelWidth, (int)myCamera.pixelHeight);
     //擷取全部畫面的資訊
     texture.ReadPixels(new Rect(0, 0, (int)myCamera.pixelWidth, (int)myCamera.pixelHeight),0,0, false);
     texture.Apply();

     //自己處理畫面資料的方法
     //...
}

如果要把讀取的資料存成圖片檔也很簡單,用File I/O把Texture2D的資料寫入檔案即可
void SaveTextureToFile(Texture2D texture, string fileName) {
     byte[] bytes = texture.EncodeToPNG();
     string filePath = Application.dataPath + "/" + fileName + ".png";
     using (FileStream fs = File.Open(filePath, FileMode.Create)) {
          BinaryWriter binary = new BinaryWriter(fs);
          binary.Write(bytes);
     }
}

Unity - 使用低階圖形指令GL(Low-level graphics library)在畫面上繪製圖像時遇到的狀況

  一、GL的執行順序是立即執行,所以如果在Update裡面呼叫的話,他會在Camera Render之前執行,而接著Camera的更新會讓你的GL繪圖被蓋掉,所以最好在OnPostRender()裡面呼叫GL指令。

Vertex and fragment shader 11 - 2D過場淡入淡出(Fade in/out) - 翻頁效果(水平)

  因為最近剛好用到有翻頁效果的遊戲,於是就嘗試來做一個簡單版本的翻頁效果,雖然簡單但是看起來還算可以。

呈現的效果大概是這樣


Vertex and fragment shader 10 - 2D過場淡入淡出(Fade in/out) - 自訂圖案陣列(切除)

  覺得一般方形或圓形陣列的效果不太滿意,想要使用自己設定的花紋來做為切除的圖案,因此就使用第二個材質來做為花紋,並且只使用它的Alpha值來做為切除的依據,就簡單地可以達到這樣的需求。

呈現的效果大概是這樣


CryEngine 學習筆記 2 - 介面配置

  開始之前先熟悉基本介面吧,同時了解一下工具的配置,方便未來要使用的時候尋找,同時在這個時候改變一下介面的配置,調整到自己習慣的配置方式。




CryEngine 學習筆記 1 - 開始前準備

  剛好對於CryEngine有點興趣,同時他又開放免費版的SDK可以使用,這邊就記錄一些心得。

  首先當然是要先去官網下載SDK(http://www.crydev.net/),如果沒有帳號的最好順便趁等待下載的時間註冊一個新的帳號,因為之後執行引擎的時候要輸入帳號。


Vertex and fragment shader 9 - 2D過場淡入淡出(Fade in/out) - X型切除(單純/旋轉)

  接著來個比較簡單清爽的效果,對角線的切除以及米型的旋轉,雖然簡單但是效果也還算不錯。

*型旋轉的效果


單純X形切除呈現的效果大概是這樣


Vertex and fragment shader 8 - 2D過場淡入淡出(Fade in/out) - 圓圈陣列(清楚/模糊)

  這個就是類似之前的方塊陣列,只不過再加上之前使用的圓形切除,來達到這樣的效果,也可以讓這類型的效果不會太過單調。

呈現的效果大概是這樣

北方之塔5

  接著的一個月就是在把原本做的功能更完善一些,像是小地圖放大顯示的部分,讓切換的部分順利執行,並且也增加一些基本功能,像是可以拖曳地圖以及縮放地圖,有在打算讓玩家可以點選格子自己做記號,因為未來有打算做一些機關或小謎題等等,同時我不打算自動標記(惡意),所以可能會需要這個功能。


北方之塔4

  在完成基本的介面後,接著花了一個月了時間在弄系統,基本上似乎都沒有太多進度,因為大部分時間都在重新調整Code,除了重新編寫類別之外,就是在設計人物資料的面板。



Vertex and fragment shader 7 - 2D過場淡入淡出(Fade in/out) - 圓心縮放(Alpha模糊)

  同樣是圓心縮放的效果,不過加上使用Lerp運算跟改變Alpha值,來達到模糊化的效果,也就可以避免原本圓心縮放的邊緣太過銳利。

呈現的效果大概是這樣


Vertex and fragment shader 6 - 2D過場淡入淡出(Fade in/out) - 圓心縮放(清楚切割)

  使用簡單的半徑作為判斷就可以達到圓心縮放的效果,這個效果也可以應用在圓形小地圖的效果上,不過若是要用做小地圖,使用螢幕座標要小心寬螢幕造成變形,可以改用UV座標運算並使用正方形面片來解決,不過此時要移動地圖就必須去改變中心點座標的計算。

呈現的效果大概是這樣


Vertex and fragment shader 5 - 2D過場淡入淡出(Fade in/out) - 漸進百葉窗(貼圖材質)

  一般的百葉窗效果有些單調,然後印象中一些AVG遊戲也不單只是使用這種效果,有些是一片一片逐漸改變,造成漸進型的效果,這個就是修改原本百葉窗達到這樣的效果。

呈現的效果大概是這樣




Vertex and fragment shader 4 - 2D過場淡入淡出(Fade in/out) - 方塊陣列(三角、交錯)

  同樣方塊陣列的切除,切除的方式稍微做些變化,同樣也是憑印象製作一些好像在以前的AVG有看過的效果。

簡單三角切除的效果

北方之塔3

  在逐漸建構系統的過程中,也同樣不斷在調整介面的設計。過程花了不少的時間,一般來說我會先在紙上畫個大略配置的草稿,然後製作一個樣板,單純把圖片文字擺設好然後看看效果如何。
  

Vertex and fragment shader 3 - 2D過場淡入淡出(Fade in/out) - 方塊陣列(方形縮放)

  這次是方塊陣列的切除,並且使用材質貼圖,切除的方式是方形的縮放。

呈現的效果大概是這樣