UIKit applications often contain animations and lots of graphics. Adding the graphics as single images might consume a lot of memory and impede performance.
Using TexturePacker to create sprite sheets instead:
I've created some powerful classes which allow you to simply load the sprite sheets created with TexturePacker into your application - including code to play animations.
If you use animations that are pre-aligned, you might also have a lot of transparent pixels in your images. While the individual files might not use much memory - due to compression - the RAM usage might be quite big.
If you pack your sprite with TexturePacker this transparency can be removed. The provided CAWSpriteLayer class compensates the missing transparency by moving the sprite into the same spot as if it had its original size.
First of all, you need to load the data file created with TexturePacker and the sprite sheet image:
NSDictionary *spriteData = [CAWSpriteReader spritesWithContentOfFile:@"spritesheet.plist"]; UIImage *texture = [UIImage imageNamed:@"spritesheet.png"];
With this you can simply create layers and add them to your current view:
CAWSpriteLayer *layer = [CAWSpriteLayer layerWithSpriteData:spriteData andImage:texture]; [self.view.layer addSublayer:layer];
To add a static image use:
[layer showFrame:@"staticimage"];
With this you can use all standard operations on layers - like setting the position or applying transformations:
[layer setPosition:CGPointMake(400, 200)]; [layer setTransform:CATransform3DMakeScale(0.5,0.5, 1.0)];
To add an animation use:
[layer playAnimation:@"CapGuyWalk%04d" withRate:24];
The format of the animation's name is derived from its frame names: This will play an animation with all frames that match CapGuyWalk0000, CapGuyWalk0001, CapGuyWalk0002, ... until no more frames with matching names are found.
The frame rate is set to 24 frames per second.
You can also set animations to repeat:
[layer playAnimation:@"CapGuyWalk%04d" withRate:24 andRepeat:2];
The special value INFINITY will repeat the animation forever.
After an animation is played to the end, you can decide if you want to show the last frame or an empty frame:
[layer setShowLastFrame:true];
The CAWSpriteLayer has all standard animation controls:
Pause:
[layer pause];
Resume:
[layer resume];
Stop:
[layer stop];
The CAWSpriteLayer consists of 2 nested layers: The outer CAWSpriteLayer which allows you to perform all transformations, and the inner CAWSpriteCoreLayer which handles the sprite display. This is necessary since the inner layer makes use of transformations to implement trimming.
I've created a complete demo project for you - available on GitHub for download.
git clone git@github.com:AndreasLoew/UIKit-TexturePacker.gitUIKit-TexturePacker.zip UIKit-TexturePacker.tar.gz
Andreas Löw texturepacker, tutorial
I've added a new feature to TexturePacker which helps you to prevent your assets from being stolen. It's called ContentProtection and simply encrypts the images.
Your app or game will still be able to decrypt the data, but somebody else is going to have a hard time getting it done.
In theory it would still be possible for somebody to extract the key from the source code and write some decoder, as the decoder and key have to be stored in your app - otherwise it would not be possible to use the assets in your game at all. But it will take knowledge, time and effort to decrypt your assets. So instead of stealing your assets, it's likely that they go and find some easier prey.
I assume that you already have TexturePacker running to create sprite sheets. So simply open an existing .tps file.
Download the latest TexturePacker - here you'll find a new option on the left: Content Protection. Press the "lock" icon and a new popup opens:
You can enter your own key in the line edit - or simply create a new one by pressing Create new key.
To disable encryption use Clear / Disable.
Save as global key stores the key in TexturePacker as global - using it for decryption in the .pvr viewer and allowing you paste it into other sprite sheets by simply pressing Use global key
It is important that you change the file format to pvr.ccz - which is currently the only file format that supports encryption.
Press Publish and you are done in TexturePacker.
The corresponding command in commandline is --content-protection <key> where the key must be a 32-digits hex value.
Download and copy the following 2 files inside your cocos2d folder: libs/cocos2d/Support - replacing the 2 files that are already there:
Now set the key in your app. You can do this by placing 4 calls inside your startup sequence before the first sprite sheet is loaded. Try to distribute the calls among several files to make them harder to spot.
If your license key is aaaaaaaabbbbbbbbccccccccdddddddd, you have to split it into 4 parts with 8 digits each:
aaaaaaaabbbbbbbbccccccccddddddddcaw_setkey_part(0, 0xaaaaaaaa); caw_setkey_part(1, 0xbbbbbbbb); caw_setkey_part(2, 0xcccccccc); caw_setkey_part(3, 0xdddddddd);Make sure to add the following line to each file in which you use
caw_setkey_part:
#import "ZipUtils.h"
If you had to change the file format, make sure to now load the .pvr.ccz file instead of whatever you used before. Also add the new files to your project.
That's it!
Protecting your game assets from content thieves is easy. Using the new ContentProtection feature can be set up in less than 5 minutes!
See the Bureau of Industry and Securitys Encryption FAQ - Question 15 (What is Note 4?):
... Examples of items that are excluded from Category 5, Part 2 by Note 4 include, but are not limited to, the following: Consumer applications. Some examples:...
- piracy and theft prevention for software or music;
- music, movies, tunes/music, digital photos – players, recorders and organizers
- games/gaming – devices, runtime software, HDMI and other component interfaces, development tools
Picture taken from iTunes Connect Developer Guide - Adding New Apps (scroll down to "Ready to Upload Your Binary" to find the paragraph about encryption)
Join the Code'n'Web Newsletter
(privacy policy)