Sistem Operasi Tizen yang mendukung penuh aplikasi berbasis web membuat proses pembuatan aplikasi mobile di Tizen menjadi lebih mudah, termasuk membuat game mobile. Ada banyak pilihan framework dan game engine yang bisa kita pelajari untuk membuat game mobile berbasis HTML5. Ada yang berbasis GUI seperti Construct 2 dan GameMaker, ada pula yang scripting, seperti Phaser, Pixi.js, ImpactJS, EaselJS, dan lain sebagainya. Pada tutorial ini kita akan menggunakan framework Phaser untuk membuat game puzzle Simon Says.

Skenario gamenya adalah Simon (nama aplikasinya) akan memilih angka dan kita harus mengikuti memilih angka yang dia pilih. Simon kemudian akan memilih angka lama dan menambah angka baru lalu kita harus memilih angka yang sama dengan urutan yang sama pula. Setiap kali kita berhasil memilih angka dengan urutan yang sama, Simon akan menambah angka sehingga urutannya menjadi semakin panjang. Pemain harus mengingat dengan baik urutan angka yang sudah dipilih Simon. Pemain dinyatakan kalah apabila salah dalam memilih urutan angka. Berikut adalah hasil akhir dari game yang akan kita buat (klik area game untuk resume):

<iframe src="https://assets.codepolitan.com/SimonSaysNumber/" width="320" height="540"></iframe>

Game ini saya adaptasi dari sample game Phaser yang dapat Kamu akses juga di tautan <a href="http://phaser.io/examples/v2/games/simon">http://phaser.io/examples/v2/games/simon</a>. Pada tutorial ini saya menyesuaikan kode program dan asset gambar agar mudah dijelaskan dalam tutorial.
<h2>Persiapan</h2>
Buat project Tizen baru di Tizen IDE dengan mengklik menu <strong>File &gt; New &gt; Tizen Web Project</strong>. Klik <strong>tab Sample</strong> dan pilih <strong>template Basic</strong>. Beri nama project lalu klik tombol <strong>Finish</strong>.

Unduh library Phaser dari tautan yang ada di halaman <a href="http://phaser.io/download/stable">http://phaser.io/download/stable</a>. Pilih yang <strong>min.js</strong> untuk production agar ukurannya lebih kecil, disamping karena kita tidak akan memodifikasi ataupun membuka file tersebut. Setelah  diunduh, simpan di dalam folder js/ pada project. Kemudian load di dalam file index.html di dalam tag <code>&lt;head&gt;</code>, sehingga kode html kita menjadi seperti berikut:
<pre>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;Simon&lt;/title&gt;
    &lt;script type="text/javascript" src="js/phaser.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
        body {margin: 0;}
    &lt;/style&gt;
&lt;/head&gt;</pre>
Kemudian dalam tag &lt;body&gt;, tambahkan script berikut:
<pre>&lt;script type="text/javascript"&gt;
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', 
    { preload: preload, create: create, update: update, render: render });
function preload()
{

}

function create()
{

}

function update()
{

}

function render()
{

}</pre>
Ini adalah struktur dasar program game di Phaser. Baris pertama adalah kode yang membangkitkan phaser dengan membuat instance dari objek Phaser.Game dan menyimpannya di dalam variabel ‘game’. Variabel untuk Phaser.Game ini tidak mesti bernama ‘game’. Kamu bisa menggunakan nama variabel lain. Tapi penggunaan nama variabel ‘game’ ini akan sering Kamu temui bila membuka contoh-contoh game yang ada di website Phaser.

Dua parameter pertama adalah lebar dan tinggi dari elemen canvas yang akan dibuat oleh Phaser. Pada contoh di atas, kita menggunakan ukuran lebar dan tinggi dari jendela browser, dengan menggunakan kode window.innerWidth dan window.innerHeight. Sehingga ukuran canvas game akan selalu menggikuti ukuran jendela browser. <strong>Perhatikan bahwa pada device Tizen, kode window.innerWidth dan window.innerHeight tidak mengembalikan nilai yang tepat, oleh karenanya gunakan</strong> <code>screen.width</code> <strong>dan</strong> <code>screen.height</code><strong>.</strong>

