Skip to content

7. Automatic Scaling and Sprite Sheets copy

fyf edited this page Aug 21, 2014 · 1 revision

Automatic Scaling and Sprite Sheets

CocosBuilder can manage your assets and automatically scale them for different devices and resolutions. It can even create and scale the sprite sheets for you.

Automatic Scaling

To have CocosBuilder automatically scale your assets, first set your design resolution in your Publish Settings. CocosBuilders reference scale is the original iPhone resolution (equals 1x). By default images will automacially be scaled down from a design resolution of 4x, or the iPad retina display. You can change this, but keep in mind that using a lower resolution can force CocosBuilder to scale up images, which will make them look bad on high resolution devices. In the publish settings you can also choose which resolutions you want to export your images and sprite sheets to.

image

For the automatic scaling to work you will need to tell CocosBuilder that the images are in design resolution. You do this by putting the images in a sub-directory named resources-auto. Even though the resources are in the sub-directory, CocosBuilder will show them as being in it's original folder.

image

If you are not happy with the automatic scaling for some of the resources, it's always possible to override it. Simply create a directory next to the resources-auto directory and name it after the resolution you want to override. The images that you put in this directory will override any images in the resources-auto directory. E.g. to override images for iPhone retina devices, name the directory resources-iphonehd.

Smart Sprite Sheets

CocosBuilder can quickly turn a directory of images into a sprite sheet. To do this, simply right click the directory in the Project view and select Make Smart Sprite Sheet. The directory should only contain images (and optionally sub-directories for different resolutions or automatic scaling as described above).

image

The folder will turn pink and have a happy smiley face to indicate that it is a smart sprite sheet. To edit the properties of the sprite sheet, right click it again and select Edit Smart Sprite Sheet…. You can choose from a selection of output formats, compression and dithering. Dithering will only be used for lossy compression pvr formats. HTML 5 still doesn't support pvr textures, therefore PNG images will be exported for HTML 5 regardless of settings.

If you need to access the smart sprite sheet's images from code, the name of the sprite sheet will be the name of the directory with the .plist extension added. The names of the sprite frames will be the name of the full path to the image, including the directories that it is in (but excluding any resource specific directories, such as resources-auto).

Sound Conversions

Sounds needs to be saved in different formats for different platforms to play back optimally. CocosBuilder conveniently handles this for you. To use the automatic conversion feature, make sure that all your sound effects are saved in wav format. Longer sounds, such as background music should be saved in mp3 format. When the sounds are published they will be converted to suitable formats for the different platforms.