HowFastAll

Creating Sprite Sheets

Using tools to make your sprite sheet and .plist

Zwoptex is an app for making sprite sheets from images.

It is available as a Flash app (free) as well as a downloadable binary for Mac OS (commercial).

TexturePacker is another tool for the job, available for Mac OS and Windows. Basic features are free, advanced require commercial license.

Zwoptex는 이미지로부터 스프라이트 시트를 만들어 주는 앱이다.

플래시 앱(무료)으로 사용가능하고, 또한 맥용(유료)을 위한 바이너리 다운로드 가능하다.

TexturePacker는 또다른 작업을 위한 툴이며, 맥용과 윈도우가 가능하다.

기본 기능을 무료이고, 추가기능 필요하면 유료 라이선스가 필요하다.

All three tools allow you to automatically arrange the images so that they make best use of the texture's space. Additional features allow you to trim, rotate the sprites.

Now export both the Texture and the Coordinates(plist), and add these to your project.

Another way to create your sheets is to use mkatlas.pl which can be found in cocos2d's tool folder.

3가지 모든 툴은 사용자에게 텍스처의 공간의 최적 사용을 위해서 자동으로 이미지를 정렬를 제공한다.

텍스처와 좌표(plist) 둘다를 추출하고 프로젝트에 추가 한다.

다른 방법은 cocos2d의 툴 폴더에 찾을 수 있는 mkatlas.pl를 사용하서 시트를 만든다.

Using Sprite Sheets

CCSpriteSheet

You need to create a CCSpriteSheet object, which contains the actual image of all the sprite frames.

You'll add this to the scene, even though it won't draw anything itself; it just needs to be there so that it is part of the rendering pipeline.

Example:

     // Create a SpriteSheet -- just a big image which is prepared to 

     // be carved up into smaller images as needed

     CCSpriteSheet *sheet = [CCSpriteSheet spriteSheetWithFile:@"grossini.png" capacity:50];

     // Add sprite sheet to parent (it won't draw anything itself, but 

     // needs to be there so that it's in the rendering pipeline)

     [self addChild:sheet];

CCSpriteFrameCache

Next, you need to use the CCSpriteFrameCache singleton to keep track how frame names correspond to frame bounds – that is, what rectangular area of the sprite sheet.

Example:

   // Load sprite frames, which are just a bunch of named rectangle 

   // definitions that go along with the image in a sprite sheet

   [[CCSpriteFrameCache sharedSpriteFrameCache] ddSpriteFramesWithFile:@"grossini.plist”];

How to display a frame / 프레임 표현 하기

Once your sprite sheet and frames are loaded, and the sprite sheet has been added to the scene, you can create sprites that use these frames by using the “spriteWithSpriteFrameName” convenience method, and adding it as a child of the sprite sheet:

// Finally, create a sprite, using the name of a frame in our frame cache.

sprite1 = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"];

// Add the sprite as a child of the sheet, so that it knows where to get its image data.

[sheet addChild:sprite1];

Then, if you later want to change which image the sprite displays, you get a new frame from the shared frame cache, and set that on the sprite, like so:

CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]

                            spriteFrameByName:@"grossini_dance_02.png"];

[sprite1 setDisplayFrame:frame];

It's important to note that the frame names here are arbitrary strings in the XML file;