🎯 การสร้าง Crosshair ด้วย UserWidget
เรียนรู้การสร้าง crosshair แบบวงกลมสีขาวด้วย UserWidget ใน Unreal Engine 5
Course Progress
การสร้าง Crosshair Widget
สร้าง crosshair แบบวงกลมสีขาวด้วย UserWidget
ภาพรวม
ในบทเรียนนี้ คุณจะได้เรียนรู้การสร้าง crosshair แบบวงกลมสีขาวที่อยู่กึ่งกลางหน้าจอ โดยใช้ UserWidget ใน Unreal Engine 5 พร้อมการเชื่อมต่อกับ Player Character
สิ่งที่คุณจะได้เรียนรู้:
- • การสร้าง Widget Blueprint
- • การตั้งค่า Image และ Properties
- • การจัดตำแหน่งแบบกึ่งกลาง
- • การเชื่อมต่อกับ Player Character
ความรู้ที่ต้องมี:
สร้าง UserWidget Blueprint
เริ่มต้นด้วยการสร้าง Widget Blueprint สำหรับ crosshair
ขั้นตอน:
- ใน Content Browser คลิกขวาในพื้นที่ว่าง
- เลือก User Interface → Widget Blueprint
- ตั้งชื่อว่า
WBP_Crosshair
- ดับเบิลคลิกเพื่อเปิด Widget Blueprint
เพิ่ม Image Widget:
- ลาก Image widget จาก Palette panel
- วางใน Canvas Panel (root widget เริ่มต้น)
ตั้งค่า Crosshair Image และ Properties
กำหนดค่าสำคัญสำหรับการแสดงผล crosshair
Appearance (ลักษณะภายนอก):
Image: เลือก texture crosshair สีขาว
Brush: ตั้งเป็นรูปภาพ crosshair ที่ต้องการ
Tint: สีขาว (1,1,1,1)
Position X: 0
Position Y: 0
Size X/Y: 10
Alignment (การจัดตำแหน่ง):
Horizontal Alignment: 0.5
(Center)
Vertical Alignment: 0.5
(Center)
Anchors: ตั้งเป็นกึ่งกลาง (จุดกลาง)
Visibility: Visible
เพิ่ม Round Depth Box Effect
สร้างเอฟเฟกต์ความลึกให้กับ crosshair
วิธีการ:
- ในส่วน Appearance มองหา Material หรือ Post Process Material
- ใช้ material ที่สร้างเอฟเฟกต์ความลึกได้
- หรือใช้ Render Transform → Scale เพื่อสร้างลักษณะ 3D
- ปรับค่า Scale เล็กน้อยเพื่อให้เกิดเอฟเฟกต์ความลึก
เชื่อมต่อกับ Player Character
เพิ่ม crosshair ลงใน viewport เมื่อเกมเริ่มต้น
ใน BP_ThirdPersonCharacter:
- เปิด BP_ThirdPersonCharacter Blueprint
- ใน Event Graph เพิ่ม Event Begin Play
- จาก Event Begin Play ลากออกและค้นหา "Create Widget"
- ตั้งค่า Class parameter เป็น
WBP_Crosshair
- จาก Create Widget output ลากออกและค้นหา "Add to Viewport"
- เชื่อมต่อ execution pins
Blueprint Code:
Event Begin Play
↓
Create Widget (Class: WBP_Crosshair)
↓
Add to Viewport
ทดสอบและปรับแต่ง
ตรวจสอบการทำงานและปรับแต่งให้สมบูรณ์
ขั้นตอนการทดสอบ:
- Compile และ Save Blueprint ของคุณ
- Play in Editor เพื่อทดสอบ crosshair
- ตรวจสอบว่า crosshair อยู่กึ่งกลางหน้าจอ
- ปรับแต่งตำแหน่งถ้าจำเป็น
- ทดสอบในความละเอียดหน้าจอที่แตกต่างกัน
🔧 การแก้ไขปัญหาที่พบบ่อย
Crosshair ไม่แสดง
- ตรวจสอบว่า widget ถูกเพิ่มใน viewport
- ตรวจสอบว่า Image texture ถูกกำหนด
- ตรวจสอบว่า widget ไม่ถูกซ่อนหลัง UI elements อื่นๆ
ปัญหาการจัดตำแหน่ง
- ตรวจสอบว่า anchors ถูกตั้งค่าถูกต้อง
- ตรวจสอบค่า Position X/Y
- ตรวจสอบว่า Alignment values ถูกตั้งเป็น 0.5
✅ ผลลัพธ์สุดท้าย
หลังจากทำตามขั้นตอนเหล่านี้ คุณควรจะได้:
- Crosshair ที่อยู่กึ่งกลางและจัดตำแหน่งอย่างเหมาะสม
- ดีไซน์วงกลมสีขาวที่สะอาดตา ขนาด 10x10 pixels
- การเชื่อมต่อที่เหมาะสมกับ player character
- การจัดตำแหน่งที่ตอบสนองและทำงานได้ดีในความละเอียดหน้าจอที่แตกต่างกัน