Memulai Dengan Phaser Untuk Pengembangan Game

Phaser adalah framework untuk membuat video game 2D. Ini menggunakan HTML5 Canvas untuk menampilkan game dan JavaScript untuk menjalankan game. Manfaat menggunakan Phaser dibandingkan vanilla JavaScript adalah memiliki perpustakaan yang luas yang melengkapi sebagian besar fisika video game yang memungkinkan Anda untuk berkonsentrasi merancang game 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.

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

Pembaruan, di sisi lain, berjalan dalam satu lingkaran sepanjang permainan. Ini adalah pekerja keras yang memperbarui elemen permainan untuk membuatnya interaktif.

Siapkan Sistem Anda untuk Mengembangkan Game Dengan Phaser

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

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

  
  
  
  
  
  
 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 menjalankan, game akan membutuhkan gambar PNG yang disebut 'gamePiece' yang disimpan ke folder 'img' di localhost Anda. Untuk mempermudah, contoh ini menggunakan kotak 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 kekacauan, tetapi umumnya, debugger Anda akan menangkap kesalahan kecil itu.

Menjelaskan Kode Pengaturan

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

Untuk menjalankan game Phaser, Anda perlu mengimpor perpustakaan Phaser. Kami melakukan ini pada baris 3. Dalam contoh ini, kami menautkan ke kode sumber, tetapi Anda dapat mengunduhnya ke localhost Anda dan mereferensikan file tersebut juga.

cara mematikan layar laptop tanpa sleep

Sebagian besar kode sejauh ini mengonfigurasi lingkungan game, yang variabelnya konfigurasi 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 game telah diatur ke Arkadian , tetapi Phaser menawarkan fisika yang berbeda.

Akhirnya, pemandangan memberitahu program untuk menjalankan pramuat berfungsi sebelum permainan dimulai dan membuat berfungsi untuk memulai permainan. Semua informasi ini diteruskan ke objek game yang disebut permainan .

Terkait: 6 Laptop Terbaik untuk Pemrograman dan Coding

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

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

Membuat Game Piece Kami Bergerak

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

Menambahkan Fungsi Pembaruan

Adegan baru dalam konfigurasi:

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

Selanjutnya, tambahkan fungsi pembaruan di bawah fungsi buat:

mengapa saya memiliki 100 penggunaan disk?

function update(){  
}

Mendapatkan Masukan Kunci

Untuk membiarkan pemain mengontrol bagian permainan dengan tombol panah, kita harus menambahkan variabel untuk melacak tombol mana yang ditekan pemain. Deklarasikan variabel yang disebut keyInputs di bawah ini 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 dalam 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 dengan itu. Pada contoh di bawah, potongan game dipindahkan 2px, tetapi Anda dapat membuatnya menjadi angka yang lebih besar atau lebih kecil. Memindahkan potongan 1px pada satu waktu tampak agak lambat.

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

Gim ini memiliki karakter yang dapat dipindahkan sekarang! Tetapi untuk benar-benar menjadi sebuah permainan, kita membutuhkan tujuan. Mari kita tambahkan beberapa rintangan. 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. rintangan1 adalah kotak biru dan rintangan2 berwarna hijau. Setiap gambar perlu 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 rintangan perlu diinisialisasi dalam fungsi create, seperti halnya 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 satu bagian bergerak dari atas ke bawah dan yang lainnya bergerak dari kiri ke kanan. Untuk melakukannya, tambahkan kode berikut ke fungsi pembaruan:

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

Kode di atas akan memindahkan rintangan1 ke bawah layar dan rintangan2 melintasi area permainan 4px setiap bingkai. Setelah kotak di luar layar, ia dipindahkan kembali ke sisi yang berlawanan di tempat acak baru. Ini akan memastikan bahwa selalu ada kendala baru bagi pemain.

Mendeteksi Tabrakan

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

Pustaka fisika Phaser memiliki detektor penumbuk. 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 tumpatan yang disiapkan. Yang pertama mendeteksi saat gamepiece bertabrakan dengan halangan1 dan yang kedua mencari tabrakan antara gamepiece dan rintangan2.

Parameter ketiga memberi tahu Collider apa yang harus dilakukan setelah mendeteksi tabrakan. Dalam contoh ini, ada fungsi. Jika ada tabrakan, semua elemen game hancur; ini menghentikan permainan. Sekarang pemain akan melakukan gameover 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.

cara berhenti berlangganan kindle unlimited

Pengenalan ini akan membantu Anda memulai, tetapi masih banyak lagi yang harus dipelajari. Hal hebat tentang Phaser adalah banyak fisika permainan yang dilakukan untuk Anda. Ini adalah cara mudah yang bagus untuk mulai mendesain game 2D. Terus kembangkan kode ini dan sempurnakan game Anda.

Jika Anda mengalami kesalahan, debugger browser Anda adalah cara yang bagus untuk menemukan masalah tersebut.

Membagikan Membagikan Menciak Surel Cara Menggunakan Chrome DevTools untuk Memecahkan Masalah Situs Web

Pelajari cara menggunakan alat pengembangan bawaan browser Chrome untuk meningkatkan situs web Anda.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
JavaScript
HTML5
Pengembangan Game

Tentang Penulis Jennifer Seaton(21 Artikel Diterbitkan)

J. Seaton adalah Penulis Sains yang mengkhususkan diri dalam memecahkan topik yang kompleks. Dia memiliki gelar PhD dari Universitas Saskatchewan; penelitiannya berfokus pada pemanfaatan pembelajaran berbasis game untuk meningkatkan keterlibatan siswa secara online. Saat dia tidak bekerja, Anda akan menemukannya dengan membaca, bermain video game, atau berkebun.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan