สร้างเกมส์ด้วย HTML5 ง่ายๆ (part2-4)
Jul 26th
สร้าง 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 ครับ (ขอไปปั่นงานต่อ -_-’ สบายใจแล้ว)
Recent Comments