Parameter ketiga adalah rendering context, dapat diisi dengan konstanta Phaser.CANVAS, Phaser.WEBGL, atau Phaser.AUTO. Kita dianjurkan menggunakan Phaser.AUTO, karena ini akan membuat Phaser menggunakan WebGL ketika browser mendukung WebGL, dan bila tidak maka Phaser akan menggunakan Canvas.

Parameter keempat adalah string nama id untuk elemen canvas yang nantinya akan dibuat oleh Phaser. Parameter terakhir adalah objek berisi 4 buah referensi dari fungsi utama Phaser, yakni <code>preload()</code>, <code>create()</code>, <code>update()</code> dan <code>render()</code>.
<h2>Load Asset</h2>
Kita punya satu buah file gambar angka-angka dari 0-9 seperti panel tombol telepon seperti ini:

<img class="alignnone size-full wp-image-12185" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/buttons.png" alt="buttons" width="180" height="240" />

Kita akan memasukkan asset game kita ke dalam program. Simpan gambar di atas ke dalam folder <strong>images/</strong> pada project, lalu coba masukkan kode program berikut ke dalam fungsi <code>preload()</code>:
<pre>function preload() {
    game.load.image('number', "./images/buttons.png");
}</pre>
Method <code>game.load.image()</code> pada kode di atas berfungsi untuk memuat asset gambar kita ke dalam program dan memberinya label ‘number’. Kemudian pada fungsi <code>create()</code>, tambahkan kode berikut:
<pre>function create()
{
    var number = game.add.sprite(0,0,'number');
}</pre>
Method game.add.sprite() pada kode di atas berfungsi untuk membuat objek sprite dari asset berlabel ‘number’ yang sudah kita muat sebelumnya, dan menyimpannya di dalam variabel number. Parameter pertama dan kedua adalah posisi x dan y dimana kita akan menampilkan gambar tersebut. Bila kamu menjalankan aplikasi di web simulator, maka akan tampil seperti berikut:

<img class="alignnone size-full wp-image-12186" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/1-2.png" alt="1" width="521" height="447" />
<h2>Menggunakan Spritesheet</h2>
Baiklah, kode di atas sebenarnya hanya untuk memberikan gambaran bagaimana Phaser menampilkan asset gambar di dalam aplikasi. Pada scenario game kita, kita ingin agar setiap tombol angka berdiri sendiri dan masing-masing dapat ditekan tanpa mempengaruhi tombol yang lain. Untuk itu kita harus memecah setiap angka agar menjadi objek tersendiri. Method <code>game.load.image()</code> hanya memuat satu buah gambar sebagai gambar utuh. Sedangkan untuk membagi gambar dengan ukuran tertentu kita menggunakan method <code>game.load.spritesheet()</code>. Ganti method yang ada ada di dalam fungsi <code>preload()</code> menjadi seperti berikut:
<pre>function preload() {
    game.load.spritesheet('number', "./images/buttons.png", 60, 60);
}</pre>
Jalankan lagi aplikasi. Apa yang terjadi? Yups, aplikasi menampilkan hanya angka 1 saja. Method <code>game.load.spritesheet()</code> menerima dua parameter pertama seperti method <code>game.load.image()</code> yang sebelumnya kita gunakan. Selain itu, ada 2 parameter lagi yakni ukuran lebar dan tinggi dari setiap angka pada gambar, yakni 60 x 60px. Method <code>spritesheet()</code> akan otomatis memotong-motong gambar seperti kita memotong kue, masing-masing dengan ukuran 60x60, ke samping dan ke bawah, kemudian setiap potongan diberi indeks dari 0 – n sebanyak potongan yang ada. Gambar angka kita berisi 3 kolom dan 4 baris angka. Kita akan menyimpan setiap angka ke dalam objek tersendiri.

