Selasa, 15 November 2016

Ekspor game GDevelop ke Android dan IOS menggunakan Intel XDK


Ini saat yang ditunggu-tunggu oleh kita semua, mengekspor projek game HTML5 ke perangkat Android dan IOS. Dalam artikel ini, saya akan membahas tentang cara mengekspor game ke Android saja, karena untuk IOS langkahnya nyaris sama.

Untuk mengekspor projek GDevelop menjadi APK untuk Android, GDevelop tidak bisa langsung membuat sebuah APK dalam programnya, namun membutuhkan bantuan perangkat lunak lainnya, yaitu Intel XDK. Intel XDK sendiri adalah sebuah perangkat lunak untuk membuat aplikasi smartphone dan tablet menggunakan HTML5, CSS dan JavaScript.

Sayangnya, Intel XDK hanya bisa meng-Compile (bahasa Indonesia nya dari Compile, apa ya?) projek yang anda buat secara online. Jadi anda wajib memiliki koneksi Internet untuk mengirim semua berkas projek yang anda buat ke server Intel. Tapi saya rasa saat ini anda sudah tidak memiliki kendala dalam urusan koneksi internet lagi, ya kan?

Untuk mengekspor projek anda ke Android, silahkan unduh dulu berkas instalasi Intel XDK dari situs resminya, dan instal di komputer anda seperti biasa.
Setelah Intel XDK terinstal, buka GDevelop dan buka projek game yang ingin anda ekspor ke Android, lalu klik "File" kemudian pilih "Export to the web".

Gambar 1
Pilih "Export to iOS or Android with Cordova (Intel XDK) seperti gambar di bawah ini:

Gambar 2
Lalu klik tombol "Export". Jika berhasil, akan ada window konfirmasi dan lokasi dimana berkas hasil ekspor berada dalam komputer anda.

Gambar 3
Sekarang jalankan Intel XDK yang tadi anda pasang sebelumnya. Jika anda belum memiliki projek di Intel XDK atau belum pernah login sebelumnya, maka tampilannya akan seperti gambar di bawah ini:

Gambar 4
Anda harus membuat akun Intel terlebih dahulu, caranya mudah yaitu dengan klik ikon orang (Account settings) pada bagian pojok kanan atas, dan klik "Create a new account" pada window yang muncul seperti di bawah ini:
Gambar 5
Isi semua data mengenai diri anda pada window yang muncul kemudian, termasuk alamat email yang berlaku. Alamat email ini harus berlaku, untuk menerima verifikasi dan pemberitahuan dari Intel.

Gambar 6
Setelah semua kotak wajib terisi, klik "Join now" pada bagian paling bawah dari window tersebut. Buka email anda dan buka email yang dikirim oleh Intel lalu klik "Confirm email address" pada email tersebut untuk verifikasi diri anda ke situs Intel.

Setelah terverifikasi, buka lagi Intel XDK dan login pada window Login menggunakan data yang anda buat tadi. Setelah Login (tandanya ketika anda klik Account settings di pojok kanan atas, akan nampak username anda disana), klik "Import Your HTML5 Code Base" pada bagian kiri bawah window Intel XDK.

Gambar 7
Dan pada bagian kanan window tersebut, klik kotak "Import from" lalu cari folder dimana berkas-berkas hasil ekspor projek GDevelop seperti pada gambar 3 di atas lalu klik tombol "Continue".
Beri nama projek anda pada window berikutnya, anda boleh memberi nama yang sama dengan nama projek anda di GDevelop, namun disini anda tidak bisa menyertakan Spasi, lalu klik tombol "Create". Pada window yang muncul berikutnya, saat ini anda tidak perlu mengubah apapun, langsung klik tombol "Continue" seperti gambar di bawah:

Gambar 8
Tunggu sampai projek selesai dipersiapkan oleh Intel XDK dan akan muncul pemberitahuan "Success" jika tidak ada kesalahan dalam projek GDevelop anda. Klik Ok untuk menutup pemberitahuan tersebut dan anda siap untuk langkah selanjutnya.

