My Unity Endless Runner Note

benthWsp
5 min readNov 8, 2016

--

overview

เป็นเกมวิ่งเก็บเหรียญไปเรื่อยๆ ฉากหลักเป็น 2D ฉาก Bonus เป็น 3D

หน้าจอเกมจะเป็น แนวตั้ง(Portrait) ทั้งหมด

ตัวเกมจะมีทั้งหมด 4 Scene

  1. Menu Scene
  2. Runner Scene
  3. Bonus Scene
  4. Game Over Scene

เริ่มสร้าง Project

หลังจากสร้าง Project ไปที่ Build Settings เพื่อ Switch Platform เป็น Android

สร้างและ Add Scene ทั้งหมดลงไป

สร้างตัวละคร

เริ่มทำ Runner Scene

นำ Sprite Sheet ของตัวละครมาทำ Animation

Run Sprite

ภาพ Sprite ตัวละคร เลือก Sprite Mode เป็น Multiple

ที่Sprite Editor ทำการ Slice แบบ Automatic

เมื่อ apply เสร็จแล้ว ลาก Sprite ไปใน Scene จะได้ animation และ animator มา ให้ลบ animator ออก เพราะจะสร้างเองแค่ไฟล์เดียว

ใน Scene ให้เหลือ ตัวละครในท่าวิ่งไว้ตัวเดียว

สร้าง Animator Controller ให้กับตัวละคร ลาก Animation เข้าไปใส่

ให้ ท่าวิ่ง เป็น Default

สร้าง Parameter เป็น Bool ชื่อ Grounded

transition วิ่ง -> กระโดด ให้ Condition เป็น false

transition วิ่ง <- กระโดด ให้ Condition เป็น true

Add Component ให้ตัวละคร

เพิ่ม Box Collider 2D, Rigibody 2D

สร้าง Object ตั้งชื่อว่า GroundCheck ให้อยู่ภายใต้ตัวละคร (เป็น Child ของตัวละคร) และ กำหนดตำแหน่งให้อยูบริเวณล่างสุดของตัวละคร เพื่อเอาไว้ให้สัมผัสกับพื้น

สร้างพื้น

นำภาพที่จะใช้เป็นพื้นมาสร้างเป็น Prefabs

เพิ่ม Box Collider 2D ปรับขนาดให้เท่ากับพื้นแต่ละอัน

สร้าง Physics2D Material กำหนด Frition และ Bounciness ใส่ไว้ที่ Material ของ พื้น

วางพื้น 1 อัน ที่ทำเสร็จแล้วลงในฉากเพื่อให้ ตัวละครอยู่บนพื้น

การเคลื่อนไหวตัวละคร

สร้าง C# Script Addให้ตัวละคร

กำหนดให้ ตัวละครวิ่งไปด้านซ้าย

ความเร็วเปลี่ยนแปลงตามค่า moveSpeed

myRigibody.velocity = new Vector2 (moveSpeed, myRigibody.velocity.y);

ให้ grounded เป็น false

แต่เมื่อ ตัวละครอยู่บนพื้น grounded จะเป็น true

grounded = false;
Collider2D[] colliders = Physics2D.OverlapCircleAll(groundCheck.position, groundCheckRadius, whatIsGround);
for (int i = 0; i < colliders.Length; i++){Debug.Log (colliders[i].gameObject);if (colliders[i].gameObject != gameObject)grounded = true;}

ถ้าตัวละครอยู่บนพื้น เมื่อคลิก หรือ แตะ หน้าจอ ให้เคลื่อนที่ขึ้นไปตามแกน y

if(Input.GetMouseButtonDown(0)){if (grounded)myRigibody.velocity = new Vector2 (myRigibody.velocity.x, jumpForce);}

กำหนดค่า Animator Parameter เมื่อ Grounded มีค่าเป็น false จะทำให้ ตัวละคร แสดงท่ากระโดด ตาม Condition ที่ตั้งไว้

anim.SetBool ("Grounded", grounded);

ทำให้กล้องวิ่งตามตัวละคร

สร้าง C# Script ให้ Main Camera

public Transform player;void Update(){transform.position = new Vector3(player.position.x + 2, 0, -10);}

ให้ตำแน่งของกล้องเปลี่ยนตามตำแหน่งตัวละคร โดยกำหนดให้สัมพันธ์กับระยะระหว่างกล้องกับตัวละคร

ลากตัวละครไปใส่ที่ player ตรง Componet Script ของกล้อง

Generating Ground

สร้าง GameOject ให้อยู่ภายใต้ Main Camera ตั้งชื่อ GroundSpawn กำหนดตำแหน่ง y เท่ากับพื้นอันแรก ตำแหน่ง x ให้ไกล้ หรือ ต่อกับพื้นอันแรก และสร้าง C# Script

ทำการสร้าง พื้นแบบ Random หน่วงเวลา แล้วทำการสร้างอีก ไปเรื่อยๆ

Instantiate(obj[Random.Range(0, obj.Length)],transform.position, Quaternion.identity);Invoke("Spawn", Random.Range(spawnMin, spawnMax));

ลาก Prefabs ของพื้นทุกอันใส่ obj ตรง Componet Script ของ GroundSpawn

เก็บคะแนน

สร้าง GameOject ให้อยู่ภายใต้ Main Camera ตั้งชื่อ ItemSpawn กำหนดตำแหน่ง y ให้อยู่เหนือพื้น ตำแหน่ง x ให้ไกล้ หรือ ต่อกับพื้นอันแรก และใช้ C# Script แบบเดียวกับ GroundSpawn

สร้าง Item จากรูปภาพที่หามา ทำเป็น Prefabs เพิ่ม Circle Collider 2D เลือก IsTrigger เป็น true เพิ่ม tag ให้เป็น Coin และ Star

