Home > HTML5 > สร้างเกมส์ด้วย HTML5 ง่ายๆ (part2-4)

สร้างเกมส์ด้วย HTML5 ง่ายๆ (part2-4)

สร้าง Player Platform

ในตอนที่ 3 จบลงด้วยการทำให้ตัว Player วิ่งหันหน้าไปซ้าย-ขวา กันได้แล้วใช่ป่าวครับ ผมอยากจะเพิ่มเติมตอนที่ 3 อีกสักหน่อย เนื่องจากลืมคิดไปว่า ถ้าหากควบคุม Player จนสุดขอบ แล้วมันจะตกเหว หายไปจากฉาก ดังนั้น ผมขอขยายตอน 3 อีกหน่อยก่อน จะขึ้น Part3 นะครับ ส่วนขยายนี้สั้นๆครับ ไม่ยาว อ่านสบายๆครับ ^

สิ่งที่จะเขียนขยายความจากตอนที่ 3 นะครับ ก็คือ ผมจะกำหนดขอบเขตของเกมส์เพื่อไม่ให้มันวิ่งหลุดขอบ แล้วตกเหวหายไป และจะขยายการเดินของฉากให้เดินได้ไกลขึ้น เอาละ ไม่เห็นภาพใช่ป่ะ งั้นคลิกที่ปุ่มนี view game แล้วลองเดินซ้าย-ขวา ดูครับ

Ok เห็นภาพแล้วนะครับ ว่าผมกำลังหมายถึงอะไร ทีนี้ เรามาดูพิธีกรรมในการทำกันดีกว่า…

1. ปรับขนาดของ Layout Size ให้สั้น และแคบลง ตามภาพครับ แต่ถ้าหากเป็นเกมส์ที่มีแผนที่ใหญ่ๆ ก็ปรับตาม Scale ของแผนที่นั้นๆนะครับ อันนี้เป็นแค่ตัวอย่างครับ

2. เริ่มจากการคลิกที่ภาพแบ็คกราวด์ ให้ขึ้น Scale Image ตามภาพ > กด Ctr+C แล้ว กด Ctr+V ทันที

3. จะมี Cursor ขึ้นเป็นรูปกากบาท ตามภาพนะครับ ได้นะ ได้นะ..

4. คลิกเม้าส์ซ้าย ลงไป 1 ที เป็นการ Copy & Paste นั่นเอง แล้วจับภาพชิดๆกัน

5. อย่าลืม Solid จ้า ให้เอา Solid ของ ท่อ Copy&Paste ไปวางที่ ท่อ ฝั่งขวา

6. อย่าลืม Solid พื้นด้วย ใช้วิธียืดเอาก็ได้ครับ

เอาละ ยังไม่เสร็จ!! เราต้องไป Set การเคลื่อนที่กันก่อน

7. คลิกที่ Player ดูที่ช่อง Properties ด้านซ้าย >ตรง Behaviors ให้คลิก Add/edit

8. คลิกที่ เครื่องหมาย + เพื่อที่เราจะ Add Behaviors ครับ

9. ทีนี้ ให้ Add เข้ามาทีละครั้งครับ ครั้งแรก Add > Bound to layout เพื่อกำหนดขอบเขตของฉาก และ ครั้งที่สอง Add > Scroll to เพื่อให้ฉากเลื่อนตาม Player ครับ จะสลับอะไรก่อนหลังก็ได้นะ

10. ใน Dialogue จะหน้าตาแบบนี้

11. คลิกที่พื้นที่ Work Area 1 ครั้ง แล้วคลิกที่ Project Properties

12. เลือกแสดงผลด้วย Chrome Browser สบายใจ มาเร็ว มาไว สบายใจก่า

13. กด Run เลยจ้ะ จบละ ค่อยจบสวยหน่อย ^..^ ง่ายเนอะ

เอาละเจอกันใหม่ Part 3 ครับ (ขอไปปั่นงานต่อ -_-’ สบายใจแล้ว)

Related Articles


About the author

นาย ณัฐพงศ์ พันธุศิลป์ (กอล์ฟ) Website Manager Unicorn Max Co.,Ltd.

Website : http://www.unicornmax.com

Facebook : http://www.facebook.com/unicornmax

Twiter :