Yuk Kenalan dengan Cocos Code IDE, Editor Official dari Cocos2D-X.

Hai.. Tak terasa sudah agak lama juga ya sejak posting terakhir saya disini. Pada posting tersebut saya membahas tentang kabar terbaru dari keluarga besar game engine Cocos2D selama setahun belakangan. Nah, kali ini saya akan lanjutkan pembahasan tentang salah satu tool yang pernah saya singgung pada posting itu. Cocos Code IDE.

medium_CocosCodeIDE_1024 shrink

Tool apa sih Cocos Code IDE ini? Yuk kita kenalan lebih lanjut.

Untuk apa pakai editor pemrograman baru lagi?

Cocos Code IDE adalah editor pemrograman official dari tim Cocos2D-X. Bagi kalian yang sudah pernah mencoba bikin game pakai Cocos2D-X mungkin bertanya-tanya, untuk apa sih pakai editor pemrograman yang lain lagi? Selama ini bukannya cukup pakai Xcode, Visual Studio atau Eclipse ya? Lagipula bukannya kita harus belajar lagi ya kalau ingin pakai tool yang baru?

Memang untuk mencoba tool yang baru itu dibutuhkan waktu untuk beradaptasi lagi. Belum lagi kalau waktu setting tool-nya bermasalah. (^^,)

Tapi tidak perlu khawatir, Cocos Code IDE ini dikembangkan dari editor pemrograman yang cukup populer yaitu Eclipse. Jadi kemungkinan besar kalian tidak menemukan masalah yang terlalu kompleks saat beradaptasi untuk memakai editor ini. Apalagi bagi kalian para programmer Java yang sudah pernah menggunakan Eclipse sebelumnya.

Kembali lagi ke pertanyaan tadi, untuk apa sih pakai editor yang baru lagi?

Seperti yang pernah saya bahas sekilas di posting yang lalu, Cocos Code IDE ini memiliki beberapa fitur yang membantu saat bikin game seperti:

  • Live Coding:
    codeide-p2
    Dengan fitur ini kita bisa langsung melihat seperti apa perubahan yang terjadi saat sedang utak-atik kode pemrograman gamenya tanpa harus dicompile terlebih dulu. Menurut saya fitur ini sangat membantu ketika bikin game, misalnya saat sedang mengatur posisi layout dalam menu game. Bayangkan kalau untuk menggeser posisi tombol hanya beberapa pixel saja kita harus menunggu waktu compile untuk melihat hasilnya di simulator. Bisa bikin emosi kalau harus bolak-balik seperti itu.. (^^,)
  • One Click Publishing:
    codeide-p3
    Fitur ini juga membantu dalam pengembangan game cross-platform untuk iOS dan Android. Karena hanya dengan klik satu tombol saja bisa langsung membuat file instalan .apk untuk Android dan .ipa untuk iOS.
  • Auto Completion:
    codeide-p4
    Mungkin kalian sudah cukup akrab dengan fitur auto completion ya. Karena sebagian besar editor pemrograman sudah memiliki fitur yang satu ini. Lalu apa bedanya dengan fitur auto completion yang dimiliki oleh Cocos Code IDE?
    Karena Cocos Code IDE adalah editor official dari Cocos2D-X, maka fitur auto complete yang dimilikinya terintegrasi erat dengan API dan dokumentasi dari Cocos2D-X itu sendiri. Jadi fitur ini akan sangat membantu untuk lebih memahami penggunaan API Cocos2D-X dalam proses pengembangan game.
  • Code Hinting:
    codeide-p5
    Fitur ini membantu kita saat ingin menggunakan resource (mis: file image atau efek suara) dalam kode game. Dengan adanya fitur Code Hinting, tidak perlu lagi bolak-balik antara editor dan file explorer hanya untuk melihat nama file resource yang ingin digunakan.

Nah, tadi barulah sebagian dari fitur yang dimiliki oleh Cocos Code IDE. Kalau ingin melihat fitur-fitur lainnya kamu bisa mampir ke sini. Dan bagi kamu yang penasaran seperti apa demonstrasi penggunaan Cocos Code IDE ini, kamu bisa lihat video berikut ini:

Menarik! Downloadnya dimana ya?

Nah.. Menarik kan fitur-fitur yang ada di Cocos Code IDE ini?

Untuk mencoba editor ini, kamu bisa mendownloadnya dari halaman download Cocos2D-X di sini. Dan untuk informasi tentang instalasinya bisa kamu baca-baca disini.

Setelah persiapannya selesai, saya akan lanjut ngobrol-ngobrol sekaligus terjun langsung mencoba editor ini.

*bikin kopi dulu* (^^,)

Yuk kita lanjutkan perkenalannya

Sudah selesaikah persiapan untuk utak-atik Cocos Code IDE? Yuk kita lanjut utak-atik Cocos Code IDE.

Ketika pertama kali menjalankan editor ini, kita akan disambut dengan jendela perkenalan seperti berikut,

welcome_cocoscodeide

Kali ini saya akan menggunakan bahasa pemrograman Javascript, jadi klik tombol opsi Javascript untuk mulai menggunakan Cocos Code IDE. Setelah itu, kita perlu mengatur path engine Cocos2D-JS yang akan digunakan oleh Cocos Code IDE ini.

setup_js1

Caranya adalah dengan menekan tombol dropdown ‘custom’ yang ada pada menu Javascript Frameworks, lalu saat muncul jendela file explorer pilih lokasi tempat kamu telah menyimpan engine Cocos2D JS sebelumnya.

setup_js2

Okay, selesai sudah persiapan awal untuk menggunakan Cocos Code IDE ini. Sekarang kita lanjutkan dengan membuat project baru untuk mencoba editor ini. Kita akan bikin project ‘Hello World!’.

Tipikal programmer sekali ya.. (^^,)

Untuk mulai membuat project baru, pilih menu File >> New >> Cocos Javascript Project seperti berikut,

create_new

Kemudian akan muncul layar seperti ini,

setup_project1

Selanjutnya kamu bisa mengisi nama project yang diinginkan di bagian ‘Project name’. Lalu kamu bisa memilih lokasi tempat kamu menyimpan project ini dengan klik tombol browse di bagian ‘Location’ pada area ‘Create Project in Workspace’. Setelah selesai, klik tombol ‘Next’ untuk melanjutkan. Kamu bisa lihat gambar dibawah agar lebih jelas,

setup_project1_wc

Layar yang muncul berikutnya adalah pengaturan lanjutan, ada beberapa hal yang bisa kamu atur seperti:

  • Pilihan orientasi game kamu, Landscape atau Portrait. Untuk project pertama ini, kita pilih saja opsi Landscape.
  • Judul game yang kamu inginkan.
  • Pilihan default resolusi game yang kamu inginkan.
  • Menambahkan kode native untuk build game kamu di platform Android dan iOS. Untuk project pertama ini belum perlu untuk menambahkan kode native. Tapi kalau kamu penasaran ingin mecoba build ke Android atau iOS kamu bebas bereksperimen lho.. (^^,)

Kamu bisa lihat gambar dibawah untuk lebih jelasnya,

setup_project2_wc

Setelah selesai, klik tombol Finish. Kemudian Cocos Code IDE akan menampilkan project yang siap untuk diutak-atik seperti berikut,

voila_project_created

Voila..! Projectnya sekarang sudah siap untuk kamu lanjutkan utak-atiknya. Kalau kamu ingin melihat seperti apa tampilan ‘Hello World’-nya, kamu bisa klik tombol ‘Run in Browser’. Nanti Cocos Code IDE akan memanggil browser default kamu untuk menampilkan ‘Hello World’.

helloworld

Selanjutnya apa?

Waah.. Panjang juga ya posting saya tentang perkenalan Cocos Code IDE ini. Nanti saya akan lanjutkan lagi pembahasan tentang utak-atik kode sekaligus mencoba fitur-fitur Cocos Code IDE ini di postingan yang lain ya.

Bagi kamu yang masih penasaran ingin melanjutkan utak-atik project ‘Hello World’ tadi, ada beberapa hal yang bisa kamu coba seperti:

  • Ganti image background dari Cocos2D-X dengan image yang kamu inginkan.
  • Ganti label ‘Hello World’ nya dengan label lain yang kamu inginkan.
  • Kamu juga bisa coba memasukkan sprite dan mencoba menampilkan animasi. Hehehehe.. (^^,)

Selamat bereksperimen ya.. Sampai jumpa di postingan berikutnya.

Cheers..! (^^,)

Iklan

2 thoughts on “Yuk Kenalan dengan Cocos Code IDE, Editor Official dari Cocos2D-X.

Punya pendapat, ide atau saran..? Yuk di-share disini

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s