📚 Step-by-Step Blueprint Course

Blueprint Course

เรียนรู้ Unreal Engine 5 Blueprint แบบเป็นขั้นตอน
จากมือใหม่หัดขับสู่ระดับมืออาชีพ

📖7 บทเรียน
⏱️6+ ชั่วโมง
🎯ลงมือปฏิบัติ

เรียนรู้แบบขั้นตอน

📚

เรียนจากพื้นฐาน

เริ่มจากศูนย์ไปจนถึงขั้นสูง

🎯

ทำตามขั้นตอน

คำแนะนำที่ชัดเจนและละเอียด

ลงมือปฏิบัติ

แบบฝึกหัดและโปรเจ็กต์จริง

เรียนรู้ Blueprint ใน Unreal Engine 5 แบบเป็นระบบ พร้อมวิดีโอและตัวอย่างโค้ด

หลักสูตร Blueprint แบบ Step-by-Step

เรียนรู้ Blueprint ใน Unreal Engine 5 แบบเป็นขั้นตอน เริ่มจากพื้นฐานไปจนถึงขั้นสูง

มือใหม่หัดขับ
เริ่มต้น
ปานกลาง
ขั้นสูง

เส้นทางการเรียนรู้

1

เริ่มต้นกับ Unreal Engine 5

30 นาที

2

พื้นฐาน Blueprint คืออะไร

45 นาที

3

Variables และ Data Types

50 นาที

4

Functions และ Events

60 นาที

5

การสร้าง Character Movement System

90 นาที

6

การสร้าง UI และ Widget System

75 นาที

7

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

45 นาที

1
มือใหม่หัดขับ
พื้นฐาน

Chapter 1: เริ่มต้นกับ Unreal Engine 5

ทำความรู้จักกับ Unreal Engine 5 Interface และการตั้งค่าเบื้องต้น

⏱️ 30 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจ Unreal Engine 5 Interface

รู้จักกับ Content Browser และ Viewport

เรียนรู้การนำทางในโปรแกรม

ทำความเข้าใจกับ Project Structure

📋 ขั้นตอนการทำ:

1
เปิด Unreal Engine 5

เปิดโปรแกรม Unreal Engine 5 และสร้าง Project ใหม่

วิธีทำ:
  • เปิด Epic Games Launcher
  • คลิก Unreal Engine tab
  • เลือก Launch Unreal Engine 5
  • เลือก Games template
  • เลือก Third Person template
  • ตั้งชื่อ Project เป็น 'MyFirstBlueprintProject'
  • คลิก Create
ผลลัพธ์ที่คาดหวัง:

Project ใหม่จะถูกสร้างและเปิดขึ้นมา

ปัญหาที่พบบ่อย:
  • ⚠️หาก Epic Games Launcher ไม่เปิด ให้ตรวจสอบการติดตั้ง
  • ⚠️หาก Project สร้างช้า ให้รอสักครู่เนื่องจากต้องโหลด Assets
2
ทำความรู้จักกับ Interface

เรียนรู้ส่วนประกอบหลักของ Unreal Engine 5

วิธีทำ:
  • สังเกต Viewport (หน้าต่างแสดงโลกเกม) ตรงกลาง
  • ดู Content Browser ด้านล่าง (แสดงไฟล์ต่างๆ)
  • สังเกต World Outliner ด้านขวา (รายการ Objects)
  • ดู Details Panel ด้านขวา (คุณสมบัติของ Object)
  • ทดลองใช้ W, A, S, D เพื่อเคลื่อนที่ใน Viewport
  • ใช้ Mouse Right-click + ลาก เพื่อหมุนมุมมอง
ผลลัพธ์ที่คาดหวัง:

สามารถนำทางใน Viewport และรู้จักส่วนประกอบหลักได้

ปัญหาที่พบบ่อย:
  • ⚠️หาก Viewport มืด ให้กด F11 หรือปรับ Lighting
  • ⚠️หากเคลื่อนที่ใน Viewport ไม่ได้ ให้คลิกใน Viewport ก่อน

💪 แบบฝึกหัดเพิ่มเติม:

สร้าง Project ใหม่อีก 2 โครงการด้วย Template ต่างๆ

ทดลองเคลื่อนที่ไปยังจุดต่างๆ ใน Level

ลองเปิด/ปิด Panel ต่างๆ ผ่าน Window menu

⏱️ 30 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
2
เริ่มต้น
พื้นฐาน

Chapter 2: พื้นฐาน Blueprint คืออะไร

เรียนรู้แนวคิดพื้นฐานของ Blueprint และการสร้าง Blueprint แรก

⏱️ 45 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจว่า Blueprint คืออะไร

รู้จักกับ Blueprint Editor

สร้าง Blueprint แรกของคุณ

เรียนรู้การใช้ Print String

📋 ขั้นตอนการทำ:

1
ทำความเข้าใจ Blueprint

เรียนรู้แนวคิดพื้นฐานของ Blueprint

วิธีทำ:
  • Blueprint คือระบบ Visual Scripting ของ Unreal Engine
  • ใช้แทนการเขียนโค้ด C++ ในหลายกรณี
  • ประกอบด้วย Nodes ที่เชื่อมต่อกัน
  • มี Event, Function, Variable เหมือนการเขียนโปรแกรม
ผลลัพธ์ที่คาดหวัง:

เข้าใจแนวคิดพื้นฐานของ Blueprint

2
สร้าง Blueprint แรก

สร้าง Blueprint ใหม่และเปิด Blueprint Editor

วิธีทำ:
  • ใน Content Browser คลิกขวา
  • เลือก Blueprint Class
  • เลือก Actor เป็น Parent Class
  • ตั้งชื่อเป็น 'BP_MyFirstBlueprint'
  • Double-click เพื่อเปิด Blueprint Editor
ผลลัพธ์ที่คาดหวัง:

Blueprint Editor เปิดขึ้นมาพร้อม Event Graph

ปัญหาที่พบบ่อย:
  • ⚠️หาก Blueprint Class ไม่ปรากฏ ให้มองหา Create Basic Asset
  • ⚠️หาก Blueprint Editor ไม่เปิด ให้ Double-click อีกครั้ง
3
เพิ่ม Print String Node

เรียนรู้การเพิ่ม Node และเชื่อมต่อ

วิธีทำ:
  • ใน Event Graph หา Event BeginPlay (สีแดง)
  • จาก Event BeginPlay ลาก Execution Pin (สีขาว) ออกมา
  • ค้นหา 'Print String' ใน Search box
  • เลือก Print String node
  • ใน Print String ใส่ข้อความ 'Hello Blueprint World!'
  • คลิก Compile ด้านบน (ปุ่มสีเขียว)
ผลลัพธ์ที่คาดหวัง:

Event BeginPlay เชื่อมต่อกับ Print String สำเร็จ

ปัญหาที่พบบ่อย:
  • ⚠️หาก Node ไม่เชื่อมต่อได้ ให้ตรวจสอบ Pin ที่ถูกต้อง
  • ⚠️หาก Compile Error ให้ดู Error Message ด้านล่าง
4
ทดสอบ Blueprint

นำ Blueprint ไปใช้ใน Level และทดสอบ

วิธีทำ:
  • ปิด Blueprint Editor (คลิก X)
  • จาก Content Browser ลาก BP_MyFirstBlueprint ไป Level
  • วาง Blueprint ที่ไหนก็ได้ใน Level
  • กด Play (ปุ่มสีเขียว) เพื่อทดสอบ
  • ดูข้อความใน Output Log หรือบนหน้าจอ
ผลลัพธ์ที่คาดหวัง:

เห็นข้อความ 'Hello Blueprint World!' เมื่อเริ่มเกม

ปัญหาที่พบบ่อย:
  • ⚠️หากไม่เห็นข้อความ ให้เช็ค Output Log (Window > Output Log)
  • ⚠️หาก Blueprint ไม่ทำงาน ให้ตรวจสอบว่าได้วางใน Level แล้ว

💪 แบบฝึกหัดเพิ่มเติม:

