Workshop ทำเกม Action RPG ด้วย Unreal Part 5— Character Stats UI

ตอนที่ 5 ตอนนี้จะเป็นการทำ UI เพื่อใช้แสดง Character Attributes และ Stats ต่างๆ

โดยจะมี UI ใช้แสดง Hp, Mana, Level และ Exp เอาไว้ตรงมุมซ้ายบน แล้วก็มี Dialog ที่ใช้ดู Stats ทั้งหมดได้ โดยสามารถกดซ่อน/แสดง ได้โดยการกดปุ่ม C

เริ่มจากสร้าง UI ที่ใช้แสดง Hp, Mana, Level และ Exp เลย, ไป ARPG/UI สร้าง Widget Blueprint ชื่อว่า UICharacterStatusBP

สร้าง Widget Blueprint โดยคลิกขวา แล้วเลือก User Interface/Widget Blueprint

ตั้งชื่อว่า UICharacterStatusBP

เสร็จแล้วดับเบิลคลิกเปิดขึ้นมา ลากพวก Text, Progress Bar จาก Pallete มาใช้เป็นองค์ประกอบต่างๆ โดยผมจะใช้

• Progress Bar ทำ เกจ Hp, Mana และ Exp ตั้งชื่อว่า HpGage, ManaGage และ ExpGage ตามลำดับ
• Text ทำตัวแสดงจำนวนของ Level, Hp, Mana ตั้งชื่อว่า LevelValue, HpValue และ ManaValue ตามลำดับ

โดยผมจะจัด Layout ตามนี้

เสร็จแล้วตั้งพวก Progress Bar, Text ให้มันเป็น Variable โดยติ๊กถูก Is Variable

เลือก Component ที่จะตั้งค่า

ติ๊กถูก Is Variable

โดยการทำให้มันเป็น Variable จะทำให้เราสามารถดึงมันมาใน Graph เพื่อใช้งานได้ เมื่อจัด Layout อะไรเสร็จแล้ว กดเปิด Graph เพื่อเพิ่มคำสั่ง

กดปุ่ม Graph เพื่อเปิด Graph

เปิด Graph แล้วเพิ่มตัวแปร Character ประเภท ARPGCharacterComponent ละกัน

เสร็จแล้วเพิ่มการทำงานจาก Event Tick เพื่อให้มันทำงานตลอดเวลา ให้มันดึงค่าจาก Character Stats จาก Character ไปแสดงใน Progress Bar, Text ต่างๆ

เริ่มจากตรวจสอบก่อนว่ากำหนดค่า Character แล้วยัง

แล้วเอาค่า Stats ทั้งหมดออกมา

เริ่มใส่คำสั่งให้มันแสดงผล เริ่มจาก Hp Gage

ต่อด้วย Mana Gage

แล้วก็ Level Value

Hp Value

และ Mana Value

เสร็จแล้ว Compile / Save แล้วปิดไป ณ ตอนนี้ข้าม Exp ไปก่อนเพราะยังไม่ได้วางเรื่องการคำนวน Exp เอาไว้

ต่อไปจะทำ Dialog ที่จะแสดงค่าทั้งหมด (มากกว่าใน UICharacterStatusBP) โดยทำการ Copy ไอ้ UICharacterStatusBP แล้ววางที่เดิม แล้วตั้งชื่อมันว่า UICharacterStatsDialogBP เสร็จแล้วเปิดมันขึ้นมา เพิ่ม Text เอาไว้แสดงค่าของ Strength, Intelligent, Agility, PAtk, PDef, MAtk, MDef, Evasion และ Accuracy โดยจะตั้งชื่อมันว่า StrengthValue, IntelligentValue, AgilityValue, PAtkValue, PDefValue, MAtkValue, MDefValue, EvasionValue และ AccuracyValue ตามลำดับ

โดยผมจะจัด Layout ตามนี้

จัด Layout เสร็จแล้ว เปิด Graph มาทำให้มันแสดงค่าต่างๆ ต่อ

ลากเส้นจากค่า PAtk, PDef, MAtk, MDef, Evasion และ Accuracy ไปแสดงผลใน PAtkValue, PDefValue, MAtkValue, MDefValue, EvasionValue และ AccuracyValue ตามลำดับ

ลากเส้นเพื่อแสดงผลค่าต่างๆ ยาวไปๆ 😆

นอกจาก Character Stats แล้วก็มี Character Attributes อย่าลืมซะล่ะ 😛.

เสร็จแล้วสร้าง Function เอาไว้ เปิด/ปิดหน้าต่าง ได้แก่ ShowDialog, HideDialog และ ToggleDialog

แล้วเข้าไปกำหนด Graph ให้กับ Function ShowDialog

ต่อด้วย Function HideDialog

และ ToggleDialog

อ้อ ก่อนเสร็จ Blueprint อันนี้ เพิ่มปุ่มปิด ไว้หน่อยดีกว่า

เพิ่มปุ่มเข้าไป

เพิ่ม Event ตอนกดปุ่ม

ให้มันปิดเมื่อกดปุ่ม

เสร็จแล้ว Compile / Save แล้วปิด ต่อไปจะสร้าง UI ไว้คุม UI ทั้งหมดตอนเล่นเกม

สร้าง Widget Blueprint ตั้งชื่อว่า InGameBP แล้ว UICharacterStatusBP และ UICharacterStatsDialogBP มาใส่

Widget Blueprint ที่สร้างไว้จะอยู่ในหมวด User Created

ลากมาใส่ประมาณนี้

เสร็จแล้ว เปิด Graph มา เราจะเพิ่ม Function ให้มันกำหนดค่า Character ให้กับ UICharacterStatusBP และ UICharacterStatsDialogBP

สร้าง Function ชื่อ SetCharacter แล้วเพิ่ม Input ชื่อว่า Character เป็นประเภท ARPGCharacterComponent

แล้วกำหนดค่า Character ให้กับ UICharacterStatusBP และ UICharacterStatsDialogBP

แล้วก็สร้าง Function เอาไว้ตรวจสอบว่ามี Dialog อันไหนถูกเปิดอยู่รึเปล่า เพราะเราจะใช้เงื่อนไขนี้ในการแสดง Cursor

สร้าง Function ชื่อ IsAnyDialogShowing กำหนด Output เป็น Boolean

แล้วทำการตรวจสอบว่า Dialog UICharacterStatsDialogBP แสดงผลอยู่หรือไม่แล้วคืนค่าไป

เสร็จแล้วเพิ่ม Event ให้ซ่อน UICharacterStatsDialogBP ตอนเริ่ม

เสร็จแล้ว ก็ Compile / Save ต่อไปจะทำการสร้าง PlayerController สำหรับใช้ในฉากเล่นเกม เอาไว้ใช้ควบคุมการแสดง Dialog ต่างๆ

ไปที่ ARPG/Blueprints สร้าง PlayerController ตั้งชื่อว่า InGamePlayerController

สร้างตัวแปรชื่อ InGameUI เป็นประเภท InGameBP เราจะใช้ตัวแปรนี้ในการทำตรวจสอบการเปิด Dialog ระหว่างเล่นเกม

แล้วเปิดมาไปที่ Graph เพิ่ม Event ให้มันสร้าง InGameBP ตอนเริ่มเกม แล้วเก็บค่าไว้กับ ตัวแปร InGameUI และเพิ่มไปยัง Viewport เพื่อให้มันแสดงผลในเกมได้

แล้วก็กำหนดค่า Character ให้มันด้วย

แล้วให้มันแสดง Cursor ถ้ามี Dialog อันใดอันหนึ่งกำลังเปิดอยู่

แล้ว Disable Input ของ Character Pawn เมื่อ Dialog กำลังเปิดอยู่ด้วย เพื่อไม่ให้มันหมุนจอ, เคลื่อนที่ และ โจมตีได้

แล้วเพิ่ม Event ให้มัน Toggle UICharacterStatsDialog เมื่อกดปุ่ม C

Compile / Save แล้ว เปิด ARPGGameMode ไปกำหนดค่า Player Controller ให้เป็น InGamePlayerController

เสร็จแล้ว Compile / Save แล้วลองทดสอบดู

โดยสามารถกดปุ่ม C เพื่อเปิด/ปิด Character Stats Dialog ได้ แล้วค่าต่างๆ ก็จะแสดงดังรูป