北方之塔17

  角色介面稍微做個調整,調整一下配置跟UI圖片,也是使用跟物品介面相同的免費素材,裝備介面跟之前類似點擊部位後打開裝備選擇,不過裝備選擇介面還沒調整完。接著就是打算暫時做一個技能介面,然後可以簡單地做一個快捷按鈕的配置,這樣就可以開始來弄技能系統了。

  然後把一個怪物的Model替換成蜘蛛,原本是用一個方塊來表示,替換成蜘蛛後就感覺好像有這麼一回事一樣,哈哈。當然這個也是Unity的AssetStore可以下載到的免費模型,上面有幾個品質還不錯的模型,如果我可以把這個遊戲做到快完成的話,也許可以購買幾個便宜的模型來使用。


北方之塔16

  重新調整完物品資訊的介面圖片後,接著稍微調整一般的介面圖片以及架構,除了更新圖片去掉無用又太大的圖之外,重新調整的架構又讓DrawCall少2還算滿不錯的。

  除了調整一般操作介面,也調整腳色資訊面板,這個時候其實覺得原本的UI相關的Code有些繁雜,製作或使用上也不是太方便,也就有打算重新製作整個UI相關的部分,這部分花了不少時間,把原本的Code都去掉改為使用新的,也要確認新的UI運作跟原本的一樣,也花了些時間把原本的Code清理一些不太有用的方法,目前雖然還沒全部調整完,但大致上UI已經換成新的架構了。


北方之塔15

  最近這一個多月有點忙阿,公司專案需要趕些進度,結果回家都不想動只想無腦看個小說,還好最近稍稍閒了一點,抽空把之前沒做完的部分繼續補齊。

  之前做到了裝備欄位可以選擇裝備物品,接著要做的就是一個簡單的技能面板,不過我打算在製作這個面板前,先把技能系統架構出來,一方面可以知道我畫面需要呈現的有哪些資訊,以及把技能系統簡單確定一個方向。

  目前還在調整技能系統,同時也順便再次修改一下裝備欄位跟物品資訊面板。


北方之塔14

  最近工作比較忙一些,前陣子又在製作脫出遊戲的原型,結果就是隔了好久才又開始繼續修改之前做一半的裝備系統。



Unity - 動態Copy GameObject上的Component以及Component上面設定的value到另一個物件上

  使用Unity內建的MonoBehaviour來製作script很方便,建立一個新的繼承MonoBehaviour的class,這個物件就可以做為component放到場景的物件上,除了配置到物件上之外,這個類別裡面的public參數也會顯示在Unity的inspector中調整,在調整一些參數上很方便不需要動到code。


北方之塔13

  因為這個遊戲的背景其實是從MUD來的,可以說這是個粉絲取向的遊戲,原本就打算參考原始MUD的故事架構,也許在製作上並不會完完全全採用原本的設定,但是還是有許多可以使用在遊戲中的東西。

  稍微把之前蒐集的資料整理了一下,大概把MUD遊戲中的歷史編成一個簡單的表,其實表中有很多的素材可以使用,例如地圖場景地點,但是我目前也沒辦法做這麼多事情,因此遊戲最主要的目的只放在一個元素上,也就是歷史上冒險者第一次發現北方之塔的時候。

北方之塔12

  繼續修改裝備介面,這次把快捷按鈕配置的圖示也正確顯示,除了在人物裝備介面當中可以看到快捷按鈕配置的圖示,遊戲進行中的快捷介面目前也可以正常顯示。

  接下來要完成的部分就是可以切換裝備品跟快捷按鈕配置,只要這個部分做出來,就可以讓使用者來切換裝備,裝備介面就不再只是顯示好看的了。



Puzzle - 脫出系遊戲

  脫出系遊戲,好久以前就玩過這樣類型的遊戲,最有印象的就是主角常常莫名其妙被關在一個空間裡面,這個空間常常是一個房間,主角一方面要理解為什麼會在這裡,一方面也要離開這個地方,所以遊戲最主要的目的就是離開這個空間。

  主角該怎麼離開這個空間呢,就是要透過一連串的謎題啦,蒐集從房間中撿來的各種物品,解開散落在四處的謎題,打開一個又一個的鎖頭,最後就可以重房間脫離啦。


Unity - 自己的三次曲線(Cubic Curve)自己畫 - Bézier Curve, Hermite Curve...

想法
  三次曲線(Cubic curve)可以應用的地方很多,像是讓物體跟隨一條路徑移動,例如平台遊戲的移動跳板;或者是讓攝影機跟著這條路徑移動,達到類似運鏡的效果。

  網路上也有許多寫得還不錯的插件可以使用,而且功能都滿完整的,如果單純要使用這樣的效果,推薦可以直接選一個下載來用,會比自己重頭寫一個來的方便快速


Unity - 在Inspector中編輯自訂類別作為型別的參數,並簡單使用CustomPropertyDrawer美化GUI顯示

目的

  主要的目標在於讓使用自訂類別作為型別宣告的物件,可以在Unity的Inspector視窗當中也出現編輯框,讓使用者可以直接編輯該物件。同時使用CustomPropertyDrawer來美化介面,讓編輯更可以符合自己的需求。


北方之塔11

  最近又再度製作背包的部分,稍微完成一些進度,把之前還沒做的一些地方製作完成,像是背包的物品點擊跟按壓的事件,以及背包分類篩選物品的功能,此部分還算是簡單,同時把分類獨立一個方法,因為之後我也想在選擇裝備物品的時候使用,當我點選裝備部位的時候,會把相關的物品列表列出來,這部分就跟背包的分類很類似了,所以希望這個方法可以共用減少重複。


Unity - 製作2D拋物線(Parabola)物件2 - 假的模擬阻力

