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

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

การสร้าง Player

สำหรับ Part 1 ได้เขียนถึง User Interface ของ โปรแกรม Construct2 เอาไว้แล้วเบื้องต้น ใน Part2 ตั้งใจจะแนะนำการสร้าง Event ให้กับ Player, Monster และ Bullet และ ฉาก เพื่อสร้างความเข้าใจพื้นฐาน ในการควบคุม Object ต่างๆเบื้องต้นกันนะครับ

ก่อนอื่นต้องเข้าใจก่อนว่า ภาพที่จะใช้ในเกมส์นั้น ถ้ามีวัตถุประสงค์ว่าจะสร้างเป็นเกมส์บน Web Browser ขนาด และน้ำหนักภาพ อาจจะไม่ค่อยมีผลเท่าไหร่ แต่ถ้าจะให้ Gamer สามารถเปิดเล่นใน iPad, iPhone หรือ Mobile Devices อื่นๆได้ด้วย คงต้องปรับขนาด และน้ำหนัก ให้เบาที่สุด ดังนั้นเกมส์ HTML5 ส่วนใหญ่ จะตัวเล็กๆ เบาๆ สีน้อยๆ ประมาณนั้น (เกมส์ส่วนมาก จึงใช้กราฟฟิคเป็น Pixel Art) ซึ่งข่าวดีอีกอย่าง เมื่อผู้ศึกษาโปรแกรม Construct2 เข้าใจและสร้างเกมส์ได้อย่างสนุกแล้ว ยังสามารถต่อยอด ไปจนถึง App Store ของ Apple ซึ่งเป็นดินแดนสวรรค์ของนักสร้างเกมส์ ที่ต้องการหารายได้ อีกทางหนึ่งด้วย

โดยเกมส์ HTML5 แม้ตัวมันเองจะสร้างเกมส์ได้ แต่ไม่สามารถขึ้น App Store ได้แบบตรงๆ ต้องผ่านกระบวนการ “ห่อ(Wrap)ให้ด้วย” เสียก่อน และปัจจุบัน Wrapper ชัั้นดีคงหนีไม่พ้น PhoneGap ของ Free ซึ่งผมจะเขียนใน Part หลังๆครับ แต่ก่อนจะไปถึงปลายทางสวรรค์ กลับมาจุดเริ่มต้นกันก่อนครับ ^^

1. สร้าง Player

การสร้าง Player หรือนักแสดงนำที่เป็นตัวแทนเราในเกมส์ เราสามารถ Search หามาใช้ศึกษาได้จาก Google แล้วพิมพ์ Sprite Sheet สิ่งที่ได้ก็คือ ภาพที่มีตัวละคร แสดงถึงการเคลื่อนไหวของตัวละคร ในแต่ละแอคชั่น เช่น เดิน วิ่ง ต่อสู้ จัดวางในรูปแบบของเมตริกต่อกัน ในแกน x, y หากจะเรียกว่า Sprite sheet คือ Image database สำหรับเกมส์ 2 มิติคงไม่ผิดนัก

ตัวอย่าง Player ที่ผม Search มาครับ จะเห็นว่า มีอยู่ 4 มุม คือ Front, Right, Up, Left และเรา จะนำภาพนี้ไปทำการ Crop โดยใช้โปรแกรม Construct2 ไม่ต้องไปเหนื่อยที่อื่นครับ (ใน Construct2 มีให้ Features ให้กลับด้าน ซ้าย-ขวา, บน-ล่าง เพื่อประหยัดเวลาการ Crop ดังนั้นถ้าหากต้องวาดภาพเอง ใช้ภาพมุมเดียว แล้ว Mirror เพื่อกลับด้านเป็นฝั่งตรงข้ามก็ได้ )

มาดูการนำภาพนี้ เข้าโปรแกรม Construct2 กันครับ เปิดโปรแกรม Construct2 แล้ว สร้าง File ใหม่ครับ File > New

จะเห็นว่าโปรแกรม ให้เราเลือกว่าจะ Save File เป็นแบบไหน ซึ่ง Default จะเป็นแบบ .capx (นึกง่ายๆมันขึ้นไฟล์ PSD ของ Photoshop ไว้ใช้แก้ไขสิ่งต่างๆในเกมส์) ส่วนอีกแบบนั้นจะเป็นการสร้างแบบ Project ซึ่งมันจะสร้าง Folder ขึ้นมามากมาย รกเลย แต่ก็ดีอย่างคือโปรแกรมมันแผ่ทุกสิ่งแยกให้เรียบร้อย และมีไฟล์นามสกุล .capproj เอาไว้แก้ไขโปรแกรมเช่นกัน