Anda akan melihat window Intel XDK telah terisi dan ada kode-kode HTML isi dari berkas index.html pada projek game anda. Anda tidak perlu khawatir dengan kode-kode tersebut, karena anda disini hanya untuk membuat sebuah berkas APK dari game yang sudah anda buat di GDevelop.

Jika anda belum memiliki sebuah "keystore" yang tersimpan di komputer anda, anda harus membuatnya terlebih dahulu. Keystore adalah sekumpulan data yang sifatnya rahasia. Sebuah aplikasi tidak akan diterima oleh Google playstore jika tidak menyertakan data dari keystore ini.
Untuk membuat sebuah keystore, klik ikon orang (Account setting), dan klik tab "Android", lalu klik "Create keystore".
Gambar 9
Lalu akan muncul sebuah window baru, disini anda harus mengisi data dengan hati-hati, karena keystore ini akan selalu digunakan oleh anda kedepannya.  Berikut contoh mengisi data pada saat membuat sebuah keystore:

Gambar 10
Keystore Description: Keterangan singkat keystore anda ini.
Certificate Alias: nama pengguna untuk keystore ini.
Key Passphrase: Kata sandi untuk keystore ini.
Beri centang pada "Use this key passphrase..." untuk menggunakan kata sandi yang sama pada keystore.
Owner name: Nama pemilik keystore ini.
Email address: Alamat email pemilik.
Company: Nama perusahaan pemilik.
Country: Negara pemilik.
Beri centang pada "use this certificate as..." jika ingin menggunakan sertifikat ini sebagai sertifikat baku lalu klik tombol "Save" untuk menutup window.
Selamat! Anda sudah memiliki sebuah keystore yang bisa digunakan untuk projek-projek anda.

Klik pada "Projects" di sebelah gambar folder biru di pojok kiri atas pada window utama Intel XDK, klik pada projek yang akan anda ekspor menjadi APK, dan pada bagian kanan buka pilihan "Build settings". Jika tab Android tidak terpilih, klik pada tab Android tersebut.

Beri centang pada "Optimize with crosswalk", isi "App ID" dengan nama unik aplikasi anda. Pengisiannya seperti sebuah tautan terbalik yaitu dimulai dengan com, nama pembuat dan nama aplikasi. Dalam contoh ini app ID nya adalah "com.otakberlubang.tombolsentuh".
Isi "App name" dengan nama aplikasi anda. Isi "App description" dengan keterangan tentang aplikasi anda dan isi "Author" dengan nama pembuat.

Gambar 11
Lalu geser ke bawah, centang "Fullscreen" jika anda ingin tampilan game anda sepenuh layar.
Pada "Developer certificate", klik dan pilih sertifikat yang tadi anda buat.
Pada "Orientation", pilih orientasi game anda, apakah baku (default), tidur (landscape) atau berdiri (portrait). Biarkan pilihan yang lain dengan nilai baku untuk saat ini, karena anda tidak perlu mengubahnya sekarang.

Gambar 12
Geser lagi ke bawah, jika anda sudah menyiapkan gambar untuk ikon dan tampilan awal game anda, buka folder "Launch icon and splash screen", klik pada tab "Android" dan isi semua gambar yang diperlukan.

Sekarang klik tab "Build" pada window utama Intel XDK, anda akan melihat ada beberapa pilihan, Android, iOS, Window 10 UAP, Chrome dan Web application seperti pada gambar di bawah:

Gambar 13

Apabila ada pengaturan tadi sudah benar, maka akan ada tanda centang hijau pada gambar gerigi seperti nampak pada gambar di atas.
Klik pada kotak Android itu untuk memilihnya sebagai target pembuatan aplikasi, lalu klik pada gambar gembok di sebelah gambar gerigi bercentang hijau untuk memasukkan password keystore anda.
Gambar 14
Kemudian klik tombol "Unlock" untuk membuka dan menggunakan keystore tersebut pada pembuatan game anda. Jika kata sandi yang anda masukkan benar, maka keystore tersebut akan terbuka dan muncul pemberitahuan bahwa sertifikat ini akan digunakan.

