Porting Game HTML5 dari Construct 2 ke Tizen

Game engine Construct 2 adalah tool 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.

Baca juga: Mengenal Sistem Operasi Tizen

Pada tutorial kali ini kita akan membahas tentang cara Porting Game HTML5 dari Construct 2 ke Tizen. Game yang digunakan di tutorial ini adalah contoh-contoh yang disediakan oleh Construct 2 atau bisa juga menggunakan game yang telah Kamu buat di Construct 2.

Tujuan tutorial ini adalah untuk memperkenalkan kemudahan porting game HTML5 untuk Tizen dengan Construct 2 dan siap untuk segera dipublish ke Tizen Store. Beberapa hal akan dijelaskan secara bertahap sehingga mudah dipahami.

Sebelum memulai tutorial ini, Pastikan kamu memiliki kouta internet yang cukup.

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 (Free edision)
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 Construct 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 SDK Tizen
Setelah berhasil diinstal, kemudian buka aplikasi Update Manager-2.4 kemudian install Wearable Extension for 2.3.1
download Certificate Extention
Kemudian jangan lupa untuk menginstal Emulator untuk mencoba aplikasi kamu dan untuk memastikan kalau aplikasi/game yang kamu buat berjalan dengan lancar. pastikan versi yang diinstall adalah 2.4 Mobile.
download Emulator
Selanjutkan cara bagaimana mengexport game dari Construct 2 ke Tizen.

Buka Project Construct 2 dan Export Tizen Project

Disini tidak akan membahas bagaimana membuat game dari awal dengan Construct 2. Kita anggap kamu sudah bisa membuat game dengan Construct 2. Jika ingin belajar cara membuat game dengan Construct 2 dapat pelajari dokumentasi yang telah disediakan oleh Construct 2.

Pelajari Juga: Membuat Game Android Mudah dengan Intel XDK dan Construct 2

Buka game yang kamu buat dengan pilih File -> Open.. atau lihat daftar terakhir project yang telah dibuat dengan memilih File -> Recent Projects.

home_construct2

Jika belum pernah membuat game dengan construct 2. kamu bisa buka contoh-contoh yang telah disediakan oleh construct 2 dengan klik File -> New Project -> Cari “Template:Auto-runner” dan terdapat banyak contoh game lain yang siap dimainkan.

Select_template

Setelah project sudah dibuka, jangan lupa untuk di jalankan terlebih dahulu sebelum melanjutkan langkah selanjutnya dengan klik “Run layout”. kemudian Export ke Tizen dengan cara klik menu “File” -> “Export Project…”. Maka akan keluar tampilan berikut:

Export-From-Construct-to-Tizen

bagi yang menggunakan versi gratis, tidak semua platform support untuk kita melakukan export. Tetapi hanya tertentu saja, salah satunya adalah platform “Tizen”. Kemudian untuk mengexport ke Tizen maka kita Pilih platform “Tizen” dan kemudian klik “Next”.

Konfigurasi-Export-at-Construct2

Tentukan letak folder untuk hasil export. Dari contoh diatas nama folder yang menyimpan adalah PlayJumpTizen yang berada di directori Desktop.

 

Buka Hasil Export ke Tizen IDE

Kita tidak dapat langsung membuka hasil export dari Construct 2 ke Tizen IDE. Tetapi kita harus menyiapkan Tizen Web Project yang nantinya akan digunakan untuk hasil Export dari Construct 2.

Membuat project Baru Tizen Web

Langkah pertama kita membuat project baru Tizen Web. Klik menu "File" > "New" > "Tizen Web Project"

new Tizen Web Project

Pilihlah versi yang terbaru, saat ini yang terbaru adalah versi MOBILE-2.4 dan jangan lupa kasih nama Projectnya. Secara otomatis lokasi penyimpanan project berada di workspace defaultnya. Untuk mengganti lokasi penyimpanan kita dapat menghilangkan centang pada “Use default location”. Dan jangan lupa membuat folder baru untuk menyimpan project tersebut karena Tizen IDE tidak secara otomatis membuat folder baru untuk project kita. Seperti contoh saya buat folder dengan nama “PlayJumpTizen”.

setup new Tizen web project

Klik finish untuk generate file project. Setelah itu, pindahkan isi hasil export dari Construct 2 ke folder project Tizen yang telah dibuat.

Folder Project Tizen Web

Project sudah siap dibuka kembali di Tizen IDE

Menyempurnakan Project

Ada beberapa yang harus dibenahi setelah melakukan penggabungan antara hasil export dengan project Tizen Web. yaitu mengisi Konfigurasi di config.xml.

Config.xml

Pada file config.xml, buka dengan klik kanan pada Project Explorer, Open With > Widget Configuration Editor

Widget Configuration Editor

Pastikan Name, Icon, dan Identifier sudah terisi dengan benar. Isi Name dengan nama game kamu dan sedangkan Identifier adalah sebuah alamat yang unik yang nantinya akan digenerate menjadi id dan package. Perubahan Version dilakukan ketika melakukan update di store kamu. jangan lupa disimpan dan generate id dan package dengan tekan tombol Ctrl + S (id dan package dapat dilihat di tab Source)

Kemudian ada 6 gambar icon yang harus kamu ganti pada folder project. Pastikan nama file icon dan ukuran gambarnya sudah sesuai.

Icon Project Tizen Web

Icon-icon tersebut akan ditampilan ketika game tersebut sudah terinstal di device. Anda dapat mengubah ukuran gambar bisa dengan photoshop atau editor gambar yang biasa kamu pakai.

 

Kemudian supaya game dapat keluar ketika tekan tombol back maka perlu tambahkan code di file index.html sebagai berikut:

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

seperti contoh:

tambahkan code pada file index.html

Code diatas berfungsi untuk memanggil script main.js yang sudah terdapat fungsi untuk keluar dari aplikasi.

code back

jangan lupa untuk disimpan dengan tekan tombol Ctrl + S. Setelah penyempurnaan selesai, silahkan lanjutkan langkah berikutnya yaitu mencoba menjalankan di emulator.

Menjalankan Project Tizen di Emulator

Kembali ke Tizen IDE, Seletah Emulator sudah terinstal, buka Emulator Menager dengan cara pilih menu Tizen Tools > Emulator Manager. Setelah jendela Emulator Manager terbuka kemudian membuat emulator baru dengan klik Create New Emulator > mobile.

6

Setelah muncul jendela jika konfigurasi sudah benar kemudian klik tombol Confirm pada ujung kanan atas.

create emulator

Sekarang coba untuk menjalankan game/aplikasi di Emulator, klik kanan pada nama project di Project Explorer, klik Run As > Tizen Web Application.

Build ke Web App Simulation

Jika muncul pesan kesalahan Active secure profile is not set, Karena ada beberapa data yang perlukan untuk proses build. klik pada tautan tersebut untuk melengkapi data yang dibutuhkan dengan ditunjukan oleh gambar berikut ini.

Error build

Setelah muncul jendela Preferences, klik pada tombol Add di opsi Profiles.

Profil

Masukkan nama profil yang diinginkan dan klik Ok. Setelah profil baru ditambahkan, sekarang klik tombol Generate di opsi Author Certificate.

Generate Sertificate

Pada jendela Certificate Generator, isikan kolom-kolom yang diminta dan klik tombol OK.

Generate Certificate

Simpan baik-baik sertificate tersebut. karena jika Certificate tersebut terhapus maka anda tidak dapat memperbarui aplikasi anda di store dan anda harus memulai dari awal seperti submit aplikasi baru lagi.

Certificate diatas hanya digunakan untuk dijalankan di Emulator. Jika Aplikasi kamu ingin di submit di store maka kamu harus update atau buat certificate menggunakan register certificate. untuk lebih lanjut: http://developer.samsung.com/samsung-z/develop/getting-certificates/create-certificates

 

 

Selanjutnya kita melakukan clean project, klik menu Project > Clean...

Kemudian setelah proses selesai, kita akan mencoba menjalankan lagi project Tizen  di Emulator. klik kanan pada nama project di Project Explorer, klik Run As > Tizen Web  Application. Sekarang aplikasi kita berhasil dijalankan di Tizen Emulator.

Play Game di Emulator

Menguji Game di Device Tizen

Device yang kita gunakan untuk menguji adalah Samsung  Z1.

Instal Driver USB

Download dan instal driver Samsung Android USB Driver for Windows. Dan perhatikan ketika mengintal driver tidak sedang mencolokan usb dengan device Samsung.

1. usb driver

Instal sampai selesai

