Beriteknol: Pemrograman Phaser

Tampilkan postingan dengan label Pemrograman Phaser. Tampilkan semua postingan

Tutorial Membuat Game Sederhana dengan Framework Phaser

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggClQNim7OruN1A22hLEx9iwu_Yc8FwwsHmvDzEF8qx1mcWqV0MlQiLWaBujO-OCyRP_sbaCPnu8tylvUYnmeAz51WlBJF7Sjz19yJSjsnfge_BvxoT1LbOkTzf8ymGxz7dLV9-dxp3Wo/s1600/membuat+game+sederhana+dengan+framework+phaser+3.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tutorial Membuat Game Sederhana dengan Framework Phaser" border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggClQNim7OruN1A22hLEx9iwu_Yc8FwwsHmvDzEF8qx1mcWqV0MlQiLWaBujO-OCyRP_sbaCPnu8tylvUYnmeAz51WlBJF7Sjz19yJSjsnfge_BvxoT1LbOkTzf8ymGxz7dLV9-dxp3Wo/s400/membuat+game+sederhana+dengan+framework+phaser+3.PNG" title="Tutorial Membuat Game Sederhana dengan Framework Phaser" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tutorial membuat game dengan framework phaser</td></tr>
</tbody></table>
<b><br /></b>
<b><br /></b>
<b>Tutorial Membuat Game Sederhana dengan Framework Phaser -</b> Masih membahas tentang tutorial membuat game html 5 menggunakan framework phaser. Kali ini kita akan membahas lebih dalam lagi tentang pemrograman game berbasis html 5 dengan framework phaser. Game yang akan dibuat di sini merupakan game sederhana dengan framework phaser, yang mana kita akan berlatih cara membuat layout dalam phaser, membuat sprite untuk karakter, membuat background game dan melakukan kontrol terhadap karakter.<br />
<br />
<h3 style="text-align: left;">
Tutorial Membuat Game dengan Framework Phaser</h3>
<br />
Untuk membuat game dengan framework phaser, terlebih dahulu buatlah folder dengan nama <b>tutor2 </b>di htdoc. kemudian di dalam folder tutor2 buatlah folder lagi dengan nama assets dan js.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCh_f2RZh4fIOEAvLy_SoAVV1oxmaIZnZs4oHk9XlekwBqnoAu7Kl6hmujMVdsUyB4OTIuU3id2NSlSlIAVjn5U60XMxmBvOAQXaGASfWJ4exnxqUZxDjDOnEHV_548nmb37TWnG__tsI/s1600/membuat+game+sederhana+dengan+framework+phaser.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCh_f2RZh4fIOEAvLy_SoAVV1oxmaIZnZs4oHk9XlekwBqnoAu7Kl6hmujMVdsUyB4OTIuU3id2NSlSlIAVjn5U60XMxmBvOAQXaGASfWJ4exnxqUZxDjDOnEHV_548nmb37TWnG__tsI/s400/membuat+game+sederhana+dengan+framework+phaser.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Struktur folder tutor</td></tr>
</tbody></table>
<br />
<br />
Setelah kita membuat folder tutor beserta sub foldernya, selanjutnya kita akan memulai membuat game sederhana dengan framework phaser, langkahnya adalah sebagai berikut :<br />
<br />
1. Copy-kan file <b>phaser.min.js</b> yang berada pada folder build phaser ke dalam folder <b>js </b>yang berada pada folder tutor2 yang kita buat tadi.<br />
<br />
2. Kemudian setelah kita meng-copy file <b>phaser.min.js </b>kemudian kita cari file asset yang kita butuhkan untuk membuat game. untuk mudahnya file tersebut penulis sediakan di sini.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvCU6xEJqLwLvuw5jnVBcec_jYCGK_M732ExprNEMXe_cu-s1CjYgFr2tJG9WbdXSFbEmnA4CHbHoxMP4GWMM7oJn9YPDb-D7lJ6PjG0VZLd3NvZBtF2obwKpzjQqaRvkeE0_52uRljq8/s1600/dude.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvCU6xEJqLwLvuw5jnVBcec_jYCGK_M732ExprNEMXe_cu-s1CjYgFr2tJG9WbdXSFbEmnA4CHbHoxMP4GWMM7oJn9YPDb-D7lJ6PjG0VZLd3NvZBtF2obwKpzjQqaRvkeE0_52uRljq8/s1600/dude.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">File dude.png</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83jsR-QLhOBTXi_nnCGmj6gDb4F2HfuOlzEXesQ0Ti072HR-995KvNPLClNqwEQXfE76cSw09f4m8m3RAZquUQEIdU_xK6YZtEFNC-ba6sdzAML0DdORcHsz0l_kyfi5YrBlp1tGB-a4/s1600/platform.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83jsR-QLhOBTXi_nnCGmj6gDb4F2HfuOlzEXesQ0Ti072HR-995KvNPLClNqwEQXfE76cSw09f4m8m3RAZquUQEIdU_xK6YZtEFNC-ba6sdzAML0DdORcHsz0l_kyfi5YrBlp1tGB-a4/s1600/platform.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">File platform.png</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMX0PZ5aoY76ZjR9NDJWjB1MEVTCJIf3E2VBZRSLfVFguPdHrcwQ5MJ8LEUy3vIiJzc6qXamxwpYRgKlheZkgftoI8dVsE7fUBUmHYChnahTMo6ghj5qBz-JtWzZfT8IaIcBREo5vM3yI/s1600/sky.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMX0PZ5aoY76ZjR9NDJWjB1MEVTCJIf3E2VBZRSLfVFguPdHrcwQ5MJ8LEUy3vIiJzc6qXamxwpYRgKlheZkgftoI8dVsE7fUBUmHYChnahTMo6ghj5qBz-JtWzZfT8IaIcBREo5vM3yI/s400/sky.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">File sky.png</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgE33q0Q7mLvd9u6SqqfdUo3ysFc_rG2_nRxhABls7E2zjooTJBvB4O9WbWTEkvRj6QkF8S49FcyzVs77gJ2IjXGatYXjijKEqRF5zh3j1WJg7cQRbG-7mNMh-lX0Ta3nwoys7dDejnU/s1600/star.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgE33q0Q7mLvd9u6SqqfdUo3ysFc_rG2_nRxhABls7E2zjooTJBvB4O9WbWTEkvRj6QkF8S49FcyzVs77gJ2IjXGatYXjijKEqRF5zh3j1WJg7cQRbG-7mNMh-lX0Ta3nwoys7dDejnU/s320/star.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">File star.png</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
3. Taruh file-file asset tersebut ke dalam folder assets. Dan kemudian kita akan mulai menuliskan code untuk game phaser.<br />
<br />
4. Buatlah file latihan1.html, kemudian kita tulis code berikut ini.<br />
<br />
<pre><!doctype html>

<head>

<span class="Apple-tab-span" style="white-space: pre;"> </span><title>Membuat Game Sederhana</title>

body {

margin: 0;

}

</style>

</head>

<body>

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Load gambar dan spritesheet

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.load.image('sky', 'assets/sky.png');

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.load.image('ground', 'assets/platform.png');

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.load.image('star', 'assets/star.png');

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

var platforms;

var player;

var cursors;

var stars;

var score = 0;

var scoreText;

function create() {

<span class="Apple-tab-span" style="white-space: pre;"> </span>//menggunakan physics untuk membuat objek membunyai efek gravitasi

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.physics.startSystem(Phaser.Physics.ARCADE);

<span class="Apple-tab-span" style="white-space: pre;"> </span>//menambahkan background sky

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.add.sprite(0, 0, 'sky');

<span class="Apple-tab-span" style="white-space: pre;"> </span>//membuat grup untuk mengelompokkan objek

<span class="Apple-tab-span" style="white-space: pre;"> </span>platforms = game.add.group();

<span class="Apple-tab-span" style="white-space: pre;"> </span>//mengaktifkan physics untuk semua objek yang ada pada platforms

<span class="Apple-tab-span" style="white-space: pre;"> </span>platforms.enableBody = true;

<span class="Apple-tab-span" style="white-space: pre;"> </span>//membuat ground

<span class="Apple-tab-span" style="white-space: pre;"> </span>var ground = platforms.create(0, game.world.height - 64, 'ground');

<span class="Apple-tab-span" style="white-space: pre;"> </span>//mengatur lebar agar sesuai dengan lebar game

<span class="Apple-tab-span" style="white-space: pre;"> </span>ground.scale.setTo(2, 2);

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Fungsi agar tidak akan terjatuh saat objek karakter berada di atas ground

<span class="Apple-tab-span" style="white-space: pre;"> </span>ground.body.immovable = true;

<span class="Apple-tab-span" style="white-space: pre;"> </span>//membuat dua buah ledges

<span class="Apple-tab-span" style="white-space: pre;"> </span>var ledge = platforms.create(400, 400, 'ground');

<span class="Apple-tab-span" style="white-space: pre;"> </span>ledge.body.immovable = true;

<span class="Apple-tab-span" style="white-space: pre;"> </span>ledge = platforms.create(-150, 250, 'ground');

<span class="Apple-tab-span" style="white-space: pre;"> </span>ledge.body.immovable = true;

<span class="Apple-tab-span" style="white-space: pre;"> </span>//settingan untuk player

<span class="Apple-tab-span" style="white-space: pre;"> </span>player = game.add.sprite(32, game.world.height - 150, 'dude');

<span class="Apple-tab-span" style="white-space: pre;"> </span>//mengaktifkan physics pada player

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.physics.arcade.enable(player);

<span class="Apple-tab-span" style="white-space: pre;"> </span>//pengaturan properties untuk physics. Memberikan karakter dapat memantul

<span class="Apple-tab-span" style="white-space: pre;"> </span>player.body.bounce.y = 0.2;

<span class="Apple-tab-span" style="white-space: pre;"> </span>player.body.gravity.y = 300;

<span class="Apple-tab-span" style="white-space: pre;"> </span>player.body.collideWorldBounds = true;

<span class="Apple-tab-span" style="white-space: pre;"> </span>//membuat player dapat berjalan ke kanan dan kiri

<span class="Apple-tab-span" style="white-space: pre;"> </span>player.animations.add('left', [0, 1, 2, 3], 10, true);

<span class="Apple-tab-span" style="white-space: pre;"> </span>player.animations.add('right', [5, 6, 7, 8], 10, true);

<span class="Apple-tab-span" style="white-space: pre;"> </span>//membuat sprite bintang

<span class="Apple-tab-span" style="white-space: pre;"> </span>stars = game.add.group();

<span class="Apple-tab-span" style="white-space: pre;"> </span>//mengaktifkan physics untuk stars

<span class="Apple-tab-span" style="white-space: pre;"> </span>stars.enableBody = true;

<span class="Apple-tab-span" style="white-space: pre;"> </span>// membuat 12 bintang di layar

<span class="Apple-tab-span" style="white-space: pre;"> </span>for (var i = 0; i<12; i++) {

<span class="Apple-tab-span" style="white-space: pre;">  </span>//membuat star dari grup stars

<span class="Apple-tab-span" style="white-space: pre;">  </span>var star = stars.create(i * 70, 0, 'star');

<span class="Apple-tab-span" style="white-space: pre;">  </span>//menambahkan gravity untuk star

<span class="Apple-tab-span" style="white-space: pre;">  </span>star.body.gravity.y = 300;

<span class="Apple-tab-span" style="white-space: pre;">  </span>//membuat nilai random untuk tiap bintang

<span class="Apple-tab-span" style="white-space: pre;">  </span>star.body.bounce.y = 0.7 + Math.random() * 0.2;

<span class="Apple-tab-span" style="white-space: pre;"> </span>}

<span class="Apple-tab-span" style="white-space: pre;"> </span>//menambahkan score pada game

<span class="Apple-tab-span" style="white-space: pre;"> </span>scoreText = game.add.text(16, 16, 'Score: 0', {fontSize:'32px', fill: '#000'});

<span class="Apple-tab-span" style="white-space: pre;"> </span>//membuat kontrol karakter

<span class="Apple-tab-span" style="white-space: pre;"> </span>cursors = game.input.keyboard.createCursorKeys();

}