Klik pada kotak Android untuk memberi centang yang artinya anda memilih untuk membuat aplikasi Android. Jika anda ingin membuat aplikasi iOS dan atau yang lainnya, caranya sama dengan cara Android ini.
Gambar 15
Setelah gembok terbuka, semua pengaturan teratur dengan benar dan kotak android telah diberi centang seperti pada gambar di atas, klik tombol "Start builds" pada bagian atas window utama Intel XDK untuk mulai mengirim projek anda ke server Intel dan mengubahnya menjadi sebuah APK untuk dipasang di perangkat Android. Tunggu hingga proses pengunggahan dan pembentukan selesai. Jika gambar tampilan kotak Android menjadi seperti ini:

Gambar 16
Itu tandanya proses pembuatan APK telah selesai, klik tombol dengan gambar panah ke bawah untuk mulai mengunduh berkas APK yang telah dibuat. Setelah proses pengunduhan selesai, anda akan mendapatkan sebuah berkas ZIP berisi 2 buah berkas APK masing-masing untuk dipasang pada perangkat android ARM7 dan X86. Umumnya perangkat android yang ada di pasaran menggunakan Chip ARM7, dan hanya sedikit yang menggunakan chip X86. Jika anda bingung mengenai perangkat Android anda, anda dapat melihat kembali spesifikasi perangkat anda terlebih dahulu.

Setelah semua proses selesai, anda dapat dengan aman menghapus semua berkas sumber (Source files) dari projek anda yang tadi telah terunggah ke server Intel dengan mengklik "Delete uploaded project source files..." yang ada pada bagian atas di bawah tombol "Start builds". Anda juga dapat menghapus berkas APK yang anda buat tadi dari server Intel dengan mengklik tombol bergambar tempat sampah pada kotak Android.

Sekarang coba anda pasang berkas APK yang anda dapat dari server Intel tadi ke dalam perangkat Android anda, jika semuanya sudah benar, maka seharusnya game anda dapat berjalan dengan mulus di perangkat anda tersebut. Jika terjadi gangguan, tidak lancar, tersendat, suara terputus dan lain sebagainya, coba anda pasang di perangkat yang lain terlebih dahulu. Jika hasilnya sama, maka kemungkinan besar anda melakukan kesalahan dalam pembuatan game di GDevelop, coba anda periksa dan sederhanakan events yang anda pakai untuk membuat game anda berjalan dengan mulus.

Selamat! Anda sekarang sudah bisa membuat game untuk perangkat Android. Untuk perangkat lainnya, caranya nyaris sama, yang membedakan adalah dalam pengaturan dan sertifikat.

Sebagai catatan, membuat sebuah berkas APK menggunakan Intel XDK akan menghasilkan berkas yang cukup besar ukurannya, ini disebabkan karena Intel XDK menyertakan (embed) Crosswalk di dalamnya. Crosswalk ini adalah sebuah plugin untuk menjalankan aplikasi berbasis web menggantikan webview bawaan perangkat Android. Hal ini dimaksudkan untuk menjaga kompatibilitas aplikasi dengan perangkat Android pengguna yang mana tidak semua memiliki webview yang mumpuni untuk menjalankan aplikasi berbasis web atau HTML5. Anda dapat memilih untuk tidak menyertakan Crosswalk dalam APK game anda, namun pengguna nantinya diharuskan mengunduh Crosswalk secara terpisah dari Google Playstore yang mana hal ini bisa berdampak negatif dan menimbulkan kekhawatiran terutama untuk pengguna yang awam, namun pengguna hanya butuh mengunduh Crosswalk sekali untuk semua aplikasi atau game yang memerlukan plugin Crosswalk. Pilihan ada di tangan anda, apakah anda ingin menyertakan Crosswalk dan membuat berkas file sedikit lebih besar, atau membiarkan pengguna memutuskan untuk mengunduhnya sendiri

Demikian artikel tentang mengekspor game yang dibuat dengan GDevelop ke Android dan iOS menggunakan Intel XDK, semoga bermanfaat untuk kita semuanya.

Terima kasih sudah membaca! :)

Tidak ada komentar :

Posting Komentar