Tutorial Cocos2D-iPhone: Bikin Animasi Karakter Part 1

Setelah selesai menulis posting tentang Cocos2D-iPhone, saya malah jadi keterusan ngulik kode untuk membuat game. Hehe..

Di seri posting ini saya akan berbagi pengalaman ngulik tadi dengan membahas tentang:

• Pengenalan ngoding dengan Cocos2D untuk iPhone menggunakan XCode.
• Cara untuk menampilkan karakter game, kemudian menganimasikannya.

Koq cuma animasi? Kenapa bukan tutorial untuk bikin full game?

Well.. Karena proses development game terbilang cukup kompleks, jadi saya akan membaginya ke dalam beberapa posting. Anggap saja sebagai bekal awal kamu untuk terjun membuat full game untuk iOS. =)

Sebelum mulai membahas kode pemrogramannya, tools yang perlu disiapkan adalah:

• Cocos2D untuk iPhone yang bisa didownload di sini. Untuk tutorial ini saya memakai versi 2.0.
• Seperti yang sudah saya bahas sebelumnya, untuk IDE-nya kita akan menggunakan XCode .
• Secangkir kopi hangat (bisa juga teh manis atau soda sih, sesuai selera masing-masing saja.. =P )

Hello Cocos2D..!
Setelah mendownload Cocos2D-iPhone, kamu perlu menginstall template yang akan dipakai untuk membuat game. Pertama ekstrak file hasil download tadi ke dalam folder yang kamu inginkan. Lalu buka Terminal di dalam folder tersebut. Kemudian ketik perintah ini:

./install-templates.sh -f -u

Okay.. setelah selesai menginstall, jalankan XCode dan pilih File >> New >> Project. Apabila Cocos2D sukses terinstall maka akan muncul tampilan seperti ini:

Pilih Cocos2D iOS lalu tekan Next. Masukkan nama Product, pilih iPhone untuk Device Family kemudian simpan di dalam folder yang kamu inginkan. Langkah-langkah tadi bisa dilihat pada gambar berikut:

Setelah selesai proses membuat project baru maka akan tampil layar seperti ini:

Okay.. tekan tombol Run untuk build dan test di simulator. Akan muncul layar seperti ini.

Kalau kamu mengalami kesulitan untuk setting awal Cocos2D tadi, kamu bisa pelajari guide-nya di dokumentasi Cocos2D ini.

Ayo kita mulai pemanasan ngoding..
Untuk pemanasan, kita akan melihat sekilas kode yang digunakan untuk menampilkan Hello World’ tadi. Jika kamu lihat pada panel Project Navigator di sebelah kiri, disitu ada struktur file yang digunakan dalam project ini.

Buka file HelloWorldLayer.m untuk melihat isi kodenya, dua method yang perlu dipelajari adalah:

• Method scene:

  // Helper class method that creates a Scene with the HelloWorldLayer as the only child.
  +(CCScene *) scene
  {
          // [1]
  	// 'scene' is an autorelease object.
  	CCScene *scene = [CCScene node];
          // [2]
  	// 'layer' is an autorelease object.
  	HelloWorldLayer *layer = [HelloWorldLayer node];
  
          // [3]
  	// add layer as a child to scene
  	[scene addChild: layer];
  
  	// return the scene
  	return scene;
  }
  

• Yang kedua adalah method init. Baris kode yang menampilkan tulisan “Hello World” adalah yang seperti di bawah ini:

  // [4]
  // create and initialize a Label
  CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];
  // [5]
  // ask director for the window size
  CGSize size = [[CCDirector sharedDirector] winSize];
  
  // [6]
  // position the label on the center of the screen
  label.position = ccp( size.width /2 , size.height/2 );
  
  // [7]
  // add the label as a child to this Layer
  [self addChild: label];
  

Berikut adalah keterangan untuk tiap baris kode tadi:

1. Kode ini digunakan untuk membuat objek scene yang bertugas menampilkan layar user interface ke user.
2. Kode ini digunakan untuk membuat objek layer dari class HelloWordLayer yang akan ditambahkan ke dalam scene yang telah dibuat tadi.
3. Kode ini untuk menambahkan objek layer yang telah dibuat tadi ke dalam objek scene.
4. Kode ini digunakan untuk membuat label teks “Hello World”, lengkap dengan settingan tipe font dan ukuran huruf yang ingin ditampilkan.
5. Kode ini digunakan untuk mengetahui ukuran layar device.
6. Kode ini mengatur posisi dari label teks “Hello World” tadi. Kalau kamu perhatikan, di kode ini tidak digunakan nilai absolut, melainkan memakai variable ‘size’. Ini dilakukan agar posisi label selalu relatif ada di tengah layar baik untuk iPhone, iPad maupun iPod Touch.
7. Kode ini digunakan untuk menambahkan objek label tadi ke dalam objek layer yang nanti akan ditampilkan oleh objek scene.

Untuk lebih memudahkan kamu memahami kode-kode tadi, ada beberapa konsep dasar di Cocos2D yang perlu dimengerti, seperti:

• Scene:
  • Ini adalah objek yang merupakan representasi dari layar device. Suatu apps bisa terdiri dari beberapa scene (misal: scene menu, scene game, scene helloworld), tapi hanya satu scene yang ditampilkan ke layar device dalam satu waktu.
  • Di dalam scene ini kita bisa menambahkan sejumlah layer yang ingin ditampilkan ke layar device. Dalam contoh ‘Hello World’ tadi, kita membuat layer helloworld yang kemudian ditambahkan ke objek scene untuk ditampilkan ke layar.
  • Untuk membuat objek ini, kita meng-instansiasi class CCScene.
• Layer:
  • Ini adalah komponen untuk menampung objek-objek yang akan ditampilkan ke layar. Seperti contoh ‘Hello World’ tadi, objek label yang telah dibuat ditambahkan ke dalam objek layer. Kemudian objek layer ini ditambahkan ke dalam objek scene agar bisa ditampilkan ke layar device. Bagi kamu yang sudah pernah memakai Photoshop, konsep layer ini mungkin sudah terdengar familiar ya.. =)
  • Dalam satu objek layer, kita bisa menambahkan banyak objek lain tergantung dari kebutuhan. Misalnya kita ingin menambahkan objek label, tombol, atau karakter game.
  • Untuk membuat objek ini, kita meng-instansiasi class CCLayer.
• Director:
  • Salah satu tugas dari komponen ini adalah mengatur scene yang ingin ditampilkan ke layar device.
  • Kita bisa mengakses komponen ini lewat CCDirector. Pada contoh ‘Hello World’ tadi, kita memakai salah satu fungsi dari komponen ini untuk mengetahui ukuran layar device.
• Sprite:
  • Nah, komponen inilah yang nanti akan kita gunakan untuk menampilkan animasi karakter dalam game.
  • Untuk membuat objek sprite ini, kita menginstansiasi class CCSprite.

Penjelasan yang lebih lengkap tentang konsep-konsep dasar Cocos2D tadi bisa kamu lihat di dokumentasi Cocos2D untuk iPhone.

Kalau kamu masih agak kesulitan untuk memahami kode Objective-C tadi, kamu bisa belajar tentang Objective-C dulu di dokumentasi milik Apple ini.

Lanjut ngulik..
Nah.. Sekarang kita coba praktekkan teori yang tadi dengan membuat class baru untuk menampilkan layar berisi animasi karakter.

Kita mulai dari klik kanan di grup paling atas dari Project Navigator yang berada di sebelah kiri seperti terlihat di gambar,

Lalu pilih New File, kemudian akan muncul layar untuk memilih template yang ingin digunakan seperti ini:

Pilih template untuk membuat class Objective-C. Masukkan nama class, saya namai class yang baru ini GameLayer, kemudian simpan class yang baru dibuat tadi. Langkah-langkah pembuatannya bisa dilihat pada gambar berikut:

Kemudian buka file GameLayer.h, lalu ubah kodenya jadi seperti ini:

#import <Foundation/Foundation.h>
#import "cocos2d.h"

@interface GameLayer : CCLayer

@end

Coba tekan tombol Run untuk build dan test di simulator..  Lho, koq masih muncul tulisan Hello World..?

Well.. Itu karena tadi kita baru membuat class-nya saja tapi belum memberitahu Director untuk menampilkan layar GameLayer yang baru dibuat tadi. (Sudah mulai paham kan fungsi CCDirector di Cocos2D?)

Untuk menampilkan layar GameLayer yang sudah kita buat tadi, buka file IntroLayer.m kemudian tambahkan kode ini:

#import GameLayer.h;

Lalu ubah kode yang ada di dalam method makeTransition jadi seperti ini:

    [[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:1.0 scene:[GameLayer scene] withColor:ccWHITE]];

Kalau kamu perhatikan di sisi kiri dan di atas muncul tanda berbentuk segitiga warna kuning seperti terlihat pada gambar dibawah:

Tanda itu merupakan bantuan dari XCode untuk mengingatkan programmer akan kemungkinan terjadinya error.

Coba lakukan test di simulator. Jika muncul tampilan seperti ini:

Uups.. Ternyata apps-nya tidak bisa dijalankan di simulator karena crash. Kalau kamu lihat konsol di bagian kanan bawah, disitu XCode memberi pesan error yang bisa membantu untuk melacak penyebab terjadinya crash. Pada contoh ini, penyebab crash-nya adalah karena di class GameLayer yang kita buat tadi belum memiliki method scene. Karena class IntroLayer mencoba memanggil method yang belum ada, maka terjadilah crash.

Untuk memperbaiki bug tadi, kita perlu menambahkan method scene ke dalam dua file berikut:

• buka file GameLayer.h lalu ubah jadi seperti ini:

  #import <Foundation/Foundation.h>
  #import "cocos2d.h"
  
  @interface GameLayer : CCLayer
  
  + (CCScene*)scene;
  
  @end
  

• Kemudian buka file GameLayer.m, lalu tambahkan implementasi method scene seperti ini:

  #import "GameLayer.h"
  
  @implementation GameLayer
  
  + (CCScene*)scene {
  	CCScene *scene = [CCScene node];
  
  	GameLayer *gmLayer = [GameLayer node];
  
  	// add layer as a child to scene
  	[scene addChild: gmLayer];
  
  	// return the scene
  	return scene;
  }
  
  @end
  

Coba lakukan test di simulator, apabila yang muncul seperti gambar di bawah ini maka bug tadi sudah berhasil diperbaiki.

Yaay.. Kita sudah berhasil membuat layar baru yang akan digunakan untuk menampilkan animasi karakter. =)

Mana karakter gamenya..?
Nah.. sekarang kita akan menampilkan si karakter game yang akan kita buat ke layar game. Sebelumnya, kamu bisa mendownload aset art yang akan kita gunakan dari situs art buatan Vicki Wenderlich ini.
Sekedar info, situs tadi berisi aset-aset art yang bisa kamu gunakan secara free lho.. =)

Okay.. kalau kamu sudah mendownload aset art yang dibutuhkan, ekstrak filenya lalu buka XCode lagi. Untuk memasukan gambar yang dibutuhkan ke dalam XCode, caranya adalah seperti ini:

• Klik kanan di grup Resources, lalu pilih ‘Add File To..’ seperti di gambar berikut
  
• Lalu pilih gambar yang sudah kamu download tadi. Oiya, jangan lupa centang pilihan ‘Copy items into destination group’s folder (if needed)’. Opsi ini sekedar berjaga-jaga apabila kita secara tidak sengaja menghapus file gambar dari XCode.
  
• Nah, sekarang gambarnya sudah tersimpan di dalam project XCode dan siap untuk kita gunakan.
  

Sekarang kita akan menampilkan gambar tadi ke layar game. Pertama buka file GameLayer.m lalu tambahkan method init. Kita akan menambahkan kode untuk menampilkan sprite di method init ini. Kodenya adalah sebagai berikut:

- (id) init {
    if((self = [super init])) {
        // ambil ukuran layar device
        CGSize winSize = [[CCDirector sharedDirector] winSize];

        // membuat objek sprite
        CCSprite *pSprite = [CCSprite spriteWithFile:@"person_green_1.png"];

        // mengatur letak sprite di layar
        pSprite.position = ccp(winSize.width / 2, winSize.height / 2);

        // menambahkan objek sprite ke layer GameLayer,
        // untuk ditampilkan ke layar device
        [self addChild:pSprite];
    }
    return self;
}

Coba jalankan di simulator, maka akan terlihat tampilan seperti:

Yaay…! Kita sudah berhasil menampilkan sprite karakter game..! =))

Ambil napas dulu yuk
Waah.. ternyata posting ini panjang juga ya.. =))

Sekarang kita ambil napas dulu sambil menganalisa apa yang sudah dibahas tadi. Di posting ini kita sudah menyiapkan tools untuk membuat game memakai Cocos2D-iPhone, membedah kode untuk menampilkan ‘Hello World’, dan menampilkan sprite karakter game. Lumayan banyak kan..? =)

Sekian dulu posting bagian satu ini. Di posting selanjutnya saya akan meneruskan membahas tentang cara menampilkan animasi memakai Cocos2D, mulai dari menyiapkan spritesheet sampai dengan membedah kode yang diperlukan untuk menganimasikan sprite karakter yang tadi. Sampai jumpa di posting berikutnya ya..

Selamat belajar dan bereksperimen.. Cheers..!