function update() {

<span class="Apple-tab-span" style="white-space: pre;"> </span>// Collide player dan stars dengan platforms

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.physics.arcade.collide(player, platforms);

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.physics.arcade.collide(stars, platforms);

<span class="Apple-tab-span" style="white-space: pre;"> </span>//melakukan cek apabila player bersentuhan dengan star, dan melakukan fungsi collectStar

<span class="Apple-tab-span" style="white-space: pre;"> </span>game.physics.arcade.overlap(player, stars, collectStar, null, this);

<span class="Apple-tab-span" style="white-space: pre;"> </span>// reset player velocity

<span class="Apple-tab-span" style="white-space: pre;"> </span>player.body.velocity.x = 0;

<span class="Apple-tab-span" style="white-space: pre;"> </span>if (cursors.left.isDown) {

<span class="Apple-tab-span" style="white-space: pre;">  </span>//bergerak ke kiri

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.body.velocity.x = -150;

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.animations.play('left');

<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if (cursors.right.isDown) {

<span class="Apple-tab-span" style="white-space: pre;">  </span>//bergerak ke kanan

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.body.velocity.x = 150;

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.animations.play('right');

<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {

<span class="Apple-tab-span" style="white-space: pre;">  </span>//tidak bergerak

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.animations.stop();

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.frame = 4;

<span class="Apple-tab-span" style="white-space: pre;"> </span>}

<span class="Apple-tab-span" style="white-space: pre;"> </span>//memberikan player kemampuan untuk melompat apabila tombol arrow atas ditekan

<span class="Apple-tab-span" style="white-space: pre;"> </span>if (cursors.up.isDown && player.body.touching.down) {

<span class="Apple-tab-span" style="white-space: pre;">  </span>player.body.velocity.y = -350;

<span class="Apple-tab-span" style="white-space: pre;"> </span>}

}

function collectStar (player, star) {

<span class="Apple-tab-span" style="white-space: pre;"> </span>//menghilangkan sprite bintang dari layar

<span class="Apple-tab-span" style="white-space: pre;"> </span>star.kill();

<span class="Apple-tab-span" style="white-space: pre;"> </span>//melakukan update pada score saat fungsi collectStar

<span class="Apple-tab-span" style="white-space: pre;"> </span>score += 5;

<span class="Apple-tab-span" style="white-space: pre;"> </span>scoreText.text = 'Score: ' + score;

}

</script>

</body>

</html>

</pre>
<br />
5. Tampilan dari game yang sudah kita buat akan tampil seperti berikut setelah dijalankan pada local web server.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiynAojDYm_lEe4j4lY2AcAvKbJP1XsPWKZ7bGuiDmcF2ALHnab0anNxO185vMSpyGUpowRrl4IsZJZGFXJqaZ4Lz_kmH4Zc9P5Hxq5pS6PRllsRxHK2S63IZZpLR1uAkJCqIDU1MgirTo/s1600/membuat+game+sederhana+dengan+framework+phaser+2.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiynAojDYm_lEe4j4lY2AcAvKbJP1XsPWKZ7bGuiDmcF2ALHnab0anNxO185vMSpyGUpowRrl4IsZJZGFXJqaZ4Lz_kmH4Zc9P5Hxq5pS6PRllsRxHK2S63IZZpLR1uAkJCqIDU1MgirTo/s400/membuat+game+sederhana+dengan+framework+phaser+2.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan game</td></tr>
</tbody></table>
<br />
<br />
Dalam code di atas terdapat fungsi-fungsi tambahan seperti fungsi update dan fungsi collectStar, fungsi-fungsi tersebut merupakan fungsi javascript tambahan yang kita butuhkan untuk melakukan berbagai macam aksi terhadap karakter yang ada pada game yang kita buat.<br />
<br />
Apabila kawan-kawan masih bingung tentang langkah-langkah membuat game di atas, berikut ini ada video tutorial tentang pembutan game dengan framework phaser.<br />
<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/f8nwrCPPPPE" width="560"></iframe>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ZOQSQwWkxQg" width="560"></iframe>
</div>
<br />
<br />
Demikian artikel tentang <b>Tutorial Membuat Game Sederhana dengan Framework Phaser</b>, meskipun tutorial ini sangat sederhana sekali semoga tutorial ini bisa bermanfaat. Bagi yang kurang jelas tentang bagaimana membuat game menggunakan framework phaser seperti contoh di atas, kawan-kawan bisa mendownload file-nya <a href="http://adf.ly/1l5e5c">DI SINI</a>.</div>

Tutorial Membuat Game Sederhana dengan Framework Phaser

Tutorial membuat game dengan framework phaser Tutorial Membuat Game Sederhana dengan Framework Phaser - Masih membahas tentang tutor...

Baca selengkapnya »

3/07/2017

Tutorial Dasar Membuat Game dengan Framework Phaser

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMU5Qj5q12PUVPqyezP6_caUHG_kXqp2W4LZPFRPjZiQh5W_-AfK9pX_S_24lFmUcWXIm5u_Y_E8lKqb5JYrwx_0icB1UrjjZwD3Uzka0PIMpwwVainswJ-UP6To0i0bjXlIs0PKlLvXk/s1600/tutorial+dasar+memuat+game+dengan+framework+phaser+4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tutorial Dasar Membuat Game dengan Framework Phaser" border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMU5Qj5q12PUVPqyezP6_caUHG_kXqp2W4LZPFRPjZiQh5W_-AfK9pX_S_24lFmUcWXIm5u_Y_E8lKqb5JYrwx_0icB1UrjjZwD3Uzka0PIMpwwVainswJ-UP6To0i0bjXlIs0PKlLvXk/s400/tutorial+dasar+memuat+game+dengan+framework+phaser+4.png" title="Tutorial Dasar Membuat Game dengan Framework Phaser" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tutorial Membuat Game dengan Framework Phaser</td></tr>
</tbody></table>
<br />
<br />
<b>Tutorial Dasar Membuat Game Menggunakan Framework Phaser -</b> Bagi kawan-kawan yang ingin belajar membuat game yang nantinya bisa dibuat menjadi game android. Maka kita harus terus praktek membuat berbagai macam jenis game. Setelah sebelumnya <a href="http://beriteknol.blogspot.co.id/"><b>Beriteknol</b></a> memposting tentang <a href="http://beriteknol.blogspot.co.id/2017/03/mengenal-framework-phaser-untuk-membuat.html">Framework Phaser</a> yang merupakan game engine open source yang bisa digunakan untuk pembuatan game tipe HTML 5, maka pada artikel kali ini akan dibahas tentang tuorial dasar pembuatan game menggunakan Framework Phaser. Untuk mempraktekkan membuat game menggunakan framework phaser kalu bisa jangan tinggal copas ya... hal ini agar kawan-kawan terbiasa untuk engetik code program lewat framework phaser.<br />
<br />
<h3 style="text-align: left;">
Membuat Game dengan Framework Phaser</h3>
<br />
1. Yang pertama silahkan kawan-kawan download dulu framework phaser pada <a href="https://github.com/photonstorm/phaser-ce/archive/v2.7.3.zip">link ini</a>. Setelah file zip framework phaser selesai di download <i>extract</i>-lah file tersebut maka di dalamnya berisi file dan folder seperti berikut ini.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh2t9x2pln9rwF7c8I2dhiUYKmt5o2JjSeeilL85r1KDo5fXweUNIUo4GaEMhtu4Bj2IS4qczLcwi8O2Gtrazti8SRrPYvTvCFZ4qdqUne572mDefj1gf8J99Kk0UFvWrkSUNeONMduso/s1600/tutorial+dasar+memuat+game+dengan+framework+phaser+1.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh2t9x2pln9rwF7c8I2dhiUYKmt5o2JjSeeilL85r1KDo5fXweUNIUo4GaEMhtu4Bj2IS4qczLcwi8O2Gtrazti8SRrPYvTvCFZ4qdqUne572mDefj1gf8J99Kk0UFvWrkSUNeONMduso/s400/tutorial+dasar+memuat+game+dengan+framework+phaser+1.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Struktur Folder framework phaser<b><br /></b></td></tr>
</tbody></table>
<br />
<br />
2. Kemudian buka pada folder build, di situ terdapat berbagai file javascript yang nantinya akan kita butuhkan dalam pembuatan game dengan framework phaser. Untuk belajar, coba pilih file <b>phaser.min.js</b> dan copikan ke folder tempat kita berlatih membuat game dengan framework phaser.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkO63L6qYeTkBN6pTgO5w4GImJZAb0Ubvae46Un7TOPevpOL0h_hOSl2WvW45tBQBqV-i3y_gAOxbhtt8oj9LqXlF72RSjZKc2_SRDN0o8VghOqeiwZzhaesmL0l3ILsnooCCOVqcT7M/s1600/tutorial+dasar+memuat+game+dengan+framework+phaser+2.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkO63L6qYeTkBN6pTgO5w4GImJZAb0Ubvae46Un7TOPevpOL0h_hOSl2WvW45tBQBqV-i3y_gAOxbhtt8oj9LqXlF72RSjZKc2_SRDN0o8VghOqeiwZzhaesmL0l3ILsnooCCOVqcT7M/s400/tutorial+dasar+memuat+game+dengan+framework+phaser+2.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">File phaser.min.js</td></tr>
</tbody></table>
<br />
<br />
 3. Misal di sini kita membuat folder latihan di document. Kemudian kita mulai membuat file HTML gunakan sebuah program editor terserah. Jangan menggunakan MS Word ya... di sini kita bisa menggunakan notepad, namun saya sarankan menggunakan editor khusus untuk pemrograman contohnya sublime, notepad++, dll. Untuk notepad++ merupakan aplikasi editor gratis dan bisa kawan-kawan download <a href="https://notepad-plus-plus.org/download/v7.3.2.html">DI SINI</a>. gunakanlah gambar <b>phaser.png </b>berikut dan masukkan pada folder latihan.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TnAurxVZ08-szIvxrlQPTlBjIWljZwKwG5rQ740VYTfhT4ntsySiEryuYuHKyDF9de7Agjn8LTrOIrLjNB7zVXXWY2YFZQgUQeMufoMDpzK3dXOyc53DlBAX9mxOV00bJ1IQ7PC066I/s1600/phaser.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TnAurxVZ08-szIvxrlQPTlBjIWljZwKwG5rQ740VYTfhT4ntsySiEryuYuHKyDF9de7Agjn8LTrOIrLjNB7zVXXWY2YFZQgUQeMufoMDpzK3dXOyc53DlBAX9mxOV00bJ1IQ7PC066I/s320/phaser.png" width="320" /></a></div>
<br />
<br />
4. Struktur folder latihan akan seperti berikut ini.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxwewWKAfgcFFEN1qtYsNN6nTUUndFUGgjr255s_6ISW6htiuRBAMQ2oMJXVipS31xS6H4lzTX64AQJbur7HcseNjlNx4BX7FdH4rDuz5YawkfmbXtGWrPM-GAvVcdNL1XYOgJEv2Tvk/s1600/tutorial+dasar+memuat+game+dengan+framework+phaser+3.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxwewWKAfgcFFEN1qtYsNN6nTUUndFUGgjr255s_6ISW6htiuRBAMQ2oMJXVipS31xS6H4lzTX64AQJbur7HcseNjlNx4BX7FdH4rDuz5YawkfmbXtGWrPM-GAvVcdNL1XYOgJEv2Tvk/s400/tutorial+dasar+memuat+game+dengan+framework+phaser+3.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Struktur folder latihan</td></tr>
</tbody></table>
<br />
<br />
Kemudian kita membuat file <b>index.html</b> sebagai file utama untuk menjalankan framework phaser. Ketikkan code program berikut.<br />
<br />
<pre><!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello phaser!</title>
        <script src="phaser.min.js"></script>
    </head>
    <body>

window.onload = function() {

//membuat code untuk tampilan layar dari game phaser.
        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });

//function ini digunakan untuk meload asset sebelum game dijalankan
        function preload () {

game.load.image('logo', 'phaser.png');

}

//menjalan create game yang membuat framework phaser menampilkan dan menjalankan game
        function create () {

var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
            logo.anchor.setTo(0.5, 0.5);

}

};

