遊戲美術必學!簡單製作無限循環橫向移動背景,提升遊戲視覺效果

文、查理

讀完這篇文章你可以學到:
1. 製作一個背景物件群組,把你要的所有背景內容放在一起
2. 讓這個背景物件,動起來
3. 讓背景物件無限循環

很多遊戲都會有無限重複的循環背景,到底是怎麼做的?

Q:會很複雜嗎?
A:不會

Q:要寫很多程式碼嗎?
A:不用

如何製作一個背景物件群組?

首先把要當作背景的圖片素材,拖曳到Unity的Project(素材庫)視窗裡,成為這個遊戲的素材,才有辦法使用。

天空背景圖片
天空背景圖片,寬度2048像素,高度1024像素
地板背景圖片
地板背景圖片,寬度2048像素,高度512像素
設定背景
天空圖片設定

1. 將天空圖片,拖曳到Hierarchy(物件清單)裡,命名為Sky
2. 將地板圖片,拖曳到Hierarchy(物件清單)裡,命名為Grass
3. 調整地板物件在畫面下方

天空 Sky

我們還需要一個背景群組物件,來存放天空圖片及地板圖片,讓它們一起移動。

4. 點選Ground地板物件,名稱更改為BackGround(背景),再將天空圖片拖曳到地板物件名稱上,自然變成子物件

Ground地板物件,名稱更改為BackGround(背景)

地板圖片應該是在天空圖片前面。
5. 在Hirarchy(物件清單)裡,點選地板圖片後,在Inspector屬性欄位裡Order in Layer,圖層順序更改為1
6. 在Hirarchy(物件清單)裡,點選天空圖片後,在Inspector屬性欄位裡Order in Layer,圖層順序更改為0

圖層順序,數字大的會蓋住數字小的,地板圖片會在天空圖片前面。

背景組件調整

7. 在Hierarchy(物件清單)裡,點選BackGround(背景物件群組)後,點選右鍵,在彈出選單裡點選Duplicate(複製並貼上)增加一個背景物件,並在Inspector屬性欄位裡,設定Position的X:20.48,移動到右邊並貼齊。

讓背景物件動起來的程式碼部分

在Project李新增一個C# Scipt,命名為ScrollingObject

打開程式碼後,在程式碼裡面撰寫一段程式碼

void Start () 
 {
     GetComponent<Rigidbody2D>().velocity = new Vector2 (-1.5f, 0);
 }


GetComponent<Rigidbody2D>():指的是物件的2D重力功能

velocity:指的是移動的的方向速度。
new Vector2(-1.5f, 0):指的是2D座標

第一個數字是X軸,正值往右移動,負值往左移動,-1.5就是每一個影格往左移動1.5像素,第二個數字是Y軸,正值往上移動,負值往下移動,0就是不移動。

整句程式碼的意思就是:物件每一個影格向左移動1.5像素(1秒預設為50影格,1秒往左移動75像素)


程式設定好之後,我們就可以把這個程式碼分別套用到2個背景群組物件BackGround上面。

在Hierarchy(物件清單)裡,分別點選2個背景群組物件後,點選選項清單Component,再點選Physics2D裡的Rigidbody2D,在背景群組物件增加一個2D重力功能,程式碼才能控制物件2D重力功能移動。

按下播放按鈕,即可看到背景物件緩緩地向左移動。

讓背景物件無限循環的程式碼的部分

在Project裡新增一個C# Scipt,命名為RepeatingBackground

打開程式碼後,在程式碼裡面撰寫一段程式碼

void Update(){
if (transform.position.x <= – GetComponent<BoxCollider2D> ().size.x){
transform.position = (Vector2) transform.position + new Vector2(GetComponent<BoxCollider2D> ().size.x * 2, 0);
 }
}

If:假如的意思
transform.position.x:
目前這個物件的座標系統的移動座標的X軸(目前的橫向位置)

– GetComponent<BoxCollider2D> ().size.x:
GetComponent<BoxCollider2D> (),指的是物件的2D矩形碰撞感應範圍功能

size.x:
指的是2D矩形碰撞感應範圍的寬度(像素),就是背景群組物件的寬度,中間的點符號『.』意義,類似『的』

if (transform.position.x < – GetComponent<BoxCollider2D> ().size.x){,的意思就是,假如(背景群組物件)目前的位置「小於等於」負的目前物件寬度(也就是整張圖片往左移動到畫面外),就執行後方的內容

(Vector2) transform.position:
因為要跟後方的2D座標相加,必須也是2D座標,透過(Vector2)將預設為3D座標的transform.position轉換為2D座標

new Vector2(GetComponent<BoxCollider2D> ().size.x * 2, 0):

new Vector2:一個新的2D座標(X,Y)
X值為GetComponent<BoxCollider2D> ().size.x * 2:X值為目前物件寬度的2倍
Y值為0

transform.position = (Vector2) transform.position + new Vector2(GetComponent<BoxCollider2D> ().size.x * 2, 0):
意思就是(背景群組物件)目前的位置的X軸 等於 X軸+ 目前物件寬度的2倍(移動到右邊畫面外,並貼齊第二張圖片)
(背景群組物件)目前的位置的Y軸等於Y軸+ 0

背景組件調整

整段程式碼簡單的說,就是假如背景圖片往左邊移動到超出畫面時,就移動到畫面右邊並貼齊,程式設定好之後,我們就可以把這個程式碼套用到背景群組物件BackGround上面。

在Hierarchy(物件清單)裡,點選背景群組物件後,點選選項清單Component,再點選Physics2D裡的BoxCollider2D,在背景群組物件增加一個2D矩形感應範圍功能,程式碼才能讀取到物件寬度。

按下播放按鈕,即可看到背景物件緩緩地向左移動,並且無限循環。


有時候單純的程式碼無法理解時,可以套用數字去測試,會比較好理解

例如:
1. 圖片寬度為2048(像素),高度1024(像素),畫面尺寸一樣為寬度2048(像素),高度1024(像素)
2. Unity的畫面座標預設左上方角落為原點X : 0,Y : 0,圖片預設的軸心為圖片左上方
3. 當第一張圖片往左移動2048像素,會移動到 X : -20.48的位置,右邊第二張圖片也從X : 20.48的位置移動到X : 0的位置
4. 這時,左邊第一張圖片完全移動到左邊畫面外,右邊第二張圖片,完全移動到畫面內
5. 這時,左邊第一張圖片的X座標為-20.48,小於等於負的圖片本身的寬度(-20.48),然後就會跳到右邊2倍圖片寬度的位置 ( -20.48 + 20.48*2 = 20.48 ),也就是右邊畫面外
6. 右邊第二張圖片持續往左移動2048像素,會移動到 X : -20.48的位置,小於等於負的圖片本身的寬度(-20.48) ,然後就又會跳到右邊2倍圖片寬度的位置 ( -2048 + 2048*2 = 2048 ),也就是右邊畫面外
7. 於是就產生了無限循環的移動

真的要實際用數字測試一次,再回來看程式碼,會比較好理解。

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料