Flash เป็นรูปแบบยอดนิยมสำหรับวิดีโอเกมบนเบราว์เซอร์ที่เห็นในเว็บไซต์ เช่น Newgrounds และ Kongregate แม้ว่ารูปแบบ Flash จะค่อยๆ ถูกใช้งานน้อยลงเมื่อเผชิญกับการเติบโตของแอปบนอุปกรณ์เคลื่อนที่ แต่เกมคุณภาพจำนวนมากยังคงถูกสร้างขึ้นด้วยรูปแบบนี้ Flash ใช้ ActionScript ซึ่งเป็นภาษาที่เรียนรู้ได้ง่ายซึ่งช่วยให้คุณควบคุมวัตถุบนหน้าจอได้ บทความ wikiHow นี้จะสอนวิธีสร้างเกม Flash พื้นฐาน
ขั้นตอน
ส่วนที่ 1 จาก 3: การเริ่มต้นกระบวนการ
ขั้นตอนที่ 1. ออกแบบเกมของคุณ
ก่อนที่คุณจะเริ่มเขียนโค้ด คุณควรมีแนวคิดคร่าวๆ เกี่ยวกับสิ่งที่คุณต้องการให้เกมทำ Flash เหมาะที่สุดสำหรับเกมง่ายๆ ดังนั้นให้เน้นที่การสร้างเกมที่มีกลไกเพียงไม่กี่อย่างเท่านั้นที่ผู้เล่นต้องกังวล พยายามมีประเภทพื้นฐานและกลไกบางอย่างในใจก่อนเริ่มสร้างต้นแบบ ดูคู่มือนี้สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับขั้นตอนการวางแผนการพัฒนาวิดีโอเกม เกม Flash ทั่วไป ได้แก่:
- นักวิ่งที่ไม่มีที่สิ้นสุด: เกมเหล่านี้จะเคลื่อนตัวละครโดยอัตโนมัติ และผู้เล่นมีหน้าที่กระโดดข้ามสิ่งกีดขวางหรือโต้ตอบกับเกม โดยปกติโปรแกรมเล่นจะมีเพียงหนึ่งหรือสองตัวเลือกเท่านั้นเมื่อพูดถึงการควบคุม
- นักสู้: โดยทั่วไปแล้วสิ่งเหล่านี้คือการเลื่อนด้านข้างและมอบหมายให้ผู้เล่นเอาชนะศัตรูให้ก้าวหน้า ตัวละครของผู้เล่นมักจะมีการเคลื่อนไหวหลายอย่างที่พวกเขาสามารถทำได้เพื่อเอาชนะศัตรู
- ปริศนา: เกมเหล่านี้ขอให้ผู้เล่นไขปริศนาเพื่อเอาชนะแต่ละด่าน สิ่งเหล่านี้มีตั้งแต่สไตล์ Match-3 เช่น Bejeweled ไปจนถึงการไขปริศนาที่ซับซ้อนยิ่งขึ้นซึ่งมักพบในเกมผจญภัย
- RPGs: เกมเหล่านี้มุ่งเน้นไปที่การพัฒนาตัวละครและความก้าวหน้า และให้ผู้เล่นเคลื่อนที่ผ่านสภาพแวดล้อมที่หลากหลายด้วยศัตรูหลายประเภท กลไกการต่อสู้แตกต่างกันไปอย่างมากจาก RPG ไปจนถึง RPG แต่หลาย ๆ แบบเป็นแบบผลัดกันเล่น RPG สามารถเขียนโค้ดได้ยากกว่าเกมแอ็คชันทั่วไป
ขั้นตอนที่ 2 เรียนรู้ว่า Flash ทำอะไรได้บ้าง
Flash เหมาะที่สุดสำหรับเกม 2D สามารถสร้างเกม 3 มิติใน Flash ได้ แต่เป็นเกมขั้นสูงและต้องใช้ความรู้ด้านภาษาอย่างมาก เกม Flash ที่ประสบความสำเร็จเกือบทุกเกมเป็นแบบ 2D
เกมแฟลชยังเหมาะที่สุดสำหรับเซสชันที่รวดเร็ว เนื่องจากผู้เล่นเกม Flash ส่วนใหญ่เล่นเมื่อมีเวลาว่างเล็กน้อย เช่น ช่วงพัก ซึ่งหมายถึงช่วงการเล่นเกมปกติ 15 นาทีหรือน้อยกว่า
ขั้นตอนที่ 3 ทำความคุ้นเคยกับภาษา ActionScript3 (AS3)
เกม Flash ได้รับการตั้งโปรแกรมใน AS3 และคุณจะต้องมีความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานจึงจะสามารถสร้างเกมได้สำเร็จ คุณสามารถสร้างเกมง่ายๆ ด้วยความเข้าใจเบื้องต้นเกี่ยวกับวิธีการเขียนโค้ดใน AS3
มีหนังสือหลายเล่มเกี่ยวกับ ActionScript ที่มีจำหน่ายใน Amazon และร้านค้าอื่นๆ พร้อมด้วยบทแนะนำและตัวอย่างออนไลน์จำนวนมาก
ขั้นตอนที่ 4 ดาวน์โหลด Flash Professional
โปรแกรมนี้มีค่าใช้จ่าย แต่เป็นวิธีที่ดีที่สุดในการสร้างโปรแกรม Flash อย่างรวดเร็ว มีตัวเลือกอื่น ๆ รวมถึงตัวเลือกโอเพนซอร์ซ แต่มักจะขาดความเข้ากันได้หรือใช้เวลานานกว่านั้นเพื่อทำงานเดียวกันให้สำเร็จ
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 ในการสร้างเกม คุณจะต้องสร้างวัตถุที่ผู้เล่นจะโต้ตอบด้วย ขึ้นอยู่กับคำแนะนำที่คุณกำลังอ่าน วัตถุอาจเรียกว่าสไปรท์ นักแสดง หรือคลิปภาพยนตร์ สำหรับเกมง่ายๆ นี้ คุณจะต้องสร้างสี่เหลี่ยม
- เปิด Flash Professional หากยังไม่ได้เปิด สร้างโครงการ ActionScript 3 ใหม่
- คลิกเครื่องมือวาดรูปสี่เหลี่ยมผืนผ้าจากแผงเครื่องมือ แผงนี้อาจอยู่ในตำแหน่งที่แตกต่างกันขึ้นอยู่กับการกำหนดค่าของ Flash Professional วาดรูปสี่เหลี่ยมผืนผ้าในหน้าต่างฉากของคุณ
- เลือกสี่เหลี่ยมโดยใช้เครื่องมือ Selection
ขั้นตอนที่ 3 กำหนดคุณสมบัติให้กับวัตถุ
เมื่อเลือกสี่เหลี่ยมผืนผ้าที่สร้างขึ้นใหม่แล้ว ให้เปิดเมนูแก้ไขและเลือก "แปลงเป็นสัญลักษณ์" คุณยังสามารถกด 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 พิกเซลจากด้านบนของหน้าจอศัตรู การหมุน = 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 และใช้ระบบแพ็คเกจที่คล้ายกันมาก แพ็คเกจช่วยให้คุณเก็บตัวแปร ค่าคงที่ ฟังก์ชัน และข้อมูลอื่นๆ ในไฟล์แยกกัน จากนั้นนำเข้าไฟล์เหล่านี้ไปยังโปรแกรมของคุณ สิ่งเหล่านี้มีประโยชน์อย่างยิ่งหากคุณต้องการใช้แพ็คเกจที่คนอื่นพัฒนาขึ้นซึ่งจะทำให้เกมของคุณสร้างได้ง่ายขึ้น
ดูคู่มือนี้สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของแพ็คเกจใน Java
ขั้นตอนที่ 2 สร้างโฟลเดอร์โครงการของคุณ
หากคุณกำลังสร้างเกมที่มีรูปภาพและคลิปเสียงหลายภาพ คุณจะต้องสร้างโครงสร้างโฟลเดอร์สำหรับเกมของคุณ วิธีนี้จะช่วยให้คุณจัดเก็บองค์ประกอบต่างๆ ของคุณได้อย่างง่ายดาย รวมทั้งจัดเก็บแพ็คเกจต่างๆ เพื่อเรียกใช้
- สร้างโฟลเดอร์ฐานสำหรับโครงการของคุณ ในโฟลเดอร์ฐาน คุณควรมีโฟลเดอร์ "img" สำหรับเนื้อหาศิลปะทั้งหมดของคุณ โฟลเดอร์ "snd" สำหรับเนื้อหาเสียงทั้งหมดของคุณ และโฟลเดอร์ "src" สำหรับแพ็คเกจและโค้ดเกมทั้งหมดของคุณ
- สร้างโฟลเดอร์ "เกม" ในโฟลเดอร์ "src" เพื่อเก็บไฟล์ค่าคงที่ของคุณ
- โครงสร้างเฉพาะนี้ไม่จำเป็น แต่เป็นวิธีที่ง่ายในการจัดระเบียบงานและวัสดุของคุณ โดยเฉพาะอย่างยิ่งสำหรับโครงการขนาดใหญ่ สำหรับเกมง่ายๆ ที่อธิบายข้างต้น คุณไม่จำเป็นต้องสร้างไดเร็กทอรีใดๆ
ขั้นตอนที่ 3 เพิ่มเสียงให้กับเกมของคุณ
เกมที่ไม่มีเสียงหรือเพลงจะกลายเป็นเรื่องน่าเบื่อสำหรับผู้เล่นอย่างรวดเร็ว คุณสามารถเพิ่มเสียงให้กับวัตถุใน Flash โดยใช้เครื่องมือเลเยอร์ ดูคู่มือนี้สำหรับรายละเอียดเพิ่มเติม
ขั้นตอนที่ 4 สร้างไฟล์ค่าคงที่
หากเกมของคุณมีค่าจำนวนมากที่ยังคงเหมือนเดิมตลอดทั้งเกม คุณสามารถสร้างไฟล์ค่าคงที่เพื่อจัดเก็บค่าทั้งหมดไว้ในที่เดียวเพื่อให้คุณสามารถเรียกใช้ได้อย่างง่ายดาย ค่าคงที่อาจรวมถึงค่าต่างๆ เช่น แรงโน้มถ่วง ความเร็วของผู้เล่น และค่าอื่นๆ ที่คุณอาจต้องเรียกใช้ซ้ำๆ
-
หากคุณสร้างไฟล์ Constants ไฟล์นั้นจะต้องอยู่ในโฟลเดอร์ในโปรเจ็กต์ของคุณ จากนั้นจึงนำเข้าเป็นแพ็คเกจ ตัวอย่างเช่น สมมติว่าคุณสร้างไฟล์ Constants.as และวางไว้ในไดเร็กทอรีเกมของคุณ ในการนำเข้า คุณจะต้องใช้รหัสต่อไปนี้:
แพ็คเกจ { นำเข้าเกม.*; }
ขั้นตอนที่ 5. ดูเกมของคนอื่น
แม้ว่านักพัฒนาหลายคนจะไม่เปิดเผยรหัสสำหรับเกมของพวกเขา แต่ก็มีบทแนะนำโปรเจ็กต์ที่หลากหลายและโปรเจ็กต์เปิดอื่นๆ ที่จะช่วยให้คุณเห็นโค้ดและวิธีที่โค้ดดังกล่าวโต้ตอบกับอ็อบเจกต์ของเกม นี่เป็นวิธีที่ยอดเยี่ยมในการเรียนรู้เทคนิคขั้นสูงที่ช่วยให้เกมของคุณโดดเด่น
