Belajar Pemrograman Gratis
Belajar Pemrograman Gratis
Tutorial

Membuat Game Wearable Sederhana dengan Construct 2

Game Engine Construct 2 adalah tool untuk membuat sebuah game HTML5 tanpa coding sehingga sangat cocok bagi pemula yang belum pernah mengenal pemrograman dan juga mempercepat developer yang ingin membuat sebuah game dalam waktu yang singkat. Selain itu, juga sudah tersedia banyak contoh, tutorial, dan dokumentasi pembuatan game Construct 2 .

Pada tutorial kali ini, akan dibahas tentang cara membuat game wearable sederhana dengan menggunakan Construct 2. Anda akan membuat game yang berjalan di device wearable Samsung Gear S2 dan siap untuk dipublish ke Galaxy Apps Store. Apabila anda tertarik belajar membuat game dengan Construct 2, silakan mengikuti Samsung Developer Academy, kelas Belajar Membangun Game HTML5

Game yang dibuat akan memanfaatkan kontrol bezel yang terdapat di Samsung Gear S2 sehingga menambah pengalaman user dalam bermain game di smartwatch. Setelah Anda mengikuti tutorial ini, Anda bisa mengembangkannya lebih lanjut dan bisa mengikuti tantangan Indonesia Next Apps 4.0 – Tizen Wearable Challenge. Sebelum memulai tutorial ini, Pastikan koneksi internet Anda stabil.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

 

Skenario Game

Game yang akan dibuat mengambil ide sederhana dari game PinBall. Pemain harus menjaga bola tetap di area permainan dengan mengandalkan 2 kontrol kanan dan kiri. Semakin lama permainan maka semakin tinggi skor yang diperoleh.

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 kepadatan layar 302 ppi. Bentuk layar adalah lingkaran dan bukan kotak seperti pada umumnya. Untuk kontrol pada smartwatch dimungkinkan 3 jenis kontrol yaitu bezel, touchscreen, dan buttons. Kontrol tersebut dapat dilihat digambar berikut:

sumber gambar dari http://www.technobezz.com/samsung-gear-s2-comes-with-full-circle-design-and-rotating-bezel-ifa-2015/

Mari membuat sebuah game yang diberi nama RotaryBall yang dimana menggunakan ketiga fungsi kontrol tersebut dalam game. Touch digunakan untuk memulai permainan, Bezel digunakan untuk kontrol batasan ruang permainan, dan tombol back digunakan untuk keluar dari aplikasi. Konsep game tetap seperti PinBall yang menjaga bola supaya tidak keluar dari layar.

Selanjutnya akan membahas cara membuat dan akan dijelaskan secara bertahap.

Berikut ini software yang diperlukan untuk mengembangkan game di platform Tizen Wearable:

  • Construct 2 r244 (free edition) (size: 57.3 mb)
  • Java Development Kit 8 (JDK) (size: 191- 197 MB)
  • Tizen Studio 1.2 (size: 480 MB)

 

Construct 2 r244

Construct 2 adalah sebuah game engine powerful yang tidak mengharuskan developer untuk melakukan coding. Sehingga developer dapat fokus pada logika dan perancangan game yang akan dibuatnya. Anda dapat mengunduh Construct 2 di laman Download Construct 2 Release r244.

Java Development Kit 8 (JDK)

Buka laman Java SE Development Kit 8 Downloads. Kemudian unduh dan instal JDK-8u144. Jangan lupa untuk centang “Accept License Agreement“.

Tizen Studio 1.2

Buka laman Tizen Studio 1.2 Download, unduh dan instal Tizen Studio 1.2 With IDE Instaler.

Setelah Tizen Studio berhasil diinstal, kemudian buka aplikasi Package Manager dan instal Samsung Wearable Extension pada tab Extension SDK.

 

Jika tidak memiliki device Wearable, Anda dapat menginstal Emulator pada tab Main SDK seperti gambar di bawah ini:

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.

Maka akan muncul halaman awal yang masih kosong untuk membuat sebuah game.

Kemudian klik folder New Project dan atur konfigurasi di Properties. Isilah data tersebut dengan lengkap seperti di bawah ini.

Pastikan Resolusi menggunakan 360×360 pixel dan fullscreen menggunakan Scale outer. Kemudian Klik layout dan perhatikan Layout Size di Properties. Atur nilai 360×360 pixel.

Maka tampilan akan menjadi seperti di bawah ini dengan bentuk persegi dengan ukuran 360 x 360 pixel.

Langkah selanjutnya memasukkan asset.

 

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 di Assets Rotary Ball.zip. File tersebut berisi seperti gambar di bawah ini:

Menambahkan Background

Agar background yang kita buat tidak kosong maka kita perlu menambahkan sebuah gambar yang sudah disiapkan. Caranya dengan klik kanan pada layout, pilih insert New Object, lalu pilih Sprite dan beri nama Background. Setelah itu, klik layout untuk menempatkan object, kemudian akan muncul jendela Edit Image. Klik ikon Open dan cari file background.jpg dari asset yang telah diunduh. Atur posisi ke 180,180 sehingga tampak full di layout.

Menambahkan Border

Untuk mempercantik pinggiran pada layar wearable maka kita perlu untuk membuat sebuah lingkaran yang berukuran 360×360 pixel. Caranya sama seperti memasukkan latar belakang. Klik kanan pada layout, pilih Insert New Object, lalu pilih Sprite dan beri nama Border. Setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. Klik ikon Open dan cari file border.png dari asset yang telah diunduh. 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, lalu pilih Sprite dan beri nama Wall1. Setelah itu, klik layout untuk menempatkan object. Kemudian akan muncul jendela Edit Image. Klik ikon Open dan cari file wall.png dari asset yang telah diunduh. Atur juga Collision Poligon untuk menentukan area sebagai pantulan object. Jangan lupa atur posisi ke 180,180 sehingga tampak tepat pada garis border.

Kemudian untuk wall yang kedua, kita menggunakan asset yang sama dan cara yang sama, tetapi kita perlu mengubah nama menjadi Wall2. Setelah itu, mengubah posisi dinding dari sebelah kiri menjadi sebelah kanan dengan menggunakan ikon Mirror pada jendela Edit Image.

Setelah menambahkan Wall2, 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, lalu 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 object yang lain yang memiliki sifat gravitasi.

Lakukan juga terhadap Wall2 dengan menambahkan sifat solid seperti penambahan di Wall1.

Jadi, tampilan Wall1 dan Wall2 di layout seperti berikut:

Untuk menggerakkan wall tersebut, kita akan menggunakan kontrol bezel yang di mana 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 di dalam 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 diunduh. 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. Lalu 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 dan pastikan Bounce of Solids di set menjadi Yes

 

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 bisa masuk ke permainan, maka kita perlu tombol play. cara penambahannya sebagai berikut : Klik kanan pada layout, pilih Insert New Object > pilih Sprite dan beri nama BtnPlay. Setelah itu klik layout untuk menempatkan object. Kemudian akan muncul jendela Edit Image. klik ikon Open dan cari file btnPlay.png dari asset yang telah diunduh. Atur posisi ke 180,180 sehingga tampak full di layout.

Jangan lupa untuk memasukkan behavior Touch, yaitu kontrol sentuh yang akan digunakan sebagai kontrol respon ketika player menekan tombol play. Caranya menambahkannya dengan klik kanan pada layout, pilih insert New Object > pilih Touch.

 Tampilan secara keseluruhan sebagai berikut:

 

Jangan lupa untuk menyimpan project Anda. Kemudian tahap selanjutnya membuat code program.

 

Membuat Code Program

 Membuat Variabel

Variabel digunakan untuk menyimpan suatu nilai sementara. disini kita akan menggunakan 2 variabel. Pertama variabel score untuk menyimpan skor yang didapat. Kedua variabel gameover, untuk memberitahu kondisi game apakah sedang bermain atau sebaliknya.

Pertama-pertama kita membuat kedua variabel tersebut. Caranya dengan klik kanan pada event sheet, kemudian pilih Add global variable. Lalu atur konfigurasi seperti di bawah ini:

Variabek 1

  • Name= score
  • Type= Number
  • Inisial value=0

Variabel 2

  • Name= gameover
  • Type= Number
  • Inisial value=1

pemberian nilai 0 pada variabel score karena pada awal permainan belum 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 variabel yang telah dibuat seperti di bawah ini:

 

Membuat Fungsi untuk Bezel

Fungsi ini digunakan untuk mengambil nilai dari kontrol bezel pada device Samsung Gear S2 yang akan diterapkan untuk menggerakkan object Wall. 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, Comparison = Equal to, value = “CW”.

Action:

  • Wall1 > Rotate clockwise > Degree = 20.
  • Wall2 > Rotate clockwise > Degree = 20.

 

Untuk membuat bezel bisa merespon jika 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 di atas maka akan menghasilkan tampilan sebagai berikut:

 

 

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 variable gameplay. Gameplay bernilai 1 apabila sedang dalam kondisi belum bermain 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:

 

Membuat Code untuk Gameplay

Pada saat game sudah dimulai maka kondisi gameover bernilai 0. Sehingga perlu menambahkan kondisi dengan cara klik kanan pada event sheet > pilih 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:

Kemudian langkah selanjutnya export ke Tizen dan jangan lupa menyimpan project sebelum melanjutkan ke tahap berikutnya.

 

Export Project ke Tizen

Langkah terakhir di Construct 2 adalah dengan export project ke Tizen. Caranya dengan klik menu File > Export project… . Kemudian muncul Jendela Choose a platform to export to Seperti di bawah ini:

Kemudian pilih Platform Tizen dan klik Next. Setelah itu, akan muncul jendela Export options sepeti di bawah ini:

Atur lokasi untuk hasil export. Secara default, untuk lokasi penyimpanan berada di desktop. Tetapi Anda dapat menentukan lokasinya di manapun yang Anda suka. Kemudian klik Export dan tunggu prosesnya. Setelah selesai, maka akan muncul jendela bahwa export sudah berhasil.

 

Kemudian Klik Open destination folder untuk melihat isi hasil export.

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 Studio 1.2, jika ada project lain yang masih terbuka Anda dapat menutupnya untuk sementara dengan cara klik kanan pada project yang terbuka, setelah itu pilih close project. Nanti jika ingin membukanya kembali tinggal klik kanan pada project yang tertutup, kemudian pilih Open Project.

Lalu untuk membuat project baru, klik menu File > New > Tizen project  atau bisa klik ikon New (tanda “+”) seperti di bawah ini :

Kemudian pada Select New Project, pilih Template.

Setelah itu, Pilih Wearable, kemudian pilih versi Wearable v.2.3.2 yang sudah diinstal sebelumnya pada Package Manager.

Pada Application Type karena kita menggunakan Construct 2 maka pilih Web Application. Kemudian Klik Next.

Pada bagian Template pilih Basic UI yang merupakan template tampilan basic dari Tizen 2.3.2 Wearable basic web application.

Pada bagian Project Properties, Beri nama project dengan nama RotaryBall dan tidak boleh ada spasi. Untuk menentukan lokasi penyimpanan project, bisa klik More Properties dan menghilangkan centang pada Use default location apabila ingin meletakkan project selain di workspace default. Setelah itu, klik Finish.

Setelah dibuka, kemudian buka juga folder dari hasil export dari Construct 2 dan salin seluruh data yang ada di dalamnya kecuali file config.xml. Kemudian tempatkan di dalam folder project tizen web yang telah dibuat. Di bawah ini adalah tampilan ketika folder Project Tizen Web digabungkan dengan hasil export Construct 2.

Siapkan juga ikon dengan ukuran dan nama di bawah 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

Di bawah ini adalah tampilan setelah ikon diganti dengan ikon baru di dalam folder project Tizen Web.

Kembali buka Tizen Studio, kemudian segarkan dengan klik kanan pada project RotaryBall, lalu pilih Refresh untuk sinkronisasi file yang telah ditambahkan.

kemudian selanjutnya menyempurnakan Project.

 

Menyempurnakan Project

