CSC 2564 / CSC49

คู่มือการเล่นเกมและการพัฒนา

การพัฒนาเกมสองมิติบนเว็บไซต์ ฝ่าแดนสงคราม
DEVELOPMENT OF 2D GAME ON WEBSITE: ESCAPE WAR ZONE

โดย
613020646-7 นายรุ่งโรจน์ พิมผุย
613021054-7 นายณัฐวุฒิ จันทกุล

อาจารย์ที่ปรึกษา : อ.ธนพล ตั้งชูพงศ์

รายงานนี้เป็นส่วนหนึ่งของการศึกษาวิชา SC314775 โครงงานวิทยาการคอมพิวเตอร์ 2

ภาคเรียน 2 ปีการศึกษา 2564
สาขาวิชาวิทยาการคอมพิวเตอร์ วิทยาลัยการคอมพิวเตอร์
มหาวิทยาลัยขอนแก่น
(เมษายน 2565)
 ก

คำนำ
คู่มือฉบับบนี้เป็นส่วนหนึ่งของโครงงานเรื่อง การพัฒนาเกมสองมิติบนเว็บไซต์ ฝ่าแดนสงคราม โดยใช้โกดอท
เอ็นจิน โดยมีเป้าหมายเพื่อสร้างความสนุกและความบันเทิงให้แก่ผู้เล่น ภายในเกมมีเนื้อเรื่องเกี่ยวกับการหลบหนีออก
จากประเทศที่กำลังประสบปัญหาการทำสงครามระหว่างหุ่นยนต์กับมนุษย์ ซึ่งแบ่งออกเป็นทั้งหมด 4 ด่ าน โดยอ้างอิง
จากสถานที่ในภาคต่าง ๆ ในประเทศไทย ประกอบด้วย ภาคเหนื อมีแหล่งพลังงานไฟฟ้าจากเขื่อนภูมิพล ภาคใต้จะเป็น
น้ำมันปิโตเลียมและก๊าซธรรมชาติในอ่าวไทย ภาคตะวันออกจะเป็นโรงงานเหล็กในจังหวัดชลบุรีและระยอง และ ภาค
กลาง ทุ่งนา โดยทุกฉากจะมีลักษณะโทนสีเป็นสีดำ ตัวละครภายในเกมทั้งหมด 4 ตัว ละครได้แก่ 1. รถฮัมวี่ติดอาวุธ 2.
รถถังหนัก 3. ยานบินติดอาวุธ และ 4. รถมอไซค์ติดอาวุธ ศัตรูหรืออุปสรรค โดยในเกมจะมีศัตรูคือ ดรอย ซึ่งมี ดรอยสี
น้ำเงิน สีเหลือง และสีแดง ซึ่งแบ่งออกเป้น 2 ส่วนคือในส่วนของผู้เล่น และผู้พัฒนา หากผิดพลาดประการใด จึงขออภัย
ไว้ ณ ที่นี้
คณะผู้จัดทำ
 ข

สารบัญ
หน้า

คำนำ ก
สารบัญ ข
สารบัญภาพ ค
1. คู่มือสำหรับผู้เล่น 1
1.1 วิธีการเล่นเกม 1
1.1.1 กติกา 1
1.1.2 การควบคุมตัวละคร 1
1.1.3 การเข้าเล่นเกมและอธิบายปุ่มต่าง ๆ 1
1.2 ด่าน 3
1.3 ตัวละคร 3
1.4 ศัตรู 3
2. คู่มือสำหรับผู้พัฒนา 4
2.1 การติดตั้งและดาวน์โหลดโปรแกรม 4
2.2 การสร้างประกอบตัวละครภายในเกม 5
2.3 การประกอบฉากภายในเกม 5
2.4 การส่งออกเกม 6
2.5 การเกมขึ้นรันบนเว็บไซต์ 7
2.5 การนำไฟล์เกมไปพัฒนาต่อ 9
 ค

สารบัญรูปภาพ
หน้า
ภาพที่ 1 แสดงหน้าเมนูต่าง ๆ ภายในเกม 1
ภาพที่ 2 ภาพหน้าการควบคุมเสียง 2
ภาพที่ 3 แสดงหน้า ฮาว ทู เพล์ 2
ภาพที่ 4 หน้าเว็บหลักของโกดอท 4
ภาพที่ 5 ไฟล์โกดอทเมื่อดาวน์โหลดเสร็จสมบูรณ์ 4
ภาพที่ 6 ภาพตัวอย่างการสร้างตัวละคร 5
ภาพที่ 7 ตัวอย่างการแสดงการประกอบฉาก 6
ภาพที่ 8 ตัวอย่างการส่งออกโปรเจ๊ก 7
ภาพที่ 9 ตัวอย่างการไฟล์ทสี่ ่งออก 7
ภาพที่ 10 หน้าโปรแกรมไฟล์ซลิ ่า 8
ภาพที่ 11 ตัวอย่างการอับไฟล์ขึ้นไปยังเซิฟเวอร์ 9
ภาพที่ 12 ภายในไฟล์เกมที่สมบูรณ์ 10
ภาพที่ 13 หน้าแรกภายในไฟล์เกมโกดอท 10
 1