สร้าง Blueprint ใหม่ที่แสดงข้อความอื่น

ลองเปลี่ยนสีของข้อความใน Print String

สร้าง Blueprint ที่แสดงข้อความหลายบรรทัด

⏱️ 45 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
3
เริ่มต้น
พื้นฐาน

Chapter 3: Variables และ Data Types

เรียนรู้การใช้ Variables และประเภทข้อมูลต่างๆ ใน Blueprint

⏱️ 50 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจประเภทข้อมูลพื้นฐาน (String, Integer, Float, Boolean)

รู้จักการสร้างและใช้ Variables

เรียนรู้การ Get และ Set Variables

ทำความเข้าใจ Variable Scope

📋 ขั้นตอนการทำ:

1
สร้าง Variables ใน Blueprint

เรียนรู้การสร้าง Variable แต่ละประเภท

วิธีทำ:
  • เปิด BP_MyFirstBlueprint (หรือสร้างใหม่)
  • ไปที่ My Blueprint panel ด้านซ้าย
  • คลิก + ข้าง Variables
  • สร้าง Variable ชื่อ 'PlayerName' ประเภท String
  • สร้าง Variable ชื่อ 'PlayerHealth' ประเภท Float
  • สร้าง Variable ชื่อ 'PlayerLevel' ประเภท Integer
  • สร้าง Variable ชื่อ 'IsAlive' ประเภท Boolean
ผลลัพธ์ที่คาดหวัง:

มี Variables 4 ตัวใน My Blueprint panel

ปัญหาที่พบบ่อย:
  • ⚠️หาก Variables ไม่ปรากฏ ให้ Compile Blueprint ก่อน
  • ⚠️หากเปลี่ยนประเภทไม่ได้ ให้ตรวจสอบว่าไม่ได้เชื่อมต่อกับ Node อื่น
2
ตั้งค่า Default Values

กำหนดค่าเริ่มต้นให้กับ Variables

วิธีทำ:
  • เลือก Variable PlayerName ใน My Blueprint
  • ใน Details panel ตั้ง Default Value = 'Hero'
  • เลือก PlayerHealth ตั้ง Default Value = 100.0
  • เลือก PlayerLevel ตั้ง Default Value = 1
  • เลือก IsAlive ตั้ง Default Value = true (เช็คถูก)
  • คลิก Compile
ผลลัพธ์ที่คาดหวัง:

Variables ทั้งหมดมีค่าเริ่มต้นที่กำหนด

ปัญหาที่พบบ่อย:
  • ⚠️หาก Default Value เปลี่ยนไม่ได้ ให้ Compile ก่อน
  • ⚠️หาก Boolean แสดงผิด ให้ดูที่ checkbox ใน Details
3
ใช้ Variables ใน Event Graph

นำ Variables มาใช้งานใน Blueprint Logic

วิธีทำ:
  • ใน Event Graph ลาก PlayerName จาก My Blueprint มา
  • เลือก Get (เพื่อดึงค่า)
  • ลาก PlayerHealth มา เลือก Get
  • จาก Event BeginPlay เชื่อมไปยัง Set Node ของ PlayerHealth
  • ตั้งค่า PlayerHealth เป็น 100.0
  • เชื่อม PlayerName และ PlayerHealth เข้ากับ Print String
  • ใช้ + (String) node เพื่อรวมข้อความ
ผลลัพธ์ที่คาดหวัง:

แสดงข้อความที่รวม PlayerName และ PlayerHealth

ปัญหาที่พบบ่อย:
  • ⚠️หาก Variable ไม่มี Get/Set ให้ลาก Variable มาใหม่
  • ⚠️หาก String ต่อกันไม่ได้ ให้ใช้ Append หรือ Format Text

💪 แบบฝึกหัดเพิ่มเติม:

สร้าง Variables สำหรับ Player Stats (Strength, Speed, Magic)

สร้างระบบแสดง Player Info แบบสมบูรณ์

ลองใช้ Array Variable เก็บรายชื่อ Items

⏱️ 50 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
4
เริ่มต้น
พื้นฐาน

Chapter 4: Functions และ Events

เรียนรู้การสร้างและใช้ Functions และ Custom Events

⏱️ 60 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจความแตกต่างระหว่าง Function และ Event

รู้จักการสร้าง Custom Function

เรียนรู้การใช้ Input และ Output Parameters

เข้าใจ Custom Events และการเรียกใช้

📋 ขั้นตอนการทำ:

1
สร้าง Function แรก

สร้าง Function สำหรับคำนวณ Damage

วิธีทำ:
  • ใน My Blueprint panel คลิก + ข้าง Functions
  • ตั้งชื่อ Function เป็น 'CalculateDamage'
  • Double-click เพื่อเปิด Function Graph
  • ใน Details panel เพิ่ม Input: BaseDamage (Float)
  • เพิ่ม Input: Multiplier (Float)
  • เพิ่ม Output: FinalDamage (Float)
  • ใน Function Graph เชื่อม Input เข้ากับ Multiply node
  • เชื่อม Multiply result ไปยัง Return node
ผลลัพธ์ที่คาดหวัง:

Function CalculateDamage ทำงานได้และคืนค่าที่ถูกต้อง

ปัญหาที่พบบ่อย:
  • ⚠️หาก Input/Output ไม่ปรากฏ ให้ Refresh หรือ Compile
  • ⚠️หาก Function ไม่ทำงาน ให้ตรวจสอบ Return node
2
เรียกใช้ Function

นำ Function มาใช้ใน Event Graph

วิธีทำ:
  • กลับไปที่ Event Graph
  • จาก My Blueprint ลาก CalculateDamage มา
  • เชื่อม Event BeginPlay กับ CalculateDamage
  • ตั้งค่า BaseDamage = 50.0
  • ตั้งค่า Multiplier = 1.5
  • เชื่อม FinalDamage output กับ Print String
  • Compile และทดสอบ
ผลลัพธ์ที่คาดหวัง:

แสดงผลลัพธ์การคำนวณ (50 * 1.5 = 75)

ปัญหาที่พบบ่อย:
  • ⚠️หาก Function ไม่เรียกได้ ให้ตรวจสอบ Execution pin
  • ⚠️หากผลลัพธ์ผิด ให้ตรวจสอบ Input values
3
สร้าง Custom Event

สร้าง Event สำหรับจัดการเหตุการณ์พิเศษ

วิธีทำ:
  • คลิกขวาใน Event Graph
  • เลือก Add Custom Event
  • ตั้งชื่อ Event เป็น 'OnPlayerDeath'
  • เชื่อม OnPlayerDeath กับ Print String 'Player Died!'
  • เพิ่ม Delay node (2 วินาที)
  • เชื่อมกับ Restart Level หรือ Print String อื่น
ผลลัพธ์ที่คาดหวัง:

Custom Event OnPlayerDeath ถูกสร้างและทำงานได้

ปัญหาที่พบบ่อย:
  • ⚠️หาก Custom Event ไม่ปรากฏ ให้มองหา Add Event
  • ⚠️หาก Event ไม่ทำงาน ให้ตรวจสอบการเรียกใช้
4
เรียกใช้ Custom Event

เรียกใช้ Custom Event จากที่อื่น

วิธีทำ:
  • สร้าง Variable ชื่อ 'PlayerHealth' ประเภท Float
  • ใน Event Tick เช็คว่า PlayerHealth <= 0
  • ใช้ Branch node เพื่อตรวจสอบเงื่อนไข
  • หาก True ให้เรียก OnPlayerDeath Event
  • ทดสอบโดยตั้งค่า PlayerHealth = 0
ผลลัพธ์ที่คาดหวัง:

เมื่อ PlayerHealth = 0 จะเรียก OnPlayerDeath Event

ปัญหาที่พบบ่อย:
  • ⚠️หาก Event ไม่ถูกเรียก ให้ตรวจสอบ Branch condition
  • ⚠️หาก Event Tick ช้า ให้ใช้ Timer แทน

💪 แบบฝึกหัดเพิ่มเติม:

สร้าง Function สำหรับคำนวณ Experience Points

สร้าง Custom Event สำหรับ Level Up

สร้าง Function ที่มี Multiple Outputs

⏱️ 60 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
5
ปานกลาง
เกมเพลย์

Chapter 5: การสร้าง Character Movement System

สร้างระบบการเคลื่อนที่ของตัวละครด้วย Blueprint แบบขั้นสูง

⏱️ 90 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจระบบ Input Mapping ใน UE5

รู้จักการใช้ Character Movement Component

เรียนรู้การสร้าง Smooth Movement

เพิ่ม Jump และ Animation Integration

📋 ขั้นตอนการทำ:

1
ตั้งค่า Input Mapping

กำหนด Input Controls สำหรับการเคลื่อนที่

วิธีทำ:
  • ไปที่ Edit > Project Settings
  • เลือก Input ใน Engine section
  • ใน Action Mappings เพิ่ม 'Jump' -> Space Bar
  • ใน Axis Mappings เพิ่ม 'MoveForward' -> W (Scale 1.0), S (Scale -1.0)
  • เพิ่ม 'MoveRight' -> D (Scale 1.0), A (Scale -1.0)
  • เพิ่ม 'Turn' -> Mouse X (Scale 1.0)
  • เพิ่ม 'LookUp' -> Mouse Y (Scale -1.0)
ผลลัพธ์ที่คาดหวัง:

Input Mapping ถูกตั้งค่าครบถ้วน

ปัญหาที่พบบ่อย:
  • ⚠️หาก Input ไม่ทำงาน ให้ตรวจสอบ Scale values
  • ⚠️หาก Mouse ไม่ทำงาน ให้เช็ค Mouse sensitivity
2
สร้าง Character Blueprint

สร้าง Blueprint สำหรับ Player Character

วิธีทำ:
  • ใน Content Browser สร้าง Blueprint Class
  • เลือก Character เป็น Parent Class
  • ตั้งชื่อ 'BP_PlayerCharacter'
  • เปิด Blueprint Editor
  • ใน Components เพิ่ม Camera Component
  • เพิ่ม Spring Arm Component เป็น Parent ของ Camera
  • ตั้งค่า Spring Arm Length = 300
ผลลัพธ์ที่คาดหวัง:

Character Blueprint พร้อม Camera System

ปัญหาที่พบบ่อย:
  • ⚠️หาก Camera ไม่ทำงาน ให้ตรวจสอบ Component hierarchy
  • ⚠️หาก Spring Arm ผิด ให้ปรับ Target Arm Length
3
สร้าง Movement Logic

เพิ่ม Blueprint Logic สำหรับการเคลื่อนที่

วิธีทำ:
  • ใน Event Graph เพิ่ม InputAxis MoveForward
  • เชื่อม MoveForward กับ Add Movement Input
  • ใช้ Get Actor Forward Vector เป็น World Direction
  • เพิ่ม InputAxis MoveRight
  • เชื่อมกับ Add Movement Input + Get Actor Right Vector
  • เพิ่ม InputAxis Turn เชื่อมกับ Add Controller Yaw Input
  • เพิ่ม InputAxis LookUp เชื่อมกับ Add Controller Pitch Input
ผลลัพธ์ที่คาดหวัง:

Character สามารถเคลื่อนที่และหมุนกล้องได้

ปัญหาที่พบบ่อย:
  • ⚠️หาก Movement ไม่ Smooth ให้ปรับ Movement Component settings
  • ⚠️หาก Camera หมุนผิดทิศ ให้เช็ค Input Scale
4
เพิ่ม Jump System

เพิ่มความสามารถในการกระโดด

วิธีทำ:
  • เพิ่ม InputAction Jump
  • เชื่อม Jump กับ Jump function
  • เพิ่ม InputAction Jump (Released) เชื่อมกับ Stop Jumping
  • ปรับค่า Jump Z Velocity ใน Character Movement Component
  • เพิ่ม Ground Check logic (optional)
  • ทดสอบ Jump ใน Level
ผลลัพธ์ที่คาดหวัง:

Character สามารถกระโดดได้อย่างเป็นธรรมชาติ

ปัญหาที่พบบ่อย:
  • ⚠️หาก Jump สูงเกินไป ให้ลด Jump Z Velocity
  • ⚠️หาก Jump ไม่ได้ ให้เช็ค Can Jump condition

💪 แบบฝึกหัดเพิ่มเติม:

เพิ่ม Running System (Shift + Movement)

สร้าง Crouching System

เพิ่ม Footstep Sound Effects

⏱️ 90 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
6
ปานกลาง
User Interface

Chapter 6: การสร้าง UI และ Widget System

เรียนรู้การสร้าง User Interface และ Widget สำหรับเกม

⏱️ 75 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจระบบ UMG (Unreal Motion Graphics)

รู้จักการสร้าง Widget Blueprint

เรียนรู้การเชื่อมต่อ UI กับ Game Logic

สร้าง Responsive UI Design

📋 ขั้นตอนการทำ:

1
สร้าง Widget Blueprint แรก

สร้าง Widget สำหรับแสดง Player HUD

วิธีทำ:
  • ใน Content Browser คลิกขวา
  • เลือก User Interface > Widget Blueprint
  • ตั้งชื่อ 'WBP_PlayerHUD'
  • เปิด Widget Blueprint Editor
  • ทำความรู้จักกับ Designer tab และ Graph tab
  • ใน Palette ดู Common, Input, Panel categories
ผลลัพธ์ที่คาดหวัง:

Widget Blueprint Editor เปิดขึ้นมาพร้อม Canvas Panel

ปัญหาที่พบบ่อย:
  • ⚠️หาก Widget Blueprint ไม่เปิด ให้ Double-click อีกครั้ง
  • ⚠️หาก Palette ไม่ปรากฏ ให้เช็ค Window menu
2
ออกแบบ HUD Layout

เพิ่ม UI Elements สำหรับแสดงข้อมูล Player

วิธีทำ:
  • จาก Palette ลาก Text Widget มาใส่ใน Canvas
  • ตั้งชื่อ Text เป็น 'HealthText'
  • เพิ่ม Progress Bar สำหรับ Health
  • เพิ่ม Text อีกตัวสำหรับ Score
  • จัดตำแหน่ง Elements ใน Canvas
  • ตั้งค่า Anchors สำหรับ Responsive Design
  • ปรับขนาดและสีของ Elements
ผลลัพธ์ที่คาดหวัง:

HUD Layout พร้อม Health Bar, Score Text, และ Health Text

ปัญหาที่พบบ่อย:
  • ⚠️หาก Elements ไม่อยู่ตำแหน่งที่ต้องการ ให้ปรับ Anchors
  • ⚠️หาก Text ไม่ชัด ให้ปรับ Font Size และ Color
3
เชื่อมต่อ UI กับ Variables

สร้าง Variables และ Functions สำหรับ Update UI

วิธีทำ:
  • ไปที่ Graph tab
  • สร้าง Variable 'CurrentHealth' ประเภท Float
  • สร้าง Variable 'MaxHealth' ประเภท Float (Default = 100)
  • สร้าง Variable 'Score' ประเภท Integer
  • สร้าง Function 'UpdateHealthDisplay'
  • ใน Function เชื่อม Health Variables กับ Progress Bar
  • ใช้ Bind เพื่อเชื่อม Variables กับ UI Elements
ผลลัพธ์ที่คาดหวัง:

UI Elements แสดงค่าจาก Variables ได้

ปัญหาที่พบบ่อย:
  • ⚠️หาก Binding ไม่ทำงาน ให้ตรวจสอบ Variable types
  • ⚠️หาก Progress Bar ไม่แสดง ให้เช็ค Percent calculation
4
เพิ่ม Widget ใน Game

นำ Widget ไปแสดงใน Game

วิธีทำ:
  • เปิด BP_PlayerCharacter (หรือ Player Controller)
  • ใน Event BeginPlay เพิ่ม Create Widget
  • เลือก Widget Class เป็น WBP_PlayerHUD
  • เชื่อม Create Widget กับ Add to Viewport
  • เก็บ Widget Reference ใน Variable
  • ทดสอบใน Game ว่า HUD แสดงขึ้นมา
