Memulai Dengan Phaser Untuk Pengembangan Game

Phaser adalah kerangka kerja untuk membuat gim video 2D. Ini menggunakan Canvas HTML5 untuk menampilkan game dan JavaScript untuk menjalankan game. Manfaat menggunakan Phaser daripada vanilla JavaScript adalah memiliki pustaka yang luas yang melengkapi sebagian besar fisika gim video yang memungkinkan Anda berkonsentrasi merancang gim itu sendiri.

Phaser mengurangi waktu pengembangan dan memudahkan alur kerja. Mari pelajari cara membuat game dasar dengan Phaser.

Mengapa Berkembang Dengan Phaser?

Phaser mirip dengan bahasa pemrograman visual lainnya karena program ini didasarkan pada pembaruan berulang. Phaser memiliki tiga tahapan utama: preload, create, dan update.

Dalam pramuat, aset game diunggah dan tersedia untuk game.

Buat menginisialisasi game dan semua elemen game awal. Masing-masing fungsi tersebut dijalankan satu kali saat game dimulai.

Pembaruan, di sisi lain, berjalan dalam satu putaran sepanjang game. Ini adalah pekerja keras yang memperbarui elemen-elemen permainan agar menjadi interaktif.

Siapkan Sistem Anda untuk Mengembangkan Game Dengan Phaser

Meskipun Phaser berjalan pada HTML dan JavaScript, permainan sebenarnya dijalankan pada sisi server, bukan sisi klien. Ini berarti Anda harus menjalankan game Anda localhost Anda. Menjalankan sisi server game memungkinkan game Anda mengakses file dan aset tambahan di luar program. saya merekomendasi menggunakan XAMPP untuk menyiapkan localhost jika Anda belum memiliki satu pengaturan.

Apa itu 127.0 0.1, Localhost, atau Alamat Loopback?

Anda pernah melihat "localhost" di komputer Anda, tapi apa itu? Apa arti dari alamat 127.0.0.1? Apakah Anda pernah diretas?

Kode di bawah ini akan membuat Anda aktif dan berjalan. Ini mengatur lingkungan permainan dasar.

Untuk menjalankannya, game akan membutuhkan gambar PNG bernama "gamePiece" yang disimpan ke folder "img" di localhost Anda. Untuk mempermudah, contoh ini menggunakan persegi oranye 60xgame de60px. Game Anda akan terlihat seperti ini:

Jika Anda mengalami masalah, gunakan debugger browser Anda untuk mencari tahu apa yang salah. Kehilangan satu karakter pun dapat menyebabkan malapetaka, tetapi umumnya, debugger Anda akan menemukan kesalahan kecil tersebut.

Menjelaskan Kode Pengaturan

Sejauh ini, game tersebut tidak melakukan apa-apa. Tapi kita sudah membahas banyak hal! Mari kita lihat kodenya lebih dalam.

Untuk menjalankan game Phaser, Anda perlu mengimpor library Phaser. Kami melakukan ini di baris 3. Dalam contoh ini, kami menautkan ke kode sumber, tetapi Anda dapat mengunduhnya ke host lokal Anda dan mereferensikan file juga.

Sebagian besar kode sejauh ini mengonfigurasi lingkungan game, yaitu variabel config toko. Dalam contoh kami, kami menyiapkan game phaser dengan latar belakang biru (CCFFFF dalam kode warna hex) yaitu 600px kali 600px. Untuk saat ini, fisika permainan telah disetel ke arcade, tetapi Phaser menawarkan fisika yang berbeda.

Akhirnya, tempat kejadian memberi tahu program untuk menjalankan pramuat berfungsi sebelum permainan dimulai dan membuat berfungsi untuk memulai permainan. Semua informasi ini diteruskan ke objek game yang dipanggil permainan.

Terkait: 6 Laptop Terbaik untuk Pemrograman dan Pengkodean

Bagian selanjutnya dari kode adalah tempat permainan benar-benar terbentuk. Fungsi pramuat adalah tempat Anda ingin menginisialisasi apa pun yang Anda perlukan untuk menjalankan game Anda. Dalam kasus kami, kami telah memuat gambar potongan game kami sebelumnya. Parameter pertama dari .gambar memberi nama gambar kami dan yang kedua memberi tahu program di mana menemukan gambar.

Gambar gamePiece telah ditambahkan ke game di fungsi buat. Baris 29 mengatakan bahwa kami menambahkan gambar gamePiece sebagai sprite 270px kiri dan 450px bawah dari pojok kiri atas area permainan kami.

Membuat Game Piece Bergerak

Sejauh ini, ini hampir tidak bisa disebut permainan. Untuk satu hal, kita tidak bisa memindahkan bidak permainan kita. Untuk dapat mengubah banyak hal dalam game kami, kami harus menambahkan fungsi pembaruan. Kita juga harus menyesuaikan adegan di variabel config untuk memberi tahu game mana yang berfungsi untuk dijalankan saat kita mengupdate game.

Menambahkan Fungsi Pembaruan

Adegan baru dalam konfigurasi:

tempat kejadian: {
preload: preload,
buat: buat,
update: update
}

Selanjutnya, tambahkan fungsi pembaruan di bawah fungsi buat:

pembaruan fungsi () {
}

Mendapatkan Input Kunci

Untuk membiarkan pemain mengontrol bagian permainan dengan tombol panah, kita harus menambahkan variabel untuk melacak tombol mana yang ditekan pemain. Deklarasikan variabel bernama keyInputs di bawah tempat kami mendeklarasikan gamePieces. Mendeklarasikannya di sana akan membiarkan semua fungsi mengakses variabel baru.

var gamePiece;
var keyInputs;

Variabel keyInput harus diinisialisasi saat game dibuat di fungsi create.

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

Sekarang dalam fungsi pembaruan, kita dapat memeriksa apakah pemain menekan tombol panah, dan jika ya, pindahkan bagian permainan kita sesuai. Pada contoh di bawah, potongan permainan dipindahkan 2px, tetapi Anda dapat membuatnya menjadi angka yang lebih besar atau lebih kecil. Memindahkan potongan 1 piksel pada satu waktu tampak agak lambat.

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

Gim ini memiliki karakter yang bisa dipindahkan sekarang! Tetapi untuk benar-benar menjadi sebuah permainan, kami membutuhkan tujuan. Mari tambahkan beberapa kendala. Menghindari rintangan adalah dasar dari banyak game di era 8-bit.

Menambahkan Hambatan ke Game

Contoh kode ini menggunakan dua sprite rintangan yang disebut rintangan1 dan rintangan 2. halangan1 berbentuk kotak biru dan halangan2 berwarna hijau. Setiap gambar harus dimuat sebelumnya seperti sprite gamepiece.

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 kendala perlu diinisialisasi dalam fungsi buat, seperti gamepiece.

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 Hambatan Bergerak

Untuk memindahkan bidak kali ini, kami tidak ingin menggunakan input pemain. Sebagai gantinya, mari kita buat satu bagian bergerak dari atas ke bawah dan yang lainnya bergerak dari kiri ke kanan. Untuk melakukan itu, tambahkan kode berikut ke fungsi pembaruan:

rintangan1.y = rintangan1.y + 4;
if (obstacle1.y> 600) {
obstacle1.y = 0;
obstacle1.x = Phaser. Matematika. Antara (0, 600);
}
obstacle2.x = obstacle2.x + 4;
jika (obstacle2.x> 600) {
obstacle2.x = 0;
obstacle2.y = Phaser. Matematika. Antara (0, 600);
}

Kode di atas akan memindahkan obstacle1 ke bawah layar dan obstacle2 melintasi area game 4px setiap frame. Setelah kotak tidak terlihat, kotak tersebut dipindahkan kembali ke sisi yang berlawanan di tempat acak yang baru. Ini akan memastikan bahwa selalu ada kendala baru bagi pemain.

Mendeteksi Tabrakan

Tapi kami belum selesai. Anda mungkin telah memperhatikan bahwa pemain kami dapat melewati rintangan tersebut. Kita perlu membuat game mendeteksi saat pemain menabrak rintangan dan mengakhiri game.

Perpustakaan fisika Phaser memiliki detektor tabrakan. Yang perlu kita lakukan adalah menginisialisasinya di fungsi create.

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

Metode collider membutuhkan tiga parameter. Dua parameter pertama mengidentifikasi objek mana yang bertabrakan. Jadi di atas, kami memiliki dua colliders yang disiapkan. Deteksi pertama saat gamepiece bertabrakan dengan obstacle1 dan collider kedua mencari tabrakan antara gamepiece dan obstacle2.

Parameter ketiga memberi tahu collider apa yang harus dilakukan setelah mendeteksi tabrakan. Dalam contoh ini, ada sebuah fungsi. Jika ada tabrakan, semua elemen game dihancurkan; ini menghentikan permainan. Sekarang pemain akan bermain game jika mereka menabrak rintangan.

Cobalah Pengembangan Game dengan Phaser

Ada banyak cara berbeda agar game ini dapat ditingkatkan dan dibuat lebih kompleks. Kami hanya membuat satu pemain, tetapi karakter kedua yang dapat dimainkan dapat ditambahkan dan dikontrol dengan kontrol "awsd". Demikian pula, Anda dapat bereksperimen dengan menambahkan lebih banyak rintangan dan memvariasikan kecepatan gerakannya.

Pendahuluan ini akan membantu Anda memulai, tetapi masih banyak lagi yang harus dipelajari. Hal yang hebat tentang Phaser adalah banyak fisika game yang dibuat untuk Anda. Ini adalah cara mudah yang bagus untuk mulai mendesain game 2D. Teruslah membangun kode ini dan menyempurnakan game Anda.

Jika Anda mengalami kesalahan apa pun, debugger browser Anda adalah cara terbaik untuk menemukan masalah tersebut.

Cara Menggunakan Chrome DevTools untuk Memecahkan Masalah Situs Web

Pelajari cara menggunakan alat pengembangan yang ada di dalam browser Chrome untuk meningkatkan situs web Anda.

Tentang Penulis