用Unity重現(xiàn)《空洞騎士》的苦痛之路(3)——地圖篇
作者: 繁華如夢(mèng)
前言：
大家好。蟲(chóng)蟲(chóng)大冒險(xiǎn)（？）新的一期又雙叒叕來(lái)了。
本期文章主要講解《空洞騎士中》的地圖搭建相關(guān)的內(nèi)容，并會(huì)寫(xiě)一個(gè)簡(jiǎn)單的相機(jī)腳本。除此之外，還會(huì)涉及到如何制作背景、產(chǎn)生異于玩家移動(dòng)的動(dòng)態(tài)效果。好了，閑話不多說(shuō)，直接開(kāi)始。
地圖模板
工欲善其事，必先利其器。在開(kāi)始地圖搭建之前，我們先制作好游戲需要的地圖模板，這樣在后續(xù)的地圖搭建環(huán)節(jié)中可省去大量的時(shí)間與精力。
如何搭建地圖模板就不多說(shuō)了，通過(guò)圖片資源對(duì)比實(shí)際游戲畫(huà)面，然后再組合即可。大約有以下幾種主要的模板：
值得注意的是，地面與墻壁的柱子形狀的物體的紋理重復(fù)使用，是需要在精靈圖片屬性中編輯九宮格，并在SpriteRender-DrawMode中設(shè)置為T(mén)iled，并調(diào)整參數(shù)才能夠有正確的紋理重復(fù)的效果。如下：
這塊技巧在使用Unity制作UI時(shí)會(huì)頻繁用到，無(wú)論什么游戲。沒(méi)接觸過(guò)的童鞋可以留心一下。
由于機(jī)關(guān)陷阱物體是可以移動(dòng)的，因而我們還需要寫(xiě)一個(gè)簡(jiǎn)單的機(jī)關(guān)移動(dòng)腳本，來(lái)控制陷阱的移動(dòng)。主要邏輯是：先獲取陷阱能夠到達(dá)的最上方點(diǎn)與最下方點(diǎn)，然后讓陷阱在其中來(lái)回移動(dòng)。其實(shí)現(xiàn)代碼如下：
public enum TrapMoveDir
{
??? None,
??? Down,
??? Up,
}
public float moveSpeed;//移動(dòng)速度
public bool isMove=true;//是否進(jìn)行移動(dòng)
public Transform startTrans;//開(kāi)始的點(diǎn)
public Transform endTrans;//結(jié)束的點(diǎn)
public Transform trapObj;//陷阱物體
TrapMoveDir moveDir;//移動(dòng)方向枚舉
public void TrapMove()
{
??? if (moveDir == TrapMoveDir.Down)
??? {
??????? trapObj.transform.position += transform.up* moveSpeed * Time.deltaTime*-1;//朝下移動(dòng)
??????? float distance = Vector3.Distance(trapObj.transform.position, startTrans.position);
??????? if (distance<0.5f)//如果現(xiàn)在距離最下面的點(diǎn)小于0.5f，重新設(shè)置移動(dòng)方向
??????? {
??????????? moveDir = TrapMoveDir.Up;
??????? }
??? }
??? else if (moveDir == TrapMoveDir.Up)
??? {
??????? trapObj.transform.position += transform.up * moveSpeed * Time.deltaTime;
??????? float distance = Vector3.Distance(trapObj.transform.position, endTrans.position);
??????? if (distance < 0.5f)
??????? {
??????????? moveDir = TrapMoveDir.Down;
??????? }
??? }
}
?
地圖分層
為了實(shí)現(xiàn)原版游戲中景深的效果，我們需要正確的利用SpriteRender中提供的層級(jí)功能(Sorting Layer 或者使用Order in Layer)，以制作出想要的效果。其中主要的層級(jí)分布大致如下：（PS:原版游戲中的層級(jí)遠(yuǎn)遠(yuǎn)超出下面列舉的這幾種，這里只是簡(jiǎn)化版）
優(yōu)先級(jí)從上到下排列，最上面的的優(yōu)先級(jí)最高。其中第一層半透明白色遮罩的主要效果，是用于模糊背景物體，產(chǎn)生人物與場(chǎng)景深度不一致的效果。對(duì)比如下：
第二層的白色半透明遮罩主要用于模糊黑色背景，讓黑色背景跟后面的天空配色不產(chǎn)生沖突。
地圖搭建
在開(kāi)始搭建地圖之前，推薦自己先畫(huà)一個(gè)地圖草圖，然后按照草圖進(jìn)行搭建。搭建的時(shí)候可能不會(huì)跟草圖一摸一樣，但總是比毫無(wú)目標(biāo)的亂搭一氣好得多。如果你是想做到完全跟原版一樣，那么這一步你就可以跳過(guò)了。類似如下：
接下來(lái)就是按照草圖，選擇合適的地圖模板和對(duì)應(yīng)的圖片搭建地圖了。其中為了實(shí)現(xiàn)荊棘地形散亂生長(zhǎng)的感覺(jué)，沒(méi)有制作對(duì)應(yīng)地形的模板，而是根據(jù)周圍環(huán)境手動(dòng)調(diào)整荊棘圖片的旋轉(zhuǎn)縮放參數(shù)來(lái)實(shí)現(xiàn)相應(yīng)的效果。
而地圖中窗戶的效果就需要花點(diǎn)心思來(lái)實(shí)現(xiàn)了。首先需要設(shè)置好需要通過(guò)窗戶才能夠看見(jiàn)的物體的層級(jí)，然后還需要添加比窗口物體層級(jí)小的黑色遮罩，來(lái)遮擋住其余不需要被查看的部分。如下：
地圖交互
關(guān)于玩家與地圖之間的交互，此處就利用碰撞體的Tag屬性，來(lái)進(jìn)行不同的交互效果的觸發(fā)。如下圖：
代碼比較簡(jiǎn)單，就是獲取碰撞物體的標(biāo)簽來(lái)執(zhí)行不同的函數(shù)，就不貼出了。
簡(jiǎn)易相機(jī)
到了這一步，地圖、玩家都準(zhǔn)備好了。只需要一個(gè)相機(jī)游戲就可以試玩了。
現(xiàn)在我們來(lái)寫(xiě)一個(gè)簡(jiǎn)單的相機(jī)控制腳本。由于我們是2D游戲，可以忽略Z軸上的位移來(lái)進(jìn)行相機(jī)的移動(dòng)控制，于是我們的相機(jī)的控制原理如下：
其實(shí)現(xiàn)代碼如下：
??? public Transform player;?? //玩家
??? Camera playerCamera;??????? //主相機(jī)
??? Vector2 boxSize;??????????? //視野范圍
??? public bool cameraMove;
??? public void FollowPlayer()
??? {
??????? Vector3 targetPos = new Vector3(player.position.x, player.position.y, transform.position.z);
??????? transform.position = Vector3.Lerp(transform.position, targetPos, 0.08f);//插值進(jìn)行移動(dòng)
??????? float distance = Vector3.Distance(targetPos,transform.position);
??????? if (distance<0.5f)//距離小于0.5f時(shí) 停止移動(dòng)
??????? {
??????????? cameraMove = false;
??????? }
??? }
?
??? public void CheckBoundary()
??? {
??????? float leftDistance = 0; //左右距離
??????? if (player.position.x < transform.position.x) //在左邊
??????? {
??????????? leftDistance = transform.position.x - player.position.x;
??????? }
??????? else
??????? {
??????????? leftDistance = player.position.x - transform.position.x;
??????? }
??????? if (leftDistance > boxSize.x * 0.5f)//如果左右距離大于設(shè)置好的矩形寬度的一半
??????? {
??????????? cameraMove = true;//相機(jī)開(kāi)始移動(dòng)
??????? }
??????? float uDDistance = 0;?? //上下距離
??????? if (player.position.y < transform.position.y)
??????? {
????? ??????uDDistance = transform.position.y - player.position.y;
??????? }
??????? else
??????? {
??????????? uDDistance = player.position.y - transform.position.y;
??????? }
?
??????? if (uDDistance > boxSize.y * 0.5f)
??????? {
??????????? cameraMove = true;
??????? }
??? }
?
背景移動(dòng)
在現(xiàn)實(shí)世界中，人移動(dòng)時(shí)肉眼看遠(yuǎn)方，遠(yuǎn)處的物體總是移動(dòng)的比自己慢。而我們就是需要模擬這種特性，來(lái)完善我們的景深效果。
實(shí)現(xiàn)原理：游戲一開(kāi)始獲取玩家的位置并保存，然后每一幀計(jì)算出玩家已經(jīng)移動(dòng)的距離，然后使用計(jì)算出來(lái)的移動(dòng)位移，來(lái)計(jì)算出背景此時(shí)的坐標(biāo)。代碼如下：
??? public Transform player;
??? Vector3 backStartPoint;???? //初始背景的位置
??? Vector3 playeStartPoint;??? //初始玩家的位置
??? public void BackMoveFunc()
??? {
??????? float tempX = player.position.x - playeStartPoint.x;
??????? float tempY = player.position.y - playeStartPoint.y;??? //計(jì)算X,Y兩軸的歷史位移
??????? float xVaule = tempX * 0.08f;
??????? float yVaule = tempY * 0.06f;//計(jì)算出背景的X，Y軸位移
??????? transform.position = new Vector3(backStartPoint.x + xVaule, backStartPoint.y + yVaule, 0);
??? }
?
這里只讓一層的背景進(jìn)行移動(dòng)，如果想要更好的效果，可以多加幾層，使移動(dòng)的速度不同，這樣的效果將會(huì)更加逼真。
演示
敲黑板，項(xiàng)目到了這終于算能夠拿出來(lái)瞅瞅了，下面就是現(xiàn)在的演示：
結(jié)語(yǔ)
新的一期又肝完了。雖然通過(guò)這個(gè)項(xiàng)目我知道櫻桃游戲工作室將會(huì)比我更肝，但我還是想說(shuō)：快，馬上，趕緊，quick，哈壓庫(kù)，把絲之歌交出來(lái)。沒(méi)有絲之歌玩我要死了啊。
最后再多說(shuō)一句。游戲中還有許多小物體上都是有幀動(dòng)畫(huà)的，包括不限于血條，燈光，陷阱等等。如果你的身體機(jī)能滿足下圖：
可以考慮全都要。（咕咕咕）
工程下載鏈接：https://pan.baidu.com/share/init?surl=DD2_yJh-rulqpNgIDAuZjA
提取碼：?7gw1
相關(guān)鏈接，很（mai）重（mai）要（mai）
空洞騎士購(gòu)買(mǎi)鏈接：https://store.steampowered.com/app/367520/Hollow_Knight/
有線下學(xué)習(xí)游戲開(kāi)發(fā)打算的童鞋，歡迎訪問(wèn)：http://www.levelpp.com/
另有專業(yè)開(kāi)發(fā)交（gao）流（ji）群等待大家強(qiáng)勢(shì)插入：869551769
