Membuat Game dengan Phaser 3
Bagian 1 – Pengenalan Phaser
Selamat datang di tutorial kami tentang Membuat Game dengan Phaser 3. Di sini kita akan belajar cara membuat game sederhana yang melibatkan pemain dalam Game yang dapat berlari dan melompat-lompat di platform, mengumpulkan bintang, dan menghindari musuh. Saat melalui proses ini, kami akan menjelaskan beberapa fitur inti dari kerangka kerja.
Apa itu Phaser?
Phaser adalah kerangka kerja game HTML5 yang bertujuan untuk membantu pengembang membuat game HTML5 lintas-browser yang kuat dengan sangat cepat. Phaser khusus untuk memanfaatkan keunggulan browser modern, baik desktop maupun seluler. Satu-satunya persyaratan browser adalah dukungan dari tag Canvas.
Persyaratan
Unduh file zip pada link berikut ini
yang berisi setiap langkah tutorial ini dalam kode dan aset yang menyertainya. Anda harus memiliki pengetahuan JavaScript yang sangat, sangat mendasar.
Jika Anda telah membaca Panduan dari Phaser lalu Anda telah mengunduh Phaser, menyiapkan semuanya dan siap untuk dikodekan. Unduh sumber untuk tutorial ini dan unzip ke root web Anda. Misal kita membuat file coding di folder phaser2 dan menggunakan XAMPP maka bisa kita buat folder phaser2 tersebut di dalam folder C:\xampp\htdocs\phaser2
Buat file part1.html dan buka halaman part1.html di editor pilihan Anda semisal Visual Studio Code dan mari kita lihat kodenya lebih dekat. Setelah sedikit template HTML yang menyertakan Phaser, struktur kodenya terlihat seperti ini (ataupun kode program berikut ini bisa di tuliskan pada file part1.html):
|
var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload () { } function create () { } function update () { } |
Objek konfigurasi adalah bagaimana Anda mengonfigurasi Game Phaser Anda. Ada banyak pilihan yang dapat ditempatkan di objek ini dan saat Anda memperluas pengetahuan Phaser Anda, Anda akan menemukan lebih banyak dari mereka. Tapi dalam tutorial ini kita hanya akan mengatur renderer, dimensi dan Scene default.
Sebuah instance dari objek Phaser.Game ditugaskan ke variabel lokal yang disebut game dan objek konfigurasi diteruskan ke sana. Ini akan memulai proses menghidupkan Phaser.
Di Phaser 2, objek game bertindak sebagai pintu gerbang ke hampir semua sistem internal dan sering diakses dari variabel global. Di Phaser 3 ini tidak lagi terjadi dan tidak lagi berguna untuk menyimpan instance game dalam variabel global.
Properti type dapat berupa Phaser.CANVAS, Phaser.WEBGL, atau Phaser.AUTO. Ini adalah konteks rendering yang ingin Anda gunakan untuk game Anda. Nilai yang disarankan adalah Phaser.AUTO yang secara otomatis mencoba menggunakan WebGL, tetapi jika browser atau perangkat tidak mendukungnya, itu akan kembali ke Canvas. Elemen kanvas yang dibuat Phaser hanya akan ditambahkan ke dokumen pada saat skrip dipanggil, tetapi Anda juga dapat menentukan wadah induk dalam konfigurasi game jika diinginkan.
Properti lebar/width dan tinggi/height mengatur ukuran elemen kanvas yang akan dibuat Phaser. Dalam hal ini 800 x 600 piksel. Dunia gim Anda dapat berukuran apa pun yang Anda suka, tetapi ini adalah resolusi yang akan ditampilkan gim tersebut.
Properti scene dari objek konfigurasi akan dibahas lebih lanjut dalam tutorial ini.
Simpan file project part1.html dan jalankan file ini dengan Browser Chrome dan pastikan bahwa web server seperti XAMPP sudah berjalan seperti berikut :
Dan Hasilnya yg nampak adalah layar Hitam dengan ukuran lebar 800px dan tinggi 600px.
Bagian 2 – Memuat Aset
Mari kita memuat aset yang kita butuhkan untuk permainan kita. Anda melakukan ini dengan menempatkan panggilan ke Phaser Loader di dalam fungsi Scene yang disebut preload. Phaser akan secara otomatis mencari fungsi ini ketika dimulai dan memuat apa pun yang ditentukan di dalamnya.
Saat ini fungsi preload kosong. Ubah menjadi:
|
function preload () { this.load.image(‘sky’, ‘assets/sky.png’); this.load.image(‘ground’, ‘assets/platform.png’); this.load.image(‘star’, ‘assets/star.png’); this.load.image(‘bomb’, ‘assets/bomb.png’); this.load.spritesheet(‘dude’, ‘assets/dude.png’, { frameWidth: 32, frameHeight: 48 } ); } |
Kode program tersebut akan memuat dalam 5 aset dengan kriteria 4 gambar dan lembar sprite. Ini mungkin tampak jelas bagi sebagian dari Anda, tetapi saya ingin menunjukkan parameter pertama, juga dikenal sebagai kunci aset (yaitu ‘sky’,’ground’, ‘star’, ‘bomb’). String ini adalah tautan ke aset yang dimuat dan akan Anda gunakan dalam kode Anda saat membuat Objek Game. Anda bebas menggunakan string JavaScript yang valid sebagai kunci. Dan parameter kedua menunjukkan lokasi dan nama file gambar asset.
Tampilkan Gambar
Untuk menampilkan salah satu gambar yang telah di muat / preload, tempatkan kode berikut di dalam fungsi create:
| this.add.image(400, 300, ‘sky’); |
Anda dapat menemukan ini di part3.html. Jika Anda memuatnya di browser, Anda sekarang akan melihat layar game dengan latar belakang langit biru yang menutupinya:
Nilai 400 dan 300 adalah koordinat x dan y dari gambar sky. Mengapa 400 dan 300? Itu karena di Phaser 3 semua Objek Game diposisikan berdasarkan pusatnya secara default. Gambar latar belakang berukuran 800 x 600 piksel, jadi jika kami menampilkannya di tengah pada 0 x 0 Anda hanya akan melihat sudut kanan bawahnya. Jika kami menampilkannya pada 400 x 300 Anda melihat semuanya.
Petunjuk: Anda dapat menggunakan setOrigin untuk mengubah ini. Misalnya kode: this.add.image(0, 0, ‘sky’).setOrigin(0, 0) akan mengatur ulang posisi gambar ke kiri atas. Di Phaser 2 ini dicapai melalui properti jangkar tetapi di Phaser 3 itu adalah properti OriginX dan originY sebagai gantinya.
Urutan objek game yang ditampilkan cocok dengan urutan pembuatannya. Jadi jika Anda ingin menempatkan sprite bintang di atas latar belakang, Anda perlu memastikan bahwa sprite itu ditambahkan sebagai gambar kedua, setelah gambar langit:
|
function create () { this.add.image(400, 300, ‘sky’); this.add.image(400, 300, ‘star’); } |
Jika Anda menempatkan star terlebih dahulu, itu akan ditutupi oleh gambar langit.
Bagian 3 – Pembuatan Dunia di Phaser
Di bawah tanda this.add.image ini berfungsi untuk membuat Objek Game Gambar baru dan menambahkannya ke daftar tampilan Adegan saat ini. Daftar ini adalah tempat semua Objek Game Anda berada. Anda dapat memposisikan gambar di mana saja dan Phaser tidak akan keberatan. Tentu saja, jika berada di luar wilayah 0x0 hingga 800×600 maka Anda tidak akan melihatnya secara visual, karena akan “di luar layar”, tetapi akan tetap ada di dalam Scene.
Adegan itu sendiri tidak memiliki ukuran tetap dan meluas tanpa batas ke segala arah. Sistem Kamera mengontrol tampilan Anda ke dalam Pemandangan dan Anda dapat memindahkan dan memperbesar kamera aktif sesuai kebutuhan. Anda juga dapat membuat kamera baru untuk tampilan lain ke dalam Scene. Topik ini berada di luar cakupan tutorial khusus ini, cukup untuk mengatakan bahwa sistem kamera di Phaser 3 secara signifikan lebih kuat daripada di v2. Hal-hal yang secara harfiah tidak mungkin terjadi sebelum sekarang.
Untuk saat ini mari kita membangun Scene dengan menambahkan gambar latar belakang dan beberapa platform. Berikut adalah fungsi create yang dapat anda perbarui:
|
var platforms; function create () { this.add.image(400, 300, ‘sky’); platforms = this.physics.add.staticGroup(); platforms.create(400, 568, ‘ground’).setScale(2).refreshBody(); platforms.create(600, 400, ‘ground’); platforms.create(50, 250, ‘ground’); platforms.create(750, 220, ‘ground’); } |
Jika Anda melihat kode tersebut akan akan melihat panggilan ke this.physics. Ini berarti kami menggunakan sistem Fisika Arkade, tetapi sebelum melakukannya, kami perlu menambahkannya ke Game Config untuk memberi tahu Phaser bahwa game kami memerlukannya. Jadi anda dapat memperbarui itu untuk menyertakan dukungan fisika. Berikut adalah konfigurasi game yang di ubah:
|
var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: ‘arcade’, arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; |
Penambahan baru adalah properti physics. Dengan kode di atas jika Anda menjalankannya seperti yang terdapat pada file part4.html dalam file zip tutorial, Anda akan melihat tampilan nya seperti permainan berikut :
Kami memiliki latar belakang dan beberapa platform, tetapi bagaimana sebenarnya platform tersebut bekerja?
Bagian 4 – Platform
Ada satu fungsi create yang membutuhkan penjelasan lebih rinci. Pertama, bagian ini:
| platform = this.physics.add.staticGroup(); |
Kode tersebut membuat Grup Fisika Statis baru dan menetapkannya ke platform variabel lokal. Dalam Fisika Arcade ada dua jenis fisika: Dinamis dan Statis. Benda dinamis adalah benda yang dapat bergerak melalui gaya seperti kecepatan atau percepatan. Itu bisa memantul dan bertabrakan dengan benda lain dan tumbukan itu dipengaruhi oleh massa tubuh dan elemen lainnya.
Sebaliknya, Benda Statis hanya memiliki posisi dan ukuran, serta tidak tersentuh oleh gravitasi, Anda tidak dapat mengatur kecepatan padanya dan ketika sesuatu bertabrakan dengannya, ia tidak pernah bergerak. Statis dengan nama, statis secara alami. Dan sempurna untuk tanah dan platform tempat kita akan membiarkan pemain berlarian.
Tapi apa itu Grup? Seperti namanya, mereka adalah cara bagi Anda untuk mengelompokkan objek serupa dan mengontrol semuanya sebagai satu unit. Anda juga dapat memeriksa tabrakan antara Grup dan objek game lainnya. Grup mampu membuat Objek Game mereka sendiri melalui fungsi pembantu yang praktis seperti create. Dengan platform yang dibuat oleh Grup, kami sekarang dapat menggunakannya untuk membuat platform:
|
platforms.create(400, 568, ‘ground’).setScale(2).refreshBody(); platforms.create(600, 400, ‘ground’); platforms.create(50, 250, ‘ground’); platforms.create(750, 220, ‘ground’); |
Seperti yang kita lihat sebelumnya, Selama preload, phaser akan mengimpor gambar tanah dengan kata kunci ‘ground’. Ini adalah persegi panjang hijau sederhana, berukuran 400 x 32 piksel dan akan berfungsi untuk kebutuhan platform dasar.
Baris pertama kode di atas menambahkan gambar tanah baru pada posisi 400 x 568 (ingat, gambar diposisikan berdasarkan pusatnya) – masalahnya adalah kita membutuhkan platform ini untuk menjangkau seluruh lebar permainan kita, jika tidak, pemain hanya akan jatuh dari sisi. Untuk melakukannya, kita menskalakannya x2 dengan fungsi setScale(2). Sekarang ukurannya 800 x 64, yang sempurna untuk kebutuhan kita. Panggilan ke refreshBody() diperlukan karena kita telah menskalakan badan fisika statis, jadi kita harus memberi tahu dunia fisika tentang perubahan yang kita buat.
Tanah diskalakan dan pada tempatnya, jadi inilah saatnya untuk platform lain:
|
platforms.create(600, 400, ‘ground’); platforms.create(50, 250, ‘ground’); platforms.create(750, 220, ‘ground’); |
Prosesnya persis sama seperti sebelumnya, hanya saja kita tidak perlu menskalakan platform ini karena ukurannya sudah tepat. Ke 3 platform ground tersebut ditempatkan di sekitar layar, dengan jarak yang tepat untuk memungkinkan pemain melompat ke sana. Untuk contoh latihan ini terdapat pada file part4.html seperti yang ada di zip latihan.
Jadi mari kita tambahkan pemain kita.
Bagian 5 – Pembuatan Player
Kita sudah membuat desain area dari Game yang memiliki beberapa Asset platform tanah, tetapi tidak ada yang berlari di sekitar mereka. Saatnya kita membuat karakter untuk Player / pemain.
Buat variabel baru bernama player dan tambahkan kode berikut ke fungsi create. Anda dapat melihat ini di part5.html :
|
player = this.physics.add.sprite(100, 450, ‘dude’); player.setBounce(0.2); player.setCollideWorldBounds(true); this.anims.create({ key: ‘left’, frames: this.anims.generateFrameNumbers(‘dude’, { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: ‘turn’, frames: [ { key: ‘dude’, frame: 4 } ], frameRate: 20 }); this.anims.create({ key: ‘right’, frames: this.anims.generateFrameNumbers(‘dude’, { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); |
Ada dua hal terpisah yang terjadi di sini: pembuatan Sprite Fisika dan pembuatan beberapa animasi yang dapat digunakannya.
Sprite Fisika
Bagian pertama dari kode membuat sprite:
|
player = this.physics.add.sprite(100, 450, ‘dude’); player.setBounce(0.2); player.setCollideWorldBounds(true); |
Kode tersebut membuat sprite baru yang disebut player, diposisikan pada 100 x 450 piksel dari bagian bawah game. Sprite dibuat melalui Fisika Game Object Factory (this.physics.add) yang berarti memiliki tubuh Fisika Dinamis secara default.
Setelah membuat sprite itu diberikan nilai bouncing sedikit 0.2. Ini berarti ketika mendarat setelah melompat, ia akan memantul sedikit. Sprite kemudian diatur untuk bertabrakan dengan batas dunia. Batas, secara default, berada di luar dimensi game. Saat kita mengatur layout tampilan pada permainan menjadi 800 x 600 piksel, maka pemain tidak akan bisa berlari di luar area ini. Ini akan menghentikan pemain agar tidak dapat lari dari tepi layar atau melompati bagian atas.
Animasi
Jika Anda melihat kembali ke fungsi preload, Anda akan melihat bahwa ‘dude’ dimuat sebagai sprite sheet, bukan gambar. Itu karena berisi bingkai animasi. Seperti inilah tampilan lembar sprite lengkap:
Total ada 9 frame, 4 untuk lari ke kiri, 1 untuk menghadap kamera, dan 4 untuk lari ke kanan. Catatan: Phaser mendukung sprite membalik untuk menghemat bingkai animasi, tetapi demi tutorial ini kita akan tetap menggunakan cara lama.
Kita mendefinisikan dua animasi yang disebut ‘kiri’ dan ‘kanan’. Berikut adalah animasi kiri:
|
this.anims.create({ key: ‘left’, frames: this.anims.generateFrameNumbers(‘dude’, { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); |
Animasi ‘left’ menggunakan frame 0, 1, 2 dan 3 dan berjalan pada 10 frame per detik. Nilai ‘repeat -1’ memberi tahu animasi untuk mengulang.
Ini adalah siklus lari standar dan kita akan mengulanginya untuk berlari ke arah yang berlawanan, menggunakan kunci ‘right’ dan kunci terakhir untuk ‘turn’.
Info Tambahan: Dalam Phaser 3 Animation Manager adalah sistem global. Animasi yang dibuat di dalamnya tersedia secara global untuk semua Objek Game. Mereka berbagi data animasi dasar sambil mengelola garis waktu mereka sendiri. Ini memungkinkan Anda untuk menentukan satu animasi sekali dan menerapkannya ke Objek Game sebanyak yang Anda butuhkan. Ini berbeda dengan Phaser 2 di mana animasi secara khusus dimiliki oleh Objek Game tempat mereka dibuat.
Setelah file tersebut di simpan maka hasilnya dapat anda jalankan seperti pada file part5.html seperti berikut dengan :
Bagian 6 – Body Velocity: Dunia Fisika
Phaser memiliki dukungan untuk berbagai sistem fisika yang berbeda, masing-masing bertindak sebagai plugin yang tersedia untuk setiap Scene Phaser. Pada saat penulisan ini dikirimkan dengan Fisika Arkade, Fisika Dampak, dan Fisika Matter.js. Demi tutorial ini, kita akan menggunakan sistem Arcade Physics untuk game kita, yang sederhana dan ringan, cocok untuk browser seluler.
Ketika Sprite Fisika dibuat, ia diberikan properti body, yang merupakan referensi ke Tubuh Fisika Arkadenya. Ini mewakili sprite sebagai tubuh fisik dalam mesin Phasers Arcade Physics. Objek body memiliki banyak properti dan metode yang bisa kita mainkan.
Misalnya, untuk mensimulasikan efek gravitasi pada sprite, semudah menulis:
| player.body.setGravityY(300) |
Ini adalah nilai arbitrer, tetapi secara logis, semakin tinggi nilainya, semakin berat benda Anda terasa dan semakin cepat jatuh. Jika Anda menambahkan ini ke kode Anda atau menjalankan part5.html Anda akan melihat bahwa pemain jatuh tanpa henti, sama sekali mengabaikan tanah yang kita buat sebelumnya seolah-olah tembus pada objek tanah:
Alasan untuk ini adalah karena kita belum menguji tabrakan antara tanah dan player.
Kita sudah memberi tahu Phaser bahwa tanah dan platform kita akan menjadi benda statis. Jika kita tidak melakukan itu, dan menciptakan yang dinamis sebagai gantinya, maka ketika pemain bertabrakan dengan mereka, itu akan berhenti sejenak dan kemudian semuanya akan runtuh. Kecuali jika dikatakan sebaliknya, sprite tanah adalah objek fisik yang bergerak dan ketika pemain memukulnya, gaya tumbukan yang dihasilkan diterapkan ke tanah, oleh karena itu, kedua benda bertukar kecepatan dan tanah mulai jatuh juga.
Untuk memungkinkan pemain bertabrakan dengan platform, kita dapat membuat objek Collider. Objek ini memantau dua objek fisika (yang dapat mencakup Grup) dan memeriksa tabrakan atau tumpang tindih di antara keduanya. Jika itu terjadi maka secara opsional dapat memanggil panggilan balik pada objek itu sendiri, tetapi demi bertabrakan dengan platform, kita tidak mewajibkannya :
| this.physics.add.collider(player, platforms); |
Collider adalah bagian yang melakukan keajaiban. Dibutuhkan dua objek dan tes untuk tabrakan dan melakukan pemisahan terhadap mereka. Dalam hal ini kita memberikan sprite pemain dan Grup platform. Ini cukup pintar untuk menjalankan tabrakan terhadap semua anggota Grup, jadi panggilan yang satu ini akan bertabrakan dengan tanah dan semua platform. Hasilnya adalah platform kokoh yang tidak runtuh, untuk mencobanya Anda bisa menjalankan nya pada file part6.html sehingga nampak seperti berikut :
Bagian 7 – Mengontrol Player dengan keyboard
Pada bagian sebelumnya player telah berada pada posisi di atas tanah dengan memanfaatkan Collider dan pada bagian berikut kita akan membuat agar Player dapat di gerakkan dengan Keyboard. Phaser memiliki pengelola Keyboard bawaan dan salah satu manfaat menggunakannya adalah fungsi kecil yang praktis ini:
| cursors = this.input.keyboard.createCursorKeys(); |
Kode tersebut mengisi objek kursor dengan empat properti: up, down, left, right, itu semua adalah contoh dari objek Key. Maka yang perlu kita lakukan hanyalah melakukan aksi Player pada saat pemain melakukan input pada Keyboard mereka dan saat game berlangsung dengan kode sebagai berikut :
|
if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play(‘left’, true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play(‘right’, true); } else { player.setVelocityX(0); player.anims.play(‘turn’); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } |
Penjelasan pada kode program tersebut yakni hal pertama yang dilakukan adalah memeriksa apakah tombol kiri ditekan. Jika ya, phaser menerapkan kecepatan horizontal negatif dan memulai animasi berjalan ‘kiri’. Jika mereka menahan ‘kanan’ sebagai gantinya phaser akan menerapkan kecepatan horizontal positif dan memulai animasi berjalan ke kanan. Dengan menghapus kecepatan dan mengaturnya dengan cara ini, setiap frame, itu menciptakan gaya gerakan ‘stop-start’.
Sprite pemain hanya akan bergerak ketika sebuah tombol ditekan dan berhenti segera padahal untuk gerakan yang natural tidak seperti itu. Phaser juga memungkinkan Anda untuk membuat gerakan yang lebih kompleks, dengan momentum dan akselerasi, tetapi ini memberi kita efek yang kita butuhkan untuk game ini. Bagian terakhir dari pemeriksaan kunci menyetel animasi ke ‘turn’ dan meniadakan kecepatan horizontal jika tidak ada tombol yang ditekan.
Lompatan
Bagian terakhir dari kode menambahkan kemampuan untuk melompat. Kursor atas adalah tombol lompat kami dan harus kita cek apakah player berada di atas tanah, jika tidak mereka bisa melompat saat di udara.
Jika kedua kondisi ini terpenuhi, kita menerapkan kecepatan vertikal 330 pixel per detik. Pemain akan jatuh ke tanah secara otomatis karena gravitasi. Dengan kontrol yang ada, kita sekarang memiliki dunia game yang dapat kita jelajahi. Untuk mencoba hasil dari kontrol Palyer dengan keyboard ini bisa kita coba pada file part7.html dan mainkan. Coba nilai tweaker seperti 330 untuk melompat ke nilai yang lebih rendah dan lebih tinggi untuk melihat efeknya.
Bagian 8 – Item Bintang
Saatnya untuk memberikan permainan kecil pada Game yang akan kita buat. Coba kita jatuhkan taburan bintang ke dalam adegan dan biarkan pemain mengumpulkannya. Untuk mencapai ini, kita akan membuat Grup baru yang disebut ‘star’ dan mengisinya. Dalam fungsi create kita akan menambahkan kode berikut (ini dapat dilihat pada part8.html):
|
stars = this.physics.add.group({ key: ‘star’, repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); stars.children.iterate(function (child) { child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); |
Prosesnya mirip dengan saat kita membuat Grup platform. Karena kita membutuhkan bintang untuk bergerak dan memantul, kita membuat grup fisika dinamis, bukan grup statis.
Grup dapat mengambil objek konfigurasi untuk membantu penyiapannya. Dalam hal ini objek konfigurasi grup memiliki 3 bagian: Pertama, ia menetapkan kunci tekstur menjadi gambar bintang. Ini berarti bahwa setiap anak yang dibuat sebagai hasil dari objek konfigurasi semuanya akan diberikan tekstur bintang secara default. Kemudian ia menetapkan nilai pengulangan menjadi 11. Karena itu membuat 1 anak secara otomatis, mengulangi 11 kali berarti kita akan mendapatkan total 12, yang hanya diperlukan untuk permainan kita.
Bagian terakhir adalah setXY – ini digunakan untuk mengatur posisi 12 anak yang dibuat Grup. Setiap anak akan ditempatkan mulai dari x: 12, y: 0 dan dengan langkah x 70. Ini berarti bahwa anak pertama akan ditempatkan pada 12 x 0, yang kedua adalah 70 piksel dari itu pada 82 x 0, yang ketiga adalah pada 152 x 0, dan seterusnya. Nilai ‘step’ adalah cara yang sangat berguna untuk memberi jarak pada anak-anak Grup selama pembuatan. Nilai 70 dipilih karena itu berarti semua 12 anak akan ditempatkan dengan sempurna di seluruh layar.
Potongan kode berikutnya mengulangi semua anak dalam Grup dan memberi mereka nilai bouncing Y acak antara 0,4 dan 0,8. Rentang bouncing adalah antara 0, tidak ada bouncing sama sekali, dan 1, bouncing penuh. Karena semua bintang yang muncul pada koordinat y=0 gravitasi akan menarik mereka ke bawah hingga bertabrakan dengan platform atau tanah. Nilai bouncing berarti mereka akan secara acak bangkit kembali sampai akhirnya menetap untuk diam di permukaan tanah.
Jika kita menjalankan kode seperti sekarang, bintang-bintang akan jatuh melalui bagian bawah permainan dan tidak terlihat. Untuk menghentikan itu kita perlu memeriksa tabrakan mereka terhadap platform. Kita dapat menggunakan objek Collider lain untuk melakukan ini:
| this.physics.add.collider(stars, platforms); |
Selain melakukan ini, kita juga akan memeriksa untuk melihat apakah pemain tumpang tindih dengan bintang atau tidak:
| this.physics.add.overlap(player, stars, collectStar, null, this); |
Kode tersebut memberitahu Phaser untuk memeriksa tumpang tindih antara pemain dan bintang mana pun di Grup bintang. Jika ditemukan maka mereka diteruskan ke fungsi ‘collectStar’:
|
function collectStar (player, star) { star.disableBody(true, true); } |
Sederhananya, tubuh fisik bintang tersebut dinonaktifkan dan Objek Game induknya dibuat tidak aktif dan tidak terlihat, yang menghilangkannya dari tampilan. Menjalankan permainan sekarang memberi kita pemain yang bisa berlari, melompat, memantul dari platform dan mengumpulkan bintang-bintang yang jatuh dari atas. Untuk mencoba hasil dari pembuatan item Bintang ini bisa kita coba pada file part8.html dan mainkan, hasilnya akan nampak seperti pada gambar berikut :
Bagian 9 – Skor untuk diselesaikan
Ada dua sentuhan terakhir yang akan kita tambahkan ke dalam permainan : musuh yang harus dihindari yang dapat mengalahkan pemain, dan skor saat Anda mengumpulkan bintang. Pertama, skor.
Untuk melakukan ini, kita akan menggunakan Objek Game Teks. Di sini kita membuat dua variabel baru, satu untuk menampung skor aktual dan objek teks itu sendiri:
|
var score = 0; var scoreText; |
scoreText diatur dalam fungsi create:
| scoreText = this.add.text(16, 16, ‘score: 0′, { fontSize: ’32px’, fill: ‘#000’ }); |
16 x 16 adalah koordinat untuk menampilkan teks. ‘score: 0’ adalah string default untuk ditampilkan dan objek berikutnya berisi ukuran font dan warna isian. Dengan tidak menentukan font mana yang akan kita gunakan default Phaser, yaitu Courier.
Selanjutnya kita perlu memodifikasi fungsi collectStar sehingga ketika pemain mengambil bintang, skor mereka meningkat dan teks diperbarui untuk menginformasikan hal ini:
|
function collectStar (player, star) { star.disableBody(true, true); score += 10; scoreText.setText(‘Score: ‘ + score); } |
Jadi 10 poin ditambahkan untuk setiap bintang dan scoreText diperbarui untuk menunjukkan total baru ini. Jika Anda menjalankan part9.html, Anda akan melihat bintang jatuh dan skor meningkat saat Anda mengumpulkannya.
Bagian 10 – Musuh berupa Bom Memantul
Untuk melengkapi permainan kita, saatnya untuk menambahkan beberapa musuh/rintangan. Ini akan memberikan elemen tantangan yang bagus untuk permainan, sesuatu yang sebelumnya hilang.
Idenya adalah seperti ini: Ketika Anda mengumpulkan semua bintang untuk pertama kalinya, itu akan melepaskan bom yang memantul. Bom hanya akan memantul secara acak di sekitar level dan jika Anda bertabrakan dengannya, Anda kalah dan Game Over. Semua bintang akan muncul kembali sehingga Anda dapat mengumpulkannya lagi, dan jika Anda melakukannya, itu akan melepaskan bom lain. Ini akan memberi pemain tantangan: dapatkan skor setinggi mungkin tanpa kalah.
Hal pertama yang kita butuhkan adalah Grup untuk bom dan beberapa Collider:
|
bombs = this.physics.add.group(); this.physics.add.collider(bombs, platforms); this.physics.add.collider(player, bombs, hitBomb, null, this); |
Bom tentu saja akan memantul dari platform, dan jika pemain mengenainya, kita akan memanggil fungsi hitBomb. Yang akan dilakukan hanyalah menghentikan permainan dan mengubah pemain menjadi merah:
|
function hitBomb (player, bomb) { this.physics.pause(); player.setTint(0xff0000); player.anims.play(‘turn’); gameOver = true; } |
Sejauh ini, sangat bagus, tapi kita perlu melepaskan bom. Untuk melakukan itu, kita harus memodifikasi fungsi collectStar:
|
function collectStar (player, star) { star.disableBody(true, true); score += 10; scoreText.setText(‘Score: ‘ + score); if (stars.countActive(true) === 0) { stars.children.iterate(function (child) { child.enableBody(true, child.x, 0, true, true); }); var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400); var bomb = bombs.create(x, 16, ‘bomb’); bomb.setBounce(1); bomb.setCollideWorldBounds(true); bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); } } |
Kita menggunakan metode Grup yang disebut countActive untuk melihat berapa banyak bintang yang masih hidup. Jika tidak ada maka pemain telah mengumpulkan semuanya, jadi kita menggunakan fungsi iterate untuk mengaktifkan kembali semua bintang dan mengatur ulang posisi y mereka ke nol. Ini akan membuat semua bintang jatuh dari atas layar lagi.
Bagian kode selanjutnya membuat bom. Pertama kita memilih koordinat x acak untuk itu, selalu di sisi berlawanan dari layar ke pemain, hanya untuk memberi mereka kesempatan. Kemudian bom dibuat, diatur untuk bertabrakan di dalam area permainan, memantul dan memiliki kecepatan acak.
Hasil akhirnya adalah sprite bom kecil yang bagus yang memantul di sekitar layar. Cukup kecil agar mudah dihindari, pada awalnya, tetapi begitu jumlahnya bertambah, itu menjadi jauh lebih sulit! Untuk mencobanya anda dapat mencoba menjalankan nya pada file part10.html dan akan muncul musuh berupa bom seperti berikut :
Dan permainan kita selesai 🙂
Anda dapat memainkan langsung di browser dengan mengklik tombol berikut :
Kesimpulan
Anda sekarang telah belajar cara membuat sprite dengan properti fisika, mengontrol gerakannya, dan membuatnya berinteraksi dengan objek lain di dunia game kecil. Ada lebih banyak hal yang dapat Anda lakukan untuk meningkatkan ini.
Dengan bantuan dari apa yang telah Anda pelajari dalam tutorial ini dan ratusan contoh yang tersedia untuk Anda, Anda sekarang seharusnya memiliki dasar yang kuat untuk proyek masa depan. Tetapi seperti biasa jika Anda memiliki pertanyaan, membutuhkan saran, atau ingin berbagi apa yang telah Anda kerjakan, jangan ragu untuk meminta bantuan di forum Phaser.
