Flappy Bird
1
Sejarah Flappy
Bird
Flappy Bird
mulanya bernama Flap Flap yang mengadopsi gaya visual permainan Nintendo. Dong
Nguyen, pemuda 29 tahun yang tinggal di Hanoi, vietnam mengaku menyelesaikan
permainan ini hanya dalam waktu dua hari. Sebulan berlalu, ternyata nama
aplikasi “Flap Flap” sudah ada di toko aplikasi Apple, App Store.
Nguyen
membuat pengumuman yang sangat mencengangkan. Ia akan mencabut Flappy Bird dari toko aplikasi App Store dan Play
Store dalam waktu 22 jam ke depan. Nguyen beralasan bahwa sebenarnya game ini dibuat untuk kegiatan bersantai
para pemainnya. Nguyen tidak bermaksud membuat Flappy Bird menjadi permainan yang adiktif. Nah,
pada saat tujuannya melenceng, Nguyen memutuskan untuk menarik Flappy Bird.
Cara membuat Flappy Bird pada HTML5
Catatan: tutorial ini
awalnya untuk Phaser 1.1, namun baru-baru ini diperbarui untuk Phaser 2.0.
Set Up
Anda harus men-download
template yang kosong ini yang saya buat untuk tutorial ini. Di dalamnya Anda
akan menemukan:
- phaser.min.js, Phaser kerangka v2.0.5
- index.html, di mana pertandingan akan ditampilkan
- main.js, file mana kita akan menulis semua kode kita
- Aset /, direktori dengan 2 gambar (bird.png dan
pipe.png)
Anda juga harus men-download kurung code
editor, yang akan membuat hidup kita lebih mudah untuk mengatur webserver.
Project kosong
Dalam file index.html
kita menambahkan kode sederhana ini:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Flappy Bird Clone </title> <script type="text/javascript" src="phaser.min.js"></script> <script type="text/javascript" src="main.js"></script> </head>
<body> <p> Press the spacebar to jump </p> <div id="gameDiv"> </div>
</body> </html>
Ini akan memuat semua
file Javascript yang diperlukan, dan menambahkan "gameDiv" elemen di
mana permainan kami akan ditampilkan.
Dalam file main.js kita
harus menambahkan ini, yang akan membuat proyek Phaser kosong:
// Initialize Phaser, and create a 400x490px game var game = new Phaser.Game(400, 490, Phaser.AUTO, 'gameDiv');
// Create our 'main' state that will contain the game var mainState = {
preload: function() { // This function will be executed at the beginning // That's where we load the game's assets },
create: function() { // This function is called after the preload function // Here we set up the game, display sprites, etc. }, update: function() { // This function is called 60 times per second // It contains the game's logic
},
}; // Add and start the 'main' state to start the game game.state.add('main', mainState); game.state.start('main');
Kita
akan mengisi
preload(), create() dan update() fungsi, dan
menambahkan beberapa fungsi baru untuk membuat permainan bekerja.
Burung
Mari kita fokus pertama
pada menambahkan burung untuk game yang dapat dikendalikan dengan tombol spasi.
Semuanya cukup sederhana
dan baik berkomentar, sehingga Anda harus dapat memahami dengan mudah kode di
bawah ini. Untuk pembacaan yang lebih baik, saya dihapus inisialisasi Phaser
dan menyatakan kode manajemen yang dapat Anda lihat di atas.
Pertama kita memperbarui
preload(), create() dan update() fungsipreload: function() { // Change the background color of the game game.stage.backgroundColor = '#71c5cf'; // Load the bird sprite game.load.image('bird', 'assets/bird.png');
}, create: function() { // Set the physics system game.physics.startSystem(Phaser.Physics.ARCADE);
// Display the bird on the screen this.bird = this.game.add.sprite(100, 245, 'bird');
// Add gravity to the bird to make it fall game.physics.arcade.enable(this.bird); this.bird.body.gravity.y = 1000;
// Call the 'jump' function when the spacekey is hit var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(this.jump, this); },
update: function() { // If the bird is out of the world (too high or too low), call the 'restartGame' function if (this.bird.inWorld == false) this.restartGame(); },
Dan
tepat di bawah ini, kami menambahkan dua fungsi baru ini:
//
Make the bird jump
jump: function() {
// Add a vertical velocity to the bird
this.bird.body.velocity.y = -350;
},
jump: function() {
// Add a vertical velocity to the bird
this.bird.body.velocity.y = -350;
},
//
Restart the game
restartGame: function() {
// Start the 'main' state, which restarts the game
game.state.start('main');
},
restartGame: function() {
// Start the 'main' state, which restarts the game
game.state.start('main');
},
Testing
Sekarang saatnya untuk
menguji permainan kita. Buka file index.html dengan editor kurung, kemudian
klik pada ikon kecil di sudut kanan atas:
Tanda itu akan
meluncurkan live preview dari permainan, di mana Anda harus memiliki burung
melompat saat Anda menekan tombol spasi.
Jika Anda tidak ingin
menggunakan kurung, maka Anda akan harus menggunakan webserver lokal untuk
menguji permainan.
Pipa
Sebuah permainan Flappy
Bird tanpa pipa tidak benar-benar menarik, jadi mari kita mengubah itu.
Pertama, kita akan
memuat sprite pipa dengan
preload() fungsi.game.load.image('pipe', 'assets/pipe.png');
Karena kita akan
menangani banyak pipa dalam permainan, lebih mudah untuk menggunakan fitur
Phaser disebut 'kelompok'. Kelompok ini akan berisi 20 pipa yang akan kita
dapat menggunakan seperti yang kita inginkan. Jadi kita tambahkan di
create() fungsi.this.pipes = game.add.group(); // Create a group this.pipes.enableBody = true; // Add physics to the group this.pipes.createMultiple(20, 'pipe'); // Create 20 pipes
Sekarang kita perlu
fungsi baru untuk menambah pipa dalam permainan. Secara default, semua pipa
yang terdapat dalam kelompok yang mati dan tidak ditampilkan. Jadi kita memilih
pipa mati, menampilkannya, dan pastikan untuk secara otomatis membunuhnya
ketika itu tidak lagi terlihat. Dengan cara ini kita tidak pernah kehabisan
pipa.
addOnePipe: function(x, y) { // Get the first dead pipe of our group var pipe = this.pipes.getFirstDead();
// Set the new position of the pipe pipe.reset(x, y);
// Add velocity to the pipe to make it move left pipe.body.velocity.x = -200;
// Kill the pipe when it's no longer visible pipe.checkWorldBounds = true; pipe.outOfBoundsKill = true; },
Fungsi sebelumnya
menampilkan satu pipa, tetapi kita perlu menampilkan 6 pipa berturut-turut
dengan lubang di suatu tempat di tengah. Jadi mari kita membuat fungsi baru
yang tidak hanya itu.
addRowOfPipes: function() { // Pick where the hole will be var hole = Math.floor(Math.random() * 5) + 1;
// Add the 6 pipes for (var i = 0; i < 8; i++) if (i != hole && i != hole + 1) this.addOnePipe(400, i * 60 + 10); },
Untuk benar-benar
menambahkan pipa dalam permainan, kita perlu memanggil
fungsi addRowOfPipes()setiap 1.5 detik. Kita dapat melakukan ini dengan
menambahkan timer di create() fungsi.this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);
Sekarang Anda dapat menyimpan file Anda
dan menguji kode. Hal ini perlahan-lahan mulai terlihat seperti permainan nyata.
Scoring dan Tabrakan
Hal terakhir yang kita
butuhkan untuk menyelesaikan permainan ini menambahkan skor dan penanganan
tabrakan. Dan ini cukup mudah dilakukan.
Kita tambahkan
create() fungsi untuk menampilkan lebel skor di pojok kiri atas.this.score = 0; this.labelScore = game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" });
dan tempatkan ini
addRowOfPipes(),untuk meningkatkan skor dengan 1 setiap kali pipa
baru diciptakan.this.score += 1; this.labelScore.text = this.score;
Selanjutnya, kita
tambahkan baris ini di
update() fungsi untuk memanggil restartGame() setiap kali burung bertabrakan dengan pipa.game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame, null, this);
Dalam HTML5 tutorial
terakhir kita lakukan sederhana clone Flappy Bird. Itu bagus, tapi cukup
membosankan untuk bermain. Kita akan melihat di posting ini cara menambahkan
animasi dan suara untuk clone Flappy Bird kami. Ini tidak akan mengubah
mekanisme permainan, tapi permainan akan merasa jauh lebih menarik.
Set Up
Buka file main.js, dan mari kita mulai coding!Add Fly Animation
Burung itu bergerak naik
dan turun dengan cara yang sangat membosankan. Mari kita memperbaiki ini dengan
menambahkan beberapa animasi, dan membuatnya bergerak seperti dalam game asli:
1.
Selalu perlahan
memutar burung ke bawah, sampai titik tertentu.
2.
Ketika burung melompat, putar ke atas.
Yang pertama adalah
mudah. Kita hanya perlu menambahkan ini di
update() fungsi.if (this.bird.angle < 20) this.bird.angle += 1;
Untuk yang kedua, kita
hanya bisa menambahkan
this.bird.angle = -20; kedalam jump() fungsi. Namun, mengubah langsung sudut akan terlihat
aneh. Sebaliknya, kita akan membuat perubahan burung sudut itu selama periode
waktu yang singkat. Kita bisa melakukannya dengan menciptakan animasi di jump()fungsi.// Create an animation on the bird var animation = game.add.tween(this.bird);
// Set the animation to change the angle of the sprite to -20° in 100 milliseconds animation.to({angle: -20}, 100);
// And start the animation animation.start();
Sekadar informasi, kode
sebelumnya dapat ditulis dalam satu baris kode seperti ini..
game.add.tween(this.bird).to({angle: -20}, 100).start();
Jika Anda menguji permainan sekarang, Anda akan
melihat bahwa burung itu tidak berputar seperti aslinya Flappy Bird. Ini
berputar seperti gambar di sebelah kiri, dan kami ingin terlihat seperti yang
ada di sebelah kanan.
Apa yang perlu kita
lakukan adalah mengubah pusat rotasi burung, yang disebut "jangkar".
Jadi kita tambahkan baris kode ini di
create() fungsi.this.bird.anchor.setTo(-0.2, 0.5);
Jika Anda menguji permainan sekarang,
animasi akan terlihat jauh lebih baik.
Menambahkan Dead Animation
Ketika burung mati, kita
restart permainan segera. Sebaliknya, kita akan membuat burung jatuh dari layar
sebagai animasi mati.
Pertama, kami
memperbarui baris kode ini di
update() fungsi untuk memanggil hitPipe() dari pada restartGame() ketika burung menghantam pipa.game.physics.arcade.overlap(this.bird, this.pipes, this.hitPipe, null, this);
Sekarang kita buat baru
fungsi
hitPipe() hitPipe: function() { // If the bird has already hit a pipe, we have nothing to do if (this.bird.alive == false) return;
// Set the alive property of the bird to false this.bird.alive = false;
// Prevent new pipes from appearing game.time.events.remove(this.timer);
// Go through all the pipes, and stop their movement this.pipes.forEachAlive(function(p){ p.body.velocity.x = 0; }, this);
},
Hal terakhir, kita tidak
ingin untuk dapat membuat lompatan burung saat itu sudah mati. Jadi kita
mengubah fungsi
jump() dengan
menambahkan ini dua baris di awal.if (this.bird.alive == false) return;
Dan kita selesai menambahkan animasi.
Menambahkan suara
Menambahkan suara super
mudah dengan Phaser.
Kita mulai dengan memuat
suara melompat di fungsi
preload() game.load.audio('jump', 'assets/jump.wav');
Sekarang kita tambahkan
suara dalam permainan dengan menempatkan ini pada fungsi
create()this.jumpSound = game.add.audio('jump');
Hal terakhir, kita
tambahkan baris ini dalam lompat () fungsi untuk benar-benar memutar suara
melompat.
this.jumpSound.play();
Dan itulah, kita
sekarang memiliki animasi dan suara dalam permainan!
Sedangkan fungsi AI (Artificial Intelligence) pada game flappy bird ini adalah
melatih kesabaran, ketangkasan dalam melewati pipa dan dalam menjaga
keseimbangan burung agar tidak jatuh karna tidak ada life point pada game ini.
refrensi :
http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/
About the author
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus. Aenean fermentum, eget tincidunt.
1 komentar:
Hasil copy paste bang??? http://www.lessmilk.com/tutorial/flappy-bird-phaser-1
Posting Komentar