Buat variabel global di luar fungsi <code>create()</code>:
<pre>var column;
var numpad;</pre>
Hapus kode method yang ada di dalam fungsi <code>create()</code> sebelumnya, lalu ganti dengan kode berikut:
<pre>    // bagi lebar canvas menjadi 4 ukuran kolom
    column = game.world.width/4;

    // buat grup objek untuk angka
    numpad = game.add.group();

    // siapkan variabel untuk menyimpan objek angka
    var number;

    // siapkan variabel untuk mengacu indeks angka
    var k = 0;

    // iterasi baris
    for (var i = 1; i &lt;= 4; i++)
    {
        // iterasi kolom
        for (var j = 1; j &lt;= 3; j++)
        {
            // buat objek angka berdasarkan indeksnya
            number = numpad.create(column * j, column * i, 'number', k);

            // set anchor point ke tengah gambar
            number.anchor.setTo(.5, .5);

            // naikkan indeks
            k++;
        }
    }</pre>
Jalankan aplikasi, dan sekarang angka-angka akan berada di posisi yang lebih enak dilihat.

<img class="alignnone size-full wp-image-12187" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/2-2.png" alt="2" width="521" height="535" />

Pada kode di atas, kita mengambil ukuran dari lebar jendela dibagi 4 untuk menjadi patokan penempatan kolom dan baris dari angka-angka. Kemudian kita melakukan pengulangan sebanyak baris dan kolom untuk angka-angka kita, yakni 4 baris dan 3 kolom. Kita membuat objek angkake dalam variabel number dengan menggunakan method <code>numpad.create()</code>, dengan parameter pertama dan kedua adalah posisi penempatan gambar. Nilai lebar tiap kolom dan baris itulah yang menjadi koordinat posisi gambar angka-angka tersebut. Parameter ketiga adalah label untuk asset gambar yang akan digunakan, dan parameter keempat adalah indeks dari spritesheet gambar yang sudah kita potong-potong di awal. Kita juga memanggil method <code>number.anchor.setTo(.5, .5);</code> untuk memposisikan titik acuan perhitungan posisi koordinat di tengah gambar. Secara default titik acuan koordinat objek ada di 0,0 atau di kiri atas objek. Makanya kita pindahkan ke posisi 0.5,0.5 agar titiknya ada di tengah, sehingga bambar berada tepat di tengah garis pembagi. Untuk lebih jelasnya lihat ilustrasi berikut:

<img class="alignnone size-full wp-image-12188" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/4-2.png" alt="4" width="395" height="469" />
<h2>Menambahkan Input Handler</h2>
Sampai sini game kita belum bisa diberi interaksi apapun. Kita akan mengaktifkan objek number agar dapat menerima input klik/tekan. Secara default semua objek tidak dapat menerima input apapun hingga ia diaktifkan. Untuk mengaktifkannya kita set properti <strong>inputEnabled</strong> menjadi <strong>true</strong> dan menjalankan input handler untuk objek dengan menggunakan method <code>input.start()</code>. Lebih jelasnya, tambahkan dua baris berikut <strong>sebelum kode k++;</strong> di dalam perulangan:
<pre>number.inputEnabled = true;
number.input.start(0, true);</pre>
Kita akan membuat efek tekan, dengan mengeset alpha pada semua angka menjadi 0.25 dan mengeset alpha menjadi 1 pada angka yang ditekan. Untuk itu tambahkan kode berikut <strong>sebelum kode k++;</strong> pada perulangan:
<pre>numpad.getAt(k).alpha = .25;
number.events.onInputDown.add(select);
number.events.onInputUp.add(release);</pre>
Kita menambahkan event listener ketika angka diklik/tekan dengan memanggil fungsi callback ‘select’ dan ketika angka dilepas dengan memanggil fungsi callback ‘release’. Untuk itu buat fungsi select() dan release() seperti kode berikut di bawah fungsi <code>create()</code>:
<pre>function select(number, pointer)
{
    number.alpha = 1;
}