Setelah menggabungkan hasil export dari construct 2 dengan project Tizen Web, Kita akan mengatur konfigurasi di config.xml yang terdapat di porject RotaryBall. Kemudian klik double file config.xml. Pastikan Identifier, Name dan Icon sudah di set dengan benar dan jangan lupa atur juga set mode menjadi fullscreen. Setelah itu, simpan dengan klik Ctrl+S.

karena game ini menggunakan bezel maka Anda harus menambahkan feature input dari bezel tersebut. Masuk ke Menu Features dan klik Add atau ikon plus “+”, kemudian tambahkan input.rotating_bezel.

Jika dilihat dari source pada config.xml, hasilnya seperti di bawah ini :

Jangan lupa untuk menyimpan pengaturan dengan cara Ctrl + S.

 

Mengatur main.js dan index.html

Buka file main.js di dalam folder js. Kemudian ganti seluruh isi di main.js dengan code di bawah ini:


Kemudian buka file index.html dan tambahkan code di bawah ini:

<script src=“js/main.js“></script> 

Dan tampilannya sebagai berikut :

Menyiapkan Device atau Emulator

Pengaturan pada Samsung Gear S2

Pertama kita harus mengaktifkan debugging dengan cara klik Settings > Gear Info > Aktifkan Debugging. Kemudian muncul notifikasi, pilih OK. Jika berhasil, tampilan seperti di bawah ini:

Kemudian sambungkan dengan Access Point yang sama dengan komputer. sebagai contoh, wearable terkoneksi dengan access point DicodingSpace-office, maka komputer yang Anda gunakan juga harus terhubung dengan access point DicodingSpace-office. Cara mengaturnya yaitu klik Settings > Connections > Wi-Fi > Wi-Fi networks. Kemudian hubungkan dengan akses point.

Setelah berhasil terhubung, catat IP address pada wearable yang nantinya akan dipanggil di komputer.

 

 

 

Pengaturan di Tizen Studio

Setelah Wearable berhasil terhubung dengan baik, buka Kembali Tizen Studio, lalu masuk pada menu Connection Explorer. Caranya yaitu klik Menu Window > Show View > Connection Explorer.

 

Kemudian muncul Panel Connection Explorer, lalu klik icon Remote Device Manager.

Setelah muncul jendela Remote Device Manager, klik icon Plus “+” untuk menambahkan device baru. New untuk memasukkan Name, IP, dan Port dari Samsung Gear S2. Isi Name dengan nama Samsung Gear S2. Kemudian IP yang dimasukkan adalah IP dari Samsung Gear S2 yang sudah terhubung dengan Access Point. Kemudian isi Port yang berguna untuk lintasan data dan defaultnya adalah 26101. Setelah itu klik Add untuk menambahkan.

Anda juga bisa mencari IP dan Port secara otomatis dengan cara klik Scan. Cara ini dilakukan apabila kita tidak mengetahui IP dan Port dari device Samsung Gear S2.

Sebelum menyambungkannya dengan komputer, pastikan device Gear S2 tidak sedang terkoneksi dengan device lain. Selain itu matikan juga bluetooth pada Samsung Gear S2. Kemudian sambungkan dengan mengganti On pada kolom Connect.

Kemudian pada Samsung Gear S2, Akan muncul Digital Signature, lalu klik Yes untuk mengijinkan wearable terintegrasi dengan komputer.

Sehingga IP Wearable muncul di Panel Connection Explorer.

Apabila sudah menunjukkan indikator On, akan terdapat tulisan IP dan Port pada Connection Explorer yang menandakan Tizen Studio dan Samsung Gear S2 sudah terhubung.

Tips: Jika Anda tidak memiliki Samsung Device Wearable, Anda dapat menggunakan Emulator dengan klik Menu Tools > Emulator Manager.

 

 

Menyiapkan Certificate

Pastikan komputer Anda sudah terhubung dengan internet dan sudah menginstal Samsung Certificate Extension di Package Manager. Certificate ini digunakan untuk membuat package WGT sehingga package tersebut dapat diinstal di wearable atau di distribusikan di Galaxy Apps Store. Pertama-tama buka Tizen Studio, kemudian Klik Tools -> Certificate Manager untuk membuat certificate.

