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

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

สร้าง Player Platform

ใน Blog สร้าง Player ก็ได้รู้จักการนำ ตัวละครแบบ Sprite Sheet เข้ามาสร้าง Scene : Default, Left, Right กันแล้ว ตอนนี้จะพูดเรื่องของการที่จะทำให้ตัว Player เดินไปมาในฉากได้ครับ และจะแถมการสร้าง Solid หรือ Object ที่เอาไว้ เดินนึกถึงเกมส์มาริโอ้ ที่เดินบนฉาก และ กระโดดขึ้นอิฐ นั่นแหละครับ Solid ทีนี้มาดูกันว่าจะสร้าง Player Platform ยังไง

สรุปขั้นตอน

  • 1. คลิกที่ Player ให้ขึ้น Scale สีม่วง
  • 2. คลิกที่ Add/edit
  • 3. คลิกที่ + (Add)
  • 4. เลือกที่ Platform
  • 5. Add


ดูตามภาพได้เลยครับ

หลังจากกด Add จะมี Platform อยู่ใน List แล้ว ตอนนี้ Player มี Platform เป็นมนุษย์แล้ว แต่ยัง ยังไม่เสร็จครับ อีกนิดใกล้แล้วๆ

ผมหา Background มาสำหรับเซ็ตฉาก คุ้นๆมะ (Copy ไปศึกษาได้เลย หรืออยากจะหาแบบเองก็ตามใจชอบ)

โดยวิธีการนำภาพเข้าโปรแกรม Construct2 ก็เหมือนกับตอนนำ Player เข้าไป เพียงแต่ไม่ต้อง Strip ดังนั้นก็เปิดไฟล์ แล้วดึงเข้ามา แล้วก็คลิกกากบาท ปิดไป

เอาละเข้ามาแล้ว ทีนี้ เราต้องหันไปมอง Layer กันหน่อย เนื่องจากโปรแกรม Construct2 แบบ Free Edition จะอนุญาติให้สร้าง Layer แค่ 3 ชั้นเท่านั้น (ถ้าจำไม่ผิด ผมซื้อแล้วเลย Unlimited อิอิ ถ้า อยากดูความแตกต่างของแต่ละ Edition คลิกดูได้ที่นี่ครับ Compare Features)

สรุปการจัดวาง Object

  • 1. จัดฉากให้อยู่ภายในเส้นประ
  • 2. ให้ Background เป็น Layer 0 และ Player เป็น Layer 1 (Trick การย้าย : เลือก Object : Player/Background แล้ว Ctr+C แล้วเลือก Layer ที่ต้องการย้ายไปวาง แล้ว Ctr+V ตามด้วยคลิกที่ Work Space อีกที ภาพจะย้ายมา Layer ใหม่ทันทีครับ
  • )

ตอนนี้เกมส์เหมือนจะใช้ได้ แต่ก็ยังอีกครับ เราต้องสร้าง Solid หรือของแข็ง ให้ Player เอาไว้เหยียบ เดิน เช่นพื้น หรือ ท่อ วิธีการมีดังนี้ครับ ให้สร้างภาพ แนวนอน สำหรับพื้น และ ภาพ แนวตั้งสำหรับวางท่อ ตามภาพจะเห็นสีดำๆ มาจากไหน ผมก็ไปสร้างภาพพื้นสีดำ เล็กๆมา 1 ภาพ เสร็จแล้ว ก็ Insert เข้ามา 2 ครั้ง ชิ้นแรกจับทำเป็นพื้นแนวนอน ส่วนอีกชิ้น ปรับขนาดให้เท่ากับท่อ เราจะทำไว้เพื่อให้ Player เดิน หรือกระโดดเหยียบได้ อ้าวเฮ้ย แล้วจะปล่อยสีดำติดกับเกมส์ไปเหรอ ไม่ครับๆ ให้ปรับลด Opacity ด้านซ้ายลงให้เป็น 0 ไปเลยครับ

มองไม่เห็นแล้วครับ โอ้ว แจ๋วเจรงๆ ง่ายมะนี่ถ้าเขียน JQuery คงต้องเขียนเช็คพิกัด Solid กันอ้วกเลย แต่นี่จับวางๆ ง่ายป่ะ

ขั้นตอนนี้ห้ามลืม ต้อง Set ให้พื้นที่สีดำ ที่เรามาวางเป็นขอบเขต ของพื้น กับเป็นท่อ ให้เป็น Solid ด้วยนะครับ

เอาละ ลอง Run สักรอบนึงครับ ลองใช้ลูกศร ซ้าย ขวา บน ดู จะเห็นว่ามันเลื่อนได้ กระโดดได้

แต่ว่า มันเป็นแค่ด้านหน้า Default ด้านเดียว แล้วที่เราทำ Animate Left กับ Right ล่ะ?? 555+ โปรดติดตามตอน 3 การกำหนด Event และเงื่อนไขต่างๆให้กับเกมส์ ครับ

Related Articles


About the author

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

Website : http://www.unicornmax.com

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

Twiter :


  1. March 20th, 2013 at 17:00 | #1

    นำมาทำ mini game เล็กๆ น่าจะ work นะครับ

  1. No trackbacks yet.