[Cocos2d-x] Creating animations using SpriteSheets in Cocos2D-x V3.0

Public on May 22, 2014
This is tut for v2
https://www.youtube.com/watch?v=KINBiF5AUqQ&feature=youtu.be

In ver v3.0 we have to change something !
you can create file .plist followes this tut using TexturePaker downlad in (This link)... Here is file thanhcs.splist i was created .
//start thanhcs.splist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>frames</key>
        <dict>
            <key>1.png</key>
            <dict>
                <key>frame</key>
                <string>{{60,220},{34,38}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{7,5},{34,38}}</string>
                <key>sourceSize</key>
                <string>{48,48}</string>
            </dict>
            <key>2.png</key>
            <dict>
                <key>frame</key>
                <string>{{60,158},{64,60}}</string>
                <key>offset</key>
                <string>{0,1}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,1},{64,60}}</string>
                <key>sourceSize</key>
                <string>{64,64}</string>
            </dict>
            <key>3.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,88},{88,68}}</string>
                <key>offset</key>
                <string>{0,-2}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{4,16},{88,68}}</string>
                <key>sourceSize</key>
                <string>{96,96}</string>
            </dict>
            <key>4.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,158},{96,56}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{0,20},{96,56}}</string>
                <key>sourceSize</key>
                <string>{96,96}</string>
            </dict>
            <key>5.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,2},{84,96}}</string>
                <key>offset</key>
                <string>{2,0}</string>
                <key>rotated</key>
                <true/>
                <key>sourceColorRect</key>
                <string>{{8,0},{84,96}}</string>
                <key>sourceSize</key>
                <string>{96,96}</string>
            </dict>
        </dict>
        <key>metadata</key>
        <dict>
            <key>format</key>
            <integer>2</integer>
            <key>realTextureFileName</key>
            <string>thanhcs.png</string>
            <key>size</key>
            <string>{126,256}</string>
            <key>smartupdate</key>
            <string>$TexturePacker:SmartUpdate:3c7ad027b3d32fcb23e61df7282d138b:016a28
c67f73e80d1d1463941a8316ed:714d4f3396ac0fef281cabe3cc62a0fb$</string>
            <key>textureFileName</key>
            <string>thanhcs.png</string>
        </dict>
    </dict>
</plist>

//end of thanhcs.splist
And here is file my file image i was create:


You can download resources here : Link

Ok. now we have some code to  creating animations using SpriteSheets and add it to your project
 (you need to know basic about programming in Cocos2d-x)

-Add single Sprite :
1
2
3
4
5
6
7
//start
 auto cache->addSpriteFramesWithFile("thanhcs.plist");
 auto land = Sprite::createWithSpriteFrameName("4.png");
 land->setPosition(Point(winSize.width / 2, winSize.height / 2));
 this->addChild(land);

//end
-And here is code to add animation animations using SpriteSheets :

//start
1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Size winSize = Director::getInstance()->getWinSize();
 Vector<SpriteFrame*> arrayFrame(3);

 auto cache = SpriteFrameCache::getInstance();
 cache->addSpriteFramesWithFile("thanhcs.plist");

 //nap hinh
 char file[100] = { 0 };
 for (int i = 0; i < 3; i++) {

  sprintf(file, "%d.png", i + 1);
  auto frame = cache->getSpriteFrameByName(file);
  arrayFrame.pushBack(frame);


 }


 auto player = CCSprite::createWithSpriteFrameName("1.png");
 player->setPosition(100, winSize.height / 2);
 this->addChild(player, 1);
 //this is animation  :
 auto animation = Animation::createWithSpriteFrames(arrayFrame, 0.1);
 auto animate = Animate::create(animation);

 auto repeat = RepeatForever::create(animate);
 player->runAction(repeat);
 
//end
Ok . That is it. now we have animations create by SpriteSheet in Cocos2d-x







[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon