Membuat Game Wearable Sederhana dengan Construct 2

Game engine Construct 2 adalah tools untuk membuat sebuah game HTML5 tanpa coding sehingga sangat cocok bagi pemula yang belum pernah mengenal pemrograman dan bagi developer yang ingin membuat sebuah game dalam waktu yang singkat. Selain itu Construct 2 juga sudah banyak contoh, tutorial dan dokumentasi yang disedikan tentang pembuatan game dari yang sederhana sampai yang kompleks. Sedangkan Tizen sendiri adalah sebuah Sistem Operasi yang dirancang dapat berjalan secara optimal berbagai perangkat device.
Pada tutorial kali ini kita akan membahas tentang cara membuat game wearable sederhana dengan menggunakan Construct 2. Kamu akan menbuat game dari nol sampai bisa jalan di device wearable Samsung Gear S2 dan juga  terdapat info-info penting dibagian akhir.
Tujuan tutorial ini adalah untuk memperkenalkan kemudahan membuat game wearable dengan Construct 2 untuk Tizen Wearable dan siap untuk segera dipublish ke GallaxyApp Store. Beberapa hal akan dijelaskan secara bertahap sehingga mudah dipahami.
Sebelum memulai tutorial ini, Pastikan koneksi internet stabil. Jangan lupa sediakan kopi dan cemilan secukupnya.

Skenario Game

Game yang akan dibuat mengambil ide dari game Pin Ball tetapi membuat versi lebih sederhananya. Pemain harus menjaga bola tetap diarea permainan dengan mengandalkan 2 kontrol kanan dan kiri. Semakin lama permainan maka semakin tinggi skor yang diperoleh.

attact from mars sumber gambar dari: http://www.greatbitblog.com/im-going-to-play-pinball-for-charity/

Beberapa hal yang harus diperhatikan adalah Samsung Gear S2 memiliki resolusi kecil yaitu 360 x 360 pixel dan 302 ppi. bentuk layar adalah lingkaran dan bukan kotak seperti pada umumnya. Untuk kontrol itu sendiri memiliki 3 jenis yaitu Bezel, Touchscreen dan bottons. dapat dilihat digambar berikut:
 kontrol samsung gear s2 sumber gambar dari http://www.technobezz.com/samsung-gear-s2-comes-with-full-circle-design-and-rotating-bezel-ifa-2015/
Kemudian pada akhirnya penulis membuat sebuah game yang diberi nama RotaryBall yang dimana menggunakan ketiga fungsi kontrol tersebut dalam gamenya. touch untuk memulai permainan, Bezel untuk kontrol bola di gameplay dan tombol back untuk keluar dari aplikasi. Konsep game tetap seperti Pinball yang menjaga bola supaya tidak keluar dari layar walaupun tidak semeriah seperti contohnya.
RotaryBall
Selanjutnya akan membahas cara membuat dan akan dijelaskan secara bertahap.

Instal Software yang akan Digunakan

Berikut ini software yang diperlukan untuk mengembangkan Tizen Wearable Device:
  • Construct 2 r232 (free edision)
  • Java Development Kit 8 (JDK)
  • Tizen 2.4 SDK with IDE 
Construct 2 v232
Construct adalah sebuah game engine powerful yang tidak mengharuskan developer untuk mengkoding. sehingga developer dapat fokus pada logika dan perancangan game yang akan dibuatnya.
download constrcut 2

Java Development Kit 8 (JDK)

Buka laman Java SE Development Kit 8 Downloads. Kemudian download dan instal JDK-8u101. Jangan lupa untuk centang "Accept License Agreement" sebelum download.
download jdk
Tizen 2.4 SDK with IDE 
Buka laman Tizen 2.4 Rev8 SDK Download ,Download dan instal Tizen 2.4 SDK with IDE installer
download tizen ide
Setelah berhasil diinstal, kemudian buka aplikasi Update Manager-2.4 kemudian install Wearable Extension for 2.3.1 dan Emulator
instal wearable extension
instal emulator

Membuat Project Baru

Kita akan memulai dari benar-benar awal sampai jadi. Pertama-tama Buka aplikasi Construct 2 lalu pilih menu File > New, dan pilih New empty project.
new project construct 2
Maka akan muncul halaman awal yang masih kosong untuk membuat game.
new layout
kemudian klik folder New Project dan atur konfigurasi di Properties. Isilah data tersebut dengan lengkap seperti dibawah ini.
set project
Pastikan Resolusi menggunakan 360x360 pixel dan Fullscreen menggunakan Scale outer. Kemudian Klik layout dan perhatikan Layout Size di Properties. atur nilai 360x360 pixel.
set layout
Maka tampilan akan menjadi seperti dibawah ini dengan bentuk persegi dengan ukuran 360 x 360 pixel.
layout wearable
Langkah selanjutnya memasukkan assets

Memasukkan Asset Gambar

Ada beberapa langkah untuk memasukkan asset gambar ke game, antara lain:
Menyiapkan Asset gambar
Asset yang digunakan game ini anda dapat unduh Asset RotaryBall.zip. isi file tersebut berisi seperti gambar dibawah ini:
asset gambar
Menambahkan Latar Belakang
Supaya latar belakang tidak kosong maka kita perlu menambahkan sebuah gambar yang sudah disiapkan. caranya dengan klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Background. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file background.jpg dari asset yang telah didownload. atur posisi ke 180,180 sehingga tampak full di layout.
position
Menambahkan Border
Untuk mempercantik pinggiran pada layar wearable maka kita perlu untuk membuat sebuah lingkaran yang berukuran 360x360 pixel. Caranya sama seperti memasukkan latar belakang. Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Border. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file border.png dari asset yang telah didownload. atur posisi ke 180,180 sehingga tampak full di layout
Menambahkan Dinding (wall)
tujuan penambahan dinding atau wall ini adalah untuk memantulkan bola supaya tidak keluar dan wall ini dapat digerakkan dengan dikontrol oleh bezel yang terdapat di Samsung Gear S2. agar dalam bermain nyaman, kita membutuhkan dua wall kanan dan kiri untuk memantulkan bola. pertama-tama kita masukkan dulu dinding/wall1 dengan cara Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Wall1. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file wall.png dari asset yang telah didownload. atur juga Collision Poligon untuk menentukan area sebagai pantulan object. dan jangan lupa atur posisi ke 180,180 sehingga tampak tepat pada garis border.
collider wall
kemudian untuk wall yang kedua. kita menggunakan asset yang sama dan cara yang sama tetapi kita perlu mengubah nama menjadi Wall2 dan mengubah posisi dinding dari sebelah kiri menjadi berapa di sebelah kanan dengan menggunakan icon Mirror pada jendela Edit Image.
Setelah itu, berilah sifat Solid pada Wall1 dan Wall2 supaya dapat memantulkan object dari garis collision yang telah ditentukan. cara menambahkan sifat solid dengan cara klik object Wall1 di kolom Objects kemudian pada kolom Properties klik Behaviors, kemudian akan muncul jendela "Wall1: Behaviors", setelah itu klik icon Plus(Add new) dan tambahkan Solid. Fungsi solid itu sendiri supaya object tidak dapat ditembus oleh oject yang lain yang memiliki sifat grafitasi.
behavior solid
Lakukan juga terhadap Wall2 untuk menambahkan sifat solid seperti penambahan di Wall1. Jadi tampilan Wall1 dan Wall2 di layout seperti berikut:
show layout
Kemudian, untuk menggerakan wall tersebut akan menggunakan kontrol bezel yang dimana nilai tersebut didapat dari fungsi yang sudah terintegrasi dengan javascript. penggunaan javascript akan dibahas ditahap selanjutnya. untuk menambahkan fitur Fungsi, caranya dengan Klik kanan pada layout, pilih insert New Object > pilih Function. function ini akan digunakan ditahap selanjutnya.
 