說明
  接續著前一篇完美拋物線(http://www.iverv.com/2014/08/unity-2dparabola1.html),那接著就是要做有受到阻力的效果,但是這邊為什麼叫做假的呢,因為這邊用的方法不全然是照著公式來做,但是在概念上是接近的,同時也可以達到類似受到阻力移動的效果。

  但是跟前一篇不同的是,前一篇是利用公式,以X座標去求Y座標位置,來得到拋物線段上各點的座標位置,用這個座標位置來設定球的座標。這次使用的方式是以向量的方式來移動,概念就是行進中的點,以當下移動的向量調整阻力後,乘上一個frame的時間求得下一個位置。


福島FGJ - Fukushima & Faust Game Jam 2014

  2014的福島Game Jam在前陣子結束啦,這種快速製作一個Prototype的過程,其實滿不容易的,但是多虧了許多好用的引擎工具,讓製作上變得輕鬆許多,雖然說輕鬆,但是實在製作上還是覺得時間不夠啦。


本組的基本資料:台北場G組<STREAK>,Wiki頁面
http://157.7.235.138/dokuwiki/doku.php?id=team:taipeiiii_g

Unity - 製作2D拋物線(Parabola)物件1 - 完美拋物線

  拋物線很容易從字面上理解,就是物體拋出去後移動的軌跡,但是實際的運作卻參雜了許多公式,例如空氣可視為某種流體,那是不是就又牽扯了流體的運作,同時物體如果不是正圓形的狀況,情況就又更複雜了。

  不過在遊戲中通常也用不到這麼精細的計算,這邊使用的公式也都是以點為主,而完美拋物線也只需要考慮重力的作用即可。


北方之塔10

  花了約兩個星期弄的時空之門地圖暫時告一段落,雖然是個小插曲但也可以算是轉換一下心情啦。接著就繼續之前的進度,之前把快捷按鈕的系統部分暫時做完,不過在繼續把整個系統完善以前,先來做一下其他進度比較慢的部分。

  於是就來製作開頭的選單。選單之前雖然有做過一個簡單的版本,不過也就僅僅只是顯示標題跟開始,沒有任何作用。

時空之門 - 大草原互動地圖

  時空之門~大草原地圖XD。

  滿懷念時空之門MUD,多少年前還為了它熬夜奮鬥,雖然最近重開,但是zMud連很久都會連不上,所以也就沒有上了,有點可惜啊,雖然時間不像以前這麼多可以玩,但是能掛著發呆也不錯,哈。

  翻出以前畫在紙上的大草原地圖,於是就來個[大草原地圖3D互動化]計畫吧,簡單構思格式跟畫面呈現後就馬上開始製作了。



Unity - 製作電流效果2 - Mesh

  除了使用Unity內建的LineRenderer來製作電流效果之外(製作電流效果1-LineRenderer),還可以使用自己建立Mesh線段來取代LineRenderer製作電流效果,明顯的好處就是線段不一定要連續,以及多個線段Draw call不會增加,但是因為是用Mesh製作,所以當線段的數量越多,雖然Draw Call不變但是面數卻會大量增加,所以在使用上還是要斟酌,同時如果有美術可以製作這些效果的圖,也就可以不必用這麼多Mesh線段來模擬電流效果。


Unity - 製作電流效果1 - LineRenderer

  在表現電流效果上想要華麗又漂亮當然是可以靠美術的圖,但是當沒有這個資源的時候,其實用簡單的一張光束圖加上亂數跑來跑去的座標點,也是勉強可以做出堪用的電流效果。



北方之塔9

  這段時間製作的部分感覺比較雜一些,首先製作一個簡單的快捷按鈕的介面,然後配合這個介面製作可以讓使用者更改按鈕內容的系統,然後為了測試這個系統製作一小部分的戰鬥攻擊系統,其中在快捷按鈕的部分花了一點時間在決定該用什麼方式來建立一個可以讓使用者更改配置的系統,接著就是實作一個部件,並讓它簡單的跟戰鬥系統連結。

  因為同時間參雜了幾個部分,所以一些架構目前雖然暫時做出來,但是之後可能還需要再修改。


Unity - 簡易2D拖曳物件移動

  在2D場景中當需要拖曳物件的時候,可以使用一些簡單的方法達到這個目的,這次的目標是在畫面上選擇好物件按下滑鼠不放或是觸控螢幕的按住不放,然後手指或滑鼠移動時物體也會跟著移動。


Unity - 簡易2D地圖路徑尋找(Path finding)暴力搜尋法(Brute Force Search)

  在製作2D地圖的時候,如果在地圖上有配置許多的目標點,例如村莊、洞穴、城堡等等,有些時候會希望角色可以在設定好的這些座標點上移動。
  像是角色目前在A地點要移動到D地點,按下移動後就會A->B->C->D走到目標,如果地圖並不複雜龐大的話,此時就可以使用簡單的路徑取得,也就是本篇使用的方法,使用暴力搜尋法把所有可能的路徑全部找出來。

北方之塔8

  最近開始嘗試製作怪物系統了,不過在製作這個系統之前花了不少時間在決定這個遊戲主要的戰鬥方式,到底是要用踩地雷進入戰鬥還是畫面中可以看到怪物走來走去,確實在這個點上考慮了很久,這也是造成怪物系統遲遲沒有開始動工的原因之一。

  如果以踩地雷或者是碰怪物進入戰鬥畫面的方式,在製作上對我來說會比較簡單一點,不過這樣子的系統表現卻不符合原本遊戲設定的方向,所以後來還是決定製作成可以看到怪物在地圖上走來走去,玩家跟怪物的攻擊都是即時的,這樣感覺會比較有趣一點。



Unity - 製作沿著正交線(perpendicular line)移動的物件

  這次來製作的是可以沿著正交線移動的物件,舉例來說以物體的右方來去判斷,往正右方射出Raycast,如果這條線有打中Collider就去取得擊中那個點的資訊,取得該點的法向量後,再使用向量外積來取得正交線的向量(藍色箭頭),此時如果直接讓物體以這向量來移動的話就可以達到目的了。



北方之塔7

  延遲很久才做的材質編輯器,終於開始動工了,之前只有單純的顯示無法編輯,最近終於把編輯的部份給完成了。

  其實會拖這麼久才開始弄也是因為當初還沒有研究這部分,製作上有些困難,再加上當時用繪圖軟體把圖片排一排,給地圖編輯器使用上沒有問題,也就因此暫時沒動這部分。


Unity - Animator的IsInTransition簡單使用方式

  簡單說明關於Animator的IsInTransition的用法。先簡單製作幾個狀態放在Animator中並且做簡單的Transition,也就是時間播放結束的時候會自動切到下一個狀態。



Unity - 使用ScreenToWorldPoint的時候,回傳值是camera的position而不是目標點座標的問題

  在使用Camera.main.ScreenToWorldPoint(Input.mousePosition))的時候,有時候會發現取得的是Camera的座標而不是滑鼠的座標。

  因為事實上是需要提供Z參數的
Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, Z));
  Z代表的是Depth,因此如果Z=0的話就會是Camera的transform position了,因為此時nearClip趨近於Camera,不論你畫面中哪個點都會趨近於Camera的position

自己做的參考圖。

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座標運算並使用正方形面片來解決,不過此時要移動地圖就必須去改變中心點座標的計算。

呈現的效果大概是這樣