[Cocos2d-x 3.0]The Diary part 01 Sprite and Animation and Animate

Let See Here, The tag will be : #Tutorial #Cocos2d-x #C++ #Sprite #BahasaIndonesia[unofficial]

Asumsi Android NDK, SDK, Eclipse sudah di setting. Cocos2d-x 3.0 sudah di donlott. Visual Studio udah ready. Etc etc

sudah ngerti sususan folder Cocos2dx 3.0.

Tools :

  • Visual Studio 2013 (only works in Win7 Sp1, or Win8)
  • Cocos2d-x 3.0 final

[Pertama] Create Project

  • nama project [newgame]

masuk ke cmd

C:\programfile\> D:
D:\ cd {folderproject}
D:\{folderproject}\cocos new newgame -p com.jan.newgame -l cpp

Selesai itu buka folder proj.win32 , buka newgame.sln menggunakan vs2013.

jalankan debug, compile semua biarkan ampe selesai jika berhasil bakalan keluar helloworld.

 

berikut ini source untuk Sprite

// 1.create and read image
// 2. setPosition, 
// 3. addChild,add into corresponding layer
 auto sprite = Sprite::create("HelloWorld.png");
 sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
 this->addChild(sprite, 0);

Yang ini source untuk animasi sprite,

 //----------------------------
 // Player Sprite and spritesheet
 //----------------------------
auto s = Director::getInstance()->getWinSize();
// read image, oh and this is a texture atlas.
auto texture = Director::getInstance()->getTextureCache()->addImage("linni_spritesheet.png");
// manually add frames to the frame cache.
 auto frame0 = SpriteFrame::createWithTexture(texture, Rect(32 * 0, 32 * 0, 32, 32));
 auto frame1 = SpriteFrame::createWithTexture(texture, Rect(32 * 1, 32 * 0, 32, 32));
 auto frame2 = SpriteFrame::createWithTexture(texture, Rect(32 * 2, 32 * 0, 32, 32));
// animation using sprite bacthnode
 auto sprite = Sprite::createWithSpriteFrame(frame0);
 sprite->setPosition(Point(s.width / 2 - 80, s.height / 2));
 addChild(sprite,5);
// stacking
 Vector<SpriteFrame*> animFrames(3);
 animFrames.pushBack(frame0);
 animFrames.pushBack(frame1);
 animFrames.pushBack(frame2);
// animation is like a recording
 auto animation = Animation::createWithSpriteFrames(animFrames, 0.2f);
 // animate is like play the record into the screen
 auto animate = Animate::create(animation);
 auto seq = Sequence::create(animate, FlipX::create(true), animate->clone(), FlipX::create(false), NULL);
sprite->runAction(RepeatForever::create(seq));

okeh penjelasan :

1. linni_spritesheet.png, merupakan texture atlas alias kumpulan sprite dalam satu file. Code digunakan untuk cache texture dan read image.

// read image, oh and this is a texture atlas.
auto texture = Director::getInstance()->getTextureCache()->addImage("linni_spritesheet.png");

2. Buat sprite frame semacem potongan kecil dari texture atlas tadi. Rect(), digunakan sebagai divider atau pemotong atau selector atau besarnya frame. frame diitung dengan coordinate Rect(x,y,width,height). Coordinate X=0 berada di top left, Y top berada di top left suatu image.

kode di bawah berarti createWithTexture, from texture, by frame Rectangular (kotak) x=0,y=0 width=32px,height=32px.

// manually add frames to the frame cache.
 auto frame0 = SpriteFrame::createWithTexture(texture, Rect(32 * 0, 32 * 0, 32, 32));

3. buat sprite dari frame yang sudah dibuat.

// animation using sprite bacthnode
 auto sprite = Sprite::createWithSpriteFrame(frame0);

4. setPosition

sprite->setPosition(Point(s.width / 2 - 80, s.height / 2));

5. addChilde, masukkan sprite ke layer tertentu

addChild(sprite,5);

6.  sebenarnya bukan stacking, tapi “sesuatu” namanya . Buat array vector, yes vector mirip array. dynamic array that can changes it size and something here take a look.  Tapi ini yang digunakan dalam kode dibawah adalah cocos2d::Vector, here is the explanation and how to use. saya juga kurang ngerti mas gan.

jadi, buat dynamic array yang meng handle SpriteFrame* dengan nama animFrames sesuai dengan jumlah frame yang akan dimasukkan, dalam hal ini yaitu 3 biji frame. thats it.

// stacking
 Vector<SpriteFrame*> animFrames(3);
 animFrames.pushBack(frame0);
 animFrames.pushBack(frame1);
 animFrames.pushBack(frame2);

7. Animation dan Animate, here is a great explanation Illustrated!

// animation is like a recording
 auto animation = Animation::createWithSpriteFrames(animFrames, 0.2f);
// animate is like play the record into the screen
 auto animate = Animate::create(animation);

8. Finally, terakhir. Action digunakan untuk “play” dan repeatforever itu seperti love u forever until the day i die or exit.

simplenya seperti ini : sprite->runAction (animate);
sprite->runAction(RepeatForever::create(seq));

Selesai, sekian diary cocos2dx, jika anda bingung wajar saja. Karena ini adalah catatan seseorang yang sedang mempelajari cocos2dx dan baru berjalan sekitar dua minggu dan sedang migrasi dari java ke c++. wkwkwkwk.

i really really recommend that you read this a sprite sheet and animation explanation Illustrated! from bunnyhero.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s