遊戲美術必學!簡單製作無限循環橫向移動背景,提升遊戲視覺效果 發佈日期: 2023-09-012023-08-21 作者: yijun 文、查理 讀完這篇文章你可以學到:1. 製作一個背景物件群組,把你要的所有背景內容放在一起2. 讓這個背景物件,動起來3. 讓背景物件無限循環 很多遊戲都會有無限重複的循環背景,到底是怎麼做的? Q:會很複雜嗎?A:不會 Q:要寫很多程式碼嗎?A:不用 如何製作一個背景物件群組? 首先把要當作背景的圖片素材,拖曳到Unity的Project(素材庫)視窗裡,成為這個遊戲的素材,才有辦法使用。 天空背景圖片,寬度2048像素,高度1024像素 地板背景圖片,寬度2048像素,高度512像素 1. 將天空圖片,拖曳到Hierarchy(物件清單)裡,命名為Sky2. 將地板圖片,拖曳到Hierarchy(物件清單)裡,命名為Grass3. 調整地板物件在畫面下方 我們還需要一個背景群組物件,來存放天空圖片及地板圖片,讓它們一起移動。 4. 點選Ground地板物件,名稱更改為BackGround(背景),再將天空圖片拖曳到地板物件名稱上,自然變成子物件 地板圖片應該是在天空圖片前面。5. 在Hirarchy(物件清單)裡,點選地板圖片後,在Inspector屬性欄位裡Order in Layer,圖層順序更改為16. 在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並回覆「我想看文章」,不定期獲得更多知識吧! 不同頻道,不同知識! Facebook Instagram Youtube 分享此文:分享到 Twitter(在新視窗中開啟)按一下以分享至 Facebook(在新視窗中開啟)按一下以分享到 Telegram(在新視窗中開啟)按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)請按讚:喜歡 正在載入... 相關