ผลลัพธ์ที่คาดหวัง:

HUD แสดงใน Game เมื่อเริ่มเล่น

ปัญหาที่พบบ่อย:
  • ⚠️หาก Widget ไม่แสดง ให้เช็ค Add to Viewport
  • ⚠️หาก Widget แสดงผิดตำแหน่ง ให้ปรับ Z-Order

💪 แบบฝึกหัดเพิ่มเติม:

สร้าง Inventory UI Widget

เพิ่ม Animation สำหรับ Health Bar

สร้าง Menu System พื้นฐาน

⏱️ 75 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
7
ปานกลาง
User Interface

Chapter 7: การสร้าง Crosshair ด้วย UserWidget

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

⏱️ 45 นาที📚 1 prerequisites🎯 4 objectives

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

เข้าใจการสร้าง Simple UI Widget

รู้จักการใช้ Image Widget

เรียนรู้การจัดตำแหน่ง UI Element ตรงกลางหน้าจอ

ทำความเข้าใจ Alignment และ Anchor Points

📋 ขั้นตอนการทำ:

1
สร้าง Crosshair Texture

เตรียม Texture สำหรับ Crosshair

วิธีทำ:
  • ใน Content Browser สร้างโฟลเดอร์ 'UI'
  • Import รูป Crosshair (หรือใช้ Default White Texture)
  • ตั้งชื่อ Texture เป็น 'T_Crosshair'
  • เปิด Texture และตรวจสอบ Import Settings
  • ตั้งค่า Texture Group เป็น UI
  • ตรวจสอบว่า Alpha Channel ทำงานถูกต้อง
ผลลัพธ์ที่คาดหวัง:

มี Crosshair Texture พร้อมใช้งาน

ปัญหาที่พบบ่อย:
  • ⚠️หากไม่มี Crosshair รูป ให้ใช้ Default White Texture
  • ⚠️หาก Texture เบลอ ให้ปรับ Filter settings
2
สร้าง Crosshair Widget

สร้าง Widget Blueprint สำหรับ Crosshair

วิธีทำ:
  • สร้าง Widget Blueprint ใหม่
  • ตั้งชื่อ 'WBP_Crosshair'
  • เปิด Widget Designer
  • ลบ Canvas Panel (หากมี) แล้วใส่ Image Widget
  • หรือเพิ่ม Image Widget ใน Canvas Panel
  • ตั้งชื่อ Image เป็น 'CrosshairImage'
ผลลัพธ์ที่คาดหวัง:

Widget Blueprint พร้อม Image Widget

ปัญหาที่พบบ่อย:
  • ⚠️หาก Image Widget ไม่ปรากฏ ให้หาใน Palette > Common
  • ⚠️หาก Canvas Panel หาย ให้เพิ่มใหม่จาก Palette > Panel
3
ตั้งค่า Crosshair Properties

กำหนดคุณสมบัติของ Crosshair Image

วิธีทำ:
  • เลือก CrosshairImage ใน Designer
  • ใน Details panel ตั้งค่า Brush > Image = T_Crosshair
  • ตั้งค่า Size = 10 x 10 (หรือตามต้องการ)
  • ตั้งค่า Position X = 0, Position Y = 0
  • ตั้งค่า Alignment Horizontal = 0.5, Vertical = 0.5
  • ตรวจสอบว่า Crosshair อยู่ตรงกลางหน้าจอ
ผลลัพธ์ที่คาดหวัง:

Crosshair แสดงตรงกลาง Widget

ปัญหาที่พบบ่อย:
  • ⚠️หาก Crosshair ไม่ตรงกลาง ให้ปรับ Anchors
  • ⚠️หาก Crosshair เล็กเกินไป ให้เพิ่ม Size
4
เพิ่ม Crosshair ใน Character

นำ Crosshair Widget ไปแสดงใน Game

วิธีทำ:
  • เปิด BP_ThirdPersonCharacter (หรือ Character Blueprint)
  • ใน Event BeginPlay เพิ่ม Create Widget
  • ตั้งค่า Class = WBP_Crosshair
  • เชื่อม Create Widget กับ Add to Viewport
  • Compile และทดสอบใน Game
  • ปรับแต่ง Z-Order หากจำเป็น
ผลลัพธ์ที่คาดหวัง:

Crosshair แสดงตรงกลางหน้าจอเมื่อเล่นเกม

ปัญหาที่พบบ่อย:
  • ⚠️หาก Crosshair ไม่แสดง ให้เช็ค Add to Viewport
  • ⚠️หาก Crosshair ถูกบัง ให้ปรับ Z-Order

💪 แบบฝึกหัดเพิ่มเติม:

สร้าง Crosshair แบบต่างๆ (Cross, Dot, Circle)

เพิ่ม Animation สำหรับ Crosshair (เช่น Pulse)

สร้าง Dynamic Crosshair ที่เปลี่ยนสีตาม State

⏱️ 45 นาที📚 1 ความรู้พื้นฐาน💪 3 แบบฝึกหัด
พร้อมเรียน
ขั้นสูง
ระบบ

ระบบ Inventory และ Items

สร้างระบบเก็บของและจัดการไอเทมในเกม

⏱️ 90 นาที📚 2 prerequisites

ขั้นตอนการเรียน:

1

ออกแบบ Inventory Structure

2

สร้าง Item Classes

3

ระบบ Pickup และ Drop

4

UI สำหรับ Inventory

⏱️ 90 นาที📚 2 ความรู้พื้นฐาน
พร้อมเรียน
ปานกลาง
User Interface

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

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

⏱️ 60 นาที📚 2 prerequisites

ขั้นตอนการเรียน:

1

สร้าง Widget Blueprint สำหรับ Crosshair

2

ตั้งค่า Image และ Properties (Position 0,0, Alignment 0.5, Size 10x10)

3

เพิ่ม Round Depth Box Effect

4

เชื่อมต่อกับ Player Character ใน Event Begin Play

⏱️ 60 นาที📚 2 ความรู้พื้นฐาน
พร้อมเรียน
ปานกลาง
เกมเพลย์

การสร้าง Head Bobbing System

เรียนรู้การสร้างระบบ Head Bobbing เพื่อเพิ่มความสมจริงในการเคลื่อนที่ของกล้อง

⏱️ 75 นาที📚 2 prerequisites

ขั้นตอนการเรียน:

1

สร้าง Camera Shake Class

2

ตั้งค่า Amplitude และ Frequency

3

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

4

ปรับแต่งค่าตามการเคลื่อนที่ (Idle, Walk, Run)

⏱️ 75 นาที📚 2 ความรู้พื้นฐาน
พร้อมเรียน
เริ่มต้น
พื้นฐาน

การใช้ Clamp Float เพื่อจำกัดช่วงตัวเลข

เรียนรู้การใช้ Clamp Float Node เพื่อจำกัดค่าตัวเลข float ให้อยู่ในช่วงที่กำหนด

⏱️ 30 นาที📚 1 prerequisites

ขั้นตอนการเรียน:

1

เข้าใจหลักการของ Clamp Float

2

ตั้งค่า Min และ Max Values

3

เชื่อมต่อ Input และ Output

4

ทดสอบการทำงานกับค่าต่างๆ

⏱️ 30 นาที📚 1 ความรู้พื้นฐาน
พร้อมเรียน

ทรัพยากรเพิ่มเติม

📚

เอกสารประกอบ

ดาวน์โหลดเอกสารและคู่มือเพิ่มเติมสำหรับการเรียน Blueprint

💬

ชุมชน Discord

เข้าร่วมชุมชน Discord เพื่อถามคำถามและแลกเปลี่ยนความรู้

🎯

แบบทดสอบ

ทดสอบความรู้ Blueprint ด้วยแบบทดสอบออนไลน์

พร้อมที่จะเรียนรู้ Blueprint แล้วหรือยัง?

เข้าร่วมค่ายพัฒนาเกมกับเราเพื่อเรียนรู้ Blueprint อย่างลึกซึ้ง