
สารบัญ:
2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12


การสร้างเกมอาจดูค่อนข้างยากลำบาก ไม่ว่าจะเป็นการใช้ความสามัคคีเพื่อสร้างเกม 3 มิติ หรือเกมฮาร์ดโค้ดในภาษาเช่น Java ไม่ว่าจะด้วยวิธีใด คุณต้องการประสบการณ์มากมายเบื้องหลัง ซึ่งอาจไม่สนุกเสมอไปสำหรับคนที่เพิ่งเริ่มต้น ดังนั้นในโปรเจ็กต์นี้ เราจะสร้างเกม platformer ที่ง่ายมาก (เช่น Mario) ตั้งแต่ต้นจนจบ
ขั้นตอนที่ 1: เริ่มต้น


แพลตฟอร์มที่เรากำลังจะสร้างเกมของเราเรียกว่า AppShed เว็บไซต์นี้มีสภาพแวดล้อมการพัฒนาแอปที่ใช้งานง่าย แต่ยังมีเอ็นจิ้นเกม Phaser ที่สร้างขึ้นซึ่งช่วยให้เราสามารถสร้างแอปที่มีเกมสร้างได้!
ในการเริ่มต้น เราจะไปที่ AppShed แล้วคลิกเข้าสู่ระบบ (หากคุณไม่มีบัญชี คุณสามารถลงทะเบียนได้ฟรี) ณ จุดนี้ คุณจะเห็นสองตัวเลือกคือ AppBuilder และ IoTBuilder เนื่องจากเราต้องการสร้างแอปในครั้งนี้ เราจะคลิกที่ AppBuilder (ดูโครงการอื่นๆ ของเราเพื่อดูวิธีใช้ IoTBuilder เพื่อสร้างแอปที่สามารถทำได้ ไฟควบคุม!)
เมื่อคุณอยู่ใน AppBuilder คุณควรได้รับโทรศัพท์จำลอง นี่คือที่ที่เราจะสร้างเกมของเรา เราเริ่มต้นด้วยการคลิกแอปใหม่ที่ด้านล่างของหน้าจอ จากนั้นสร้างแอปใหม่ จากนั้นจึงตั้งชื่อว่า "เกม"
ขั้นตอนที่ 2: เกี่ยวกับ Game Engine

ตอนนี้ ก่อนที่เราจะเจาะลึกลงไปในเกม เรามาลองดูที่เอ็นจิ้นเกมพื้นฐานที่จะช่วยให้เราสร้างเกมได้อย่างง่ายดาย มันเรียกว่า Phaser และทำงานบน HTML 5 และ Javascript ด้วยเหตุนี้จึงทำให้เราสามารถสร้างและเรียกใช้เกมในเว็บเบราว์เซอร์ของเรา
ตอนนี้ ถ้าคุณรู้อะไรเกี่ยวกับ Phaser คุณจะรู้ว่าคุณยังคงต้องรู้วิธีเขียนโค้ดเพื่อใช้งาน ดังนั้นสำหรับมือใหม่ มันไม่เหมาะเลยจริงๆ นี่คือที่มาของ AppShed AppShed ใช้เอ็นจิ้น Phaser และซ้อนทับคุณสมบัติการลากและวาง การแก้ไขที่ง่ายดายช่วยให้เราสร้างเกมโดยไม่ต้องเขียนโค้ดใด ๆ
ขั้นตอนที่ 3: กลับไปที่การสร้างแอป



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




ในขั้นตอนสุดท้าย เราได้เรียนรู้ว่าภาพทั้งหมดบนหน้าจอประกอบกันเป็นโลกในเกม ดังนั้นถ้าเราจะไปแก้ไขสิ่งเหล่านี้ มันจะเปลี่ยนแปลงสิ่งต่างๆ ในเกมของเรา
ดังนั้นเพื่อแก้ไข เราคลิกซ้ายที่สิ่งที่เราต้องการแก้ไข ตัวอย่างเช่น เราต้องการเปลี่ยนตำแหน่งของหนึ่งในแพลตฟอร์ม เราจะทำสิ่งนี้โดยคลิกที่หนึ่งในแพลตฟอร์ม จากนั้นเราคลิกแก้ไข ตอนนี้เราควรเห็นกล่องข้อความที่มีค่ามากมาย เช่น X, Y, width และ hight หากเราต้องการเปลี่ยนตำแหน่งของแท่น เราจะเปลี่ยนค่า X และ Y และถ้าเราต้องการเปลี่ยนขนาด เราจะเปลี่ยนค่าความกว้างและความสูง
ดังนั้นหากต้องการย้ายแพลตฟอร์ม เราเปลี่ยนค่า X เป็น 100 และค่า Y เป็น 70 จากนั้นเราคลิกบันทึกและลองเล่นเกมอีกครั้ง เราควรเห็นว่าเกมดูแตกต่างออกไป เราสามารถเปลี่ยนค่าเหล่านี้ได้ในทุกแง่มุมของเกมเพื่อให้เป็นแบบกำหนดเองมากขึ้น
ขั้นตอนที่ 5: เพิ่มมากขึ้น


ณ จุดนี้ เราได้เรียนรู้วิธีการทำงานของเอ็นจิ้นเกม วิธีเข้าถึงเกมเหล่านี้ และวิธีทำให้เกมกำหนดเองมากขึ้นโดยการปรับขนาดและย้ายสิ่งต่าง ๆ ตอนนี้เราจะมาดูวิธีเพิ่มแพลตฟอร์มและวัตถุเพิ่มเติมให้กับเกมของเรา.
สิ่งแรกที่เราจะทำคือกลับไปที่โมดูลและค้นหาเกมอีกครั้ง ในไฟล์ชื่อ "เกมแพลตฟอร์ม Phaser" คุณจะเห็นตัวเลือกในการเพิ่มแพลตฟอร์มอื่น เราจะคลิกบนไฟล์นี้แล้วคลิกใช้ ตอนนี้คุณควรจะเห็นหน้าจอเกมของคุณมี 3 ท่อ แต่ถ้าเราเปิดเกมจะมองเห็นได้เพียง 2 ท่อ นี่เป็นเพราะว่าท่อ 2 ท่อมีค่า x และ y เหมือนกัน ซึ่งหมายความว่ามันเหลื่อมกัน ในการแก้ไขปัญหานี้ เราเพียงแค่เปลี่ยนค่าใดค่าหนึ่งแล้วจึงสามารถมองเห็นทั้ง 3 ค่าได้
ขั้นตอนที่ 6: รับมันบนโทรศัพท์ของคุณและดำเนินการต่อไป




ดังนั้นตอนนี้เกมของเราพร้อมที่จะเล่นแล้ว เพื่อนำมันเข้าสู่โทรศัพท์ของเรา เราคลิกที่เผยแพร่แล้วตามด้วยการเริ่มต้น เมื่อกระบวนการนี้เสร็จสิ้น เราคลิกที่แชร์แล้วตามด้วยรหัส QR สิ่งนี้จะนำเสนอรหัส QR แก่เราที่เราสามารถสแกนด้วยโทรศัพท์ที่เราวางเกมของเราลงในโทรศัพท์ของเรา เกมโหลดได้ภายในไม่กี่วินาที และตอนนี้เราสามารถเล่นบนโทรศัพท์ของเราได้แล้ว ในการควบคุมตัวละคร คุณสามารถลากนิ้วผ่านหน้าจอหรือเอียงโทรศัพท์ไปในทิศทางที่คุณต้องการย้าย
และเช่นเดียวกับที่เราได้สร้างเกมที่เรียบง่ายและใส่ไว้ในโทรศัพท์ของเรา ตอนนี้ นี่เป็นหนึ่งในเกมที่ง่ายที่สุดที่คุณสามารถสร้างได้ แต่คุณสามารถพัฒนาให้ไกลกว่าเกม platformer ธรรมดาๆ ได้ ลองดูเกม Space Invaders ที่สร้างโดย AppShed ที่นี่
หากคุณมีคำถามใด ๆ โปรดแสดงความคิดเห็นและเราจะติดต่อกลับหาคุณ
แนะนำ:
การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: 5 ขั้นตอน

การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: การตวัดเป็นวิธีง่ายๆ ในการสร้างเกม โดยเฉพาะอย่างยิ่งเกมปริศนา นิยายภาพ หรือเกมผจญภัย
การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: 3 ขั้นตอน

การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: ในคำแนะนำนี้ เราจะทำการตรวจจับใบหน้าบน Raspberry Pi 4 ด้วย Shunya O/S โดยใช้ Shunyaface Library Shunyaface เป็นห้องสมุดจดจำใบหน้า/ตรวจจับใบหน้า โปรเจ็กต์นี้มีจุดมุ่งหมายเพื่อให้เกิดความเร็วในการตรวจจับและจดจำได้เร็วที่สุดด้วย
วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: 3 ขั้นตอน

วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: ในบทช่วยสอนนี้ ฉันจะแสดงขั้นตอนสำคัญในการติดตั้งปลั๊กอิน WordPress ให้กับเว็บไซต์ของคุณ โดยทั่วไป คุณสามารถติดตั้งปลั๊กอินได้สองวิธี วิธีแรกคือผ่าน ftp หรือผ่าน cpanel แต่ฉันจะไม่แสดงมันเพราะมันสอดคล้องกับ
การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): 8 ขั้นตอน

การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): ตัวแปลงสัญญาณเสียงล้ำเสียง L298N Dc ตัวเมียอะแดปเตอร์จ่ายไฟพร้อมขา DC ตัวผู้ Arduino UNOBreadboardวิธีการทำงาน: ก่อนอื่น คุณอัปโหลดรหัสไปยัง Arduino Uno (เป็นไมโครคอนโทรลเลอร์ที่ติดตั้งดิจิตอล และพอร์ตแอนะล็อกเพื่อแปลงรหัส (C++)
เครื่อง Rube Goldberg 11 ขั้นตอน: 8 ขั้นตอน

เครื่อง 11 Step Rube Goldberg: โครงการนี้เป็นเครื่อง 11 Step Rube Goldberg ซึ่งออกแบบมาเพื่อสร้างงานง่ายๆ ในรูปแบบที่ซับซ้อน งานของโครงการนี้คือการจับสบู่ก้อนหนึ่ง