Mengaktifkan Developer Mode pada Device
Colokkan usb device Tizen ke komputer dan buka device Samsung Z1. Tampilan default os Tizen seperti berikut:
2. home tizen
kemudian klik icon Call, dan ketik *#84936#
3. call developer options
Kemudian muncul jendela Developer Option. Kemudian Aktifkan Developer Option.
4. cek on developer options
 Setelah diaktifkan Developer Option, maka akan muncul menu baru Developer Options di Menu Settings.
5. menu settings
Kemudian Klik Developer options untuk menampilkan daftar menu khusus untuk developer
7. set on usb debugging
Aktifkan USB debugging dan kemudian akan muncul konfirmasi untuk persetujuan untuk mengaktifkan debug di device. klik yes untuk setuju dan menlanjutkan debugging.
8. RSA yes
Mandaftarkan ID Device ke Distributor Certificate
Buka kembali Tizen IDE, kemudian klik icon Registration Certificate. Jika Icon ini tidak muncul, kamu harus menginstal Samsung Certificate Extension di Update Manager-2.4. dan jika di update manager tidak terdapat Samsung Certificate Extension, kamu dapat memunculkannya dengan klik settings > Extra Repository > Kemudian Centang semua certificate tersebut.
9. Register Certificate
Kemudian muncul jendeal Samsung Tizen Certificate. ada 4 step yang harus diperhatikan.
10. Replace distributor certificate
pastikan Mobile/Wearable di step 1 sudah tercentang. kemudian Profile yang digunakan adalah profil yang sudah dibuat sebelumnya. setelah itu, abaikan untuk step 3. Saya sarankan untuk membackup dulu file distributor.p12.  Kemudian klik Replace pada step 4.
11. create new distributor certificate
klik Create new certificate untuk membuat distributor certificate  baru. Kemudian akan muncul jendela Distributor Certificate.
12. add device id
Isi Password dan klik tombol  Add pada kolom koneksi device. jika tidak muncul periksa koneksi usb dengan device atau instal kembali usb driver.
13. request distributor certificate
Kalau id device sudah ditambahkan, kemudian klik Request untuk mendapatkan distributor certificate.
14. open sign samsung account
untuk mendapatkan distributor account, kamu harus login dengan Samsung account. klik OK untuk menampilkan jendela login.
15. sign samsung account
isi user dan password dengan benar atau Create new account jika belum memiliki Samsung account.
16. success to create distributor certificate
Distributor certificate telah sukses dibuat. klik OK untuk melanjutkan
17. set active profil
Kemudian klik OK untuk mengimplementasikan distributor certificate yang baru.

Kemudian setelah proses selesai, kita akan mencoba menjalankan lagi project Tizen di Device. klik kanan pada nama project di Project Explorer, klik Run As > Tizen Web  Application. Sekarang aplikasi kita berhasil dijalankan di Device.

Play Game di Emulator

Menyiapkan Package untuk Submit ke Store

Pada sesi ini, kita akan mencoba menjalankan project Tizen  di Emulator. Kembali ke Tizen IDE, klik kanan pada nama project di Project Explorer, klik Build Project.

build project

Kembali ke Tizen IDE, klik kanan pada nama project di Project Explorer, klik Build Package.

Build Package

Pastikan muncul "Creating package was succeeded" berarti menandakan package sudah sukses dibuat.

Package Result Success

Dan Hasilnya berupa file wgt yang dapat di instal di device atau disubmit ke Store Tizen.

package wgt

 

Pengembangan Lanjut

Jika kamu tidak punya device untuk test, tenang aja. Samsung sudah menyediakan Remot Device untuk digunakan developer untuk menguji game atau aplikasi tizen. dapat langsung kunjungi di http://developers.samsung.com/remotetestlab

Developer juga dapat mesubmit aplikasi atau game  mereka di Tizen 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.tizenstore.com. Lebih lengkap cara submit aplikasi ke Tizen Store dapat dilihat pada artikel Mekanisme Publikasi Aplikasi Tizen di Tizen Store.

Untuk memudahkan dalam pengembangan game. ada beberapa link yang sekiranya bermanfaat:
  • Tutorial Contruct 2 Free Contruct juga menyediakan tutorial gratis.
  • 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.
  • Porting Game Unity ke Tizen   Jika kamu memliki game dari unity dan ingin menjadikan tizen dapat mengikuti tutorial tersebut.
Informasi juga buat developer yang tertantang untuk membuat Game/Aplikasi Tizen. kamu bisa ikuti Challenge Dicoding dan juga sudah tersedia Device Tizen 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