ลาก prefabs ของ Item ที่สร้างไว้ ใส่ obj ตรง Componet Script ของ ItemSpawn

สร้าง UI > Text เปลี่ยนชื่อ เป็น Score

ที่ Canvas เปลี่ยน UI Scale Mode ให้เป็น Scale With Screen Size

สร้าง C# Script ชื่อ HUDScript ใส่ไว้ที่ Main Camera

เรียกใช้ Library เพิ่ม เพื่อจัดการเกี่ยวกับ UI

using UnityEngine.UI;

กำหนดค่าให้ coinScore จาก PlayerPrefs

coinScore = PlayerPrefs.GetInt("Score");

เปลี่ยน Text ที่แสดง บน UI ให้เท่ากับคะแนนที่ได้ในขณะนั้น

coinScoreObj.GetComponent<Text>().text = "Score: " + coinScore;

สร้าง C# Script ใส่ไว้ที่ Prefabs ของ Coin

ถ้ามีการชนกับ tag ที่ชื่อ Player ให้บวก คะแนนเพิ่มขึ้น 1 และทำลายตัวเอง

สร้าง C# Script ใส่ไว้ที่ Prefabs ของ Star

ถ้ามีการชนกับ tag ที่ชื่อ Player ให้ เก็บ คะแนน ไว้ที่ PlayerPrefs ชื่อ Score, ทำลายตัวเอง และ เปลี่ยนไป Scene ที่ชื่อ Bonus

Destroyer

สร้าง 3D Object > Quad ให้อยู่ภายใต้ Main Camera ตั้งชื่อว่า Destroyer

ลบ Mesh Renderer Component

เพิ่ม Box Collider 2D เปลี่ยน isTrigger เป็น true

เพิ่ม Rigibody2D เปลี่ยน Gravity Scale เป็น 0

ปรับขนาดให้สูงเท่าจอหรือมากกว่า เลื่อนตำแหน่งให้อยู่หลังจอระยะมากกว่าขนาดของพื้นที่กว้างที่สุด

สร้าง C# Script ให้ Destroyer

เมื่อ Destroyer ชนกับ ตัวละคร จะทำการเก็บคะแนนสูงสุดที่ทำได ้, กำหนดค่าให้ PlayerPrefs ชื่อ Score ให้เป็น 0 และเปลี่ยนไป Scene ชื่อ GameOver

copy Destroyer ขึ้นมาอีก 1 ตัว ปรับตำแหน่งให้เลยจอลงมาด้านล่าง ความกว้างเท่าจอ

GameOver Scene

ไปที่ GameOver Scene สร้าง C# Script ใส่ไว้ที่ Main Camera

เป็นการ สร้าง Label และ Button ขึ้นมา กำหนดตำแหน่ง, ขนาด ตามต้องการ นำคะแนนที่ทำได้ และ คะแนนสูงสุดมาแสดง เมื่อกดปุ่มให้ไปที่ Scene Runner เพื่อ เล่นอีกครั้ง

Menu Scene

ไปที่ Scene menu สร้าง UI Button, Text

สร้าง C# Script ใส่ไปที่ Main Camera

ลาก Main Camera ใส่ที่ Onclick ของปุ่ม เลือก ฟังชั่น startGame() ที่สร้างไว้

Bonus Scene

ไปที่ Bonus Scene เปลี่ยน Projection เป็น Perscpective ของ MainCamera

สร้าง 3D Object > Plane กำหนดตำแหน่งและขนาดให้มีลักษณะเป็นพื้นไว้สำหรับวิ่งไปข้างหน้า นำภาพ Texture ใส่ที่ Plane สร้าง C# Script ใส่ ให้Plane

สร้าง Directional Light ปรับตำแหน่งและมุม ให้ส่องเห็นพื้นสว่าง

ใน Update() ทำการเลื่อน Texture ไปไหนทิศทางเข้าหากล้อง

สร้าง Prefabs BonusCoin

เพิ่ม Shere Collider Component เปลี่ยน IsTrigger เป็น true

สร้าง C# Script ให้ BonusCoin

Create Empty ตั้งชื่อว่า SpawnPoint กำหนดตำแหน่ง ให้อยู่สุด Plane ข้างหน้า

สร้าง C# Script ให้ SpawnPoint และ นำ BonusCoin Prefabs ใส่ไปที่ Coin ตรง Componet Script ของ SpawnPoint

coinSpawn() จะสร้าง BonusCoin Prefabs ออกมาโดยสุ่มตำแหน่งแกน x จาก coinPonsX

ใน Update() จะนับเวลาประมาณ 15 วิ เมื่อครบแล้วจะกลับไปที่ Runner Scene

Copy Canvas และ Event Sytem จาก Runner Scene มาไว้

เพิ่ม C# Script ที่ ชื่อ HUDScript ให้ Main Camera จากนั้นลาก Text ที่ชื่อ Score ภายใต ้Canvas ใส่ CoinScoreObj ตรง Componet Script ของ Main Camera (ทำเหมือนกับ Runner Scene)

นำ Prefabs Toonbot มาวางไว้ในตำแหน่งหน้ากล้องให้เห็นด้านหลัง เพิ่ม Rigibody และ ฺBox Collider กำหนด Animation Run ให้เป็น Default State เลือก Tag ให้เป็น Player

สร้าง C# Script ใส่ให้ Toonbot

เชคการปาดนิ้ว จาก TouchPhase นำตำแหน่ง x มาหาว่าลากไปทางซ้ายหรือขวา จากนั้นทำการกำหนดตำแหน่งใหม่ให้ตัวละคร

--

--