創作內容

102 GP

[達人專欄] 余月Unity 2D橫向卷軸動作遊戲實作

作者:余月│2018-07-11 03:37:09│贊助:400│人氣:7565
大家好我是余月.我來分享一點Unity遊戲開發介紹

我是那個偶爾會來貼一些黏土人外拍的神經病
這次發些不同的,畢竟颱風來了 減肥明天再開始今天先寫點文

文章開始前我要提醒一點.這是約 五年前(2013年好像) 撰寫的文章
對現在的Unity來說已經是很舊很舊的環境了...
當時是寫給學弟妹作參考,不過我想沒有人會拿出來看
現在拿出來好像也太遲了?恩..管它的

Unity 2D橫向卷軸動作遊戲實作

Unity不僅可以製作3D遊戲,在Unity4.3的版本中發布了第一階段的2D工具,我練習製作了一個橫向射擊遊戲範例,在這個範例中會說明

1.遊戲的建立
2.介面介紹
3.腳色物件
4.鏡頭追蹤
5.人物動作
6.怪物智能
7.遊戲存取

介紹時會用到的檔案(包含程式碼)
余月Unity2D製做介紹用Google雲端硬碟連結在這邊
裡面會有五個資料夾包含音效那些有的沒的

新建專案時就已經可以直接建立2D遊戲



或著是到Edit - ProjectSettings – Editor中也能調整


建立專案後可以看到以下幾個區域


現在,我們將需要的檔案放到專案之中,首先將準備好的圖片放到專案內吧
將檔案放入專案內可以直接將檔案用滑鼠拖曳至Project內


但這樣會有太多資料與資料夾,可以創建一個圖片資料夾將檔案都丟進去


同樣的可以直接用滑鼠將想要放入資料夾內的檔案拖曳進入即可


我們可以將這九宮格的方塊直接變換為遊戲內讓角色踩踏的方塊
點擊踩踏方塊後Inspector區域會出現該圖片的相關資訊


設定完基本資訊後記得要按下右下方的Apply來採用修改


接下來按下Sprite Editor畫面編輯器會跳出踩踏方塊的圖片
按下左上的Slice將選取方式改為Grid並將X及Y都輸入32在按下Slice選取
繪製點陣圖的方塊時就已經算好每一格方塊都是32*32,所以將選取方式選為Grid來直接輸入每一格大小來做切割
最後再按下視窗上層的Apply來確定這次的編輯


Unity自動選取的方法是由左而右,由上而下並且是由0開始作編號
也就是說選取完這九格方格後編號是由0~8而非1~9
點選任一格選取的圖片也可以在右下角直接更改名稱,這樣在後續編輯時也能更快便認出想要使用的圖片為何


圖片選取完成後回到Project內點選踩踏方塊左方的小箭頭會出現剛剛所選取的所有圖片


我們可以直接將其中一個方塊拉入場景中
這裡我選取踩踏方塊_1 拉入後場景中就會有一塊長草的土塊
並且在階層Hierarchy中也會出現踩踏方塊_1這個物件


接著我要保留並儲存這個方塊物件
可以直接將階層Hierarchy中的踩踏方塊_1拉入Project中
因為這不是圖片了,所以可以新建立一個資料夾
我設立了一個新資料夾為物件,並在物件中又新增一個資料夾為踩踏方塊
因為之後我還打算在這個資料夾放入更多的物件檔案


選取物件內的草地將名稱更改為碰撞草地並且加入箱型碰撞並將Z軸改為2
Add Component – Physics – Box Collider


接著我們將新的物件拖曳到場景中,這塊草地就是可以讓主角去站立的草地了
甚至可以利用左上方的箭頭小工具來變化物件的位置、大小、角度等等
直接點選場景中的物件複製貼上就會是一個新物件了,很方便吧


接著來創建玩家角色的人物物件
首先先在圖片資料夾中主角內找到Idle(靜止)
1.      Idle直接用滑鼠拉入場景中
2.      將拉入的人物再拉回物件區建立成物件
3.      最後將名稱改為Player


