Porting Game HTML5 Construct 2 ke Android

Construct 2 pada dasarnya merupakan game engine yang hanya mampu membuat game yang berbasis HTML5 saja. Namun dengan perkembangan teknologi yang sangat cepat, berkas HTML5 yang dihasilkan oleh Construct 2 mampu dirancang ulang menjadi file android (.apk). Teknologi yang akan digunakan dalam materi “Porting Game HTML5 Construct 2 ke Android” ini ialah Cocoon.io.

Sebenarnya terdapat beberapa teknologi lain yang juga mampu mengubah berkas HTML5 menjadi Android, yakni Cordova CLI, Phonegap. Serta yang paling terdahulu, yakni Intel XDK (namun sayangnya sudah tidak beroperasi lagi).

Namun, tentu setiap teknologi memiliki keunggulan dan kelemahannya masing-masing, baik dari segi pengoperasian, performa hasil, kecepatan, maupun ukuran akhirnya.

Cocoon.io merupakan teknologi yang berada di tengah-tengah di antara teknologi lainnya. Ia unggul dari segi performa, dan kemudahan dalam hal pengoperasian serta penerapan fitur inti (iklan, google service, plugin cordova). Untuk ukuran akhir berkas android pun, hanya berkisar antara 7-15mb (tergantung dari banyaknya asset yang digunakan).

Sebelum lanjut ke inti materi, pastikan Anda menggunakan Construct 2 – Personal Edition (versi berbayar). Jika belum memilikinya, Anda bisa memesan reward langsung dari halaman reward Dicoding berikut, atau membeli langsung dari website official Scirra.com berikut.


1. Membuka halaman Cocoon.io terlebih dahulu, lalu tekan icon User dan Sign up.

2. Terdapat dua opsi yang bisa Anda gunakan untuk melakukan registrasi akun di website Cocoon.io, yakni secara manual via registration box atau melalui akun Google maupun Github Anda.

3. Setelah melakukan registrasi, Anda akan diarahkan ke halaman dashboard project Cocoon.io

4. Anda sekarang sudah memiliki akun Cocoon.io. Next, yang diperlukan ialah file ZIP dari project untuk di upload ke Cocoon.io. Buka project Construct 2 Anda, pastikan kolom About sudah terisi semua agar dapat melakukan export.
NOTE : yang terisi dalam kolom About tidak akan mempengaruhi judul game yang ada pada saat di export ke Android.

5. Begitu pula dengan Configuration Settings-nya. Pastikan sudah terisi dengan benar. Kolom dengan kotak yang berwarna merah merupakan kolom yang harus sesuai dengan yang ada di gambar. Sedangkan warna biru merupakan kolom yang isinya dapat dipilih sesuai kebutuhan proyek.

6. Selanjutnya tekan tombol Export Project.

7. Pilih Cordova dan tekan Next.

8. Pilih destinasi folder untuk file HTML5 nanti, lalu hilangkan tanda centang yang ada pada Minify script.

9. Pastikan memberi tanda centang pula pada Android, dan tekan tombol Export.

10. Tunggu hingga proses export selesai, dan buka foldernya.11. Terdapat dua berkas dan satu folder di dalamnya. Buka folder www.

12. Hapus berkas icon berikut karena sistem tidak menggunakan icon ini. Apabila Anda menemukan berkas config.xml atau intelxdk.config.additions.xml , Anda juga  harus menghapusnya karena tidak digunakan.

13. Seleksi semua berkas yang tersisa dan konversi menjadi .zip. Maka hasilnya terlihat seperti tanda panah berikut. (Nama pada file Zip tidak harus sama)

14. Buka kembali laman dashboard Cocoon.io dan drag file .zip tadi ke kolom Create project.

15. Tunggu hingga proses unggah selesai.

16. Jika sudah selesai, akan muncul kolom project dengan nama defaultnya “HelloCocoon.” Tekan nama project nya untuk mengatur.

17. Scroll ke bawah, dan berikan centang pada checkbox Android.

18. Selanjutnya pada kolom Cocoon version pilih versi 2.1.0, dan untuk Webview engine pilih Canvas+.

19. Berikutnya untuk Bundle id dan kolom lainnya, sesuaikan seperti berikut. Kolom dengan kotak yang berwarna merah merupakan kolom yang harus sesuai dengan yang ada di gambar, sedangkan warna biru merupakan kolom yang isinya dapat dipilih sesuai kebutuhan project.

20. Tekan tombol save yang ada di bawah Settings untuk menyimpan data yang sudah diisi.

21. Untuk memasang icon pada game, buka tab Icons yang ada di antara tab Plugins dan Splash.

22. Drag gambar berukuran 1024×1024 pixel ke dalam kotak Drop Image tersebut.

23. Untuk melihat hasil icon yang sudah diunggah tadi, buka kembali halaman project Anda (refresh page / tekan F5). Sehingga akan terlihat seperti berikut.

24. Agar game dapat dijalankan pada semua perangkat, game harus memiliki lisensi atau keystore. Ikutilah langkah berikut untuk membuat keystore.

25. Apabila sudah memiliki keystore nya, scroll ke halaman bawah. Di sana terdapat kolom Signing. Pilih tab Android. Pilih opsi Add a key.

26. Selanjutnya tambahkan seperti contoh gambar berikut.

  • Title: isi dengan nama keystore atau pengenal keystore saja. Tidak masalah bila berbeda dengan nama alias atau nama keystore.
  • Alias: isi dengan nama Alias yang ada pada saat pembuatan keystore.
  • Certificate password: isi dengan password alias.
  • KeyStore password: isi dengan password utama.

27. Jika sudah selesai, tekan tombol Add. Hasilnya akan terlihat seperti berikut.

28. Cocoon.io akan otomatis melakukan signing pada aplikasi melalui keystore yang tadi sudah Anda gunakan. Selanjutnya perlu tahap compiling, di mana pada tahap ini Cocoon.io akan membuat berkas zip yang saat itu Anda ungguh ke project menjadi file .apk. Tekan tombol palu untuk memulai tahap compiling ini.

29. Setelah menekan tombol palu tersebut, ikon Android akan terlihat berkedap-kedip. Jika sudah selesai, warnanya sudah menjadi biru terang pekat (tidak kedap-kedip lagi). Nah, proses compiling sudah selesai. Tekan ikon tersebut untuk mulai mengunduh berkas .zip yang nanti di dalamnya terdapat berkas apk.

30. Berikut ini merupakan tampilan berkas yang terdapat dalam berkas zip.

Apabila berkas yang terdapat di dalam berkas zip tersebut berjumlah 4, artinya keystore yang telah Anda gunakan ada yang salah. Mungkin kesalahan ada  pada password atau nama alias keystore-nya. Anda pun dapat mengulang kembali langkah nomor 25.

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this:

2 comments, add yours.

Sholeh

Untuk berkasizip yang terakhir terdapat 2 file ? apa bedanya yaa ?

    Daniel William

    Author

    Halo mas Sholeh, apakah maksudnya file hasil compile dari Cocoon.io yang berisi armv7 dan x86?
    Itu merupakan file apk yang masing-masing didukung oleh processor handphone android. Seperti contohnya handphone ASUS menggunakan processor yang hanya mendukung x86, sedangkan Samsung, Lenovo, Oppo, dan brand lain menggunakan processor armv7.

Leave a comment