Tutorial Cocos2D-iPhone: Bikin Animasi Karakter Part 2

Hi… Pada posting kali ini, saya akan melanjutkan tutorial Cocos2D-iPhone sebelumnya tentang cara bikin animasi. Sekilas tentang tutorial bagian 1 yang lalu, saya telah membahas tentang:

  • Persiapan awal untuk membuat game dengan Cocos2D-iPhone dan XCode.
  • Membedah kode untuk menampilkan ‘Hello World’.
  • Membahas kode untuk menampilkan gambar karakter ke dalam layar.

So.. mari kita mulai perjalanan bagian kedua ini.. =))

Persiapan bikin animasi
Okay.. Sebelum membahas kode yang diperlukan untuk menampilkan animasi karakter, kita perlu membuat dulu spritesheet yang akan digunakan untuk animasi nanti.

Untuk membuat spritesheet, kita akan menggunakan tools Zwoptex yang bisa kamu download di sini. Setelah terinstal, jalankan Zwoptex lalu mulai dengan membuat dokumen baru. Langkahnya bisa dilihat di gambar berikut:
zwoptex1

zwoptex2

Kemudian, pilih file gambar yang akan digunakan untuk membuat spritesheet. Kalau sebelumnya saya menggunakan gambar karakter orang, maka kali ini saya akan menggunakan aset gambar yang baru.
Untuk mendownload aset gambarnya, kamu bisa mampir ke situs milik Vicky ini. Kali ini saya memilih gambar burung terbang untuk variasi.. =))

pilih_burung

Tips: Untuk memasukkan ketiga file image tadi ke dalam Zwoptex, kamu cukup melakukan drag ‘n drop filenya saja dari Finder ke Zwoptex.

Simple kan.. =)

Setelah memasukan file-file image tadi, maka tampilan Zwoptex akan terlihat seperti berikut:

zwoptex_b1

Kemudian lakukan pengaturan seperti berikut:

  • Pada tab Document:
    • Width: 512px
    • Height: 512px
  • Pada tab Layout:
    • Algorithm: Basic
    • Sort On: Name
    • Sort Order: Ascending

Setelah melakukan pengaturan tadi, tekan tombol Layout di sisi atas. Tampilan Zwoptex akan jadi seperti berikut:

zwoptex_b2

Langkah selanjutnya adalah melakukan pengaturan untuk mem-publish gambar-gambar tadi menjadi spritesheet. Tekan tombol Publish Settings di kanan atas, lalu buat pengaturan seperti ini:

  • Di bagian Texture
    • Save To File: pilih lokasi penyimpanan yang kamu inginkan, dan beri nama file png tersebut. Saya beri nama filenya burung.png.
    • Format: Portable Network Graphics (.png).
  • Di bagian Coordinates
    • Save To File: pilih lokasi penyimpanan yang kamu inginkan, dan beri nama file plist tersebut. Saya beri nama filenya burung.plist.
    • Format: cocos2d (.plist).

Kemudian tekan tombol Done untuk menyimpan pengaturan tadi.

Setelah selesai, tekan tombol Publish untuk membuat spritesheet yang nanti akan kita gunakan untuk membuat animasi karakter.

Tips: kamu juga bisa menyimpan dokumen Zwoptex tadi agar bisa kamu edit lagi nanti.

Yaay..! Sekarang kita sudah punya spritesheet untuk membuat animasi karakter dalam game.. =))

Ayo kita mulai bikin animasi..!
Langkah-langkah untuk memasukkan spritesheet yang sudah dibuat tadi ke dalam XCode adalah seperti ini:

  • Buka XCode, lalu klik kanan di grup Resources kemudian pilih ‘Add files to..’
    add__img_spritesheet
  • Pilih file burung.png dan burung.plist. Dan jangan lupa centang opsi Copy items into destination group’s folder seperti terlihat pada gambar di bawah ini:
    add_burung1
  • Apabila kedua file tadi sudah masuk ke dalam XCode, maka terlihat ada tambahan file di dalam grup Resources pada XCode seperti ini:
    burung_xcode

Okay.. setelah file spritesheet tadi dimasukkan ke dalam XCode project, maka sekarang kita akan menambahkan kode untuk menampilkan animasi. Buka file GameLayer.m kemudian tambahkan kode berikut di dalam method init. Kamu bisa menambahkannya di bawah kode yang telah kita buat pada tutorial yang lalu.

        //[1]
        // meload file yang digunakan untuk animasi
        CCSpriteFrameCache *frameCache = [CCSpriteFrameCache sharedSpriteFrameCache];
        [frameCache addSpriteFramesWithFile:@"burung.plist"];

        //[2]
        // membuat objek sprite yang akan dianimasikan
        CCSprite *bSprite = [CCSprite spriteWithSpriteFrameName:@"bluejay-sprite-01.png"];

        //[3]
        NSMutableArray *animFrames = [NSMutableArray array];
        for(int i = 1; i < 4; ++i) {
            [animFrames addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"bluejay-sprite-0%i.png", i]]];
        }

        //[4]
        // membuat objek animasi yang akan ditampilkan
        CCAnimation *anim = [CCAnimation animationWithSpriteFrames:animFrames delay:0.1f];

        //[5]
        // tampilkan sprite ke layar
        bSprite.position = ccp(winSize.width / 2 + 75, winSize.height / 2 + 150);
        [self addChild:bSprite];

Nah.. sekarang saya akan bedah tiap baris kode yang telah kita tambahkan tadi:

  1. Kode ini berfungsi untuk me-load frame-frame animasi yang kita akan gunakan dari harddisk lalu disimpan ke dalam satu cache. Keuntungan dari menggunakan frame cache ini adalah kita bisa menghemat penggunaan memori untuk meload sprite yang akan kita gunakan. Mungkin kalau cuma satu sprite seperti contoh ini belum terlalu terasa efeknya. Tapi ketika kita menggunakan banyak sprite nanti, trik menghemat memori ini amat diperlukan agar game yang kita buat tidak menyebabkan perangkat iOS jadi crash atau hang.
  2. Kode ini berfungsi untuk membuat objek sprite yang akan kita animasikan. Di sini kita menggunakan konstruktor dengan parameter nama frame dari file .plist yang kita simpan tadi.
  3. Disini kita menyimpan frame-frame animasi yang ada di dalam file .plist ke dalam satu variabel array. Nanti kita akan menggunakan variabel array ini untuk membuat objek animasi yang akan kita tampilkan.
  4. Kode inilah yang kita gunakan untuk membuat objek animasi. Kita menginstansiasi dari class CCAnimation dengan menggunakan parameter variabel array yang tadi kita buat dan variabel delay.
  5. Kode ini digunakan untuk mengatur posisi sprite yang akan kita tampilkan ke layar.

Okay.. sekarang coba test kode yang telah kamu tambahkan tadi di simulator. Apabila tidak ada bug, maka simulator akan menampilkan layar seperti berikut:
anim_diem

Yaay…! Sprite burung yang kita tambahkan tadi sudah bisa tampil di layar. Tapi koq belum bergerak ya..?

Well.. Itu karena tadi kita baru membuat objek animasinya saja, tapi kita belum ‘menyuruh’ sprite burung tadi untuk menjalankan animasi yang telah kita buat tadi. Sekarang kita tambahkan dua baris kode ini di antara kode [4] dan [5] tadi:

        //[4a]
        CCAction *animAct = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:anim]];

        //[4b]
        [bSprite runAction:animAct];

Berikut penjelasan dari tambahan kode di atas:

  • Kode [4a] ini berfungsi untuk membuat objek action yang akan dijalankan oleh sprite burung. Disinilah kita membuat logic untuk menganimasikan objek animasi yang tadi telah kita buat.
  • Kode [4b] ini berfungsi untuk memberi perintah ke sprite burung untuk menjalankan action yang telah kita buat di kode [4a] barusan.

Sekarang coba lakukan test di simulator lagi. Apabila tidak ada bug, maka di simulator akan tampil animasi burung yang sedang mengepakkan sayapnya. Yaaay..! =))

Selamat..! Lalu apa langkah selanjutnya..?
Yaay..! Kamu sudah bisa menampilkan animasi dengan menggunakan Cocos2D-iPhone. Sekarang bisa dibilang kamu sudah memiliki bekal pertama untuk membuat game untuk perangkat iOS dengan menggunakan Cocos2D-iPhone. Animasi adalah salah satu fitur yang paling diperhatikan pemain ketika sedang bermain game. Tutorial ini barulah langkah awal saja, kamu bisa kembangkan lebih lanjut lagi agar bisa lebih memahami pembuatan game menggunakan Cocos2D-iPhone.

Beberapa saran saya untuk eksperimen lebih lanjut dari tutorial ini:

  • Kamu bisa coba menambahkan sprite-sprite lain yang nanti akan kamu gunakan dalam game yang ingin kamu buat.

    Hint: mungkin kamu bisa bikin class sendiri untuk mengatur objek-objek sprite yang akan kamu gunakan.

  • Kamu juga bisa eksperimen untuk membuat sprite tadi bisa berpindah posisi dengan input dari pemain. Well.. kelihatannya itu bisa jadi topik tutorial yang bagus ya.. =)
  • Atau kamu punya ide untuk eksperimen yang lain..? Share saja di kolom komen di bawah ya..

Okay.. Sekian dulu posting saya tentang tutorial bikin animasi menggunakan Cocos2D-iPhone ini.

Selamat belajar dan bereksperimen ya.. Cheers..!

Iklan

3 thoughts on “Tutorial Cocos2D-iPhone: Bikin Animasi Karakter Part 2

  1. muchammad suadissy ezio al-ghazali berkata:

    apakah ada lanjutan atau tutorial yang membahas objective c dalam bahasa indonesia dan mudah dimengerti oleh mahluk awam?

    mantab sekali tutorialnya…

Komentar ditutup.