บทความ นี้เราจะมาเรียนรู้การทำให้ Character กระโดด และ
เคลื่อนไหวตาม Animation ที่เรากำหนดโดยการควบคุมผ่าน Key
Board พร้อมกับ เรียนรู้การใช้งาน Event Editor เบื้องต้น
1. เปิด GDevelop ไปที่ Open เปิด Project Ninja ขึ้นมา
>>1 Click ขวา Player เลือก Edit
>>2 Click เครื่องหมายบวก Add an Animation
>>3 Animation 1 จะเพิ่มเข้ามา
>>4 Click ขวา Add an image from file
>>5 เลือกโฟลเดอร์ ที่ Character animation อยู่
>>6 เลือกภาพ Jump_000 ถึง Jump_009
>>7 กด Open
ภาพจะเพิ่มเข้ามาอย่างที่เห็น
2. ไปตั้งค่า Animation Jump
>>1 กด Loop
>>2 กด Time between each images
>>3 ตั้งค่าเป็น 0.02 วินาที >>4 OK
3. ทดสอบ Animation Jump
>>1 กดปุ่ม Preview
>>2 ภาพจะเล่น Animation ตามที่เราตั้งค่าไว้
>>3 ปิด
4. ทีนี้ผมจะเพิ่ม Animation อื่นๆ เข้ามา
>>1 Click เครื่องหมายบวก Add an Animation
>>2 Animation 2 จะเพิ่มเข้ามา
>>3 Click ขวา Add an image from file
>>4 เลือกโฟลเดอร์ ที่ Character animation อยู่
>>5 เลือกภาพ Run_000 ถึง Run_009
>>6 กด Open
5. ไปตั้งค่า Animation Run
>>1 กด Loop
>>2 กด Time between each images
>>3 ตั้งค่าเป็น 0.02 วินาที >>4 OK
แล้วทดสอบ Preview Animation Run
6. และผมจะเพิ่ม Animation Slide เข้ามา
>>1 Click เครื่องหมายบวก Add an Animation
>>2 Animation 3 จะเพิ่มเข้ามา
>>3 Click ขวา Add an image from file
>>4 เลือกโฟลเดอร์ ที่ Character animation อยู่
>>5 เลือกภาพ Slide_005 ผมเลือกภาพเดียว
>>6 กด Open
ถ้าเรามีภาพเดียวไม่ต้องตั้งค่า Animation
7. มาถึงขั้นตอนสำคัญสำหรับบังคับ Character Animation ทาง GDevelop กำหนดอัตโนมัติมาให้แล้ว เราเพียงเข้าไปตั้งค่าบางอย่าง แต่ถ้าเราอยากตั้งค่าเองโดยไม่ใส่ Behaviors ก็ได้เหมือนกันแต่อาจจะมีหลายขั้นตอนอยู่บ้าง แล้วผมจะแนะนำในตอนต่อไป
>>1 ให้ไปที่เมนู Event
>>2 มาที่ Event Editor
8. ทำการเพิ่ม New Event
>>1 กดที่ Add an event
>>2 จะได้ Event ที่ 1 ตามภาพ
9. ทำการเพิ่มเงือนไข ให้ Animation
>>1 นำเม้าท์ มาวางในช่อง No condition
>>2 คำสั่ง Add a condition จะเด้งขึ้นมา กดที่ +
10. เพิ่ม Condition Event 1
>>1 Condition Editor
>>2 ไปที่ Platform Behavior
>>3 กด Is jumping
>>4 กดที่กล่อง สี่เหลี่ยม
>>5 เลือก Object Player
>>6 กด Choose
>>7 กดรูป PlatformerObject >>8 กด OK
11. เมื่อ Animation มีเงือนไขแล้วต้องมีการกระทำตามมา
>>1 นำเม้าท์มาวางที่ช่อง No action
>>2 คำสั่ง Add an actionจะเด้งขึ้นมา ให้กดที่ +
12. ทำการเพิ่ม Action ของ event 1
>>1 Action Editor
>>2 เลือก Sprite
>>3 เลือก Animations and images
>>4 เลือก Change the animation
>>5 กดที่กล่องสี่เหลี่ยม
>>6 เลือก Object Player >>7 กด Choose
>>8 ใส่ค่า =
>>9 ใส่ค่า 1 ( คือค่า Animation 1 นั้นเอง )
>>10 Ok
ภาพ Code Event ที่ 1
13. Save และ Preview แล้วกด Space bar จะเห็น
ว่า Character เรา กระโดดได้ ตาม Animation 1 ที่เราตั้งค่าไว้
แต่ตอน Character ลงพื้นยัง คงเล่น Animation 1 ท่ากระโดดอยู่เราต้องแก้ไข ให้ Character ลงมายืนที่พื้นในท่าเริ่มต้น
14. ทำการเพิ่ม New Event 2 และ Condition
>>1 กดที่ Add an event
>>2 นำเม้าท์ มาวางในช่อง No condition
>>3 ไปที่ Platform Behavior
>>4 กด Is falling
>>5 กดที่กล่อง สี่เหลี่ยม
>>6 เลือก Object Player
>>7 กด Choose
>>8 กดรูป PlatformerObject >>9 กด OK
15. เพิ่ม Action ของ Event 2
>>1 วางเม้าท์ช่องNo action คำสั่ง Add an actionจะเด้งขึ้นมาให้กดที่ +
>>2 เลือก Sprite>>Animations and images
>>3 เลือก Change the animation
>>4 กดที่กล่องสี่เหลี่ยม
>>5 เลือก Object Player >>6 กด Choose
>>7 ใส่ค่า =
>>8 ใส่ค่า 1 ( คือค่า Animation 1 Jump )
>>10 Ok
Code Event ที่ 2 ถ้า Preview ดูแล้วกด Space bar ผลจะยังคงเล่น Aniation 1 อยู่เนื่องจากเรายังใส่ Code ไม่ครบ
16. ทำการเพิ่ม New Event 3 และ Condition เพื่อทำให้
Character Animation กลับมาที่ท่ายืน
>>1 กดที่ Add an event
>>2 Event 3 เพิ่มเข้ามานำเม้าท์มาวางช่อง No condition
>>3 คำสั่ง Add a condition จะเด้งขึ้นมา กดที่ +
>>4 ไปที่ Platform Behavior
>>5 กด Is on floor
>>6 กดที่กล่อง สี่เหลี่ยม
>>7 เลือก Object Player
>>8 กด Choose
>>9 กดรูป PlatformerObject >>10 กด OK
17. Action ไม่ต้องเพิ่มเราจะปล่อยว่างไว้
>>1 วางเม้าท์ช่อง No action
>>2 กด + คำสั่ง A sub event
>>3 Sub event 1 จะแสดงออกมา
18. ทำการเพิ่ม Condition ที่ Sub event 1
>>1 ไปที่ Platform Behavior>>2 กด Is moving
>>3 กดที่กล่อง สี่เหลี่ยม
>>4 เลือก Object Player
>>5 กด Choose
>>6 กดรูป PlatformerObject >>7 กด OK
19. เพิ่ม Action ที่ Sub event 1
>>1 เลือก Sprite
>>2 Animations and images
>>3 เลือก Change the animation
>>4 กดที่กล่องสี่เหลี่ยม
>>5 เลือก Object Player >>6 กด Choose
>>7 ใส่ค่า =
>>8 ใส่ค่า 2 ( คือค่า Animation 2 Run )
>>9 Ok
20. ให้เพิ่ม Sub event 2 ขึ้นมาอีก และใส่ Condition
>>1 Sub event 2 ถูกเพิ่มเข้ามา
>>2 Add a condition กดที่ +
>>3 ไปที่ Platform Behavior
>>4 กด Is moving
>>5 กดที่กล่อง สี่เหลี่ยม
>>6 เลือก Object Player
>>7 กด Choose
>>8 กดรูป PlatformerObject
>>9 กดถูก ที่ Invert the condition
>>10 กด Ok
21. เพิ่ม Action ที่ Sub event 2
>>1 วางเม้าท์ช่อง No action คำสั่ง Add an action จะเด้งขึ้นมาให้กดที่ +
>>2 เลือก Sprite
>>3 Animations and images
>>4 เลือก Change the animation
>>5 กดที่กล่องสี่เหลี่ยม
>>6 เลือก Object Player >>7 กด Choose
>>8 ใส่ค่า =
>>9 ใส่ค่า 0 ( คือค่า Animation 0 Idle )
>>10 Ok
Code ที่ได้ ตามภาพ
22. Save และ Preview ทดลองกด ลูกศรขวาที่ Keyboard Animation 2 จะถูกเรียกใช้สำหรับวิ่งไปข้างหน้า ถ้ากด Space bar Animation 1 จะถูกเรียกใช้สำหรับกระโดด เวลา Character ลงสู่พื้นจะกลับมายืนในท่า Animation 0 แต่ถ้าเรากดลูกศรซ้าย Character จะเลื่อนถอยหลัง ไม่แสดง Animation ท่าอะไรออกมา เราต้องสั่งให้ Character หันหน้ากลับมาทางซ้าย Animation จึงจะถูกเรียกใช้งาน เพระ GDevelop จะแสดง Animation ตามทิศทางจริงของภาพต้นฉบับ
23. ทำการเพิ่ม Sub event 3,4 ใน Event 3
24. เพิ่ม Condition ที่ Sub event 3
>>1 Add a condition กดที่ +
>>2 ไปที่ Keyboard
>>3 Key Pressed
>>4 กดที่ A
>>5 ข้อความแจ้งให้ใส่ อักษรควบคุม เช่น กดที่ลูกศรซ้าย Left Keyboard
>>6 Ok
25. เพิ่ม Action ที่ Sub event 3
>>1 Add an action กดที่ +
>>2 เลือก Sprite
>>3 Effects
>>4 เลือก Flip the object horizontally
>>5 กดที่กล่องสี่เหลี่ยม
>>6 เลือก Object Player >>7 กด Choose
>>8 ใส่ค่า Yes
>>9 Ok
26. เพิ่ม Condition ที่ Sub event 4
>>1 Add a condition กดที่ +
>>2 ไปที่ Keyboard
>>3 Key Pressed
>>4 กดที่ A
>>5 ข้อความแจ้งให้ใส่ อักษรควบคุม เช่น กดที่ลูกศรขวา Right Keyboard
>>6 Ok
27. เพิ่ม Action ที่ Sub event 4
>>1 Add an action กดที่ +
>>2 เลือก Sprite
>>3 Effects
>>4 เลือก Flip the object horizontally
>>5 กดที่กล่องสี่เหลี่ยม
>>6 เลือก Object Player >>7 กด Choose
>>8 ใส่ค่า No
>>9 Ok
Code ที่ได้ แล้ว Preview ดู Animation จะเล่นตามภาพจริง
28. มาถึง Animation สุดท้าย ด้วยการกด Down Key
คือ Animation 3 Slide
ทำการเพิ่ม New Event 4
>>1 กดที่ Add an event
>>2 Event 4 เพิ่มเข้ามา
>>3 Add a condition กดที่ +
>>4 ไปที่ Keyboard
>>5 Key Pressed
>>6 กดที่ A
>>7 ข้อความแจ้งให้ใส่ อักษรควบคุม เช่น
กดที่ลูกศร Down Keyboard
>>8 Ok
29. เพิ่ม Action ที่ event 4
>>1 Add an action กดที่ +
>>2 เลือก Sprite
>>3 Animations and images
>>4 เลือก Change the animation
>>5 กดที่กล่องสี่เหลี่ยม
>>6 เลือก Object Player >>7 กด Choose
>>8 ใส่ค่า =
>>9 ใส่ค่า 3 ( คือค่า Animation 3 Slide )
>>10 Ok
Code ทั้งหมด
30. Save และ Preview
31. เมื่อทดลอง Preview ดูอาจจะมีการกระตุกของตัวละคร
นั่นเกิดจากการชนกันของตัวละครกับวัตถุ เราอาจะแก้ไขโดยปรับ
ขนาด Character และปรับ Level Game ดังตัวอย่าง
การเล่น Animation และควบคุม Game มีหลักๆ อยู่ประมาณนี้
ถ้าเพื่อนๆ คนไหนอยากควบคุมตัวละครให้แตกต่างออกไปลองศึกษา
Event ตามตัวอย่างที่ Gdevelop มีให้แล้วนำมาปรับใชกับ Project Game ของเราดูนะครับ
บทความต่อไปผมจะพาไปดูวิธี ควบคุม Camera และ Virtual
control ติดตามต่อไปนะครับ
