วิธีสร้างเกม Flash: 4 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: Jason Gerald | [email protected]. แก้ไขล่าสุด: 2024-02-02 14:44

Flash เป็นรูปแบบยอดนิยมสำหรับวิดีโอเกมบนเบราว์เซอร์ เช่น ไซต์อย่าง Newgrounds และ Kongregate แม้ว่ารูปแบบ Flash มีแนวโน้มที่จะใช้งานน้อยเกินไปในแอปพลิเคชันมือถือ แต่ก็ยังมีเกมคุณภาพมากมายที่ยังคงสร้างโดยใช้ Flash ต่อไป Flash ใช้ ActionScript ซึ่งเป็นภาษาที่เรียนรู้ได้ง่ายและให้การควบคุมวัตถุบนหน้าจอ ดูขั้นตอนที่ 1 ด้านล่างเพื่อเรียนรู้วิธีสร้างเกม Flash พื้นฐาน

ขั้นตอน

ส่วนที่ 1 จาก 3: การเริ่มต้น

ขั้นตอนที่ 1. ออกแบบเกม

ก่อนที่คุณจะเริ่มเขียนโค้ด ให้สร้างแนวคิดคร่าวๆ เกี่ยวกับเกมของคุณ Flash เหมาะที่สุดสำหรับเกมง่ายๆ ดังนั้นให้เน้นที่การสร้างเกมที่มีกลไกการเล่นเกมน้อยมาก กำหนดประเภทและกลไกของเกมก่อนเริ่มสร้างต้นแบบ เกมแฟลชทั่วไป ได้แก่:

• นักวิ่งที่ไม่มีที่สิ้นสุด: เกมจะย้ายตัวละครโดยอัตโนมัติ ผู้เล่นต้องกระโดดข้ามสิ่งกีดขวางหรือโต้ตอบกับเกม ผู้เล่นมักจะมีเพียงหนึ่งหรือสองตัวเลือกการควบคุม
• นักสู้: เกมมักจะเลื่อนด้านข้าง ผู้เล่นจะต้องเอาชนะศัตรูเพื่อที่จะก้าวหน้า ตัวละครของผู้เล่นมีหลายท่าเพื่อเอาชนะศัตรู
• ปริศนา: ผู้เล่นจะต้องไขปริศนาเพื่อเอาชนะแต่ละด่าน เริ่มจากรูปแบบการรวบรวมวัตถุสามชนิดเช่น Bejeweled ไปจนถึงปริศนาที่ซับซ้อนเช่นเกมผจญภัย
• RPG: เกมนี้เน้นที่การพัฒนาตัวละครและความก้าวหน้า ผู้เล่นต้องเคลื่อนที่ผ่านสถานการณ์ต่างๆ มากมาย รวมถึงศัตรูประเภทต่างๆ กลไกการต่อสู้แตกต่างกันอย่างมาก แต่หลายประเภทเหล่านี้เป็นแบบผลัดกันเล่น RPG นั้นเขียนโค้ดยากกว่าเกมแอคชั่นทั่วไปอย่างมาก

ขั้นตอนที่ 2 ทำความเข้าใจข้อดีของแฟลช

Flash เหมาะสมที่สุดสำหรับเกม 2D สามารถสร้าง Flash เพื่อสร้างเกม 3D ได้ แต่มันซับซ้อนมากและต้องใช้ความรู้เพิ่มเติม เกม Flash ที่ประสบความสำเร็จเกือบทุกเกมมีรูปแบบ 2D

เกมแฟลชยังเหมาะที่สุดสำหรับเซสชันที่รวดเร็ว เนื่องจากผู้เล่นส่วนใหญ่เล่นเมื่อมีเวลาว่างน้อย เช่น ช่วงพัก ซึ่งหมายความว่าช่วงการเล่นเกมมักจะยาวไม่เกิน 15 นาที

ขั้นตอนที่ 3 ทำความคุ้นเคยกับภาษา ActionScript3 (AS3)

เกม Flash ได้รับการตั้งโปรแกรมใน AS3 และคุณจะต้องมีความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานเพื่อสร้างเกมให้ประสบความสำเร็จ คุณสามารถสร้างเกมง่ายๆ ด้วยความเข้าใจพื้นฐานเกี่ยวกับโค้ดใน AS3

มีหนังสือ ActionScript มากมายใน Amazon และร้านค้าอื่นๆ พร้อมด้วยบทแนะนำและเรื่องราวต่างๆ มากมายบนอินเทอร์เน็ต

ขั้นตอนที่ 4 ดาวน์โหลด Flash Professional

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

Flash Professional เป็นโปรแกรมเดียวที่คุณจะต้องเริ่มสร้างเกม

ส่วนที่ 2 ของ 3: การเขียนเกมพื้นฐาน

ขั้นตอนที่ 1 ทำความเข้าใจหน่วยการสร้างพื้นฐานของรหัส AS3

เกมหลักมีโครงสร้างโค้ดที่แตกต่างกันหลายแบบ รหัส AS3 มีสามส่วนหลัก:

• ตัวแปร - นี่เป็นวิธีการจัดเก็บข้อมูล ข้อมูลอาจเป็นตัวเลข คำ (สตริง) วัตถุ และอื่นๆ ตัวแปรถูกกำหนดโดยรหัส var และต้องประกอบด้วยหนึ่งคำ

  var playerHealth:จำนวน = 100; // "var" แสดงว่าคุณกำลังกำหนดตัวแปร // "playerHealth" เป็นชื่อตัวแปร // "ตัวเลข" คือประเภทข้อมูล // "100" คือค่าที่กำหนดให้กับตัวแปร // บรรทัดการกระทำทั้งหมดลงท้ายด้วย ";"
  
  

• ตัวจัดการเหตุการณ์ - ตัวจัดการเหตุการณ์จะค้นหาบางสิ่งที่เกิดขึ้น แล้วแจ้งส่วนที่เหลือของโปรแกรม นี่เป็นสิ่งสำคัญสำหรับการป้อนข้อมูลของผู้เล่นและรหัสซ้ำ ตัวจัดการเหตุการณ์มักจะเรียกใช้ฟังก์ชัน

  addEventListener (MouseEvent. CLICK, swingSword); // "addEventListener()" กำหนดตัวจัดการเหตุการณ์ // "MouseEvent" คือหมวดหมู่ของอินพุตที่กำลังรับฟัง // ". CLICK" เป็นเหตุการณ์ที่ระบุในหมวด MouseEvent // "swingSword" เป็นฟังก์ชันที่เรียกเมื่อมีเหตุการณ์เกิดขึ้น
  
  

• ฟังก์ชัน - โค้ดส่วนหนึ่งที่กำหนดให้กับคีย์เวิร์ดและสามารถเรียกได้ในภายหลัง ฟังก์ชันรองรับการเขียนโปรแกรมเกมส่วนใหญ่ และเกมที่ซับซ้อนสามารถมีฟังก์ชันได้หลายร้อยแบบ ฟังก์ชันสามารถอยู่ในลำดับใดก็ได้เพราะจะทำงานเฉพาะเมื่อมีการเรียกเท่านั้น

  ฟังก์ชัน swingSword(e:MouseEvent):void; { //รหัสของคุณที่นี่ } // "ฟังก์ชัน" คือคีย์เวิร์ดที่ปรากฏขึ้นที่จุดเริ่มต้นของทุกฟังก์ชัน // "swingSword" เป็นชื่อของฟังก์ชัน // "e:MouseEvent" เป็นพารามิเตอร์เพิ่มเติม ซึ่งบ่งชี้ว่า // ฟังก์ชันถูกเรียกจากตัวฟังเหตุการณ์ // ":void" คือค่าที่ฟังก์ชันส่งคืน // หากไม่มีการคืนค่า ให้ใช้:void
  
  

ขั้นตอนที่ 2 สร้างวัตถุ

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

• เปิดแฟลชมืออาชีพ สร้างโครงการ ActionScript 3 ใหม่
• คลิกเครื่องมือวาดรูปสี่เหลี่ยมผืนผ้าจากแผงเครื่องมือ แผงนี้อาจอยู่ในตำแหน่งอื่น ขึ้นอยู่กับการกำหนดค่า Flash Professional วาดรูปสี่เหลี่ยมผืนผ้าในหน้าต่างฉาก
• เลือกสี่เหลี่ยมโดยใช้เครื่องมือ Selection

ขั้นตอนที่ 3 ตั้งค่าคุณสมบัติบนวัตถุ

เลือกสี่เหลี่ยมที่เลือกใหม่ ไปที่เมนู Modify และเลือก "แปลงเป็นสัญลักษณ์" คุณยังสามารถกด F8 เป็นทางลัดได้ ในหน้าต่าง "แปลงเป็นสัญลักษณ์" ให้ตั้งชื่อวัตถุที่จดจำได้ง่าย เช่น "ศัตรู"

• ค้นหาหน้าต่างคุณสมบัติ ที่ด้านบนของหน้าต่าง จะมีช่องข้อความว่างที่ระบุว่า "ชื่ออินสแตนซ์" เมื่อวางเมาส์เหนือช่องนั้น ตั้งชื่อให้เหมือนกับเมื่อคุณเปลี่ยนเป็นสัญลักษณ์ ("ศัตรู") ซึ่งจะสร้างชื่อเฉพาะสำหรับการโต้ตอบผ่านโค้ด AS3
• "เหตุการณ์" แต่ละรายการเป็นวัตถุแยกต่างหากที่อาจได้รับผลกระทบจากโค้ด คุณสามารถคัดลอกกิจกรรมที่สร้างขึ้นหลายครั้งโดยคลิกแท็บคลังแล้วลากเข้าไปในฉาก ทุกครั้งที่มีการเพิ่มเหตุการณ์ ชื่อของเหตุการณ์จะเปลี่ยนไปเพื่อระบุว่าวัตถุนั้นแยกจากกัน ("ศัตรู", "ศัตรู1", "ศัตรู2" เป็นต้น)
• เมื่อคุณอ้างถึงวัตถุในรหัส เพียงแค่ใช้ชื่อของเหตุการณ์ ในกรณีนี้คือ "ศัตรู"

ขั้นตอนที่ 4 เรียนรู้วิธีเปลี่ยนคุณสมบัติของเหตุการณ์

เมื่อสร้างเหตุการณ์แล้ว คุณสามารถตั้งค่าคุณสมบัติของกิจกรรมผ่าน AS3 วิธีนี้ทำให้คุณสามารถย้ายวัตถุไปรอบๆ ปรับขนาด และอื่นๆ คุณสามารถปรับแต่งคุณสมบัติโดยพิมพ์การเกิด ตามด้วยจุด "." จากนั้นตามด้วยคุณสมบัติ ตามด้วยค่า:

• ศัตรู.x = 150; สิ่งนี้ส่งผลต่อตำแหน่งของวัตถุศัตรูบนแกน X
• ศัตรู.y = 150; สิ่งนี้ส่งผลต่อตำแหน่งของวัตถุศัตรูบนแกน Y แกน Y คำนวณจากด้านบนของฉาก
• ศัตรู.การหมุน = 45; หมุนวัตถุศัตรู 45 องศาตามเข็มนาฬิกา
• ศัตรู.สเกลX = 3; ขยายความกว้างของวัตถุศัตรูคูณ 3 เครื่องหมาย (-) จะพลิกวัตถุ
• ศัตรู.สเกลY = 0.5; เปลี่ยนความสูงของวัตถุเป็นครึ่งหนึ่งของความสูงปัจจุบัน

ขั้นตอนที่ 5. สังเกตคำสั่ง trace()

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

ขั้นตอนที่ 6 สร้างเกมหลักโดยใช้ข้อมูลข้างต้น

ตอนนี้คุณมีความเข้าใจพื้นฐานเกี่ยวกับฟังก์ชันหลักแล้ว คุณสามารถสร้างเกมที่ทุกครั้งที่ศัตรูถูกคลิก ขนาดจะลดลง จนกว่าศัตรูจะถูกทำลาย

ศัตรู HP:จำนวน = 100; // ตั้งค่า HP (พลังชีวิต) ของศัตรูเป็น 100 เมื่อเริ่มเกม var playerAttack:จำนวน=10; // กำหนดจำนวนพลังโจมตีของผู้เล่นเมื่อคลิก ศัตรู.addEventListener (MouseEvent. CLICK โจมตีศัตรู); // โดยการเพิ่มฟังก์ชันนี้ไปยังวัตถุศัตรูโดยตรง // ฟังก์ชันนี้จะเกิดขึ้นเมื่อวัตถุนั้นถูกคลิกเท่านั้น // ไม่ใช่เมื่อคลิกที่ใดก็ได้บนหน้าจอ setEnemyLocation(); // เรียกใช้ฟังก์ชันต่อไปนี้เพื่อวางศัตรู // บนหน้าจอ สิ่งนี้จะเกิดขึ้นเมื่อเกมเริ่ม ฟังก์ชั่น setEnemyLocation (): โมฆะ {ศัตรู.x = 200; // ย้ายศัตรู 200 พิกเซลจากด้านซ้ายของหน้าจอศัตรู.y = 150; // ย้ายศัตรู 150 พิกเซลลงจากด้านบนของหน้าจอศัตรู.rotation = 45; // หมุนตามเข็มนาฬิกาของศัตรู 45 องศา ("ค่า x ของศัตรูคือ", ศัตรู.x, "และค่า y ของศัตรูคือ", ศัตรู.y); // แสดงตำแหน่งปัจจุบันของศัตรูเพื่อค้นหาแหล่งที่มาของข้อผิดพลาด } ฟังก์ชัน attackEnemy (e:MouseEvent):void // สร้างฟังก์ชันการโจมตีเมื่อศัตรูถูกคลิก {ศัตรูHP =ศัตรูHP - playerAttack; // ลบค่าโจมตีออกจากค่า HP // สร้างค่า HP ใหม่ ศัตรู.สเกลX = ศัตรูHP / 100; // เปลี่ยนความกว้างตามค่า HP ใหม่ // ค่าถูกหารด้วย 100 แล้วแปลงเป็นทศนิยม ศัตรู.สเกลY=ศัตรูHP / 100; // เปลี่ยนความสูงตามการติดตามค่า HP ใหม่ ("ศัตรูมี", ศัตรู HP, "HP ที่เหลืออยู่"); // แสดงจำนวน HP ที่ศัตรูเหลืออยู่ }






ขั้นตอนที่ 7 ลองเลย
เมื่อคุณเข้ารหัสแล้ว คุณสามารถทดสอบเกมใหม่นี้ได้ คลิกเมนูควบคุมแล้วเลือกทดสอบภาพยนตร์ เกมเริ่มต้นขึ้น และคุณสามารถคลิกที่วัตถุของศัตรูเพื่อปรับขนาดได้ ผลลัพธ์การติดตามจะแสดงในหน้าต่างผลลัพธ์
ส่วนที่ 3 จาก 3: การเรียนรู้เทคนิคขั้นสูง





ขั้นตอนที่ 1. เรียนรู้วิธีการทำงานของแพ็คเกจ
ActionScript เป็น Java และใช้ระบบแพ็คเกจที่คล้ายกันมาก ด้วยแพ็คเกจ คุณสามารถเก็บตัวแปร ค่าคงที่ ฟังก์ชัน และข้อมูลอื่นๆ ไว้ในไฟล์แยกกัน จากนั้นนำเข้าไฟล์เหล่านี้ไปยังโปรแกรม สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณต้องการใช้แพ็คเกจที่คนอื่นพัฒนามาเพื่อให้สร้างเกมได้ง่ายขึ้น
ค้นหาคำแนะนำใน Wikihow สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของแพ็คเกจใน Java





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

สร้างโฟลเดอร์ฐานสำหรับโครงการของคุณ ในโฟลเดอร์ฐาน ให้สร้างโฟลเดอร์ "img" สำหรับเนื้อหาศิลปะทั้งหมด โฟลเดอร์ "snd" สำหรับเนื้อหาเสียงทั้งหมด และโฟลเดอร์ "src" สำหรับแพ็คเกจเกมและโค้ดทั้งหมด
สร้างโฟลเดอร์ "เกม" ในโฟลเดอร์ "src" เพื่อเก็บไฟล์ค่าคงที่
โครงสร้างเฉพาะนี้ไม่จำเป็น แต่จะช่วยให้จัดระเบียบงานของวัสดุทั้งหมดได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งสำหรับโครงการขนาดใหญ่ สำหรับเกมธรรมดาที่อธิบายข้างต้น คุณไม่จำเป็นต้องสร้างไดเร็กทอรีใดๆ






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





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


หากคุณสร้างไฟล์ Constants ให้วางไว้ในโฟลเดอร์ในโครงการแล้วนำเข้าเป็นแพ็คเกจ สมมติว่าคุณสร้างไฟล์ Constants.as และวางไว้ในโฟลเดอร์เกม หากต้องการนำเข้าให้ใช้รหัสต่อไปนี้:
แพ็คเกจ { นำเข้าเกม.*; }








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