คู่มือสำหรับผู้เล่น
1.1 วิธีการเล่นเกม
1.1.1 กติกา
ผู้เล่นจะต้องเอาชนะศัตรู ตามจำนวนที่ด่านนั้น ๆ ต้องการ จึงจะสามารถพบเส้นชัย และสามารถ
ผ่านไปด่านต่อไปได้
1.1.2 การควบคุมตัวละคร

ผู้เล่นสามรถใช้ ปุ่ม แป้นพิมพ์ เพื่อควบคุมทิศทางของตัวละคร และใช้ปุ่มสเปค บาร์

(Space bar) เพื่อยิงหรือโจมตีศัตรู
1.1.3 การเข้าเล่นเกมและอธิบายปุ่มต่าง ๆ

ภาพที่ 1 แสดงหน้าเมนูต่าง ๆ ภายในเกม

ในหน้าแรกของเกมจะประกอบไปด้วยปุ่มต่าง ๆ ทั้งหมด 3 ปุ่ม คือปุ่มเพล์ (Play) ปุ่มอ็อบชัน
(Options) และปุ่มฮาวทูเพล (how to play) ซึ่งแต่ละปุ่มจะลิงค์ไปยังหน้าที่ต่างกัน ดังภาพที่ 1
 2

ภาพที่ 2 ภาพหน้าการควบคุมเสียง
ในหน้านี้ผู้เล่นสามารถปรับระดับของเสียงภายในเกม ซึ่งแบ่งออกเป็นเสียงเอฟเฟค และเสียงประกอบโดยหน้า
นี้ผู้เล่นสามารถปรับเสียงได้ตามต้องการ และมีปุ่มกลับ (Back) ซึ่งลิงค์กลับไปหน้าเมนูหลัก ดังภาพที่ 2

ภาพที่ 3 แสดงหน้า ฮาว ทู เพล์

โดยหน้านี้ จะให้ผู้เล่นทดลองควบคุมและยิงตัวละคร และอธิบายกฎและกติกาหรือเงื่อนไขต่าง ๆ ที่ใช้ภายใน
เกมดังภาพที่ 3
 3

1.2 ด่าน
ด่านของเกมจะถูกออกแบบจากลักษณะเด่นของแต่ละภูมิภาคในประเทศไทย เช่น ภาคเหนือมีแหล่งพลังงานไฟฟ้า
จากเขื่อนภูมิพล ภาคใต้จะเป็นน้ำมันปิโตเลียมและก๊าซธรรมชาติในอ่าวไทย ภาคตะวันออกจะเป็นโรงงานเหล็กในจังหวัด
ชลบุรีและระยอง และ ภาคกลาง ทุ่งนา โดยทุกฉากจะมีลักษณะโทนสีเป็นสีดำ และมีรายละเอียดตัวละครไอเทมที่ใช้ใน
ฉากต่าง ๆ
1.3 ตัวละคร
ตัวละคร ออกแบบรถให้เข้ากับฉาก จะใช้รถ 4 คัน ได้แก่ 1.รถฮัมวี่ตดิ อาวุธ 2.รถถังหนัก 3.ยานบินติดอาวุธ
และ 4. รถมอเตอร์ไซค์ติดอาวุธ
1.4 ศัตรู
เกมจะมีศัตรูคือ ดรอย ซึ่งมี ดรอยสีน้ำเงิน สีเหลือง และสีแดง อุปสรรคในเกมประกอบไปด้วย ระเบิด ถังไฟ
โดยที่บอสจะมีท่าทางทั้งหมด 3 ท่าทางคือท่าทางปกติเมื่อไม่โดนอะไร ท่าทางการโจมตี ท่าทางการโดนโจมตี และ
สุดท้ายคือท่าทางการพังของบอส
 4

คู่มือสำหรับผู้พัฒนา
2.1 การติดตั้งและดาวน์โหลดโปรแกรม
Godot game engine เป็นเครื่องมือในการสร้างเกมส์ ซึ่งสามารถทำได้ทั้งเกม 2D และ 3D และให้ใช้ได้ฟรี โดย
สามารถรัน cross platform เช่น iOS, Android, web
2.1.1 ขั้นตอนการติดตั้งโปรแกรม
1. เข้าไปที่ลิงค์ https://godotengine.org
2. จะเข้าสู่หน้าเว็บดังนี้

ภาพที่ 4 หน้าเว็บหลักของโกดอท
จากนั้นเลือกเมนู ดาวน์โหลดดังภาพที่ 4 ซึ่งผู้พัฒนาสามารถเลือกเวอร์ชันต่าง ๆ ของเครื่องมือได้ตามต้องการ
โดยแต่ละเวอร์ชันจะมีข้อแตกต่างการในเรื่องการสนับสนุนและภาษาที่ใช้ในการเขียนคำสั่งควบคุมภายในเกม
3. เมื่อดาวน์โหลดเครื่องมือเสร็จสมบูรณ์ จะได้ไฟล์ซิป ซึ่งเราสามารถแตกไฟล์ไว้ในตำแหน่งที่ต้องการ และ
สามารถใช้งานได้เลย โดยไม่ต้องติดตั้งเครื่องมืออื่นเพิ่มเติม ดังภาพที่ 5

