CONSTRUCT 2 : Cara memasang Admob dan Export melalui Cocoon.io [PART 2]

Halo semua, kembali lagi bersama saya Daniel William. Setelah memasang plugin Admob yang sudah disediakan oleh Cocoon.io serta membuat plugin itu berfungsi [Lihat di sini], selanjutnya kita akan belajar bagaimana caranya export melalui Cocoon.io dan bagaimana mengatasi hal-hal yang tidak diinginkan seperti black screen contohnya.



Sebelum melalui tahap yang terlalu jauh, saya ingin memberitahu terlebih dahulu mengenai objek Construct 2 yang tidak bisa digunakan pada saat export menggunakan Cocoon.io. Berikut ini kumpulan objek Construct 2 yang saya maksudkan.
  • Buttons
  • File Chooser
  • List
  • Progress Bar
  • Slider Bar
  • Text Box
  • XML
  • Serta beberapa Conditions dan Actions yang ada pada objek Browser
Jika kalian menggunakan salah satu objek yang saya sebutkan di atas, sebaikanya kalian segera menggantinya sebelum kita masuk ke bagian lebih dalam lagi, selain itu juga, saya sarankan agar tidak menggunakan fitur effect WebGL, karena itu dapat membuat performa permainan pada saat di export menjadi lebih rendah sehingga terjadi lag.

Berbicara tentang performa permainan, ada juga hal yang membuat performa permainan menjadi lebih rendah, seperti memory usage yang terlalu tinggi, penggunaan kondisi event yang terlalu berbelit-belit, dan penggunaan gambar yang terlalu besar, agar lebih mengerti tentang performa permainan, kalian bisa membaca artikel yang dibuat oleh om Punto Damar berikut ini.

Sebelum kita melanjutkan tahap export di website Cocoon.io, silahkan ikuti project setting berikut ini.
arcadesindo.com
  • First Layout usahakan selalu gunakan layout Loading
  • Pixel Rounding selalu di set menjadi On
  • Ukuran kanvas landscape 1280x720, potrait 720x1280
  • Fullscreen in browser : Scale Outer
  • Use high-DPI display : Yes
  • Orientation : tergantung ukuran kanvas
  • Enable WebGL : On
  • Downscaling : Medium Quality
  • Physic Engine : Box2D web
  • Loader Style : disarankan tidak menggunakan loader yang menggunakan Progress bar






Selanjutnya ubah Unbounded Scroll yang ada pada setiap layout menjadi Yes, dan usahakan tidak membuat ukuran layout melebihi ukuran kanvas, kecuali memang diperlukan seperti pembuatan permainan Platformer contohnya.
arcadesindo.com
Selain mengubah hal di atas, ada juga beberapa hal yang sering kali terjadi bagi pengguna Cocoon.io pertama kalinya, yakni Musik yang ada dalam projek tidak berputar, padahal saat di Browser lancar - lancar saja. Untuk masalah ini, kalian cukup memberikan aksi Preload pada bagian layout awal sebelum musik itu akan dimainkan, sebagai contoh, kita memiliki dua layout, pertama layout Loading dan satunya lagi layout Menu, karena musiknya akan bermain pada saat pengguna sampai di layout Menu, maka pada bagian First Layout yang ada di project setting kita menetapkan bahwa layout yang wajib pertama kali muncul adalah layout Loading, maka kita harus memberikan aksi Preload pada bagian Event sheet layout loading tersebut, agar nantinya musiknya bisa dimainkan pada saat pengguna sampai di layout Menu. Berikut ini merupakan contoh kondisi yang harus diberikan pada event sheet layout Loading.
arcadesindo.com
Pemberian waktu tunggu itu tergantung dari berapa banyak musik yang akan di persiapkan termasuk juga bagi yang menggunakan musik berdurasi di atas dua menit. Agar pengguna tidak bosan pada saat di layout Loading, sebaiknya kita memberikan splash logo perusahaan kita atau tulisan Loading.

Baiklah, sekarang kita bisa lanjut ke tahap Export dari Construct 2, pastikan kamu mengisi terlebih dahulu form About yang ada pada Project Properties. Jika telah mengisinya, klik File > Export Project > Cordova > Next.
 
 arcadesindo.com
Pilih folder tempat file yang nanti akan disimpan, lalu pastikan kamu tidak memberikan centang pada Minify script, selanjutnya tekan Next.
arcadesindo.com
Untuk Options dan Permissions dibiarkan begitu saja, tapi jika dalam permainan kalian menggunakan salah satu diantara mereka, sebaiknya diberikan contengan, untuk Export audio files tetap pilih yang Android, dan terakhir Minimum OS kita ambil Android 4.0+, mungkin kalian akan bertanya mengapa hanya ada 4.0 yang paling rendah? itu dikarenakan beberapa smartphone belum mendukung HTML5, terutama bagi smartphone yang meng menggunakan OS dibawah 4.0. Selanjutnya tekan Export, dan tunggu beberapa saat hingga selesai.
arcadesindo.com
Setelah proses export selesai, buka folder permainan kamu tadi, lalu hapus file config.xml dan intelxdk.config.additions.xml (jika ada).
arcadesindo.com

Selanjutnya silahkan unduh terlebih dahulu aplikasi Cordova2Cocoon yang dibuat oleh Chez App melalui link ini. Fungsi dari aplikasi ini untuk membantu kita dalam membuat file zip menjadi lebih cepat dan memperbaiki beberapa script yang semestinya diubah agar dapat di export tanpa ada kendala.