Kemudian akan muncul jendela Certificate Manager dan klik tanda “+” untuk membuat profile baru.

Untuk Profile yang sudah digunakan di mobile, tidak dapat digunakan kembali di project wearable. Anda tetap dapat membuat file WGT dengan profile yang digunakan di mobile ,tetapi WGT yang telah dibuat akan di eliminasi ketika dimasukkan ke Galaxy Apps Store. Pastikan Anda membedakan antara profile untuk mobile dan profile untuk wearable. Simpan dan backup file Certificate ini jika ingin melakukan update aplikasi atau game Anda.

Kemudian terdapat jendela baru lagi yaitu Select the type of certificate profile. Di sana terdapat pilihan Tizen dan Samsung. Pilih Samsung untuk membuat certficate profile yang bisa untuk Samsung Mobile (Z Series), Wearable (Gear Series) dan TV dengan platrform Tizen.

Kemudian pada jendela Create Certificate Profile, pilih Mobile / Wearable , lalu klik Next.

Pada tab Certificate Profile dan masukkan nama certificate profile pada Create a new certificate profile. Kemudian klik Next.

Pada Author certificate pilih Create a new author certificate karena kita akan membuat certificate baru. Selanjutnya, Muncul kolom identitas developer. Isikan nama dan password kemudian centang apply the same password for the distributor certificate. Kemudian Next.

Setelah klik next maka akan diminta untuk sign in Samsung Account. Klik Ok untuk sign in. Kemudian muncul jendela Login ke Samsung Account. Lalu masukkan ID dan Password Samsung Account Anda, apabila belum memiliki Samsung Account bisa klik Create New Account.

Apabila sukses sign in, maka langsung terdapat tulisan Congratulations berarti Anda telah berhasil membuat Author Certificate. Kemudian apabila Anda ingin membackup certificate ke direktori lain maka Anda dapat pilih Browse dan cari direktori yang dituju. Setelah itu klik Next untuk melanjutkan.

Pada menu Distributor Certificate, pilih Create a new distributor certificate untuk membuat Distributor Certificate baru, kemudian klik Next. Jika computer atau laptop Anda sudah terhubung dengan device Tizen atau emulator, maka secara otomatis akan muncul Device Unique ID seperti  di bawah ini :

Anda dapat menambahkan beberapa DUID sekaligus untuk setiap device tujuan yang akan Anda instal game atau apps. Anda harus menambahkan DUID device tersebut pada Distributor Certificate. Lanjutkan sampai selesai sehingga hasilnya seperti  di bawah ini:

Pastikan Profile baru yang telah dibuat berstatus aktif.

Membuat Package WGT

Package Widget Tizen (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.

Setelah Build Project selesai, kita membuat file WGT dengan caranya klik kanan pada project RotaryBall > pilih Build Signed Package. Tunggu sampai selesai.

Hasilnya file WGT terdapat di dalam project seperti gambar di bawah ini.

Contoh file RotaryBall.wgt adalah file yang Anda upload dan publish ke Galaxy Apps Store.

 

Menguji Game di Device Wearable

Menjalankan di Device

Kemudian untuk menjalankan di Device Samsung Gear S2, Anda dapat langsung klik kanan pada project RotaryBall > Run As > pilih Tizen Web Application. dan tunggu beberapa saat sampai device menampilkan game RotaryBall.  di bawah ini merupakan hasil screenshot game RotaryBall yang sudah berjalan di device Samsung Gear S2:

Pengembangan Lanjut

Developer juga dapat mesubmit aplikasi atau game mereka di Galaxy Apps 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:

Untuk Anda yang ingin mencoba game buatan Anda dengan device Samsung Gear S2, Anda dapat menghubungi Samsung INA 4.0 Local Community Officer yang tersedia kota Anda tanpa dipungut biaya.

 

Artikel ini mengacu pada Membuat Game Wearable Sederhana dengan Construct 2 dengan pembaruan dan perubahan seperlunya.  Tulisan ini diuji  pada tanggal 07 Agustus 2017

 

Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Coba Sekarang