ภาพที่ 5 ไฟล์โกดอทเมื่อดาวน์โหลดเสร็จสมบูรณ์
 5

2.2 การสร้างประกอบตัวละครภายในเกม
ขั้นตอนการสร้างและและการประกอบตัวละครภายในเกม
1. นำเข้ารูปภาพที่ได้ออกแบบทั้งหมดเข้าไปยังไฟล์หรือโฟลเดอร์ของเกม
2. จากนั้นสร้างซีนที่ต้องการเก็บตัวละคร
3. นำเข้า โหนดที่มีชื่อว่าอะนิเมชัน สไปร์ท (Animation Sprite)
4. กดเพื่อสร้างแอกชันใหม่ ตั้งชื่อและเลือกรูปภาพที่ต้องการ ดังภาพที่ 6

ภาพที่ 6 ภาพตัวอย่างการสร้างตัวละคร
2.3 การประกอบฉากภายในเกม
การประกอบฉากภายในเกมนั้น มีขั้นตอนในการการประกอบดังนี้
1. สร้างซีนโดยเป็นซีนที่มีลักษณะ 2 มิติ (2D)
2. จากนั้นนำรูปภาพฉากหรือที่รูปภาพที่ต้องการเข้าไปในโฟลเดอร์ที่เป็นที่ตั้งของเกม
3. ลากภาพลงไปยังตำแหน่งที่ต้องการใน ซีน 2 มิติที่สร้างไว้ข้างต้น
4. จากนั้นปรับขนาดและตำแหน่งให้ได้ตามต้องการ ดังภาพตัวอย่างที่ 7
 6

ภาพที่ 7 ตัวอย่างการแสดงการประกอบฉาก

2.4 การส่งออกเกม
ในการส่งออกโปรเจ็ คนั้น ผู้พัฒนาสามารถเลือกแฟตฟอร์มที่เราต้องการได้ ในส่วนนี้จะอธิบายการส่ งออกใน
รูปแบบเว็บไซต์ โดยมีขั้นตอนดังนี้
1. เลือกที่เมนูโปรเจ๊ก (Project)
2. จากนัน้ เลือกที่ เอ็กพอร์ต (Export)
3. เลือก HTML 5 ดังภาพตัวอย่าง
 7

ภาพที่ 8 ตัวอย่างการส่งออกโปรเจ๊ก

2.5 การเกมขึ้นรันบนเว็บไซต์
1. หลังจากทำส่งออกไฟล์เรียบร้อยจะได้โฟลเดอร์ดังภาพที่ 9

ภาพที่ 9 ตัวอย่างการไฟล์ที่ส่งออก
2. จากนั้น ผู้พัฒนาเลือกโปรแกรมที่ใช้ในการอับโฟลเดอร์ดังกล่าวขึ้นไปยังเซิฟเวอร์ ในคู่มือนี้ผู้พัฒนาใช้
โปรแกรมที่มีชื่อว่า ไฟล์ซิล่า (filezilla) สามารถไปดาวน์โหลดได้ที่ https://filezilla-project.org
 8

3. ติดตั้งโปรแกรมและเปิดโปรแกรม

ภาพที่ 10 หน้าโปรแกรมไฟล์ซิลา่
4. จากนั้นกรอกรายละเอียดต่าง ๆ เช่น ชื่อโฮตส์ ชื่อผู้ใช้ รหัส และพอร์ทที่จะอับขึ้น จากนั้นกดเชื่อมต่อดัง
ภาพที่ 10
5. เมื่อชื่อต่อเรียบร้อย เราจะให้ได้ว่าในตัวโปรแกรมจะมี 2 ฝั่งฝั่งซ้ายคือไฟล์ที่อยู่เครื่องบนเครื่องของเรา ส่วน
ฝั่งขวาคือฝั่งของเซิฟเวอร์ หากเราต้องการอับไฟล์หรือโฟลเดอร์ขึ้นไปยังเซิฟเวอร์ ก็คัดลอกสิ่งที่ต้องการลงไปในฝั่งขวาได้
เลย ดังภาพที่ 11
 9

ภาพที่ 11 ตัวอย่างการอับไฟล์ขึ้นไปยังเซิฟเวอร์
2.5 การนำไฟล์เกมไปพัฒนาต่อ
1. ดาวน์โหลดไฟล์ที่มีชื่อว่า gamecomplete.zip
2. จากนั้นแตกไฟล์ลงยังตำแหน่งที่ต้องการ
3. เมื่อแตกไฟล์และจะได้ดงั ภาพที่ 12
 10

ภาพที่ 12 ภายในไฟล์เกมทีส่ มบูรณ์

4. หลังจากนั้น เลือกไฟล์โปรเจ็คที่เป็นโปรเจ็คของโกดอท หลังจากนั้นจะได้ดังภาพที่ 13

ภาพที่ 13 หน้าแรกภายในไฟล์เกมโกดอท