Aplikasi ini portable yang artinya tidak perlu diinstall terlebih dahulu. Buka aplikasi Cordova2Cocoon ini, lalu pilih file c2runtime.js yang ada di folder tempat export permainan kalian tadi. Setelah itu tekan Convert, maka otomatis dia akan meminta tempat hasil convert, langsung saja tekan Save.
arcadesindo.com
Sekarang kita menuju ke website Cocoon.io, silahkan daftar terlebih dahulu jika kalian belum memiliki akun.
arcadesindo.com
Setelah mendaftar, tarik file yang tadi baru saja kita buat .zip ke bagian Create Project seperti gambar berikut. Jika selesai upload, dia akan menjadi proyek dengan nama HelloCocoon, langsung saja tekan nama proyek itu.
arcadesindo.com
Selanjutnya isi bagian Settings seperti gambar berikut (Bundle ID, Name, dan Orientation sesuaikan dengan milik kalian sendiri). Jika sudah, tekan tombol Save yang ada di bagian bawah.
arcadesindo.com
Karena kita menggunakan Admob, maka saya akan mengajarkan bagaimana caranya memasang plugin ini pada proyek kita. Scroll lagi ke atas, pilih bagian Services Ads, lalu ubah parameter Admob menjadi On, dan jangan lupa simpan terlebih dahulu.
arcadesindo.com
Untuk mengubah gambar ikon, tekan tombol Icons yang ada di sebelah tombol Plugins. Untuk ukuran ikon di wajibkan menggunakan 1024x1024 pixel. "Mas saya sudah ubah ikonnya, tetapi mengapa di bagian pengaturan proyeknya masih menggunakan logo Cocoon?" Tinggal di refresh saja websitenya, maka otomatis akan terlihat ikon yang kita upload.
arcadesindo.com
Berikutnya tahap Signing, tahap ini sangat diperlukan apalagi jika kita ingin mempublikasikannya baik ke Google Playstore atau kemanapun yang kamu inginkan. Untuk melakukan Signing pada aplikasi kita, kita harus memiliki Keystore terlebih dahulu, untuk membuatnya silahkan unduh aplikasi keystorenya melalui link berikut. Lalu unduh JDK dan JRE jika kamu belum punya. Jangan lupa install JDK dan JRE nya.

Jika sudah mengunduh ketiga file tersebut, buka aplikasi Apk signer 1.8.5 yang dibuat oleh Hai Bison, tampilannya seperti ini.
arcadesindo.com
Selanjutnya buka lokasi JDK tadi, biasanya ada di Program Files, lalu isi bagian Key Generator seperti gambar di bawah ini.
arcadesindo.com
Untuk Password, Alias dan Alias Password saya sarankan untuk menggunakan kata yang sama saja agar kita tidak mudah lupa (simpan data-data ini dalam notepad agar tidak kelupaan). Selanjutnya jika sudah mengisi semuanya, klik Save as, pilih destinasinya, lalu tekan Generate Keyfile, tunggu beberapa saat hingga muncul tulisan Keyfile generated successfully.
Keystore cukup buat satu saja, jadi nanti bisa dipakai untuk signing semua aplikasi.

Selanjutnya kita kembali lagi ke website proyek kita di Cocoon.io, scroll ke bawah nanti kalian akan melihat bagian Signing. Tambahkan Key baru, lalu isi Key tersebut sesuai dengan yang kita sudah buat tadi lalu upload file keystore yang tadi kita generate. Jika sudah, tekan Add.
arcadesindo.com
Terakhir, tekan tombol Compile yang ada di bagian proyek, lalu tunggu beberapa menit hingga proses compile selesai.
arcadesindo.com
Sekian tutorial dari saya, bila ada pertanyaan silahkan tanyakan melalui komentar di bawah posting ini, jangan lupa Like fanspage ArcadesIndo Games, Subscribe channel youtube kami, dan terus pantau Arcadesindo.com.

Masih kesulitan pada proses Export/Compile menjadi Android? kami juga membuka jasa untuk Export/Compile loh! harga mulai dari Rp. 50.000 sampai dengan Rp. 150.000 (tergantung dari kerumitan fitur yang akan diterapkan dan pengaturan layout yang digunakan). Jika berminat, hubungi arcadesindo@gmail.com.

Penasaran dengan hasilnya?

Lihat permainan kami yang ada di Playstore!
(Semuanya kami compile menggunakan Cocoon.io loh!)

Dengan latar belakang hobi saya untuk menulis, saya dapat menyumbangkan keahlian saya dalam menulis artikel berupa informasi dan edukasi agar semua orang dapat memahami pentingnya edukasi dan informasi bagi mereka. 

Share this

Related Posts

Previous
Next Post »

3 komentar

komentar
30 Juni 2016 09.40 delete

saya suka yang Bola Warna Tembak.. sip mas punto tutorialnya

Reply
avatar
30 Juni 2016 09.48 delete

Terima kasih mas sudah mencoba Bola Warna Tembak, sayangnya saya bukan om Punto mas, hehe..

Reply
avatar
17 Maret 2017 21.20 delete

gan kalau kita pkek komponen text box solusi nya pkek compile apa..?? selain cocoon.IO.. mohon solusinya..

Reply
avatar

Jika ada gambar yang tidak muncul ataupun ada update terbaru mengenai game yang bersangkutan, silahkan beritahu kami melalui email arcadesindo@gmail.com, ataupun melalui kolom komentar. Terima kasih banyak :)