</script>

</body>
</html></pre>
<br />
5. Untuk menjalankan project file di atas gunakanlah aplikasi local web server seperti xamp ataupun wamp. Untuk xampp taruh folder latihan di <b>htdoc</b> kemudian jalankan file html yang telah kita buat tadi maka hasilnya akan seperti berikut. Dan selamat kita telah mengenal dasar pembuatan game dengan framework phaser.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_k2dIsG1g4HCzrRmoxNKMmatjgCpoFzsYCM3Nta2Zx3l0seKAyvFnNhQOfRQG8_Q3_drzUgulGEC22ApS23TcmbDstoxciuh4DLvH5ifXUM3Rjoz9pAFYIH6TI02IsNpc1mme5RVlbo/s1600/tutorial+dasar+membuat+game+dengan+framework+phaser+5.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_k2dIsG1g4HCzrRmoxNKMmatjgCpoFzsYCM3Nta2Zx3l0seKAyvFnNhQOfRQG8_Q3_drzUgulGEC22ApS23TcmbDstoxciuh4DLvH5ifXUM3Rjoz9pAFYIH6TI02IsNpc1mme5RVlbo/s400/tutorial+dasar+membuat+game+dengan+framework+phaser+5.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan pembuatan game menampilkan hellophaser</td></tr>
</tbody></table>
<br />
<br />
Demikian artikel sederhana tentang <b>Tutorial Dasar Membuat Game dengan Framework Phaser</b>, meskipun tutorial ini masih sangat sederhana semoga artikel ini bisa bermanfaat.
<strike></strike>

</div>