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:
cocos2d_template_chosen

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:
project_option

simpen_di_folder

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

tampilan_awal_project

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

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,
klik_kanan_class_baru

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

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:
bikin_class_baru2

bikin_class_baru3

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:
warning
Tanda itu merupakan bantuan dari XCode untuk mengingatkan programmer akan kemungkinan terjadinya error.

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

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.
gameLayer

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
    nambahin_art1
  • 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.
    nambahin_art2
  • Nah, sekarang gambarnya sudah tersimpan di dalam project XCode dan siap untuk kita gunakan.
    nambahin_art3

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:
tampilan_sprite1

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..!

Iklan

11 thoughts on “Tutorial Cocos2D-iPhone: Bikin Animasi Karakter Part 1

  1. nantoez berkata:

    Tutorialnya bagus masbrooo, IMHO..cuman miss di penjelasan class introLayer. Sedikit kasi masukan biar jelas ya gan :). class introLayer berfungsi untuk memberikan efek fade putih setelah splashscreen cocos2D muncul. Sebelum Melangkah pada step 1, ada baiknya cek kode di appDelegate.m dimana cek class yang akan dipanggil duluan (In this case, import introLayer.h dan replace “xxx” dengan introLayer, contoh sebagai berikut:
    [[CCDirector sharedDirector] runWithScene: [xxx scene]];
    )

    1. Buat class introLayer dengan subclass CCScene.
    2. Masukan code berikut di file introLayer.h

    #import
    #import “cocos2d.h”

    @interface IntroLayer : CCScene
    +(CCScene *)scene;
    @end

    3. Pada file introLayer.m kode yang ditulis hampir sama pada kode HellorWorld.m, cuma hapus method init dan deallocnya(kalo pake ARC).
    Setelah itu kopas kode sama seperti picture yang udah admin post di tutorial ini.

    4. Build, and Run it!

    • hoo.. iya, thanks buat masukannya ya.. =)

      sedikit tambahan.. Untuk cocos2d versi 2.0 class IntroLayer sudah disediakan tiap kali kita buat project baru di Xcode, jadi bisa langsung dipakai.

  2. Roland berkata:

    gmLayer nya kok gak ada ya? di Xcode saya 5.02 malah gak ada pilihan gmLayer, cm ada pilihan gmtime

    • Hai..
      gmLayer itu bukan fungsi bawaan dari xcode atau cocos2d, gmLayer itu adalah nama variabel objek dari class GameLayer.
      Jadi kamu harus buat dulu class GameLayer yang nanti digunakan untuk menampilkan objek-objek yang digunakan di dalam game..

      • Oh ya, saat ini sy sedang mendalami Objective C sebelum melangkah lebih dalam ke cocos2d for iphone. Referensi yg sy gunakan saat ini :
        1. Programming in Objective C (Steve Kochan)
        2. iOS Programming ( Big Nerd Ranch )

        Untuk referensi gaming ( terutama cocos2d ) apakah ada referensi yang bagus? Sejauh ini yg saya gunakan cuma 1, Learn cocos2d ( steffen itterheim ).

        Any suggestions would be appreciated, Thanks !

      • Beberapa referensi yang saya pernah baca itu:
        1. Learning Cocos2D (Rod Strougo & Ray Wenderlich)
        2. Cocos2D Game Development Cookbook (Nathan Burba)
        3. Cocos2D for IPhone (Pablo Ruiz)

        Di internet pun banyak situs-situs dan forum yang bisa membantu untuk belajar lebih dalam lagi tentang Cocos2D, salah satunya situs http://www.raywenderlich.com

        Semoga bisa membantu ya.. Tetap semangat belajar dan berkarya ya..
        Have fun making games!

  3. muchammad suadissy ezio al-ghazali berkata:

    tutorial di atas, untuk saya yang belum paham sama sekali akan selalu menarik untuk dibaca, mantab sekali gan.. bagaimanakah cara saya untuk bisa memberikan “credit”?

    • Thank you..
      Senang rasanya kalau postingan di blog saya bisa membantu untuk belajar pemrograman game.. =)
      Oiya, maksudnya memberikan “credit” itu bagaimana ya?

  4. Robin berkata:

    kak maksudnya dari kalimat:

    “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”

    setelah saya ekstrak, muncul folder “cocos2d” tapi stlh diklik tidak ada file atau folder bernama terminal.

    kira2 langkah saya yg mana yang salah?

    • Kamu pakai Cocos2D yang versi berapa? Kalau kamu menggunakan Cocos2D versi 3 ke atas, kamu bisa menginstall Cocos2D hanya dengan double klik di file DMG installernya.

      Tutorial yang saya buat ini masih memakai versi Cocos2D yang lama, jadi mungkin ada beberapa hal yang berubah dan perlu diadaptasi lagi jika kamu memakai Cocos2D versi yang terbaru. (^^,)

Komentar ditutup.