เริ่มต้นใช้งาน Phaser สำหรับการพัฒนาเกม

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

Phaser ช่วยลดเวลาในการพัฒนาและลดขั้นตอนการทำงาน มาเรียนรู้วิธีสร้างเกมพื้นฐานกับ Phaser กันเถอะ

---

---

ทำไมต้องพัฒนาด้วย Phaser?

Phaser คล้ายกับภาษาการเขียนโปรแกรมเชิงภาพอื่น ๆ โดยที่โปรแกรมนั้นใช้การอัพเดทแบบวนซ้ำ Phaser มีสามขั้นตอนหลัก: โหลดล่วงหน้า สร้าง และอัปเดต

ในการโหลดล่วงหน้า เนื้อหาของเกมจะถูกอัปโหลดและทำให้พร้อมใช้งานกับเกม

สร้างการเริ่มต้นเกมและองค์ประกอบเกมเริ่มต้นทั้งหมด แต่ละฟังก์ชันจะทำงานเพียงครั้งเดียวเมื่อเริ่มเกม

ในทางกลับกัน การอัปเดตจะทำงานแบบวนซ้ำตลอดทั้งเกม เป็นเกมที่ปรับปรุงองค์ประกอบของเกมเพื่อให้เป็นแบบโต้ตอบ

ตั้งค่าระบบของคุณสำหรับการพัฒนาเกมด้วย Phaser

แม้ว่า Phaser นั้นจะรันบน HTML และ JavaScript แต่เกมนั้นรันบนฝั่งเซิร์ฟเวอร์ ไม่ใช่ฝั่งไคลเอนต์ ซึ่งหมายความว่าคุณจะต้องเปิดเกมของคุณบน localhost ของคุณ . การเรียกใช้ฝั่งเซิร์ฟเวอร์เกมทำให้เกมของคุณสามารถเข้าถึงไฟล์และทรัพย์สินเพิ่มเติมนอกโปรแกรมได้ ฉันแนะนำ ใช้ XAMPP เพื่อตั้งค่า localhost หากคุณยังไม่มีการตั้งค่า

---

---

รหัสด้านล่างจะช่วยให้คุณเริ่มต้นใช้งานได้ มันตั้งค่าสภาพแวดล้อมของเกมพื้นฐาน







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}




ในการรัน เกมจะต้องใช้อิมเมจ PNG ชื่อ 'gamePiece' ที่บันทึกไว้ในโฟลเดอร์ 'img' บนโฮสต์ท้องถิ่นของคุณ เพื่อความง่าย ตัวอย่างนี้ใช้สี่เหลี่ยมสีส้มขนาด 60xgame de60px เกมของคุณควรมีลักษณะดังนี้:

---

---

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

อธิบายรหัสการติดตั้ง

จนถึงตอนนี้เกมไม่ได้ทำอะไรเลย แต่เราได้ครอบคลุมพื้นที่มากแล้ว! มาดูโค้ดแบบเจาะลึกกันดีกว่า

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

วิธีใช้ numpad บนแล็ปท็อปโดยไม่ต้อง numlock

โค้ดส่วนใหญ่กำหนดค่าสภาพแวดล้อมของเกมซึ่งตัวแปร config ร้านค้า ในตัวอย่างของเรา เรากำลังตั้งค่าเกม phaser ด้วยพื้นหลังสีน้ำเงิน (CCFFFF ในรหัสสีฐานสิบหก) ที่มีขนาด 600px x 600px สำหรับตอนนี้ฟิสิกส์ของเกมได้ถูกตั้งค่าเป็น อาร์เคเดียน แต่ Phaser เสนอฟิสิกส์ที่แตกต่างกัน

ในที่สุด, ฉาก บอกให้โปรแกรมรัน the พรีโหลด ก่อนเริ่มเกมและ สร้าง ฟังก์ชั่นเพื่อเริ่มเกม ข้อมูลทั้งหมดนี้ถูกส่งไปยังวัตถุเกมที่เรียกว่า เกม .

ที่เกี่ยวข้อง: แล็ปท็อปที่ดีที่สุด 6 รุ่นสำหรับการเขียนโปรแกรมและการเข้ารหัส

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

เพิ่มรูปภาพ gamePiece ลงในเกมในฟังก์ชันสร้าง บรรทัดที่ 29 บอกว่าเรากำลังเพิ่มรูปภาพ gamePiece เป็นสไปรท์ 270px ทางซ้ายและ 450px ลงจากมุมบนซ้ายของพื้นที่เกมของเรา

ทำให้ชิ้นส่วนเกมของเราเคลื่อนไหว

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

การเพิ่มฟังก์ชั่นการอัพเดท

ฉากใหม่ในการกำหนดค่า:

scene: {
preload: preload,
create: create,
update: update
}

ถัดไป เพิ่มฟังก์ชันอัปเดตด้านล่างฟังก์ชันสร้าง:

ไม่สามารถเชื่อมต่ออินเทอร์เน็ต windows 7

function update(){
}

รับคีย์อินพุต

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

var gamePiece;
var keyInputs;

ตัวแปร keyInput ควรเริ่มต้นเมื่อสร้างเกมในฟังก์ชันสร้าง

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

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

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

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

การเพิ่มอุปสรรคให้กับเกม

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

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

จากนั้นสไปรท์สิ่งกีดขวางแต่ละตัวจะต้องเริ่มต้นในฟังก์ชันการสร้าง เช่นเดียวกับเกมพีซ

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

ก้าวข้ามอุปสรรค

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

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

รหัสด้านบนจะย้ายสิ่งกีดขวาง 1 ลงบนหน้าจอและอุปสรรค 2 ข้ามพื้นที่เกม 4px ในแต่ละเฟรม เมื่อสี่เหลี่ยมจัตุรัสออกจากหน้าจอ สี่เหลี่ยมจัตุรัสจะถูกย้ายกลับไปที่ด้านตรงข้ามที่จุดสุ่มใหม่ เพื่อให้แน่ใจว่ามีอุปสรรคใหม่สำหรับผู้เล่นอยู่เสมอ

การตรวจจับการชน

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

ห้องสมุดฟิสิกส์ Phaser มีเครื่องตรวจจับการชนกัน สิ่งที่เราต้องทำคือเริ่มต้นในฟังก์ชันสร้าง

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

วิธีการ collider ต้องการสามพารามิเตอร์ พารามิเตอร์สองตัวแรกระบุว่าวัตถุใดชนกัน ข้างต้น เรามีเครื่องชนกันสองตัวที่ตั้งค่าไว้ ครั้งแรกตรวจพบเมื่อ gamepiece ชนกับอุปสรรค 1 และผู้ชนที่สองกำลังมองหาการชนกันระหว่าง gamepiece กับสิ่งกีดขวาง2

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

ลองพัฒนาเกมด้วย Phaser

มีหลายวิธีที่เกมนี้สามารถปรับปรุงและทำให้ซับซ้อนมากขึ้นได้ เราได้สร้างผู้เล่นเพียงคนเดียว แต่สามารถเพิ่มและควบคุมตัวละครที่เล่นได้ตัวที่สองด้วยการควบคุม 'awsd' ในทำนองเดียวกัน คุณสามารถทดลองเพิ่มสิ่งกีดขวางและปรับเปลี่ยนความเร็วของการเคลื่อนที่ได้

วิธีสร้างกรอบรูปโปรไฟล์เฟสบุ๊ค

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

หากคุณพบข้อผิดพลาด โปรแกรมแก้ไขข้อบกพร่องของเบราว์เซอร์เป็นวิธีที่ยอดเยี่ยมในการค้นหาปัญหา

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีใช้ Chrome DevTools เพื่อแก้ไขปัญหาเว็บไซต์

เรียนรู้วิธีใช้เครื่องมือพัฒนาในตัวของเบราว์เซอร์ Chrome เพื่อปรับปรุงเว็บไซต์ของคุณ

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• JavaScript
• HTML5
• การพัฒนาเกม

เกี่ยวกับผู้เขียน เจนนิเฟอร์ ซีตัน(21 บทความที่ตีพิมพ์)

J. Seaton เป็นนักเขียนวิทยาศาสตร์ที่เชี่ยวชาญในการแบ่งหัวข้อที่ซับซ้อน เธอสำเร็จการศึกษาระดับปริญญาเอกจากมหาวิทยาลัยซัสแคตเชวัน งานวิจัยของเธอมุ่งเน้นไปที่การใช้การเรียนรู้จากเกมเพื่อเพิ่มการมีส่วนร่วมของนักเรียนทางออนไลน์ เมื่อเธอไม่ได้ทำงาน คุณจะพบเธอด้วยการอ่านหนังสือ เล่นวิดีโอเกม หรือทำสวน

เพิ่มเติมจาก Jennifer Seaton

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก