how to differentiate animation from single sprite

Question

I am working on application which is using sprite sheet without help of cocos2D.

I am using below images as sprite sheet

In the bow picture there are many different images . I want to make them animation at different position

I have follow this tutorial but it has only one animation

UIKit-TexturePacker

I want to achieve this without help of cocos2d (using UIKIT).

Any help would be appreciated.

Answer 1

You have 2 choices:

The hard way You take the sprite sheet as it is and extract the coordinates and sizes of the sprites. With this information you'll have to create a .plist file with the data:

<key>green_bird</key>
<dict>
    <key>x</key><real>2</real>   <!-- x position in the sheet -->
    <key>y</key><real>259</real> <!-- y position in the sheet -->
    <key>w</key><real>126</real> <!-- width in the sheet -->
    <key>h</key><real>255</real> <!-- height in the sheet -->
    <key>oX</key><real>13</real> <!-- offset in the sprite, x-->
    <key>oY</key><real>2</real>  <!-- offset in the sprite, y-->
    <key>oW</key><real>150</real> <!-- original width of the sprite -->
    <key>oH</key><real>261</real> <!-- original height of the sprite -->
</dict>

Loader handles removed transparency around sprites. This is where the oX, oY, oW and oH values come from. They give you the original size of the sprite and the position in the original sprite. You might get away with leaving them at oX=0, oY=0, oW and oH same as w and h.

The easy way

You take some graphics software (Photoshop, Gimp, whatever) and slice the sprites from the sprite sheet.

Align the sprites while cutting: Make all sprites of the same animation the same size. Check if they overlap nicely. If you don't do that you'll be in trouble when you want to use the sprites as animations. They are going to jitter. You don't want that.

Finally give them nice names: red_bird_01.png, red_bird_02.png and so on.

Now drag and drop them onto TexturePacker. It'll re-create the layout for you - with all information required to use the sheet in animations.

Since you are using the loader code from the tutorial you can also turn on trimming - this removes that transparency - the re-packed sprite sheet will be much smaller than the original one.

Btw. there's a tutorial explaining the details in the example code you found on github: https://www.codeandweb.com/blog/2013/05/16/uikit-animations-with-texturepacker

Some final word about game development

If you want to dig into game development I really propose that you get some game development framework - cocos2d, cocos2d-x, spritekit,... they'll make your life so much easier. It might take some time to get started - but they handle the graphics stuff more efficient and also contain physics engines and all the other stuff required. Building it from scratch on top of UIKIT is not a good idea.