[cocos2dx3.0] The Diary – Part 02 – Using cocostudio

Tools : (as usual )

  • VS EXPRESS 2013
  • COCOS2DX 3.0

If you looking at cpp-test you probably knew already how “easy” to use cocostudio to create scene, skeletal animation, UI, etc etc.

but at first you probably wondering … and as beginner in cocos2dx you will get this error :

#include "cocostudio.h"

as no such class or something, thats right, the “template” we created and open in visual studio 2013 doesn’t include cocostudio.h folder.

this is what you have to do

  1. On solution explorer -> right click the project -> properties
  2. Open or select C/C++ tab -> select General
  3. On Additional Include Directories -> click the down arrow -> select <Edit…>
  4. insert this line : $(EngineRoot)cocos\editor-support
  5. Done

There it is, now you can #include “cocostudio.h”

Dont get frustrated sometime cpp-test had secret… seriously -_-

 

 

 

 

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

 

 

Cocos2dx version 3.x Tutorial

if you have done installing all prerequisite stuff. And have basic knowledge of Android and Eclipse IDE. then its good.

and wondering is there a sample… there is

now how to build the sample? heres the link

 

Okeh then,

1. import the proj.android in Eclipse

2.

Create A New Project

$ cd cocos2d-x
$ ./setup.py
$ source ~/.bash_profile # may be ~/.bash_login or ~/.profile, depends on your environemnt
$ cocos new MyGame -p com.MyCompany.MyGame -l cpp -d ~/MyCompany
  • MyGame: name of your project

  • -p com.MyCompany.MyGame: package name for android

  • -l cpp: programming language used for the project, valid value is cppand lua

  • -d ~/MyCompany: directory to hold your project

example : cd to directory you want to for wahtever the reason, then create new project like this.

example : cocos new MyGame -p com.your_company.mygame -l cpp -d /home (its a rip from somewhere tutorial in internet)

it will create a folder called MyGame

3. import that folder, choose deselect all, and just click the tick (choose) the libcocos2dx its on the top of the list. maybe

4. right click CPPTest project > Properties > Android TAB > add > add the libcocos2dx as library.

5. doesnt understand what i write? want more pictures instead? *sob* kay den … heres the link

6. Build it. im sorry the explanation is in the link above.

 

oh i should noticed you, that i works learn cocos2dx in Windows 7 32bit (patani) and using Eclipse Indigo as C++ IDE.

tried to download cocostudio, but i just cant download it somehow ._. )

it stuck in 1% with zero 0 bytes/sec on IDM ._.)”

how cute   -3- )

 

every tutorial mostly was made in Mac, kinda rare to see the tutorial write in Windows . . . maybe i had not found it yet.

 

and if you wondering whats with the console cocos new MyGame -p com.your_company.mygame -l cpp -d /home

it called cocos console, its new feature in cocos2dx version 3.x  maybe  so you dont have to install 1GB cygwin or even MinGW

moar explanation >> here the link

 

i love link :D, but i prefer Zelda maybe i should refer it as Zelda instead in the future . . .hmm.  . .

thanks whoever had heart to read my journal ._.)?

Use android-build.py to build cocos2d-x samples

the title is rip from the cocos docs

i just post this to remind myself

here the docs

At first, you should change your directory to the where the android-build.py scripts lays.

cd build

and then

python android-build.py -p 10 cpp-tests

Bang! Hit enter and the scripts will handle all the remaining things for you.

Let’s over all the parameters to android-build.py.

hmm, ive done it but i dont know why i did it   -_- )’

so i just move on to the next.