FeaturedGame DevelopmentUnity 3D

Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 5

บทเรียน Workshop การเขียนเกมแนว Temple Run ตอนที่ 5 ด้วย Unity 3D กับการเพิ่มเติมส่วนของ Pause Game และ ตกแต่ง GUI ภายในเกมให้สมบูรณ์

บทเรียนก่อนหน้านี้ให้ศึกษาอย่างถี่ถ้วนก่อนจะจบบทเรียนนี้

หลังจากที่เกมของเรามีการใส่ Game Logic เข้าไปแล้วต่อมาเราจะเรียนรู้เรื่องของ Pause หรือหยุดเกมของเราก่อน เงื่อนไขคือกด ESC แล้วเกมจะหยุดและพบกับเมนูของเกมว่า หยุดเกมหรือ Pause State และมีเมนู Resume กลับเข้าไปเล่นเกมต่อ

การสร้าง GUI Font สำหรับ Graphics Interface ของเกม ผมไปดาวน์โหลด Font สวยๆ ฟรีๆ จากเว็บไซต์มาหนึ่งเว็บไซต์

f1

ดาวน์โหลดแล้วไปวางไว้ที่ Asset สร้าง folder มาเก็บไฟล์ไว้ชื่อว่า Fonts และ GUI

สร้าง Folder ชื่อ Fonts
สร้าง Folder ชื่อ Fonts

 

สร้าง Folder ชื่อ GUI ขึ้นมา
สร้าง Folder ชื่อ GUI ขึ้นมา

เพิ่ม GUI เข้ามาในเกม

วิธีเพิ่ม GUI ของเกมเข้าไปนั้นสามารถทำได้ง่ายๆ ครับโดยการคลิกสร้าง GUI ขึ้นมาเลยเลือกที่ Project แล้ว Create-> GUI Skin

เลือก Create -> GUI Skin
เลือก Create -> GUI Skin

เราจะได้ Skin ของเรา 1 ไฟล์ให้เปลี่ยนชื่อเป็น NormalSkin ครับ

f5

คลิกที่ NormalSkin แล้วสังเกตที่ Inspector จะพบกับการตั้งค่าเบื้องต้นจอง GUI ของเรา

f6

เราจะเน้นไปที่ Box ก่อน เป็นการสร้างหน้าต่าง Box ของ GUI ของเรา

สร้าง Box
สร้าง Box

ให้ลากไฟล์ Font ของเราไปวางที่ Font และออกแบบหน้าต่างข้อความของเรา เป็นไฟล์ PNG ผมได้ออกแบบไว้คือ

ไฟล์ boxback.png
ไฟล์ boxback.png

 

นำ boxback.png ไปวางใน Box>Normal>Background ครับ ปรับ Size ขนาด และสีตามในชอบ เช่นกันตั้งค่า Label ต่างๆ ในเกมของเรา พวกตัวอักษรต่างๆ ให้พอดีครับ

เมื่อเราใส่ Skin แล้วเราต้องไปแก้ไข GameLogic.cs ใหม่เล็กน้อย เพื่อปรับระยะของ ปุ่มต่างๆ ครับ ให้เปิดไฟล์ GameLogic.cs ขึ้นมา เพิ่มคำสั่งนี้ลงไป ส่วนของตัวแปร Public

ตำแหน่ง

ตามด้วยเพิ่มในฟังก์ชัน OnGUI()

ปรับระยะของ ปุ่ม และตัวอักษรใหม่ดังนี้

***หมายเหตุแก้ไขเองนะครับ ดูส่วน ของตำแหน่งดีๆ (ขี้เกียจชี้นำว่าส่วนไหน เจอ Bug ก็แก้ Bug เอานะครับ)

ลาก NormalSkin ไปใส่ในช่อง Game Skin ใน Inspector ของ GameController

ลาก Normal Skin ใส่ Game Skin
ลาก Normal Skin ใส่ Game Skin

ลองเล่นเกมดูอีกครั้ง สังเกตการเปลี่ยนแปลง

GUI Font ในเกมเปลี่ยนไป
GUI Font ในเกมเปลี่ยนไป

การทำ Pause เกม หรือหยุดเกมชั่วคราวพร้อมเมนู

ให้เราสร้าง C# Script ขึ้นมาครับ ตั้งชื่อว่า Pause.cs นำไปลากวางใส่ที่ GameObject ของเราที่ชื่อว่า GameController ตัวเดิมของเราครับ

f17

ทำการ Add component ตามนี้

f14

เปิด Mono Develop ขึ้นมาเขียนคำสั่งดังนี้ ประกาศตัวแปรเป็น Public ไว้

เป็นตัวแปรเพื่อบอกว่า levelToLoad นั้นเป็นสถานะของเกมแบบไหน ถ้าจะเริ่มเล่นใหม่ใช้ levelToLoad เรียกตัวแปรขึ้นมาเลยครับ ต่อจากนั้นเขียนคำสั่งรับค่าจากปุ่ม ESC ก่อน เขียนเพิ่มในฟังก์ชัน Update();

เพื่อบอกว่า ถ้าเงื่อนไขของเกมนั้นเป็น paused อยู่แล้ว ค่าการหยุดเกมเป็น False แต่ถ้าเกมไม่ได้หยุดให้ค่าการหยุดเกมเป็น True ขึ้นมา อ้างจากตัวแปร Boolean ที่ชื่อ gamePause

เพิ่มคำสั่ง ใน Start(); กำหนด timeScale ของเกม

สร้าง GUI ของหน้าต่าง Pause ของเราเล็กน้อยให้มีปุ่ม กลับไปเล่นต่อ และปุ่ม Restart เริ่มเล่นเกมใหม่ ให้สร้างฟังก์ชัน OnGUI() ออกมาเหมือนบทเรียนก่อนๆ

ทำการบันทึกแล้วกลับไปเล่นเกมของเรา แล้วลองกดปุ่ม Esc ระหว่างเกมครับ

Pause เกม
Pause เกม

ซึ่งเจ้า Pause Menu เราสามารถใส่ GUI ให้มันได้เหมือนกันโดยการเพิ่ม คำสั่งใน Pause.cs

และ

คำสั่ง Pause.cs ทั้งหมดจะเป็นแบบนี้

ไปที่ Inspector ของ GameObject ที่ชื่อ GameController อีกครั้งครับ ลากเจ้า Normal Skin ไปใส่ในช่อง Game Skin ได้เลย

ลาก NormalSkin ใส่ Game Skin
ลาก NormalSkin ใส่ Game Skin

ลองเล่นเกมแล้วกด Pause จะพบว่า เกมหยุด และมีหน้าต่าง GUI สวยงามเกิดขึ้น

กด Pause เกม แล้วมี GUI
กด Pause เกม แล้วมี GUI

สิ่งที่ได้จากบทเรียนนี้คือการใส่ GUI ให้กับเกม และการสร้างฟังก์ชัน Pause เกมให้กับเกมของเราให้หยุดอยู่กับที่ครับ

ทบทวนบทเรียนก่อนๆ ได้ที่

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน