🎯 การสร้าง Crosshair ด้วย UserWidget

เรียนรู้การสร้าง crosshair แบบวงกลมสีขาวด้วย UserWidget ใน Unreal Engine 5

ระดับ: ปานกลาง
หมวด: User Interface
เวลา: 60 นาที

Course Progress

8 of 8 chapters
Progress100%
Chapter 8
intermediate

การสร้าง Crosshair Widget

สร้าง crosshair แบบวงกลมสีขาวด้วย UserWidget

⏱️ 60 นาที
📚 ui

ภาพรวม

ในบทเรียนนี้ คุณจะได้เรียนรู้การสร้าง crosshair แบบวงกลมสีขาวที่อยู่กึ่งกลางหน้าจอ โดยใช้ UserWidget ใน Unreal Engine 5 พร้อมการเชื่อมต่อกับ Player Character

สิ่งที่คุณจะได้เรียนรู้:

  • • การสร้าง Widget Blueprint
  • • การตั้งค่า Image และ Properties
  • • การจัดตำแหน่งแบบกึ่งกลาง
  • • การเชื่อมต่อกับ Player Character

ความรู้ที่ต้องมี:

พื้นฐาน Blueprint Programming
ระบบ UI และ HUD
1

สร้าง UserWidget Blueprint

เริ่มต้นด้วยการสร้าง Widget Blueprint สำหรับ crosshair

ขั้นตอน:
  1. ใน Content Browser คลิกขวาในพื้นที่ว่าง
  2. เลือก User InterfaceWidget Blueprint
  3. ตั้งชื่อว่า WBP_Crosshair
  4. ดับเบิลคลิกเพื่อเปิด Widget Blueprint
เพิ่ม Image Widget:
  • ลาก Image widget จาก Palette panel
  • วางใน Canvas Panel (root widget เริ่มต้น)
2

ตั้งค่า 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

3

เพิ่ม Round Depth Box Effect

สร้างเอฟเฟกต์ความลึกให้กับ crosshair

วิธีการ:
  • ในส่วน Appearance มองหา Material หรือ Post Process Material
  • ใช้ material ที่สร้างเอฟเฟกต์ความลึกได้
  • หรือใช้ Render TransformScale เพื่อสร้างลักษณะ 3D
  • ปรับค่า Scale เล็กน้อยเพื่อให้เกิดเอฟเฟกต์ความลึก
4

เชื่อมต่อกับ Player Character

เพิ่ม crosshair ลงใน viewport เมื่อเกมเริ่มต้น

ใน BP_ThirdPersonCharacter:
  1. เปิด BP_ThirdPersonCharacter Blueprint
  2. ใน Event Graph เพิ่ม Event Begin Play
  3. จาก Event Begin Play ลากออกและค้นหา "Create Widget"
  4. ตั้งค่า Class parameter เป็น WBP_Crosshair
  5. จาก Create Widget output ลากออกและค้นหา "Add to Viewport"
  6. เชื่อมต่อ execution pins
Blueprint Code:
Event Begin Play
  ↓
  Create Widget (Class: WBP_Crosshair)
  ↓
  Add to Viewport
5

ทดสอบและปรับแต่ง

ตรวจสอบการทำงานและปรับแต่งให้สมบูรณ์

ขั้นตอนการทดสอบ:
  1. Compile และ Save Blueprint ของคุณ
  2. Play in Editor เพื่อทดสอบ crosshair
  3. ตรวจสอบว่า crosshair อยู่กึ่งกลางหน้าจอ
  4. ปรับแต่งตำแหน่งถ้าจำเป็น
  5. ทดสอบในความละเอียดหน้าจอที่แตกต่างกัน

🔧 การแก้ไขปัญหาที่พบบ่อย

Crosshair ไม่แสดง

  • ตรวจสอบว่า widget ถูกเพิ่มใน viewport
  • ตรวจสอบว่า Image texture ถูกกำหนด
  • ตรวจสอบว่า widget ไม่ถูกซ่อนหลัง UI elements อื่นๆ

ปัญหาการจัดตำแหน่ง

  • ตรวจสอบว่า anchors ถูกตั้งค่าถูกต้อง
  • ตรวจสอบค่า Position X/Y
  • ตรวจสอบว่า Alignment values ถูกตั้งเป็น 0.5

✅ ผลลัพธ์สุดท้าย

หลังจากทำตามขั้นตอนเหล่านี้ คุณควรจะได้:

  • Crosshair ที่อยู่กึ่งกลางและจัดตำแหน่งอย่างเหมาะสม
  • ดีไซน์วงกลมสีขาวที่สะอาดตา ขนาด 10x10 pixels
  • การเชื่อมต่อที่เหมาะสมกับ player character
  • การจัดตำแหน่งที่ตอบสนองและทำงานได้ดีในความละเอียดหน้าจอที่แตกต่างกัน