Game Dev: [Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 13 : UI Elements

UI ก็เป็นส่วนหนึ่งที่ขาดไม่ได้ในเกม ดังนั้นในตอนนี้เราจะมาสร้าง UI ให้กับเกมของเราโดยเมื่อเครื่องบินชนเราจะให้มี UI Game Over เด้งขึ้นมาจากนั้นจะสรุปคะแนนในรอบนี้ และคะแนนสูงสุดที่ผู้เล่นเคยทำได้ และเมื่อกดปุ่ม Retry ก็จะทำการเริ่มเกมใหม่

Canvas

UI อิลิเมนต์จะอยู่ใน GameObject -> UI โดยที่ UI อิลิเมนต์ชนิดต่างๆจะต้องเป็นลูกของ Canvas ถ้าทำการสร้าง UI อิลิเมนต์ในขณะที่ไม่มี Canvas อยู่ใน Hierarchy เลย Canvas จะถูกสร้างขึ้นในโดยอัตโนมัติ

อย่างแรกเลยให้สร้าง Canvas โดยไปที่ GameObject -> UI -> Canvas จะเห็นว่ามีเกมออบเจ็ค Canvas และ EventSystem ขึ้นมา

EventSystem เป็นเกมออบเจ็คที่ใช้ในการส่ง Event ต่างๆให้กับเกมออบเจ็คอื่นๆที่รับมาจากอินพุทต่างๆ เช่น คีย์บอร์ด เมาส์ การทัชสกีนหน้าจอ เป็นต้น

ตั้งค่า Canvas

เปลี่ยนชื่อ Canvas เป็น CanvasGameOver หลังจากนั้นที่หน้าต่าง Inspector ที่ Canvas จะเห็นว่ามีค่าเป็น Screen Space - Overlay

โหมด Screen Space - Overlay ทำงานอย่างไร

หมายความว่าขนาดของ Canvas จะถูกตั้งใจพอดีกับขนาดของหน้าจอเกม เมื่อขนาดของหน้าจอเกมเปลี่ยน UI จะเปลี่ยนขนาดในพอดีกับหน้าจอเกมโดยอัตโนมัติ การ Render ภาพของ Canvas ในโหมดนี้จะไม่อ้างอิงซีนหรือกล้องเลย ดังนั้นหากในซีนไม่มีกล้อง UI ก็ยังคงสามารถแสดงได้เพราะยังถูก Render นั่นเอง

จากนั้นที่ Canvas Scaler ที่ UI Scale Mode ให้ปรับค่าเป็น Scale With Screen Size

Canvas Scaler เป็น Component ที่ใช้ในการควบคุมขนาดของ UI อิลิเมนต์ทั้งหมดที่อยู่ใน Canvas โดยการเลือกเป็น Scale With Screen Size จะทำให้ UI อิลิเมนต์ทั้งหมดพยายามจะปรับขนาดให้ใหญ่ที่สุดที่จะใหญ่ได้ตามขนาดหน้าจอ

โดยเราจะทำการตั้งขนาด Reference Resolution ให้ X เท่ากับ 1280 และ Y เท่ากับ 720

Image

คลิกขวาที่ CanvasGameOver -> UI -> Image ในที่นี้จะตั้งชื่อว่า Background

ไปที่ Component Image ที่ Source Image ให้เลือกภาพ UIbg มาใส่

จากนั้นคลิกที่ Set Native Size จะทำให้ได้ภาพขนาดจริงของภาพ คือ 264x264 ดังภาพ

แต่เนื่องจากเราต้องการให้พื้นหลังของ UI มีขนาดเท่ากับ 600x500 ดังนั้นเราจะมาปรับค่าใน Sprite Editor กันก่อน

Sprite Editor

เลือกรูปภาพ UIbg ที่หน้าต่าง Inspector ให้คลิกที่ปุ่ม Sprite Editor

จะได้หน้าจอการทำงานดังภาพ

แถบ Sprite ที่ค่า Border ตั้งค่าให้ L T R B เป็น 10 จะเห็นว่ามีขอบสีเขียวๆเกิดขึ้นที่ภาพ UIbg

อะไรคือ Border

การเซ็ท Border จtส่งผลให้เมื่อขยายขนาดภาพจะทำให้ตัวกรอบนอกหรือ Border ไม่ถูกขยายตามไปด้วย ดูการเปรียบเทียบด้านล่างประกอบ

เมื่อเปรียบเทียบระหว่าง Image Type Simple กับ Sliced

Simple

Sliced

จะเห็นได้ว่าขอบของ UIbg จะยังคมชัดเหมือนเดิม ดังนั้นที่เกมออบเจ็ค Background ที่ Component Image ตรงค่า Image Type ให้เลือกเป็น Sliced

สร้าง GameObject -> UI -> Image ขึ้นมาอีกตัวในที่นี้จะให้แสดงภาพที่เป็นตัวอักษร Game Over ดังนั้นจึงตั้งชื่อเกมออบเจ็คนี้ว่า GameOver คลิกที่ Set Native Size และปรับตำแหน่ง Y ให้เป็น 150 จะได้ดังนี้

Text

คลิกขวาที่ CanvasGameOver เลือก UI -> Text ในที่นี้ตั้งชื่อว่า TxtScore เพื่อใช้สำหรับแสดงคะแนน

ปรับตำแหน่ง Y เป็น 40 ปรับขนาดให้ Width เป็น 300 และ Height เป็น 60 จากนั้นที่ Text Component ให้พิมพ์ข้อความที่ต้องการจะแสดงในที่นี้เป็น Score : 0 ที่ Font ให้เปลี่ยนเป็น kenvector_future ที่อยู่ใน Kenny Asset ที่ดาวน์โหลดมาในตอนที่ 2 หรือจะใช้ฟอนต์อื่นก็ได้ตามใจชอบ

ปรับ Alignment ให้เป็นกึ่งกลาง จากนั้นที่ขนาดของอักษรให้เลือกเป็น Best Fit ขนาดของตัวอักษรจะถูกปรับโดยอัติโนมัติที่ระหว่างค่า 20-40 ขึ้นอยู่กับความเหมาะสม โดยเราสามารถปรับค่า Min และ Max ได้ตามความต้องการ ที่Color ปรับให้เป็นสีขาว

จากนั้นจะทำการใส่เงาให้กับตัวอักษรสีเหลืองและสีดำ เพื่อให้ตัวอักษรดูมีมิติมากขึ้น โดยคลิก Add Component -> UI -> Effects -> Shadow

โดยให้ทำการเพิ่ม Shadow สีเหลืองและดำ ดังภาพ หรือจะปรับแต่งเองก็ได้

จะได้ผลลัพธ์ดังนี้

สำหรับแสดงคะแนน Best Score ให้ทำเหมือนเดิม โดยปรับตำแหน่งให้เหมาะสม

Button

คลิกขวาที่ CanvasGameOver ไปที่ UI -> Button ในที่นี้จะตั้งชื่อว่า BtnRetry ใช้สำหรับกดเพื่อเริ่มเล่นเกมอีกครั้ง

ที่ Component Image ให้นำภาพ buttonLarge มาใส่ จากนั้นกดปุ่ม Set Native Size ปรับตำแหน่งของปุ่มให้เหมาะสม ในที่นี้ให้ตำแหน่ง Y เท่ากับ -150

ส่วนที่ Text บนปุ่มให้ตั้งค่าเหมือนกับ Text ของคะแนน จะได้ผลลัพธ์ดังนี้

Animation

ต่อไปเราจะมาทำแอนิเมชั่นให้กับ UI โดยใช้หลักการเดียวกันเหมือนกับการทำแอนิเมชั่นเครื่องบิน เมื่อเครื่องบินมีการชนป๊อปอัพ Game Over จะค่อยๆขึ้นมาจากกลางหน้าจอโดยเราจะใช้วิธีปรับ Scale ให้ป๊อปอัพค่อยๆใหญ่ขึ้นจนแสดงในขนาดปกติ

โดยเราจะทำแอนิเมชั่นในเกมออบเจ็ค Background ดังนั้นให้ UI อิลิเมนต์ทุกตัวเป็นลูกของ Background

สร้าง Animator Controller ในที่นี้ตั้งชื่อว่า UIGameOver จากนั้นเพิ่ม Component Animator ให้กับเกมออบเจ็ค Background และให้เพิ่ม Animator Controller UIGameOver ที่ได้สร้างเมื่อสักครู่ลงไป

สร้างแอนิเมชั่นในที่นี้ให้ชื่อว่า UIOpen จากนั้นที่เฟรม 0 เราจะกำหนดให้ Scale X Y และ Z เป็น 0

และที่เฟรม 5 จะกำหนดให้ Scale X Y และ Z เป็น 1

ลองรันและทดสอบเกมดูจะเห็นว่า UI Game Over ของเรามีแอนิเมชั่นตอนเปิดป๊อปอัพเรียบร้อย แต่แอนิเมชั่นมีการวนลูปเล่นเรื่อยๆ ดังนั้นให้ติ๊ก Loop Time ออกด้วย