接著加入component元件內Audio音效內的AudioSource


並將預設選取的(甦醒時就撥放)勾勾取消掉


接著加入Physics物理內的Character Controller角色控制器


角色控制器內將坡度限制改為90
並調整中心位置Y為-0.12
半徑0.4 高度1.5
此控制器作為角色與其他物件之間的碰撞區域
所以若今天角色是自創的話這些數值將可以看著畫面上的角色大小去做調整


接著將準備好的程式先放進來吧
程式的細部教學將會在下一章,我們先把會動並能玩的遊戲做出來吧


接著加入component內Scripts四個與Player相關的程式吧
分別是動畫、控制器、血量、武器


在調整這些程式的參數時我們需要音效
所以也將打包的音效丟進來吧


首先是Player Controls玩家的操作控制
在這裡可以設定
1.      跑步速度
2.      跳躍高度
3.      落下限制
4.      跳躍音效


放入音效的方式可以直接在旁邊的圓圈小點用滑鼠按一下
接著會出現目前這個專案內的音效
選取Jump做為跳躍音效吧


接下來是玩家的動畫控制Animator
在這裡可以設定
1.      靜止動畫
2.      跑步動畫
3.      跳躍動畫
4.      動畫播放速度


將圖片直接拉入動畫控制器吧
動畫有多少張有多長就在Size輸入該數字即可
跑步為四張所以Size輸入4


圖片的設定方式與方塊相同,但因為是單張所以要選擇Single
最大尺寸則是32


跑步也是用一格32的方式切割即可,最大尺寸則為128


人物血量的控制Health
在這裡可以設定
1.      血量
2.      打擊聲
3.      死亡動畫
4.      滿格血量圖案
5.      半格血量圖案
6.      空格血量圖案
7.      補血音效


再調整血量控制前先在場景Create一個2D物件用來製作死亡動畫
整個場景都可以用來設計物件以及動畫等等


將名稱改為playerdead
加入component內的音效與death animation死亡動畫的程式
死亡動畫控制器動畫的製作方式與人物動畫相同
1.      調整Size大小
2.      放入死亡動畫的連續圖按
3.      設定動畫撥放速度
4.      最後設定音效(playerdead)
也別忘了將此物件拉入物件區
建議可以開個雜項資料夾好區分其他物件


把這個動畫留在場景中很詭異,保存物件後按鍵盤Delete消除它吧


製作好死亡動畫後回到Player物件調整血量控制器
首先將血量調為3(一格血有兩滴所以整體血量為6
將製作好的playerdead物件拉入Death Anim
並且將圖片的全滿愛心、半滿愛心、空愛心拉入對應框內


最後是武器控制器
在這裡可以設定
1.      子彈物件
2.      子彈攻擊力
3.      子彈速度
4.      子彈發射間格時間
5.      位置
6.      槍聲


首先來製作子彈物件,設定好圖片格式一樣直接將子彈圖片拉入場景


拉入的子彈大小實在有點大,直接在Scale的X、Y長度調為0.6
接下來加入
1.      Box Collider 方塊碰撞(Is Trigger打勾
2.      Rigibody 鋼體(取消選取的
3.      Bullrt子彈程式
4.      最後也將子彈拉入物件區建立物件


一顆子彈在半空中也不對,建立完物件後就將它刪除吧
接著直接對場景內的Player按下滑鼠右鍵創立空物件


將這個空物件做為子彈位置,它用來判別正負值來區分左右
命名為bulletPos並在Position的X給它1吧


接著按下player物件並Apply套用設定
在場景內的物件設定完後要按下套用才會存取至物件內
如果每一個物件在場景中大小顏色都不同的話則可以不用一個個存為物件
那個時候則不用Apply套用也可以在遊戲場景中出現


回到玩家的武器控制器將製作好的子彈物件放入Bullets內
Spawn Position也選取剛剛建立的武器的位置
最後加入射擊音效



製作完人物後將它的位置至中吧,將位置的XY軸調為0


接下來也將場景中的踩踏草地方塊也置中
讓兩個物件都在XY軸為0


接下來使用左上的十字箭頭移動工具移動踩踏草地
移動這類點陣圖的整齊度很重要,如果直接移動很難與其他物件對其
所以移動時按住鍵盤的Ctrl在做移動時就可以一次移動1格的距離
這樣一來滑鼠往下移動三個就會讓少的物件的Y軸變換到-3的位置了


接著直接複製草地物件,複製的方法可以直接用鍵盤的快捷鍵Ctrl+C複製Ctrl+V貼上,這樣反覆複製與貼上就可以製作許多草地物件了,不需要一直從物件區拉入場景中也能快速得到同樣的物件,並且用一樣的移動方式將其他草地物件向右移動鋪成一小塊地面的樣子吧


一次複製一個方塊實在太慢了,可以直接用滑鼠框選多數物件一次複製
一次選取多數物件也能夠一起移動,同樣按著Ctrl移動吧。


複製了許多草地方塊後發現場景內的物件實在太多了,這時候可以在場景開啟一個空物件並命名為"踩踏方塊"並將在場景中全部的草地方塊物件都拉入新開的踩踏方塊物件中,這個踩踏方塊物件就可以像資料夾一般來管理所有的草地方塊,甚至可以直接對踩踏方塊這個物件做縮放或移動的操作
踩踏方塊物件旁也會出現一個小箭頭來收納它所包含的物件,這樣一來以後加入重要的物件時就不需要跟一些場景中不重要的物件全部擠在一起了。


接著匯入更多方塊圖片轉換為方塊物件,物件的設定與草地相同
這邊我新增了樹幹、石塊、方塊、全草方塊、土塊、土渣
製作相同物件不同圖案的方法也可以直接複製一塊草地物件
並將圖案改為其他樣貌並且將改變名稱再從場景中拉入物件區即可


踩踏土塊因為是單一色的物件,將它自由縮放也不會讓畫質失真
(畫質失真:圖案圖畫縮放時會模糊原本圖案的細緻度)
將放大的土塊直接移動到草地方塊下方就完成了土地


接著將各種不同的踩踏物件歸零後按著Ctrl來移動擺出一個關卡吧
利用Layer圖層來設定圖案物件的先後順序,數字越高代表越上面
土渣設為1土塊設為0的話土渣就會在土塊前面了


選擇場景中一開始就存在的Main Camera主攝影機
因為要讓遊戲畫面跟著主角移動,所以新增camera follow攝影機跟隨程式
程式依序是
1.      目標-將場景中的Player拉入即可)
2.      緩衝-畫面跟隨的緩衝格數,建議設為3才不會跟太緊
3.      垂直跟蹤-攝影機是否要跟著玩家的Y軸移動
4.      水平跟蹤-攝影機是否要跟著玩家的X軸移動
5.      最小高度-玩家掉落到懸崖下不想讓攝影機也追下去的話就設0就好


接著將攝影機的大小調為8並將HDR的選項取消掉


在場景中建立一個GUI的空專案,這個空專案與踩踏方塊相同是用來當資料夾用的,在這裡會放入遊戲UI介面,像是玩家血量與分數等等
接著在GUI資料夾物件中新增空專案hearts來代表玩家血量
並在hearts專案中心增heartAdder程式,但heart gui是空的


建立heartGUI這個物件,同樣直接在場景中新增一空物件名為heartGUI
加入GUI Texture(可以在Rendering中找到)並將愛心滿這個圖案放入Texture內


設定完成後別忘了將GUI以及heartGUI轉換為物件
GUI是資料夾物件也能夠一次將包含的物件一齊轉為物件
當然若將踩踏方塊這個資料夾物件也轉換為物件的話也能隨時將排好的關卡放入到其他場景之中


heartGUI的X軸大小改為0.03並回到GUI內的hearts將heartGUI放入


在運行遊戲前game的視窗由左而右是全螢幕、靜音、統計、控制等四個按鈕


按下視窗中間上方的播放紐就可以開始遊戲了,因為還沒說明程式所以在這裡先做點遊戲操作的說明,遊戲人物的操作是方向鍵左右移動上為跳躍
另外Z鍵是射擊鍵,但目前尚未安排怪物


接下來匯入怪物圖片facecrawl爬行臉
與其他圖片相同的設定方式並且一樣以32*32來做切割(最大尺寸為128)


可以直接將怪物的名稱設定為facecrawl並將牠轉換為物件


在物件中有Tag標籤這個選項,設定標籤可以利用它來判斷許多功能


新增一個標籤取名為enemy怪物,按下Tags下方的+號就可以新增標籤了


接著回到爬行臉怪物按下Tag選擇剛剛新建立的enemy這個標籤


也幫Player的標籤設定為Player吧


接著回到爬行臉怪物物件加入
1.      CharacterController控制器
2.      Box Collider方塊碰撞-將Is Trigger觸發打勾
3.      Audio Source音效
可以直接輸入圖片中所設定的數值或是直接手動調成自己想要的碰撞範圍


加入facecrawl爬行臉與enemy health怪物血量兩個程式
可以將爬行動畫設為4並依照圖片切割順序排入即可


製作怪物死亡的動畫物件
可以直接將玩家死亡物件拉入場景中複製改名為enemydead怪物死亡
並將圖片改為死亡依序0、1、2填入且加入音效enemydead後存為新物件


放入吃愛心個圖案置場景中會發現它很大顆,將XY軸長度改為0.3


將這個物件的名稱改為heart接著加入
1.      rigibody鋼體-它是用來設定這個物件的重力,將mass質量改為0.25
2.      Box Collider方塊碰撞-將XYZ軸都設為1.5
3.      Sphere Collider球型碰撞-將Is Trigger觸發打勾Radius半徑設為0.75


回到怪物血量的程式,將死亡動畫設定為enemydead怪物死亡動畫物件
愛心的掉落設定為heart物件並設定怪物打擊音效enemyhit


接下來可以運行遊戲陪那隻怪物玩玩看
如果只有一支太孤單也能複製一批怪物大軍,只要複製貼上至想要的地方即可
場景內的物件右上方有個Apply套用的按鈕,這是只設定物件屬性要套用到所有此物件身上,如果統一要將這隻怪物的血量調到10只要在Healt輸入10並按下Apply套用所有這隻怪物都會變為血量10,同樣若不按下Apply的話就是指場景中該物件做修改而已並且依樣可以運行遊戲,如果想製作一種怪物物件有許多不同種屬性的話就可以將每隻的大小血量速度都調為不同,這樣遊戲中的怪物就會變得很豐富。


儲存檔案也就是儲存現在編輯的場景
其他物件檔案都是儲存在這個專案之中


儲存的名稱是test.儲存後也會看到物件區多了一個test的unity圖示
他的檔案名稱是test.unity


匯出遊戲選擇Build Settings然後將剛剛儲存的場景拉入視窗內就可以匯出了
匯出的選項有許多不過目前的操作設定是PC的版本,就選PC吧


並景顏色可以直接調整Main Camera的背景顏色


接著來創建其他關卡
首先可以將原本創作的關卡重新儲存並設定檔案名稱為Level1


同Level1再繼續建立Level2、Level3...
可以直接New Scene新建場景或是將Level1另存為新關卡再做修改
直接另存的好處是該有的設定已經設定完成,只要更改怪物與踩踏方塊的配置即可做出不一樣的關卡


擺設完其他關卡後回到關卡1製作前往下一關的物件
將圖案Next設定完成後放入場景之中
將它加入相形碰撞與Level Manager這個程式
並且輸入想接續的關卡名稱(場景名稱


接下來建立menu選單作為遊戲一開始時的畫面
為了不讓畫面太空曠我將主角與一些方塊也放入畫面中


同樣也需要有GUI,不過這次GUI本身需要加入menu程式


在GUI中心增start與continue兩個空物件
兩個都加入GUI Texture在Rendering中可以找到,若嫌麻煩也可以找關鍵字GUI就會有了,接著在Texture內放入圖案即可
或著是可以使用GUI Text直接輸入文字,如果有喜歡的字型也可以放入unity內選取自己想要的字型
start與continue的圖案設定與其他相同,但是尺寸為128
接著兩個物件都加入mouse button滑鼠按鈕的程式
並在Send Message Up內輸入startGame與continueGame
這邊會與程式內命名有關係,後面說明程式碼時會提到
最後大小與方位可以調到自己想要的地方
也可以參考圖中數值做設定


接著是匯出的設定,記得要將新建立的場景與開啟遊戲時的順序放入
關卡二關卡三甚至更多的關卡也都加入下一關的物件讓它們連貫起來吧






遊戲雖然可以玩了不過還是多加一些東西吧
來製作遊戲場景中的前景物件與背景物件
這些物件玩家不會碰撞到,分為三個圖層的話就是前景、中景、背景三層
玩家所在的圖層是中景,所以遊戲時不會受到前景與背景的干擾


主角的Z軸是0,距離攝影機越近數字就越小(包含負數
當然距離超越攝影機就會看不到物件


這些貼圖物件不需要方塊碰撞所以可以把Box Collider拿掉
按下Box Collider旁的小齒輪Remove就可以了
前景與背景的貼圖我只有用上色的方式去區分
離畫面越近越亮背景的最暗
玩家所在的那層我也將所有物件條暗了一些
背景顏色也是直接在攝影機中做調整


攝影機的距離是可以調整的,將Z軸調到-20的話我的前景就有-1~-20可以做設定,這沒有一定的規定所以調為自己想設定的吧


接著物件統一放入前景與背景的資料夾空物件中
背景的Z軸為10前景則為-10
這樣就完成了背景與前景專用的物件資料夾與貼圖了
注意若物件Z軸若不是0的話Z軸距離就會與資料夾物件距離相加
若物件本身Z軸是-10資料夾是10的話那該物件在畫面上Z軸會為0


場景左上方有個2D按鈕按下讓按鈕放開可以切換至3D模式來確認貼圖
也可以按下攝影機轉為此模式確認拍攝方向


接著製作其他怪物
紅色的傢伙是一隻與爬行臉很相似的怪物
它會朝著玩家靠近並且一定距離觸發射擊
將貼圖enem1_3放入場景中(圖片格式與其他一樣
加入
1.      CharacterController並將球型範圍跳到適當(可直接如圖調整R0.5、H1.7
2.      Box Collider並將is trigger打勾X1、Y2、Z2
3.      Audio Source把勾勾拿掉
4.      Redguy紅色的傢伙程式
5.      Enemy Health怪物血量
紅色傢伙的程式內的怪物子彈以及子彈位置接下來會有製作教學
動畫的部分可以先放入了,動畫有幾張就在size的地方輸入數值


與主角相同在紅傢伙物件直接右件創立空物件較子彈位置bullerPos
這個點是這隻怪物發射子彈的位置
所以每隻會發射子彈的怪物都可以直接用子彈位置做調整


接著將子彈位置放入


子彈圖示我也是用玩家的子彈,所以可以將玩家的子彈物件拉入場景中更改顏色並且將程式改為enemy Bullet即可


同樣將怪物的子彈拉入程式中就完成了這隻怪物了


製作遊戲內處會受傷的陷阱
將尚未使用的兩個踩踏方塊貼圖製作程陷阱物件
首先建立trap陷阱的標籤並且選取
接著加上Box Collider箱型碰撞並打勾
這樣一來就完成陷阱了.玩家若碰到標籤trap的陷阱會受到傷害
enemy與trap兩個標籤分開的原因是不能讓子彈碰到陷阱


另外一個紫色方塊的做法相同,這裡取名叫紫色方塊


在設計關卡時如果有較大之的怪物存在的話要注意會不會卡到天花板或某些會阻擋到怪物去路的物件


可以利用Z軸來設計一些被物件擋住的怪物
但是要注意這些怪物的Z軸會不會過短而因此掉到踩踏方塊下


最後我在menu加入了文字說明遊戲的操作


匯出遊戲時我將遊戲名稱改名叫2DCatGame
或許看起來比test正式點?


點擊遊戲後會出現螢幕尺寸的調整
調整後按下Play!就可以玩了


接著是程式碼的解說
程式碼解說


沒了~
以前在學時老喜歡自己做點遊戲給同學挑戰
後來也幫校方製作了一些招生用的遊戲.看到小朋友們玩得很開心我也很高興
雖然這次介紹的是類似洛克人這樣簡單的遊戲
不過變化可以很大.很自由

隨後也同樣有在開發遊戲,不過因為工作暫停了..個頭.只是沒勁
最後我想介紹一下遊戲人物 魚丸貓


繪:我自ㄐ畫ㄉ
小學三年級時創作的人物,無論是個人部落格.臉書專頁都由她擔任看板娘.現在則是TWNP看板娘

也有請過繪師來畫過~登場於TWNP攝影集的插畫

繪:喬貓


繪:水佾

好了,感謝您的閱讀~
雖然與這篇沒有關係不過您想要聯繫我歡迎來我的臉書專頁

余月黏土人攝影

期待與您再見

謝謝觀賞
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4053270
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 10 篇留言

柚YuZu
想試著做做看 >_<

07-11 06:20

克克
辛苦了,奉上GP

07-11 07:29

HermitILG
已奉GP!

07-11 07:52

韃靼牛排
good 近期也想摸摸看unity

07-11 08:23

麻糬柯基
我都用Unity做3D遊戲,可是怎麼看2D遊戲做起來好像比較難……( ̄∇ ̄|||)

07-11 09:49

半月
最近想碰碰看,GP

07-11 10:11

Dark Matter
GP!以前畢業項目都是做2D橫向卷軸遊戲,哈哈

07-11 11:36

SWizard
可以麻煩解釋一下playerAnimator的i跟counter是什麼用途嗎?
(正開始學Unity, 缺少很多概念)

10-01 23:00

余月
playerAnimator意旨"玩家動畫"我並沒有用Unity的動畫工具來製作動畫而是直接用程式來判斷來撥放走路、停住等等.你可以在程式解說用Ctrl+F來搜尋這部分的寫法,counter是計數器.用來記錄一個變數的數量數值,可以拿來做一些判斷式10-01 23:33
SWizard
不好意思那如果我想增加一個攻擊時的動畫, 那麼我該怎麼寫好呢?
(宣告我還有辦法依樣照葫蘆, 但程式就無能為力了)

10-02 22:00

余月
你可以參考"跳躍"或是"走路"時的作法來新增一個"按下攻擊"時的反應,這對剛開始接觸是不簡單,但是會了就是你的了10-02 23:53
SWizard
謝謝, 大致上是成功了XD
不過有一個問題是不知道為何, 當我的角色不斷地去撞一個障礙物(有BoxCollider), 角色就有可能直接穿過那個障礙物(指的是像沒有一樣, 但圖片還在)

10-03 23:24

余月
你要去確認一下圖層Layer以及Z軸,這個範例中是使用Z軸來區分場景與背景並壓成2D的畫面,如果人物的碰撞區域沒有撞到物件的碰撞區域就不會有反應.Z軸可以切換2D&3D來確認物件碰撞區域的大小10-04 03:22
我要留言提醒:您尚未登入,請先登入再留言

102喜歡★ko83447ko 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:[達人專欄] 余月黏土人... 後一篇:[達人專欄] 余月黏土人...

追蹤私訊

作品資料夾

ro7799318給喜歡黑暗懸疑的人
黑色懸疑系列小說《閱讀者》更新囉~希望喜歡聽故事的大大們來鬼屋逛逛+好友喔ˊˇˋ/看更多我要大聲說昨天23:17


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】