function release(number, pointer)
{
    number.alpha = .25;
}</pre>
Jalankan aplikasi, dan Kamu akan melihat angkanya seolah-olah menyala ketika ditekan, dan kembali redup ketika dilepas.
<h2>Membuat Countdown Aba-aba</h2>
Kita tidak ingin begitu pemain menjalankan game, game langsung memilih angka begitu saja. Kita ingin agar pemain mempersiapkan diri terlebih dahulu supaya permainan tidak terlewat. Kita akan membuat hitung mundur supaya pemain bersiap-siap menjelang permainan.

Deklarasikan variabel <strong>commandText</strong> sebelum fungsi <code>create()</code>. Kemudian tambahkan kode berikut di bagian akhir fungsi <code>create()</code>:
<pre>commandText = game.add.text(game.world.width/2, game.world.height - 120, "Get ready in 5", 
              {fontSize: '30px', fill: '#fff'});
commandText.anchor.setTo(.5, .5);
getReady(5);</pre>
Kemudian buat fungsi <code>getReady()</code> di bawah fungsi <code>create()</code>:
<pre>function getReady(count)
{
    commandText.text = "Get ready in " + count;
    intro = true;
    if(count &gt; 0)
        setTimeout(function(){getReady(--count);}, 1000);
}</pre>
Kita membuat objek teks countdown berwarna putih di bagian bawah layar. Kemudian mengupdate teksnya dengan hitungan mundur menggunakan fungsi <code>getReady()</code> yang kita buat. Fungsi ini rekursif, artinya dia memanggil dirinya sendiri selama variabel <strong>count</strong> di dalam parameter lebih dari 0.
<h2>Mengatur Urutan Angka</h2>
Sekarang kita akan mempersiapkan angka yang akan dipilih oleh Simon supaya diikuti oleh pemain. Yup, kita akan mempersiapkan urutannya sejak awal. Untuk itu tulis kode berikut di bagian akhir fungsi <code>create()</code>:
<pre>setUpSequence();
setTimeout(function(){simonSequence(); intro = false;}, 6000);</pre>
Kemudian buat dua fungsi <code>setUpSequence()</code> dan <code>simonSequence()</code> seperti yang dipanggil pada kode di atas:
<pre>function setUpSequence()
{
    for (var i = 0; i &lt; totalSequence; i++)
    {
        sequence = game.rnd.integerInRange(0,11);
        sequenceList.push(sequence);
    }
}

function simonSequence()
{
    simonSays = true;
    litSquare = sequenceList[currentCount];
    numpad.getAt(litSquare).alpha = 1;
    timeCheck = game.time.now;
    currentCount++;
}</pre>
Kemudian tambahkan juga kode ini di dalam fungsi update():
<pre>function update()
{
    if (simonSays)
    {
        if (game.time.now - timeCheck &gt;700-N*40)
        {
            numpad.getAt(litSquare).alpha = .25;
            game.paused = true;

            setTimeout(function()
            {
                if ( currentCount&lt; N)
                {
                    game.paused = false;
                    simonSequence();
                }
                else
                {
                    simonSays = false;
                    game.paused = false;
                }
            }, 400 - N * 20);
        }
    }
}</pre>
Ada beberapa variabel global yang harus kita deklarasikan sehubungan dengan dipakainya di dalam kedua fungsi ini, yakni:
<pre>var totalSequence = 16;
var sequenceList = [];
var simonSays = false;
var litSquare;
var currentCount = 0;
var timeCheck;
var N = 1;</pre>
Pertama-tama pada fungsi <code>setUpSequence()</code> kita siapkan urutan angka acaknya sebanyak 16 digit dan simpan di dalam variabel array <code>sequenceList</code>. Kemudian kita panggil fungsi <code>simonSequence()</code> untuk memulai menampilkan angka pilihan tersebut. Bila Kamu jalankan aplikasinya sekarang, maka game akan menghitung mundur untuk persiapan, lalu menyalakan satu angka acak pertama, lalu mati. Itu terjadi karena memang kita buat supaya pertama kali dia mulai menampilkan 1 angka saja.

Setelah ini kita ingin agar pemain menekan angka yang dipilih Simon. Bila pilihannya benar, maka Simon akan menambah satu angka lagi dari yang sudah dipilih pertama tadi, begitu seterusnya. Untuk itu kita harus membuat fungsi untuk menerima angka pilihan pemain.
<pre>function playerSequence(selected)
{
    correctSquare = sequenceList[userCount];
    userCount++;
    sequence = numpad.getIndex(selected);

    if (sequence == correctSquare)
    {
        if (userCount == N)
        {
            if (N == totalSequence)
            {
                winner = true;
                setTimeout(function(){restart();}, 3000);
            }
            else
            {
                userCount = 0;
                currentCount = 0;
                N++;
                simonSays = true;
            }
        }
    }
    else
    {
        loser = true;
        setTimeout(function(){restart();}, 3000);
    }
}</pre>
Kemudian panggil fungsi ini setiap kali angka ditekan, yakni pada fungsi <code>release()</code>:
<pre>function release(number, pointer)
{
    number.alpha = .25;
    playerSequence(number);
}</pre>
Fungsi <code>playerSequence()</code> akan mencatat setiap angka yang ditekan, dan dicek kesamaan urutannya dengan yang diminta oleh Simon. Bila satu angka saja salah, maka catat bahwa pemain sudah kalah. Pada fungsi ini diperlukan beberapa variabel global:
<pre>var userCount = 0;
var winner;
var loser;</pre>
Sampai sini, bila Kamu menjalankan gamenya, maka kamu sudah bisa memainkan game sesuai dengan skenario!
<h2>Menampilkan Pesan Aksi</h2>
Kita ingin agar game kita dapat dipahami oleh pemain tanpa harus dijelaskan terlebih dahulu. Oleh karena itu panduan interaksi dan pesan aksi pada game sangat diperlukan. Tambahkan kode berikut ke dalam fungsi <code>render()</code>:
<pre>function render()
{
    if (!intro)
    {
        if (simonSays)
        {
            commandText.text = 'Simon says';
            commandText.fill = 'orange';
        }
        else
        {
            commandText.text = 'Your turn';
            commandText.fill = 'green';
        }
    }

    if (winner)
    {
        commandText.text = 'You win!';
        commandText.fill = 'green';
    }
    else if (loser)
    {
        commandText.text = 'You lose!';
        commandText.fill = 'red';
    }
}</pre>
Fungsi render ini akan menampilkan caption “Simon says” ketika Simon memilih angka, menampilkan caption “Your turn” untuk memberitahu bahwa saatnya bagi pemain untuk memilih angka, dan caption “You lose” bila pemain salah memilih urutan angka. Oh ya, game juga akan menampilkan caption “You win!” bila pemain bisa menyelesaikan ke-16 urutan angka tersebut. Apakah Kamu bisa?? :D

<img class="alignnone size-full wp-image-12189" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/5-2.png" alt="5" width="685" height="398" />
<h2>Penutup</h2>
Tentu saja tutorial ini hanya menjelaskan inti dari alur logika pemrogramannya. Kamu masih harus menambahkan fungsi untuk menahan pemain agar tidak dapat menekan tombol ketika waktu persiapan dan ketika Simon sedang memilih angka. Kamu juga masih harus membuat dan memanggil fungsi <code>restart()</code> ketika user sudah menang atau kalah dan ingin main lagi. Kamu juga dapat memperindah tampilan gamenya dengan warna-warna yang enak dilihat supaya pemain lebih betah bermain game ini.

Bila Kamu kesulitan mempelajari tutorial ini dari awal, Kamu bisa langsung merujuk pada kode jadinya yang bisa diunduh di tautan <a href="http://assets.codepolitan.com/SimonSaysNumber/SimonSaysNumber.zip" target="_blank">berikut ini</a>. Selamat bereksplorasi! :D

Membuat Game Tizen Mobile Menggunakan Framework Phaser

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Game Tizen Mobile Menggunakan Framework Phaser

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino