遊戲美術必學！簡單製作無限循環橫向移動背景，提升遊戲視覺效果
文、查理
讀完這篇文章你可以學到：
1. 製作一個背景物件群組，把你要的所有背景內容放在一起
2. 讓這個背景物件，動起來
3. 讓背景物件無限循環
很多遊戲都會有無限重複的循環背景，到底是怎麼做的？
Q：會很複雜嗎？
A：不會
Q：要寫很多程式碼嗎？
A：不用
如何製作一個背景物件群組？
首先把要當作背景的圖片素材，拖曳到Unity的Project（素材庫）視窗裡，成為這個遊戲的素材，才有辦法使用。
天空背景圖片，寬度2048像素，高度1024像素
地板背景圖片，寬度2048像素，高度512像素
1. 將天空圖片，拖曳到Hierarchy（物件清單）裡，命名為Sky
2. 將地板圖片，拖曳到Hierarchy（物件清單）裡，命名為Grass
3. 調整地板物件在畫面下方
我們還需要一個背景群組物件，來存放天空圖片及地板圖片，讓它們一起移動。
4. 點選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. 於是就產生了無限循環的移動
真的要實際用數字測試一次，再回來看程式碼，會比較好理解。
FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/user/LccnetTaiwan
痞客邦Blog：http://lccnetvip.pixnet.net/blog
