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

• Construct 2 r232 (free edision)
• Java Development Kit 8 (JDK)
• Tizen 2.4 SDK with IDE 

Java Development Kit 8 (JDK)

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.

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.

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:

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”.

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"

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”.

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

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.

Pada file config.xml, buka dengan klik kanan pada Project Explorer, Open With > 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-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:

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

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.

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

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

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.

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

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

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

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.

Menguji Game di Device Tizen

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.

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

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

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

 

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.

• 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.