เบื้องต้นแนะนำให้เลือกแบบ Default ครับ

เราจะได้หน้าตาแบบนี้มา ขาวๆ คือพื้นที่สำหรับสร้างเกมส์ครับ ^^ จะเห็นว่า Window Size จะเท่ากับ 640,480 มันก็คือ กว้าง * ยาว ของพื้นที่ภายในเส้นประ ที่ผมขีดเส้นแดงล้อมไว้ครับ หมายความว่าพื้นที่ตรงนี้เท่านั้น ที่จะโชว์เวลา Gamer เล่น ก็จะเห็น Object ต่างๆ ภายในกรอบเส้นประนี้ ซึ่งเราสามารถแก้ไขขนาดได้ตามใจชอบครับ

อ้าว แล้วพื้นที่เหลือนอกกรอบเส้นประ มันคืออะไรอ่ะ?!!!!

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

ทีนี้ให้ลอง Double Click บน Work Space สีขาว จะขึ้น Dialogue : Insert New Object > คลิกที่ Sprite ครับ เพื่อนำภาพ Sprite Sheet เข้ามา Crop Action ต่างๆ

คลิกที่พื้นที่ Work Space ตรงไหนก็ได้

ให้ คลิกขวาใน Animation Frame แล้วเลือก Import Sprite Strip… เพื่อเตรียมนำภาพเข้ามาตัด

จะมี หน้าต่างให้เลือกไปที่ภาพตัวอย่างครับ จะเห็นว่า Sprite Sheet มี 3 Columns x 4 Rows ดังนั้นเราต้องตัด(Strip) ภาพเหล่านี้ โดยระบบ Columns และ Rows ให้ถูกต้อง

เมื่อเลือกไฟล์เข้ามาแล้ว ให้ระบุกว้างยาว ให้เท่ากับภาพนะครับ Horizontal cells : 3 , Vertical cells : 4

ภาพทั้งหมดจะถูกตัดเป็นชิ้นๆ โดยเริ่มที่ Frame ที่ 1 ตอนนี้ ให้เราลบ Frame ที่ 0 และ Frame อื่นๆให้เหลือเฉพาะ Act หน้าตรง เพื่อที่จะกำหนดให้เป็น Default Animation เวลาไม่ได้ถูกควบคุมด้วยคีย์บอร์ด จะให้ยืนหน้าตรงครับ ตามภาพเลย

ถัดมาให้เราสร้าง Animation Scene : Left, Right เพื่อเอา Animate เดินไปซ้าย และเดินไปขวา บรรจุลงไป โดยคลิกเม้าส์ขวา แล้วเลือก Add animation ที่ช่อง Animations Scene ครับ ตามตัวอย่าง

Animation Scene : Right

Animation Scene : Left

ให้ตรวจสอบ โดยคลิกที่ Scene : Default, Left, Right เพื่อตรวจสอบ Animation อีกครั้ง ถ้าคุณพอใจแล้ว ให้กด ปิดไปเฉยๆเลยครับ ^^ ไม่ต้องตกใจ เพราะภาพจะมาแสดงที่ Work Space ด้วย Scene : Default ครับ โอ้ว ตื่นเต้น แต่ยังครับ เราจะต้อง Set Event ให้กับ Player ตัวนี้ก่อน ไม่งั้นมันจะไม่เดินครับ

อ๊ะๆ อยากเห็นใช่ป่ะว่าถ้าอยู่บน Browser จะเป็นยังไง ยอมให้ Run ก่อนสักที เพื่อเรียกกำลังใจ การ Run แนะนำให้เลือกไปที่ Browser Chrome ก่อนครับ เพราะเบาที่สุด IE นี่ห้ามเลย!! ขั้นตอนตามภาพ ถ้ามองไม่เห็น ก็คลิกที่ภาพนะครับ จะแสดงภาพใหญ่

เลือก Preview Browser : Chrome ครับ

เสร็จแล้ว กด Run Layout ครับ

มาแว้ววววววววววว แต่ยังเดินไม่ได้นะครับ เอาเป็นว่า อย่างน้อยก็พอทราบแล้วว่า ถ้าจะ Test Run ก็ทำตามขั้นตอนนี้ เรากลับไปใส่ Player Platform กันเถอะ

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:23 | #1

    ขอบคุณนะครับ ผมว่าเกมส์จะเกิดหรือดับ อยู่ที่ตอนสร้างตัวละครนี่แหละ

  1. No trackbacks yet.