Menambahkan bola (ball)
Bola ini berfungsi sebagai player yang dapat menentukan kapan berakhirnya permainan. Pemain harus menjaga bola tetapi berapa didalam lingkaran merah dengan dibantu oleh wall untuk memantulkan si bola agar tetepdi dalam. wall ini dapat berputar dengan dikontrol oleh bezel. kemudian cara untuk menambahkan bola (ball) ini dengan cara   Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Ball. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file ball.png dari asset yang telah didownload. pasisikan bola persis ditengah-tengah dengan memberi nilai posisi 180,180 pada kolom Properties.
Setelah bola ditambahkan, kemudian memberi sifat Peluru pada bola agar dapat bergerak dan memantul. Caranya dengan klik Object Ball pada kolom Objects dan kemudian pada kolom Properties, klik Behaviors. setelah muncul jendela "Ball: Behaviors", klik icon Plus(add new) dan tambahkan Bullet. kemudian atur konfigurasi Bullet pada Properties dengan membari nilai 0 pada speed.
Menambahkan Text untuk Skor
Terasa kurang jika bermain game tetapi kita tidak tahu berapa skor yang kita peroleh. maka kita akan membutuhkan 3 text untuk menampilkan informasi skor. baik itu saat gameplay atau pada saat di home/gameover. Cara menambahkan Text dengan  Klik kanan pada layout, pilih insert New Object > pilih Text. tambahkan untuk 3 Text. Untuk masing-masing konfigurasi text tersebut sebagai berikut:
Text 1
  • Name: LabelScore
  • Position: 180,36
  • Size: 200,30
  • Text: Last Score
  • Font: Arial(21)
  • Horizontal alignment: Center
  • Vertical alignment: Top
  • Hotspot: Top
Text 2
  • Name: TextLastScore
  • Position: 180, 54
  • Size: 200, 141
  • Text: 0
  • Font: Arial(72)
  • Horizontal alignment: Center
  • Vertical alignment: Top
  • Hotspot: Top
Text 3
  • Name: TextScore
  • Position: 180, 180
  • Size: 200, 30
  • Text: <kosong>
  • Font: Arial(12)
  • Horizontal alignment: Center
  • Vertical alignment: Center
  • Hotspot: Center
Menambahkan Tombol Play
Supaya dari tampilan utama dan biar bisa masuk ke permainan, maka kita perlu tombol play. cara penambahan sebagai berikut Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama BtnPlay. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file btnPlay.png dari asset yang telah didownload. atur posisi ke 180,180 sehingga tampak full di layout
Jangan lupa untuk memasukkan Touch, yaitu Kontrol Sentuh yang dimana itu akan digunakan sebagai kontrol respon ketika player menekan tombol player.  caranya menambahkannya dengan  klik kanan pada layout, pilih insert New Object > pilih Touch.
 
Tampilan secara keseluruhan sebagai berikut:
tampilan game
Jangan lupa untuk menyimpan project anda. kemudian tahap senlanjutnya adalah membuat code program.

Membuat Code Program

 
Membuat Variable
Variable digunakan untuk menyimpan suatu nilai sementara. disini kita akan menggunakan 2 variable. yang pertama variable score untuk menyimpan skor yang didapat dan yang kedua variable gameover yaitu variable yang digunakan untuk memberitahu kondisi game apakah sedang bermain atau sebaiknya.
Pertama-pertama kita membuat kedua variable tersebut. Caranya dengan klik kanan pada event sheet kemudian pilih Add global variable. kemudian atur konfigurasi seperti dibawah ini:
Variable 1
  • Name= score
  • Type= Number
  • Inisial value=0
Variable 2
  • Name= gameover
  • Type= Number
  • Inisial value=1
pemberian nilai 0 pada variable score karena pada awal permainan blm memiliki point sama sekali dan sedangkan untuk gameover diberi nilai 1 karena untuk menandakan permainan belum dimulai dan diganti nilai 0 jika permainan sudah mulai. contoh variable yang telah dibuat seperti dibawah ini:
variable
Membuat Fungsi untuk Bazel
fungsi ini digunakan untuk mengambil nilai dari kontrol bezel pada device Samsung Gear s2 yang dimana nantinya akan diterapkan untuk mengerakkan object wall sebagai alat bermain. fungsi tersebut akan dipanggil jika ada pergerakan di sensor bezel.
Cara menambahkan fungsi adalah dengan klik kanan pada event sheet > Add event dengan konfigurasi sebagai berikut:
 
Condition:
  • Function > On function > beri nama "Rotate".
kemudian kita menambahkan sub-event untuk merespon nilai dari bezel. Caranya dengan klik kanan pada ujung event Function yang telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • Function > Compare parameter > kemudian isi Index = 0, Comparizon = Equal to, value = "CW".
Action:
  • Wall1 > Rotate clockwise > Degree = 20.
  • Wall2 > Rotate clockwise > Degree = 20.
Untuk membuat merespon jika bezel diputar sebaliknya. Caranya dengan klik kanan pada ujung event Function yang telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • System > Else
Action:
  • Wall1 > Rotate clockwise > Degree = -20.
  • Wall2 > Rotate clockwise > Degree = -20.
dari code diatas maka akan menghasilkan tampilan sebagai berikut:
function rotate
Membuat Code untuk Halaman Utama
Saat game pertama kali dibuka, tidak langsung masuk ke gameplay/permainan tetapi disajikan halaman utama yang terdapat tombol untuk memulai permainan. Jadi untuk memisahkan mana halaman utama dengan gameplay kita menggunakan varable gameplay. gameplay bernilai 1 untuk tidak dalam kondisi bermaian dan bernilai 0 ketika dalam kondisi bermain. Cara penambahannya adalah dengan klik kanan pada event sheet > Add event dengan konfigurasi sebagai berikut:
Condition:
  • System > Compare variable > Variable = gameover, Comparison = Equal to, value = 1
Kemudian kita tambahkan sub-event. Caranya dengan klik kanan pada ujung event yang  telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • Touch > On touched object > BtnPlay
Action:
  • BtnPlay > Set visible > Visibility = Invisible.
  • TextLastScore > Set visible > Visibility = Invisible.
  • LabelScore  > Set visible > Visibility = Invisible.
  • System > Set value > Variable = gameover, value = 0
  • System > Set value > Variable = score, value = 0
  • Ball > Set gravity > Gravity = 1
  • Ball > Set speed > speed = 1
  • Ball > Set angle of motion > Angle = int(random(360))
 
Maka pada event sheet terlihat sebagai berikut:
home
Membuat Code untuk Gameplay
Pada saat permainan/Gameplay maka kondisi gameover bernilai 0. Sehingga perlu menambahkan kondisi dengan cara klik kanan pada event sheet > Add event dengan konfigurasi sebagai berikut:
Condition:
  • System > Compare variable > Variable = gameover, Comparison = Equal to, value = 0
 
Kemudian kita tambahkan sub-event untuk menambahkan kecepatan pada bola secara berskala. Caranya dengan klik kanan pada ujung event yang  telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • Ball > Compare speed > Comparison = Less or Equal, Speed = 400
Action:
  • Ball > Set speed > Speed = Ball.Bullet.Speed + 1
Kemudian kita tambahkan sub-event untuk kondisi jika bola keluar dan dianggap permainan selesai. Caranya dengan klik kanan pada ujung event yang  telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • Ball > Is outside layout
Action:
  • System > Set value > Variable = gameover, value = 0
  • BtnPlay > Set visible > Visibility = Visible.
  • TextLastScore > Set visible > Visibility = Visible.
  • LabelScore  > Set visible > Visibility = Visible.
  • TextLastScore > Set text > Text = score.
  • TextScore  > Set text > Text = "".
  • Ball > Set speed > Speed = 0
  • Ball > Set gravity > Gravity = 0
Kemudian kita tambahkan sub-event untuk kondisi jika bola menyentuh Wall1. Caranya dengan klik kanan pada ujung event yang  telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • Ball > On collision with another object > Object = Wall1
Action:
  • System > Add to > Variable = score, value = 1
  • TextScore  > Set text > Text = score.
Kemudian kita tambahkan sub-event untuk kondisi jika bola menyentuh Wall2. Caranya dengan klik kanan pada ujung event yang  telah dibuat > pilih Add > Klik Add sub-event. dan atur sebagai berikut:
Condition:
  • Ball > On collision with another object > Object = Wall2
Action:
  • System > Add to > Variable = score, value = 1
  • TextScore  > Set text > Text = score.
Maka pada event sheet terlihat sebagai berikut:
gameplay
kemudian langkah selanjutnya mengeksport ke Tizen dan jangan lupa menyimpan project sebelum melanjutkan ketahap berikutnya.

Mengexport Project ke Tizen

Langkah terakhir di Construct 2 adalah dengan mengeksport project ke Tizen. Caranya dengan klik menu File > Export project... . Kemudian muncul Jendela Choose a platform to export to Seperti dibawah ini:
tizen export
Kemudian pilih  Platform Tizen dan klik Next. Setelah itu akan muncul jendela Export options sepeti dibawah ini:
 export option
Atur lokasi untuk hasil export. secara default, lokasi di desktop. tapi anda dapat menentukan lokasinya dimanapun yang anda suka. kemudian klik Export dan tunggu prosesnya. setelah selesai, maka akan muncul jendela bahwa export sudah berhasil.
success export
Kemudian Klik Open destination folder untuk melihat isi hasil export.
file project
Dari Hasil Export ini nantinya akan digunakan untuk menimpa file project dari Tizen Web Project.

Membuat Project Baru Tizen Web untuk Wearable

Buka Aplikasi Tizen IDE 2.4, jika ada project lain yang masih terbuka anda dapat menutupnya untuk sementara dengan cara klik kanan pada project yang terbuka kemudian pilih Close project. nanti jika ingin membukanya kembali tinggal klik kanan pada project yang tertutup kemudian pilih Open Project. Kemudian untuk membuat project baru, klik menu File > New > Tizen web project. Kemudian muncul jendela sebagai berikut:
new project
Pada jendela New Tizen Web Project, Pilih Wearable-2.3.1 Basic. Kemudian beri nama project RotaryBall. Hilangkan centang pada lokasi dan kemudian tentukan lokasi dan jangan lupa untuk menambahkan nama folder dibelakang path semisal \RotaryBallTizen. setelah itu klik tombol Finish.
Kemudian kita buka folder project tizen. Untuk mengetahui path folder tersebut dapat diketahui dengan cara klik kanan pada project RotaryBall di kolom Projects. kemudian pilih Properties. Setelah terbuka jendela Properties for RotaryBall kemudian klik Resource. didalam kolom Resource terdapat Lokasi path url.
properties
Setelah dibuka, kemudian buka juga folder dari hasil export dari Construct 2 dan salin seluruh data yang ada didalamnya. kemudian salinnya ditempatkan di dalam folder project tizen web yang telah dibuat. dibawah ini adalah tampilan ketika folder hasil export Construct 2 digambungkan dengan folder project tizen web.
file project
Siapkan juga icon dengan ukuran dan nama dibawah ini:
  • 16 x 16 pixel -> icon-16.png
  • 32 x 32 pixel-> icon-32.png
  • 114 x 144 pixel-> icon-114.png
  • 128 x 128 pixel-> icon-128.png
  • 256 x 256 pixel-> icon-256.png
Dibawah ini adalah setelah icon direplace di dalam folder project tizen web.
replace icon
Kembali buka Tizen IDE, kemudian segarkan dengan klik kanan pada project RotaryBall kemudian pilih Reffresh. untuk menyingkronkan file yang telah ditambahkan.
show project
kemudian selanjutnya membuat certificate

Menyiapkan Certificate

Pastikan komputer anda sudah terhubung dengan internet. Certificate digunakan untuk membuat package wgt sehingga package tersebut dapat install di wearable atau di distribusikan di GalaxyApp Store. Pertama-tama buka Tizen IDE, kemudian Klik Icon Register Certificate untuk membuat certificate. jika icon tersebut tidak ada, kemungkinan anda belum menginstal Samsung Certificate Ekstension di Update Manager.
icon register certificate
Tahap pertama, Pilih Device Tipe Mobile/Wearable. setelah itu buat profile baru dengan klik New seperti contoh dibawah ini:
create profile
Penulisan misal dengan nama profile wearable. kemudian klik OK.
set name profile
Kemudian membuat Author Certificate dengan klik Create new certificate
create author certificate
Setelah itu akan muncul jendela Author Certificate, isilah kolom tersebut dengan data yang benar.
fill author certificate
Setelah mengisi lengkap data pada kolom, kemudian klik tombol Request
sign in samsung account
untuk mendapatkan author account, kamu harus login dengan Samsung account. klik OK untuk menampilkan jendela login Samsung Account. kemudian isi user dan password Samsung Account  dengan benar.
success create author certificate
Kemudian klik OK untuk melanjutkan tahap selanjutnya.
create distributor certificate
klik Create new certificate untuk membuat distributor certificate  baru. Kemudian akan muncul jendela Distributor Certificate.
add devices
Isi Password dan klik tombol  Add pada kolom koneksi device. jika tidak muncul periksa koneksi usb dengan device atau instal kembali usb driver.  Jika blm ada device yang terkoneksi abaikan untuk memasukan id device.
request distrivbutor certificate
Kalau id device sudah ditambahkan, kemudian klik Request untuk mendapatkan distributor certificate.
sign in samsung account
Untuk mendapatkan distributor account, kamu harus login dengan Samsung account. klik OK untuk menampilkan jendela login Samsung Account. kemudian isi user dan password Samsung Account  dengan benar.
success create distributor certificate
Distributor certificate telah sukses dibuat. klik OK untuk melanjutkan
set active profile
Kemudian klik OK untuk mengaktifkan profile yang telah dibuat.

Menyempurnakan Project

Seletah menggabungkan hasil export dari construct dengan project Tizen Web. kemudian mengatur konfigurasi di config.xml yang terdapat di porject RotaryBall. Kemudian klik double file config.xml atau klik kanan ->  Open with -> Widget Configuration Editor
config
Kemudian cek kembali identifier, version, dan name. Kemudian kalau sudah buka tab Widget.
tab widget
Cek juga Author, Email dan Web Site. Kemudian buka tab Features.
tab features
karena game ini menggunakan bezel maka harus menambahkan permission input dari bezel tersebut. klik Add kemudian tambahkan input.rotating_bezel. Kemudian buka tab Tizen.
tab tizen
Ubah Required version ke 2.2. dan kemudian buka tab Source.
hilangkan
< tizen:setting screen-orientation ="auto-rotation" context-menu ="disable" background-support ="disable" encryption ="disable" install-location ="auto" hwkey-event ="disable"/>
dan tambahkan
 <tizen:profile name= "wearable" />
maka contoh secara keseluruhan
<?xml version="1.0" encoding= "UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="https://ariska.dicoding.com" version="1.0.0" viewmodes="maximized" >
    <tizen:application id="xxxxxxxx.RotaryBall" package ="xxxxxxxx" required_version="2.2" />
    <author href="https://www.dicoding.com/academies" email="ariska@dicoding.com" >ariska hidayat </author>
    <content src="index.html"/>
    <description >Game Wearable Sederhana</description >
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <feature name="http://tizen.org/feature/input.rotating_bezel"/>
    <icon src="icon-128.png" height="128" width="128"/>
    <name >RotaryBall</ name>
    <tizen:profile name= "wearable" />
</widget>
Jangan lupa untuk Simpan Ctrl + S untuk menyimpan dan mengenerate id dan package name.
Mengatur main.js dan index.html
Buka file main.js di dalam folder js. Ganti seluruh isi di main.js dengan code dibawah ini:
window.onload = function() {
    // TODO :: Do your initialization job
  window .addEventListener("tizenhwkey" , keyEventHandler);
  document.addEventListener("rotarydetent", rotaryEventHandler);
    function rotaryEventHandler(event) {
        var direction = event.detail.direction;
        if (c2_callFunction){
            c2_callFunction( "Rotate",[direction]);
        }
    }
 
    function keyEventHandler(event) {
        if (event.keyName === "back" ) {
                try {
                    tizen.application.getCurrentApplication().exit();
                } catch (ignore) {}
        }
    }
};
Kemudian buka file index.html. dan tambahkan code dibawah ini diatas baris code </head>
< script type ="text/javascript" src ="js/main.js"></script >
Contohnya seperti berikut:
index html
Membuat package wgt
Package wgt adalah hasil produk dari game yang anda buat. wgt khusus aplikasi yang berbasis html5. Sebelum membuat package, lakukan terlebih dahulu untuk Build Project. Caranya dengan klik kanan pada project RotaryBall > pilih Build Project. Tunggu sampai selesai.
build project
Setelah build project selesai, kita melakukan Build package untuk membuat file wgt. caranya dengan klik kanan pada project RotaryBall > pilih Build Package. Tunggu sampai selesai.
make package
file wgt dapat anda cari di dalam folder project RotaryBall.
location package
File RotaryBall.wgt adalah contoh file yang siap untuk di submit di GallaxyApp Store. Tahap selanjutnya adalah menguji ke Device.

Menguji Game di Device Wearable

Mengatur di Wearable
kita harus mengaktifkan debugging dengan cara klik Settings > Gear Info > Aktifkan Debugging. Contoh seperti dibawah ini:
debugging
Kemudian menkoneksikan dengan akses point yang sama dengan komputer. sebagai contoh, Wearable terkoneksi dengan akses point DicodingSpace, maka komputer yang anda gunakan juga harus terhubung dengan akses point DicodingSpace. Pastikan Sinyal kuat, jika sinyalnya lemah maka tidak dapat digunakan. cara mengaturnya dengan klik Settings > Connection > Wifi. kemudian hubungan dengan akses point.
wifi network
Setelah berhasil terhubung, catat IP address pada wearable yang nantinya akan dipanggil di komputer.
ip address
Mengatur di Tizen IDE
Setelah Wearable berhasil terkoneksikan dengan baik. Kemudian Buka Kembali Tizen IDE, dan klik icon Remote Device Manager.
connection explorer
Kemudian akan muncul Jendela Remote Device Manager. kemudian klik New untuk menambahkan koneksi baru.
remote device manager
Kemudian akan muncul Jendela Add Device dan kamu harus mengisi lengkap informasi di 3 kolom.
add device
Isikan Name dengan nama device kamu. kemudian IP yang dimasukkan adalah IP punya device werable. Setelah itu port, itu digunakan untuk lintasan data dan untuk defaultnya adalah 26101. Kemudian klik Add untuk menambahkan.
remote device manager 2
Untuk Menghubungkan, klik salah satu list yang telah dibuat, kemudian klik Connect untuk menghubungkan dan untuk memutuskan kamu dapat klik Disconnect. Jika sudah terhubung maka seperti dibawah ini:
connection explorer 2
Memasukkan ID Device ke distributor Certificate
Kamu dapat membuka kembali bagian membuat certificate dan masukkan id device ke distributor certificate.
Menjalankan di Device
Kemudian untuk menjalankan ke Device anda dapat lakukan dengan klik kanan pada project RotaryBall > Run As > pilih Tizen Web Application. dan tunggu  beberapa saat untuk tampil di device. Dibawah ini hasil screenshot di device Samsung Gear S2:
screenshot

Pengembangan Lanjut

Developer juga dapat mesubmit aplikasi atau game  mereka di GallaxyApp Store sehingga dapat dinikmati oleh pengguna device berbasis system operasi Tizen. Developer juga dapat memiliki Acount store secara gratis dan dapat langsung kunjungi: http://seller.samsungapps.com.
Untuk memudahkan dalam pengembangan game. ada beberapa link yang sekiranya bermanfaat:
Tutorial Contruct 2 Free Contruct juga menyediakan tutorial gratis.
Wearable Design Membahas tentang desain di wearable.
dicoding Academy dicoding menyediakan berbagai tutorial gratis dan jika sudah lulus akan mendapatkan sertifikat dan reward point.
Tizen Developer Indonesia Sebuah forum berbagi tentang pengetahuan, pengalaman atau informasi terbaru tentang Tizen. Jika kamu ada pertanyaan tentang Tizen jangan sungkan untuk bertanya pada forum tersebut.
Informasi juga buat developer yang tertantang untuk membuat Game/Aplikasi Tizen. kamu bisa ikuti Challenge Dicoding dengan hadiah puluhan juta rupiah dan 20 terbaik akan mendapatkan 3k point. Untuk device, sudah tersedia Device Gear S2 untuk Testing di Berbagai Daerah. Untuk lebih lanjut, anda dapat kunjungi link dibawah ini:
*Tutorial ini memungkinkan akan ada update tanpa ada konfirmasi terlebih dahulu.
Dilihat kali

Is this helpful?

Share This Post