1 / 16

Texture Packer

Texture Packer. A texture’s width or height is always a power of 2 For example, the texture’s dimensions could be 1024 X 128, or 256 X 512 So an image of 140 X 600 can become 256 X 1024, wasting a lot of memory If we have a lot of images/sprites  a lot of memory is wasted. Texture Atlas.

season
Download Presentation

Texture Packer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Texture Packer • A texture’s width or height is always a power of 2 • For example, the texture’s dimensions could be 1024 X 128, or 256 X 512 • So an image of 140 X 600 can become 256 X 1024, wasting a lot of memory • If we have a lot of images/sprites  a lot of memory is wasted

  2. Texture Atlas • A Texture Atlas is an image that can contain several images • Each image inside the texture atlas has a sprite frame that defines a rectangular area in which the image is within the texture atlas • These sprite frames are saved in a separate file (.plist extension) • This way, Cocos2D can extract images from a texture atlas containing several images

  3. Texture Packer • So we can use a texture atlas (or several) to save memory space • Furthermore, using a texture atlas to bring the sprites into memory will save CPU time • Instead of one “draw call” per sprite, we just have one “draw call” to draw all the images in the texture atlas

  4. Texture Packer • Once we have a texture atlas, Cocos2D provides us the tools to deal with a texture atlas • In order to create a texture atlas, we can use a tool called Texture Packer

  5. TexturePacker • Can be downloaded at http://www.texturepacker.com • Free and paid version • 2D tool • Paid version can export to PVR format (native version of iPhone’s graphics chip)

  6. Standard vs Retina display • With the new retina display (higher resolution – 4X), if we work with one image at a time, we can supply 2 images, one in HD with the –hd suffix in the file name, one in Standard resolution without the –hd suffix in the file name

  7. Texture Packer • When working with Texture Packer, it is recommended that you use ONE set of image files, HD images without the –hd suffix in the file name • Texture Packer will manage creating 2 versions, one without the -hd suffix and one without it

  8. Texture Packer • Open New project, create Assets group inside Resources, create GameArt Group inside Assets, add png files to GameArt folder • Open TexturePacker • Click on Add Sprites and add images (can also drag folder or images onto right pane) • Images line up automatically in middle pane • Next: fill data in left pane

  9. Texture Packer • Choose 1024 X 1024 • Select compressed tzr for texture format • Select premultiply alpha • Click on file …, select directory (Resources of this project), name file game-art-hd, make sure .plist format is selected (default)

  10. Texture Packer • Click on Publish • Dialog box: some features are from the Pro version: pay or change settings • Change settings, Publish • Back to XCode, add the .plist and .pvr.czz files to Resources folder

  11. Texture Packer • Note that we need to Publish • Once using game-art.plist and once using game-art-hd.plist as the data file • We also need to import both of them into the resources folder of our project (we will import a total of 4 files) • We are now ready to code

  12. CCSpriteFrameCache class • The CCSpriteFrameCache is a singleton class that implements the loading of sprite frames • It saves them in a cache • Has shared.. Method to access the singleton object

  13. CCSpriteFrameCache class • CCSpriteFrameCache *frameCache = [CCSpriteFrameCache sharedSpriteFrameCache]; • The method addSpriteFramesWithFile: adds multiple sprite frames from a .plist file • A texture will be loaded automatically using the same name as the file name, replacing .plist with .png

  14. CCSpriteFrameCache class • [frameCache addSpriteFramesWithFile: @”game-art.plist”]; • Now we can build the frames array by looping through the CCSpriteFrame that we can retrieve from frameCache; for that, we use the method spriteFrameByName from CCSpriteFrameCache

  15. CCSpriteFrameCache class • for( int i = 0; i < 5; i++ ) • { • NSString *file = [NSString stringWithFormat:@”ship-anim%i.png”, i]; • CCSpriteFrame *frame = [frameCache spriteFrameByName: file]; • [frames addObject: frame]; • }

  16. CCSpriteFrameCache class • Now we can build the animation as before and run the action • We can also add a method in the CCAnimation Category to encapsulate dealing with a texture atlas rather than individual files

More Related