สร้างเกม Flappy Bird ด้วย Unity

attapong 956 27 ก.พ 2564 flappy, bird,
gamepg

                    Flappy Bird เป็นเกมมือถือสำหรับระบบปฏิบัติการ android และ iOS ซึ่งถูกพัฒนาโดยนักพัฒนาเกมอินดี้ชาวเวียดนามชื่อ Dong Nguyen ซึ่งถูกปล่อยออกมาในวันที่ 24 เดือนพฤษภาคม ปี ค.ศ. 2013 และถูกดึงออกจากสโตร์โดยผู้พัฒนาในเดือนกุมภาพันธ์ปี 2014

                  รูปแบบการเล่นของเกมไม่มีอะไรซับซ้อน ผู้เล่นทำหน้าที่ในการควบคุมตัว Faby (นกในเกม) ซึ่งเคลื่อนที่ไปเป็นด้านหน้าตลอดเวลา ผู้เล่นต้องทำการป้องกันไม่ให้ตัวนกชนกับท่อที่โผล่ออกมา เมื่อผ่านท่อแต่ละอันจะได้คะแนนเพิ่มขึ้น ซึ่งผู้พัฒนาเกมนี้ (Dong Nguyen) ใช้เวลาในการพัฒนาเพียง 3 วันเท่านั้น


Resource Download

เอกสาร

ภาพสไปรต์

เพลงแบคกราวนด์

เสียงเมาส์คลิก

Create Unity Project

                  ขั้นแรกให้ทำการสร้างโปรเจกต์ใหม่โดยเลือกเทมเพลตเป็น 2D

การเลือกเทมเพลตเกมที่ต้องการสร้างในยูนิตี้

Downloading Assets

                  ก่อนที่จะทำการสร้างเกมเราจำเป็นต้องหา Assets ที่นำมาใช้ในเกม เช่นภาพ นก ท่อ UI ที่ใช้ในเกมเป็นต้น

ภาพที่นำมาใช้ในเกม

                  ไฟล์ต่าง ๆ ที่จำเป็นจะถูกจัดเก็บไว้ใน Home Server ของห้องปฏิบัติการเมื่อทำการดาวน์โหลดไฟล์เรียบแล้วร้อย ให้ทำการแตกไฟล์และกลับไปยังยูนิตี้ ทำการลากไฟล์ภาพ Flappy Bird Sprites.png จาก Windows Explorer เข้ามายังโฟลเดอร์ Assets ของยูนิตี้ ซึ่งต่อไปนี้จะเรียกวิธีการนี้ว่าการอิมพอร์ต (import)

การอิมพอร์ตภาพเข้ายูนิตี้

                  ใช้เมาส์เลือกภาพที่อิมพอร์ตเข้าไป จากนั้นให้สังเกตที่ด้านขวามือจะพบกับแถบ Inspector ให้เลือกส่วนของ sprite mode เป็น Multiple เนื่องจากภาพที่นำเข้ามานั้นประกอบไปด้วยสไปรต์หลาย ๆ ตัวและส่วนของ Filter mode เป็น Point เพื่อไม่ให้เกิดการเบลอของภาพจากการเกลี่ยสีเมื่อมีการย่อหรือขยายของภาพ สุดท้ายในส่วนของ Compression ให้กำหนดเป็น None เพื่อไม่ให้มีการบีบอัดของภาพซึ่งอาจทำให้ได้ภาพที่ไม่มีความคมชัดในการแสดงผลจากการบีบอัดข้อมูลภาพ การกำหนดค่าดังกล่าวจะทำให้ภาพสไปรต์คมและมีคุณภาพในการแสดงผลที่สูง จากนั้นให้ทำการกดปุ่ม Apply เพื่อบันทึกการเปลี่ยนแปลง

การเลือกโหมดของสไปรต์

                  เมื่อทำการกดปุ่ม Apply แล้วยูนิตี้จะทำการแปลงไฟล์ภาพให้กลายเป็นข้อมูลของสไปรต์เพื่อนำไปใช้งานในยูนิตี้ ในการทำงานกับสไปรต์เราจำเป็นต้องทำการแยกส่วนเล็ก ๆ ในภาพออกเป็นสไปรต์หลาย ๆ ตัว เช่น สไปรต์ของ นก ท่อน้ำในฉากเป็นต้น เพื่อนำเอาสไปรต์เหล่านั้นมาประกอบเข้ากันเป็นองค์ประกอบในเกม ซึ่งเครื่องมือที่ใช้ในการแยกภาพออกเป็นสไปรต์จะเรียกว่า Sprite Editor

                  ให้ทำการเลือกที่ภาพสไปรต์อีกครั้ง จะเห็นว่าในแถบเครื่องมือ Inspector มีปุ่ม Sprite Editor อยู่ให้ทำการคลิกที่ปุ่มดังกล่าวซึ่งจะเป็นการเปิดหน้าต่างของ Sprite Editor สำหรับทำการจัดการสไปรต์

หน้าต่างสไปรต์อีดิเตอร์

ในการสร้างสไปรต์ใน Sprite Editor เราสามารถทำได้โดยการคลิกเมาส์เพื่อกำหนดกรอบสี่เหลี่ยมเพื่อนำมาใช้ในการสร้างสไปรต์

การใช้เมาส์ตีกรอบเพื่อสร้างสไปรต์

                  นอกจากนี้ตัว Sprite Editor ยังมีเครื่องมือสำหรับเลือกภาพเพื่อนำมาใช้ในการสร้างสไปรต์โดยอัตโนมัติที่อยู่มุมบนซ้ายของหน้าต่าง Sprite Editor

การกำหนดให้ Sprite Editor สร้างภาพสไปรต์โดยอัตโนมัติ

                  โดยให้กำหนดค่าดังนี้ Type เป็น Automatic ส่วนของ Pivot ให้เป็น Center เพื่อให้จุดหมุนของสไปรต์อยู่กึ่งกลางภาพ สำหรับ Method ให้เป็น Delete Existing หมายถึงให้ลบสไปรต์ที่เราได้ตีกรอบไว้ก่อนหน้านี้ จากนั้นให้กดปุ่ม Slice

กดปุ่ม Apply เพื่อสร้างสไปรต์

                  เมื่อเสร็จสิ้นแล้วให้ทำการกดปุ่ม Apply ที่มุมขวาบน จากนั้นให้กลับมาที่หน้าต่าง Assets กดที่ปุ่มสามเหลี่ยมของภาพ จะเห็นว่าภายในจะประกอบไปด้วยสไปรต์หลาย ๆ ตัวเกิดขึ้นจากภาพที่เราได้จัดการไว้ในทีแรก

สไปรต์ที่เกิดขึ้นจากการใช้ Sprite Editor

 

Setting up the Game

                  ให้ทำการเปิดหน้าต่าง Game ซึ่งเป็นหน้าต่างสำหรับแสดงผลในการทดสอบการทำงานของเกม โดยให้เลือกจากเมนู Window > General > Game ดังรูป

การเปิดหน้าต่าง Game

                  เมื่อเปิดหน้าต่าง Game ขึ้นมาแล้วให้ทำการปรับอัตราส่วนในการแสดงผลเป็น 9:16

การปรับอัตราส่วนการแสดงผลในหน้าต่าง Game

                  จากนั้นให้ทำการลากภาพสไปรต์ background มาวางไว้ที่หน้าต่างไฮราคี (Hierarchy)

เพิ่มฉากพื้นหลังในเกมลงหน้าต่างไฮราคี

                  ให้ย้ายการทำงานไปยังหน้าต่าง Scene แล้วให้ใช้เมาส์เลือกตัว Main Camera ในหน้าต่างไฮราคีและให้ลากเมาส์ในหน้าต่าง Scene เพื่อกำหนดให้กรอบขาวมีขนาดเท่ากับภาพพื้นหลังฉากที่พึ่งเพิ่มเข้าไป จากนั้นให้ทำการเลือกที่ตัวเกมออบเจกต์ที่เป็นฉากหลังที่ได้เพิ่มเข้าไปและกำหนดค่า Order in Layer เป็น -1

กำหนดกรอบขาวให้พอดีกับขนาดพื้นหลัง

                  กรอบสีขาวที่ได้จัดขนาดไปนั้นเป็นการกำหนดขนาดการฉายภาพของตัวกล้องในเกม ซึ่งเราได้กำหนดให้มีขนาดเท่ากับภาพสไปรต์ของฉากหลังในเกมนั่นเอง

Creating the Player

                  หลังจากทำการสร้างฉากพื้นหลังแล้วขั้นตอนต่อไปจะทำการสร้างตัวนกซึ่งเป็นตัวละครของผู้เล่น ให้กลับไปที่หน้าต่างโปรเจกต์ จากนั้นเลือกภาพสไปรต์ของนกที่ขยับปีกขึ้นสูงสุดเข้ามาในหน้าต่างไฮราคีเช่นเดียวกับตอนที่เพิ่มฉากเข้าไป

เพิ่ม Player เข้าไปในเกม

เปลี่ยนชื่อเกมออบเจกต์

                  เมื่อเพิ่มเกมออบเจกต์แล้วให้ทำการเปลี่ยนชื่อเป็น Player ด้วยการคลิกเมาส์ขวาที่เกมออบเจกต์ในหน้าต่างไฮราคีแล้วเลือกเมนู Rename ซึ่งหน้าต่าง Inspector ของ Player จะมีลักษณะดังรูป

หน้าต่าง Inspector

                  จากนั้นให้ย้อนกลับไปยังหน้าต่าง Project คลิกเมาส์ขวาบนพื้นที่ว่าง ๆ ในส่วนของ Assets แล้วเลือกเมนู Create > Animation เพื่อทำการสร้างเอนิเมชันนกบิน

สร้างเอนิเมชันสองมิติในเกม

                  เมื่อสร้างแล้วให้เปลี่ยนชื่อเอนิเมชันเป็น Faby ดังรูปด้านบนฝั่งขวามือ จากนั้นให้ทำการลากเอนิเมชันนี้เข้าไปยังเกมออบเจกต์ Player ที่ได้สร้างไว้ในขั้นตอนก่อนหน้า ซึ่งเป็นการเพิ่มคอมโพเนนต์ Animation ให้กับตัว Player นั่นเอง

หน้าต่าง Inspector ของเกมออบเจกต์ Player

                  ในหน้าต่างไฮราคีให้ทำการเลือกเอนิเมชัน Faby อีกครั้งจากนั้นให้ไปที่หน้าต่าง Inspector ให้เลือกส่วนของ Loop Time เพื่อให้เกิดการเล่นเอนิเมชันอย่างต่อเนื่อง จากนั้นทำการเปิดหน้าต่าง Animation ด้วยการเลือกจากเมนู

การเปิดหน้าต่าง Animation

                  จากนั้นให้ไปยังหน้าต่างโปรเจกต์เพื่อเลือกภาพสไปรต์ของ Flappy Bird ทั้งสามตัวเข้ามายังหน้าต่าง Animation ตรงส่วนของการแสดงเวลาของเอนิเมชัน

การเพิ่มสไปรต์เข้าไปในเอนิเมชัน

                  ในกรณีที่ภาพไม่ได้เรียงติดกันดังรูปให้กดปุ่ม Ctrl บนคีย์บอร์ดค้างไว้แล้วเลือกรูปที่ต้องการจนครบทั้งสามรูปแล้วค่อยลากเข้ามายังหน้าต่างเอนิเมชัน ในกรณีที่แถบเวลาของเอนิเมชันหยาบเกินไปเราสามารถใช้เมาส์สกรอลเพื่อขยายหรือย่อแถบเวลาของเอนิเมชันได้ จากนั้นทดสอบกดปุ่ม Play  ของหน้าต่าง Animation จะพบว่ามีการแสดงเอนิเมชันของตัวนก Flappy bird แล้ว

                  เพื่อให้เอนิเมชันดูดีขึ้นเราสามารถปรับปรุงได้ด้วยการลากตำแหน่งคีย์เฟรมในเอนิเมชันที่เป็นรูปสี่เหลี่ยมขนมเปียกปูน  อันสุดท้ายไปยังวินาทีที่ 0.1 (0:10) และคีย์เฟรมอันที่สองไปยังวินาทีที่ 5 (0:05) สำหรับคีย์เฟรมอันแรกให้วางไว้ที่ตำแหน่งเดิม

การจัดตำแหน่งคีย์เฟรมใหม่

                  วิธีนี้จะทำให้เราเอนิเมชันการบินของนกนุ่มนวลและดูสวยงามขึ้นกว่าครั้งแรกให้ทดสอบดูด้วยการกดปุ่ม Play บนหน้าต่าง Animation อีกครั้ง

The Platform

                  ขั้นตอนต่อไปเป็นการสร้างแท่นสำหรับยืนในเกมที่เรียกว่า Platform ให้ย้ายการทำงานไปยังหน้าต่าง Project แล้วทำการลากสไปรต์แท่นยืนมาวางไว้ที่หน้าต่างไฮราคี

เพิ่ม Platform เข้าไปในฉาก

                  จากนั้นให้ทำการลากแท่นยืนลงไปด้านล่างของฉากและเปลี่ยนชื่อเป็น Platform และส่วนของภาพพื้นหลังให้เปลี่ยนชื่อเป็น Background

                  จากนั้นให้เลือกเกมออบเจกต์ Platform และเปลี่ยนโหมดการวาด Draw Mode จาก Simple เป็น Tiled และเปลี่ยนค่า Order in Layer เป็น 1

การกำหนดค่าในเกมออบเจกต์ Platform

                  การกำหนดค่าข้างต้นจะทำให้การวาดภาพของแท่นยืนดังกล่าวมีลักษณะต่อเนื่องกันไปตลอดและแสดงผลทับส่วนอื่นในเกมทั้งหมดที่มีค่า Order in Layer ต่ำกว่า 1 (ค่าตั้งต้นที่กำหนดให้โดยยูนิตี้ คือ 0) ลำดับถัดไปเป็นการสร้างกล่องสำหรับตรวจสอบการชนให้กับเกมออบเจกต์ตัวนี้ด้วยการคลิกที่ปุ่ม Add Component และค้นหาคอมโพเนนต์ที่ชื่อว่า Box Collider 2D

การเพิ่มคอมโพเนนต์ Box Collider 2D

                  จากนั้นให้ทำการเลือกส่วนของ Auto Tilling ดังรูปด้านบนเพื่อให้การตรวจสอบการชนทำงานต่อเนื่องไปตลอดเวลา

                  สุดท้ายให้ทำการปรับตำแหน่งของ Platform ในหน้าต่าง Inspector ในส่วนของ Positionโดยให้มีค่าในแนวแกน Y เป็น -1

ปรับตำแหน่งของ Platform ในหน้าต่าง Inspector

                  ทั้งนี้เราสามารถใช้เมาส์เลือกเกมออบเจกต์ในหน้าต่าง Scene แล้วทำการเลื่อนไปมาเพื่อจัดวางตำแหน่งที่ต้องการได้เช่นกันจากนั้นให้ทำการทดสอบการทำงานของเกมด้วยการกดปุ่ม Play บนแถบ Toolbar ด้านบนของยูนิตี้

Player Physics

                  เพื่อให้เกมทำงานได้สมบูรณ์เราจำเป็นต้องเพิ่มระบบฟิสิกส์ให้กับตัวเกมออบเจกต์ Player ของเรา ดังนั้นให้ทำการเลือกตัวเกมออบเจกต์ Player ในหน้าต่างไฮราคี จากนั้นให้ไปยังหน้าต่าง inspector และกดปุ่ม Add Component และค้นหาคำว่า Rigidbody 2D

การเพิ่มคอมโพเนนต์ Rigidbody 2D

                  จากนั้นให้ทำการเพิ่มคอมโพเนนต์ Capsule Collider 2D อีกตัวหนึ่งโดยให้มีทิศทางการวางตัวของแคปซูลที่ใช้ในการตรวจสอบการชนนี้ให้อยู่ในแนวนอน โดยเลือกส่วนของ Direction เป็น Vertical จากนั้นให้กดปุ่ม edit collider และทำการปรับขนาดให้เหมาะสมกับตัวเกมออบเจกต์ player

การปรับขนาดของแคปซูลในการชน

Player Script

                  ลำดับต่อมาเป็นการเขียนคำสั่งควบคุมการทำงานต่าง ๆ ด้วยการสร้างสคริปต์ใหม่เพื่อให้ตัวเกมออบเจกต์ Player กระโดดเมื่อเราทำการคลิกเมาส์บนหน้าจอ ให้ย้ายการทำงานไปยังหน้าต่าง Project เลือกตัวเกมออบเจกต์ Player คลิกเมาส์ขวาไปยังเมนู Create > C# Script

การเพิ่ม c# สคริปต์ให้เกมออบเจกต์ Player

                  ตั้งชื่อสคริปต์ว่า Player.cs จากนั้นทำการลากสคริปต์ที่สร้างขึ้นไปยังตัวเกมออบเจกต์ Player ในหน้าต่างไฮราคี จากนั้นให้ทำการดับเบิ้ลคลิกที่ตัวสคริปต์ยูนิตี้จะทำการเปิด Visual Studio ขึ้นมาเพื่อทำการแก้ไขโค้ดให้พิมพ์โค้ดดังต่อไปนี้

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour
{
    public float velocity = 2.4f;
    private Rigidbody2D rigidbody;

    // Start is called before the first frame update
    void Start()
    {
        rigidbody = GetComponent<Rigidbody2D>();
    }

    // Update is called once per frame
    void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
            rigidbody.velocity = Vector2.up * velocity;
        }
    }
}

                  ทำการบันทึกไฟล์จากนั้นให้ย้ายการทำงานกลับมาที่ยูนิตี้ และทำการทดสอบการทำงานของเกมด้วยการกดปุ่ม Play

ปุ่ม Play เพื่อทดสอบการทำงานของเกม

                  ในการทดสอบให้ทำการคลิกเมาส์เพื่อทดสอบการทำงานของตัวเกมออบเจกต์ Player

The Obstacles

                  จากการทดสอบจะเห็นได้ว่าตอนนี้ตัวเกมออบเจกต์ player ฉากหลัง และแท่นยืนทำงานได้เรียบร้อยแล้ว ลำดับต่อไปเป็นการสร้างสิ่งกีดขวาง (obstacle) ซึ่งเป็นท่อสีเขียวในเกม Flappy bird นั่นเองโดยให้กดปุ่ม Play อีกครั้งเพื่อยกเลิกการเล่นเกมย้ายการทำงานกลับมายังหน้าต่าง Scene

                  ในหน้าต่างไฮราคีให้ทำการคลิกเมาส์ขวาบนพื้นที่ว่าง ๆ จากนั้นเลือกเมนู Create Empty เป็นการสร้างเกมออบเจกต์เปล่า ๆ ขึ้นมาในฉาก

การสร้างเกมออบเจกต์เปล่า ๆ ขึ้นมาในฉาก

                  เมื่อสร้างแล้วให้ทำการเปลี่ยนชื่อเกมออบเจกต์เป็น Obstacle Pipes ไปที่หน้าโปรเจกต์ให้ทำการลากสไปรต์ของท่อทั้งสองอันเข้าไปยังเกมออบเจกต์ Obstacle ในหน้าต่างไฮราคีโดยให้เพิ่มไปครั้งละอัน เมื่อทำการสรางเสร็จแล้วให้ทำการเลือกเกมออบเจกต์ Obstacle Pipes ในหน้าต่างไฮราคี ไปที่หน้าต่าง Inspector แล้วกำหนดค่าตำแหน่งเป็น (1.5, 0, 0) ในแนวแกน X, Y และ Z ตามลำดับดังที่แสดงไว้ในรูปด้านล่าง

การกำหนดตำแหน่งของ Obstacle Pipes

                  เมื่อกำหนดค่าต่าง ๆ เสร็จแล้วให้ทำการปรับตำแหน่งของท่อแต่ละอันให้ได้ตามรูปด้านล่าง โดยกำหนดตำแหน่งเป็น (0, 1, 0) และ (0, -1, 0) สำหรับท่อด้านบนและด้านล่างตามลำดับ

การจัดวางตำแหน่งของท่อแต่ละอันในเกมออบเจกต์ Obstacle Pipes

                  เมื่อทำการจัดวางตำแหน่งของท่อแต่ละอันเสร็จแล้วให้ทำการเลือกที่ท่อแต่ละอันในเกมออบเจกต์ Obstacle Pipes และเพิ่มคอมโพเนนต์ Box Collider 2D เข้าไป เพื่อใช้ในการทดสอบการชนแบบกล่อง ลำดับต่อมาเป็นการสร้างสคริปต์ C# ขึ้นมาโดยคลิกเมาส์ขวาบนพื้นที่ว่าง ๆ ใน Assets ของหน้าต่าง Project ให้ทำการตั้งชื่อไฟล์ว่า obstacle.cs โดยมีโค้ดการทำงานภายในเป็นดังนี้

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class obstacle : MonoBehaviour
{
    public float speed = 1.0f;

    // Update is called once per frame
    void Update()
    {
        transform.position += ((Vector3.left * speed) * Time.deltaTime);
    }
}

                  เมื่อเขียนโค้ดและบันทึกเรียบร้อยแล้วให้ทำการลากสคริปต์นี้ไปยังเกมออบเจกต์ Obstacle Pipes ในหน้าต่างไฮราคี ในตอนนี้สิ่งกีดขวางหรืออุปสรรคพร้อมนำมาใช้งานในเกมแล้ว ลำดับต่อไปจึงเป็นการสร้างสิ่งกีดขวางให้เกิดขึ้นมาเองโดยอัตโนมัติไปเรื่อย ๆ จนจบเกม

                  เพื่อให้สามารถสร้างสิ่งกีดขวางขึ้นมาเองโดยอัตโนมัติเราจำเป็นต้องสร้างเกมออบเจกต์เปล่า ๆ ขึ้นมาหนึ่งตัวด้วยการคลิกเมาส์ขวาบนพื้นที่ว่าง ๆ ในหน้าต่างไฮราคี เลือกเมนู Create Empty เลือกที่ตัวเกมออบเจกต์ที่พึ่งสร้างขึ้นมาแล้วคลิกขวาเลือกเมนู Rename เปลี่ยนชื่อเป็น Obstacle Spawn เกมออบเจกต์ดังกล่าวจะไม่มีการแสดงผลออกทางหน้าจอจะมีเพียงส่วนควบคุมการทำงานในการสร้างสิ่งกีดขวางโดยอัตโนมัติเท่านั้น

                  จากนั้นให้ทำการเลือกเกมออบเจกต์ Obstacle Spawn แล้วย้ายการทำงานไปที่หน้าต่าง Inspector ทำการรีเซตค่าในคอมโพเนนต์ Transformation ด้วยการกดปุ่มไข่ปลา 3 จุด แล้วเลือกคำสั่ง Reset

รีเซตและย้ายตำแหน่งเกมออบเจกต์ Obstacle Spawn มาทางขวาสุดของฉาก

 

                  เมื่อทำการรีเซตข้อมูลเรียบร้อยแล้วให้ทำการเลื่อนเกมออบเจกต์ Obstacle Spawn ด้วยการกดปุ่ม Move Tool ที่ Toolbar button ด้านบน

ปุ่ม Move Tool

                  เมื่อทำการเลือกเกมออบเจกต์ Obstacle Spawn และกดปุ่ม Move Tool แล้วจะปรากฏแนวแกนบนตัวเกมออบเจกต์ในหน้าต่าง Scene จากนั้นให้ใช้เมาส์กดบนแนวแกนสีแดงแล้วลากไปทางด้านขวาซึ่งจะเป็นการเคลื่นที่ในแนวแกน X หรือแนวนอนนั่นเอง ดังที่แสดงไว้ในรูปด้านบน

                  จากนั้นให้ทำการสร้างสคริปต์ใหม่ชื่อ spawner.cs โดยมีโค้ดการทำงานภายในดังนี้

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class spawner : MonoBehaviour
{
    public float queueTime = 1.5f;
    private float time = 0;
    public GameObject obstacle;

    public float height = 0.35f;

    // Update is called once per frame
    void Update()
    {
        if (time > queueTime)
        {
            GameObject go = Instantiate(obstacle);
            go.transform.position = transform.position + new Vector3(0, Random.Range(-height, height), 0);
            time = 0;
            Destroy(go, 10);
        }

        time += Time.deltaTime;
    }
}

                  เมื่อบันทึกเสร็จแล้วให้ทำการลากสคริปต์นี้เข้าไปยังเกมออบเจกต์ Obstacle Spawner ลำดับต่อมาเป็นการสร้างตัวแม่แบบหรือพิมพ์เขียวสำหรับตัวเกมออบเจกต์ซึ่งจะเรียกว่าพรีแฟบ (Prefab)

                  ในที่นี้เราจะสร้างพรีแฟบสำหรับตัวท่อเพื่อให้ตัวเกมออบเจกต์ Obstacle Spawn นำมาสร้างใหม่ได้เรื่อย ๆ โดยให้ทำการลากเกมออบเจกต์ Obstacle Pipes ไปที่ส่วนของ Assets ในหน้าต่าง Project

การสร้างพรีแฟบหรือแม่แบบจากเกมออบเจกต์

                  เมื่อทำการลากไปแล้วจะเห็นว่าที่หน้าต่างไฮราคีชื่อของ Obstacle Pipes จะเป็นสีฟ้าซึ่งหมายความว่าเกมออบเจกต์นี้ได้ถูกเปลี่ยนให้เป็นวัตถุแม่แบบในการสร้างเกมออบเจกต์ไปแล้ว ให้ทำการลบเกมออบเจกต์ Obstacle Pipes ในหน้าต่างไฮราคีได้เลย ด้วยการคลิกขวาที่ตัวเกมออบเจกต์แล้วเลือกเมนู Delete หรือกดปุ่ม Delete บนคีย์บอร์ดก็ได้

                  จากนั้นให้ทำการเลือกเกมออบเจกต์ Obstacle Spawn ในหน้าต่างไฮราคีแล้วทำการลากพรีแฟบ Obstacle Pipes ไปที่ช่อง Obstacle ของคอมโพเนนต์ Spawner ในหน้าต่าง Inspector  

การกำหนดค่า Obstacle ให้คอมโพเนนต์ Spawner ของเกมออบเจกต์ Obstacle Spawn

                  ทดสอบการทำงานของเกม

Scrolling Platform

                  จากการทดสอบการทำงานของเกมจะเห็นได้ว่าส่วนของแท่นยืนไม่ได้เคลื่อนที่ไปตามแนวนอนตามท่อ ทำให้ดูไม่สมจริงเพื่อแก้ปัญหาดังกล่าวเราจะทำการสร้างเอนิเมชันของแท่นยืนหรือแพลตฟอร์ม ให้ทำการสร้างเอนิเมชันใหม่ตั้งชื่อว่า platform ในหน้าต่าง Inspector ให้เลือกส่วนของ Loop Time เพื่อให้เกิดการเล่นเอนิเมชันอย่างต่อเนื่อง

กำหนดให้เล่นเอนิเมชันเมชันแบบวนลูป

                  ขั้นตอนต่อไปให้ทำการลากเอนิเมชันที่สร้างนี้ไปยังเกมออบเจกต์ Platform ดังที่แสดงไว้ในรูปด้านล่าง

สร้างเอนิเมชันให้เกมออบเจกต์ Platform

                  ทำการปรับขนาดของแท่นยืนในแนวนอนให้ยืดขึ้นดังรูปด้นล่างด้วยเมาส์จากเครื่องมือ Rect Tool

ปรับขนาดของแพลตฟอร์มให้ยาวขึ้น

                  ทำการเปิดหน้าต่าง Animation แล้วเลือกเกมออบเจกต์ Platform กดปุ่ม Add Property ในหน้าต่าง Animation แล้วเลือก Transform และกดปุ่มเครื่องหมาย + ที่อยู่ด้านขวาของ Position

การเพิ่มเอนิเมชันสำหรับการเลื่อนตำแหน่ง

                  ขั้นตอนต่อมาจะเห็นว่ามีการเพิ่มข้อมูลสำหรับเอนิเมชันสำหรับการเคลื่อนที่โดยจะมีตำแหน่งของคีย์เฟรมเป็นตำแหน่งเวลาที่ 0 และ 1 วินาที ให้ใช้เมาส์กดลากไอคอนของคีย์เฟรม  อันบนสุด (อยู่บนแถบสีเทาเข้ม) จากนั้นลากไอคอนคีย์เฟรมนี้ไปยังวินาทีที่ 3 ในกรณีที่มองไม่เห็นวินาทีที่ 3 ในแถบเวลาให้ใช้การสกรอลเมาส์เพื่อซูมเข้าซูมออกได้

การย้ายคีย์เฟรมไปยังเวลาที่ต้องการ

                  จากนั้นให้กลับไปที่เฟรมแรก กำหนดค่า Position ในแนวแกน X เป็น 0.6 แล้วกดปุ่ม Enter บนคีย์บอร์ด จากนั้นให้เลือกคีย์เฟรมสุดท้ายและกำหนดค่าเป็น -0.6 การทำเช่นนี้จะทำให้ตัวแพลตฟอร์มหรือแท่นยืนของเราจะเคลื่อนที่จากตำแหน่ง 0.6 ไปยัง -0.6 ทุก ๆ 3 วินาที ให้ทำการกดปุ่ม Play ในหน้าต่าง Animation เพื่อทดสอบเอนิเมชัน

The User Interface

                  ในเกม Flappy Bird ต้นฉบับนั้นเมื่อตัวละครตายจะปรากฏปุ่มเริ่มใหม่ให้กับผู้เล่น ขั้นแรกให้ทำการสร้างแคนวาส (Canvas) โดยให้ไปที่หน้าต่างไฮราคี คลิกเมาส์ขวา เลือก UI และเลือก Canvas ตามลำดับ

การสร้างแคนวาส

                  จากนั้นให้ทำการคลิกขวาที่เกมออบเจกต์ Canvas เลือกเมนู UI > Image

สร้างปุ่ม Restart

                  เปลี่ยนชื่อ Image เป็น Restart Button จากนั้นให้เปิดภาพสไปรต์ Flappy Bird อีกครั้งและหาภาพปุ่ม Play ลากเข้าไปในหน้าต่าง Inspector ในช่อง Source Image ของเกมออบเจกต์ Restart Button

การกำหนดสไปรต์ให้กับปุ่ม Restart

                  จากนั้นให้ทำการกดปุ่ม Set Native Size เพื่อให้ปุ่มเกมออบเจกต์ Restart Button มีขนาดเท่ากับสไปรต์ที่นำมาใช้งาน

การกำหนดขนาดของเกมออบเจกต์ให้พอดีกับสไปรต์

                  ในกรณีที่ต้องการปรับขนาดของเกมออบเจกต์ใหม่แต่ยังคงสัดส่วนสอดคล้องกับขนาดของภาพให้ทำการปรับค่า Scale ในคอมโพเนนต์ Rect Transform ซึ่งในตัวอย่างนี้ได้ทำการปรับค่าเป็น 1.85 ทั้งสามแนวแกน

Game Manager

                  ลำดับถัดไปเราจะทำการสร้างส่วนจัดการภาพรวมของเกม โดยทำการสร้างสคริปต์ที่จะจัดการเมื่อเกมหยุดนิ่ง เช่น เมื่อผู้เล่นตาย แต่เมื่อผู้เล่นทำการกดปุ่ม Start จะกลับไปเล่นเกมได้โดยการนับเวลาถอยหลังเพื่อให้ผู้เล่นเตรียมพร้อมสำหรับการเล่นเกมใหม่

                  ให้ทำการสร้างเกมออบเจกต์ว่าง ๆ ขึ้นมาหนึ่งตัวตั้งชื่อว่า GameManager และสร้างสคริปต์  C# ตั้งชื่อไฟล์เป็น GameManager.cs จากนั้นลากสคริปต์นี้เข้าไปยังตัวเกมออบเจกต์ GameManager ภายในสคริปต์ จะมีโค้ดดังนี้

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEditor.SceneManagement;

public class GameManager : MonoBehaviour
{
    public GameObject startButton;
    public Player player;

    public Text gameOverCountdown;
    public float countTimer = 5;

    // Start is called before the first frame update
    void Start()
    {
        gameOverCountdown.gameObject.SetActive(false);
        Time.timeScale = 0;
    }

    private void Update()
    {
        if( player.isDead )
        {
            gameOverCountdown.gameObject.SetActive(true);
            countTimer -= Time.unscaledDeltaTime;
        }

        gameOverCountdown.text = “Restarting in “ + (countTimer).ToString(“0”);

        if(countTimer < 0)
        {
            RestartGame();
        }
    }

    public void StartGame()
    {
        startButton.SetActive(false);
        Time.timeScale = 1;
    }

    public void GameOver()
    {
        Time.timeScale = 0;
    }


    public void RestartGame()
    {
        EditorSceneManager.LoadScene(0);
    }
}

                  จากโค้ดจะเห็นได้ว่ามีการแจ้งเตือนข้อผิดพลาดในส่วนของ player.isDead เนื่องจากในก่อนหน้านี้ในสคริปต์ไฟล์ Player.cs ยังไม่มีการทำงานในส่วนนี้ดังนั้นให้ทำการเพิ่มการทำงานไปจากโค้ดเดิมดังต่อไปนี้

public GameManager gameManager;
public bool isDead = false;

private void OnCollisionEnter2D(Collision2D collision)
{
    isDead = true;
    gameManager.GameOver();
}

                  ขั้นตอนต่อมาเป็นการเพิ่มคอมโพเนนต์ button ให้กับเกมออบเจกต์ Restart Button โดยให้ทำการเลือกเกมออบเจกต์ดังกล่าวแล้วไปที่หน้าต่าง Inspector เลื่อนลงมาด้านล่างสุดให้กดปุ่ม Add Component จากนั้นพิมพ์ในช่องค้นหาว่า Button

การเพิ่มคอมโพเนนต์ Button

                  ในคอมโพเนนต์ button ที่เพิ่มขึ้นมาให้ไล่หาคำว่า On Click() และทำการเพิ่มเหตุการณ์เมื่อเกิดการกดปุ่มด้วยการกดที่ปุ่มเครื่องหมาย + ด้านขวาล่างดังรูปด้านล่าง

การเพิ่มเหตุการณ์เมื่อกดปุ่ม

                  จากนั้นให้ทำการลากเกมออบเจกต์ GameManager ไปยังช่องที่มีสัญลักษณ์  ปรากฏอยู่

การเพิ่มเกมออบเจกต์ที่มีฟังก์ชันการจัดการเหตุการณ์ในเกม

                  ลำดับต่อมาให้เลือกในส่วนของคอมโบบ็อกซ์ที่มีคำว่า No Function ปรากฏอยู่และให้เลือกเป็น GameManager > StartGame () ตามลำดับ

การเพิ่มฟังก์ชันการทำงานเมื่อมีการกดปุ่ม

                  จากนั้นให้ทำการเลือกเกมออบเจกต์ GameManager และลากเกมออบเจกต์ Restart Button จากหน้าต่างไฮราคีมายังส่วนของ Start Button ในหน้าต่าง Inspector ดังรูป

การกำหนดค่าเกมออบเจกต์ให้กับสคริปต์ Game Manager

                  ลำดับต่อมาเป็นการสร้างส่วนแสดงผลเป็นตัวอักษรให้กับเกมออบเจกต์ GameManager โดยการคลิกเมาส์ขวาในหน้าต่างไฮราคีเลือก UI > Text

การเพิ่มส่วนแสดงผลด้วยตัวอักษรในเกม

                  ทำการเลือกเกมออบเจกต์ Text ที่ได้สร้างใหม่ขึ้นมาจากนั้นให้จัดพารากราฟข้อความให้อยู่กึ่งกลาง และเลือกช่อง Best Fit และกำหนดขนาดตัวอักษรเป็น 25 และกำหนดเป็นตัวหนา จากนั้นกำหนดตำแหน่งของเกมออบเจกต์ Text เป็น 125.65 ในแนวแกน Y

การกำหนดค่าของเกมออบเจกต์ Text

                  เพื่อความสวยงามในการแสดงผลให้เพิ่มคอมโพเนนต์ Shadow สำหรับการแสดงเงาของตัวอักษร ลำดับถัดมาให้เลือกเกมออบเจกต์ GameManager ในหน้าต่างไฮราคี จากนั้นทำการลากเกมออบเจกต์ Player และเกมออบเจกต์ Text เข้าไปยังส่วนกำหนดค่าในหน้าต่าง Inspector ของเกมออบเจกต์ Game Manager

การกำหนดค่าให้กับเกมออบเจกต์ Game Manager

                  จากนั้นกลับมายังเกมออบเจกต์ Player และทำการลากเกมออบเจกต์ GameManager เข้ามาในส่วนสคริปต์ Player

การกำหนดค่าให้กับเกมออบเจกต์ Player

การใช้งานระบบเสียงในเกม

                  นอกจากการแสดงผลด้วยเอนิเมชันแล้ว เสียงก็เป็นสิ่งสำคัญประการหนึ่งในเกมเพื่อให้ผู้เล่นรู้สึกสมจริงมากยิ่งขึ้น ให้ทำการลากไฟล์เสียง caverns.mp3 เข้าไปยังหน้าต่าง Assets จากนั้นทำการเลือกเกมออบเจ็กต์ GameManager จากนั้นเพิ่มคอมโพเนนต์ Audio Source โดยไม่ต้องกำหนดค่าใด ๆ ทำการลากเพลง caverns.mp3 ไปยัง AudioClip และเลือกส่วนของ loop เพื่อให้วนเล่นเพลงไปตลอด

การเพิ่มเสียงให้กับ GameManager

                  เมื่อทดสอบการทำงานเราจะได้เสียงแบคกราวนด์ในเกม หากต้องการเปลี่ยนเป็นเสี่ยงอื่น ๆ สามารถหาได้จาก https://gamesounds.xyz/ หรือค้นหาบน google ด้วยคีย์เวิร์ด game sound free public domain

                  ขั้นตอนต่อไปเราจะทำการเพิ่มเสียงเมื่อมีการคลิกเมาส์ให้ทำการลากไฟล์เสียง shaker.wav เข้าไปยังหน้าต่าง Assets แล้วทำการเลือกเกมออบเจ็กต์ Player จากนั้นเพิ่มคอมโพเนนต์ Audio Source จากนั้นไปที่ไฟล์ Player.cs และเพิ่มคำสั่งต่อไปนี้เหนือเมทธอด OnCollisionEnter2D()

[Header("Audio Clips")]
[Tooltip("ไฟล์เสียงที่เล่นในขณะที่คลิกเมาส์"), SerializeField] private AudioClip clickSound;

private AudioSource _audioSource;

                  การเรียกใช้คำสั่ง [Header("Audio Clips")] เป็นการจัดหมวดหมู่ของพารามิเตอร์ในคอมโพเนนต์ โดยมีหมวดหมู่เป็น Audio Clips ตามที่กำหนดไว้เป็นพารามิเตอร์ของ Header() สำหรับส่วนของ Tooltip เป็นการแสดงคำอธิบายเมื่อเมาส์วางอยู่เหนือออบเจ็กต์นั้นดังที่แสดงไว้ในรูปด้านล่าง

ผลลัพธ์ที่ได้จากการเพิ่มคำสั่งใน Player.cs

                  ทำการเลือกไฟล์เสียงในช่อง Click Sound เป็นไฟล์เสียง shaker.wav จากการคลิกที่สัญลักษณ์  ทางด้านขวา เมื่อกำหนดค่าเสร็จแล้วให้กลับมาที่สคริปต์และเพิ่มการทำงานในส่วนของเมทธอด Start() ดังนี้

void Start()
{
	rigidbody = GetComponent<Rigidbody2D>();
	_audioSource = GetComponent<AudioSource>();
	_audioSource.clip = clickSound;
	_audioSource.loop = false;
}

                  คำสั่งด้านบนเป็นการดึงคอมโพเนนต์ AudioSource ออกมาใช้งานและกำหนดคลิปเสียงเริ่มต้นเป็น clickSound โดยกำหนดลักษณะการเล่นเสียงเป็นแบบเล่นครั้งเดียวแล้วหยุด

                  หลังจากนั้นเราจะทำการกำหนดการเล่นเสียงเมื่อผู้เล่นกดเมาส์โดยเพิ่มคำสั่งการทำงานในเมทธอด Update() ดังนี้

void Update()
{
	if (Input.GetMouseButtonDown(0))
	{
		rigidbody.velocity = Vector2.up * velocity;
		_audioSource.clip = clickSound;
		if (!_audioSource.isPlaying)
		{
			_audioSource.Play();
		}
	}
}

                  ทดสอบการทำงานของเกมอีกครั้ง