Bermula dengan Phaser Untuk Pembangunan Permainan

Bermula dengan Phaser Untuk Pembangunan Permainan

Phaser adalah rangka kerja untuk membuat permainan video 2D. Menggunakan HTML5 Canvas untuk menampilkan permainan dan JavaScript untuk menjalankan permainan. Manfaat menggunakan Phaser over vanilla JavaScript adalah memiliki perpustakaan yang luas yang melengkapkan banyak fizik permainan video yang membolehkan anda menumpukan perhatian dalam merancang permainan itu sendiri.





Phaser mengurangkan masa pengembangan dan mengurangkan aliran kerja. Mari belajar bagaimana membuat permainan asas dengan Phaser.



Mengapa Membangunkan Dengan Phaser?

Phaser sama dengan bahasa pengaturcaraan visual lain kerana program ini berdasarkan kemas kini yang dilingkari. Phaser mempunyai tiga peringkat utama: pramuat, membuat, dan mengemas kini.





Dalam pramuat, aset permainan dimuat naik dan disediakan untuk permainan.

Buat memulakan permainan dan semua elemen permainan permulaan. Setiap fungsi dijalankan sekali semasa permainan dimulakan.



Kemas kini, sebaliknya, berjalan dengan lancar sepanjang permainan. Tenaga kerja inilah yang mengemas kini elemen permainan untuk menjadikannya interaktif.

Siapkan Sistem Anda untuk Membangunkan Permainan Dengan Phaser

Walaupun Phaser berjalan pada HTML dan JavaScript, permainan tersebut sebenarnya dijalankan di sisi pelayan, bukan di sisi pelanggan. Ini bermaksud bahawa anda perlu menjalankan permainan anda localhost anda . Menjalankan permainan di sisi pelayan membolehkan permainan anda mengakses fail dan aset tambahan di luar program. Saya cadangkan menggunakan XAMPP untuk menubuhkan localhost jika anda belum mempunyai satu persediaan.



Kod di bawah akan membuat anda mula beroperasi. Ini menetapkan persekitaran permainan asas.







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');
}


Untuk berjalan, permainan akan memerlukan gambar PNG yang disebut 'gamePiece' yang disimpan ke folder 'img' di localhost anda. Untuk kesederhanaan, contoh ini menggunakan kotak oren 60xgame de60px. Permainan anda akan kelihatan seperti ini:



Sekiranya anda menghadapi masalah, gunakan penyahpepijat penyemak imbas anda untuk mengetahui apa yang salah. Hilang walaupun satu watak boleh menyebabkan kekacauan, tetapi secara amnya, penyahpepijat anda akan menangkap kesilapan kecil itu.

Menjelaskan Kod Persediaan

Setakat ini, permainan ini tidak menghasilkan apa-apa. Tetapi kita sudah banyak membuat liputan! Mari lihat kodnya dengan lebih mendalam.

Untuk permainan Phaser dijalankan, anda perlu mengimport perpustakaan Phaser. Kami melakukan ini pada baris 3. Dalam contoh ini, kami memaut ke kod sumber, tetapi anda boleh memuat turunnya ke hos tempatan anda dan merujuk failnya juga.

perisian lenovo apa yang boleh saya alih keluar

Sebilangan besar kod setakat ini mengkonfigurasi persekitaran permainan, yang mana pemboleh ubahnya konfigurasi kedai. Dalam contoh kami, kami menyediakan permainan phaser dengan latar belakang biru (CCFFFF dalam kod warna hex) yang berukuran 600 piksel hingga 600 piksel. Buat masa ini, fizik permainan telah ditetapkan Arcadian , tetapi Phaser menawarkan fizik yang berbeza.

Akhirnya, pemandangan memberitahu program untuk menjalankan pramuat berfungsi sebelum permainan dimulakan dan buat berfungsi untuk memulakan permainan. Semua maklumat ini dihantar ke objek permainan yang dipanggil permainan .

Berkaitan: 6 Laptop Terbaik untuk Pengaturcaraan dan Pengekodan

Bahagian kod seterusnya adalah di mana permainan benar-benar terbentuk. Fungsi pramuat adalah di mana anda ingin memulakan apa sahaja yang anda perlukan untuk menjalankan permainan anda. Dalam kes kami, kami telah memuatkan gambar bahagian permainan kami terlebih dahulu. Parameter pertama bagi .imej namakan gambar kami dan yang kedua memberitahu program di mana untuk mencari gambar.

Gambar gamePiece ditambahkan ke permainan dalam fungsi create. Baris 29 mengatakan bahawa kami menambahkan permainan gambarPiece sebagai sprite 270px kiri dan 450px ke bawah dari sudut kiri atas kawasan permainan kami.

Membuat Piece Permainan Kami Bergerak

Setakat ini, ini hampir tidak boleh disebut permainan. Untuk satu perkara, kita tidak boleh menggerakkan bahagian permainan kita. Untuk dapat mengubah sesuatu dalam permainan kita, kita harus menambahkan fungsi kemas kini. Kita juga harus menyesuaikan adegan dalam variabel konfigurasi untuk memberitahu permainan yang berfungsi untuk berjalan ketika kita mengemas kini permainan.

Menambah Fungsi Kemas Kini

Adegan baru dalam konfigurasi:

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

Seterusnya, tambahkan fungsi kemas kini di bawah fungsi buat:

cari kata laluan wifi di android
function update(){
}

Mendapatkan Input Utama

Untuk membiarkan pemain mengawal bahagian permainan dengan kekunci anak panah, kita harus menambahkan pemboleh ubah untuk mengesan kunci mana yang ditekan oleh pemain. Menyatakan pemboleh ubah yang disebut keyInput di bawah di mana kita menyatakan gamePieces. Menyatakannya akan membiarkan semua fungsi mengakses pemboleh ubah baru.

var gamePiece;
var keyInputs;

Pemboleh ubah keyInput harus diinisialisasi ketika permainan dibuat dalam fungsi create.

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

Sekarang dalam fungsi kemas kini, kita dapat memeriksa apakah pemain menekan tombol panah, dan jika ada, gerakkan potongan permainan kita dengan sewajarnya. Dalam contoh di bawah, bahagian permainan dipindahkan 2px, tetapi anda boleh menjadikannya bilangan yang lebih besar atau lebih kecil. Menggerakkan sekeping 1px pada satu masa kelihatan agak perlahan.

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;
}
}

Permainan ini mempunyai watak yang boleh bergerak sekarang! Tetapi untuk benar-benar menjadi permainan, kita memerlukan objektif. Mari tambahkan beberapa halangan. Menghalang rintangan adalah asas bagi banyak permainan di era 8-bit.

Menambah Halangan Dalam Permainan

Contoh kod ini menggunakan dua sprite halangan yang disebut halangan1 dan halangan 2. halangan1 adalah kotak biru dan halangan2 berwarna hijau. Setiap gambar perlu dimuat lebih awal seperti permainan sprite.

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

Kemudian setiap sprite rintangan perlu diinisialisasi dalam fungsi membuat, seperti permainan.

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');
}

Membuat Halangan Bergerak

Untuk menggerakkan potongan kali ini, kami tidak mahu menggunakan input pemain. Sebagai gantinya, mari kita bergerak satu bahagian dari atas ke bawah dan yang lain bergerak ke kiri ke kanan. Untuk melakukan itu, tambahkan kod berikut ke fungsi kemas kini:

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);
}

Kod di atas akan menggerakkan halangan1 ke bawah layar dan halangan2 melintasi kawasan permainan 4px setiap bingkai. Setelah petak di luar skrin, ia dipindahkan kembali ke seberang di tempat rawak baru. Ini akan memastikan bahawa selalu ada halangan baru untuk pemain.

Mengesan Perlanggaran

Tetapi kita belum selesai. Anda mungkin menyedari bahawa pemain kami dapat melewati halangan. Kita perlu membuat permainan mengesan ketika pemain mengalami halangan dan mengakhiri permainan.

Perpustakaan fizik Phaser mempunyai alat pengesan collider. Yang perlu kita lakukan adalah menginisialisasi dalam fungsi buat.

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();
});

Kaedah collider memerlukan tiga parameter. Dua parameter pertama mengenal pasti objek mana yang bertembung. Jadi di atas, kami menyediakan dua collider. Yang pertama mengesan ketika gamepiece bertembung dengan halangan1 dan collider kedua mencari perlanggaran antara gamepiece dan halangan2.

Parameter ketiga memberitahu collider apa yang harus dilakukan sebaik sahaja mengesan perlanggaran. Dalam contoh ini, terdapat fungsi. Sekiranya berlaku perlanggaran, semua elemen permainan musnah; ini menghentikan permainan. Sekarang pemain akan melakukan permainan jika mereka mengalami halangan.

Cubalah Pengembangan Permainan dengan Phaser

Terdapat banyak cara yang berbeza agar permainan ini dapat diperbaiki dan dibuat lebih kompleks. Kami hanya membuat satu pemain, tetapi watak dimainkan kedua dapat ditambahkan dan dikendalikan dengan kawalan 'awsd'. Begitu juga, anda boleh bereksperimen dengan menambahkan lebih banyak halangan dan mengubah kelajuan pergerakan mereka.

240 pin vs ram 288 pin

Pengenalan ini akan memulakan anda, tetapi masih ada banyak lagi yang perlu anda pelajari. Perkara yang hebat mengenai Phaser ialah banyak permainan fizik dilakukan untuk anda. Ini adalah kaedah mudah yang baik untuk memulakan merancang permainan 2D. Terus membina kod ini dan perbaiki permainan anda.

Sekiranya anda menghadapi sebarang kesilapan, penyahpepijat penyemak imbas anda adalah kaedah terbaik untuk mengetahui masalahnya.

Berkongsi Berkongsi Tweet E-mel Cara Menggunakan Chrome DevTools untuk Menyelesaikan Masalah Laman Web

Pelajari cara menggunakan alat pengembangan bawaan penyemak imbas Chrome untuk meningkatkan laman web anda.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • JavaScript
  • HTML5
  • Pembangunan Permainan
Mengenai Pengarang Jennifer Seaton(21 Artikel Diterbitkan)

J. Seaton adalah Penulis Sains yang pakar dalam menguraikan topik yang kompleks. Dia mempunyai PhD dari University of Saskatchewan; penyelidikannya tertumpu pada penggunaan pembelajaran berasaskan permainan untuk meningkatkan penglibatan pelajar dalam talian. Apabila dia tidak bekerja, anda akan mendapati dia membaca, bermain permainan video, atau berkebun.

Lagi Dari Jennifer Seaton

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan