6: Sprites In-Depth in Objective-C

Painting ECC200 in Objective-C 6: Sprites In-Depth

If you don t need the latest features, such as 2048 2048-pixel textures, sprite updates that don t require you to remove and readd them, and the ability to allow sprites to be rotated so that they fit better into the texture, then you can use the Flash version of Zwoptex (Figure 6 3), which preceded the Zwoptex desktop app. You can use the Flash version online by visiting http://zwoptexapp.com/flashversion.

Figure 6 3. The Zwoptex Flash version is still available online. It s not as fancy or powerful as the desktop app, but it s free.

In this chapter I will focus on the Zwoptex desktop app, but the same Texture Atlas can be created with the Flash version.

Working with Zwoptex is very straightforward and involves only a few steps, as illustrated in Figure 6 4. It s tweaking the settings to get the most optimized Texture Atlas possible that takes time.

First you ll have to add the images you want to add to the Texture Atlas. You can always add more at a later time, or remove existing ones. Click the Import button, or from the File menu choose Import Sprites, and then select one or more images. Zwoptex can load images from the most common graphics formats. In this case we will add all ship images and animation frames, as well as the bullet image. They can be found in the Sprites06 Resource folder. After adding the images, you ll see them stuck together in the upper-left corner. The first thing you should do is to click the Apply button in the Layout pane to lay out the sprites according to the current layout settings. In some cases you can optimize the layout of the Texture Atlas to allow for more images by finding the best settings through experimentation. This can be a time-consuming process and usually leads to very similar end results, so I recommend not to spend too much time with it. In particular, the Sort On and Sort Order settings can be left at Use Best.

You should experiment with the canvas width or height, and then click Apply to apply the layout settings again to see if all images still fit into the Texture Atlas. The goal is to create a Texture Atlas with the smallest possible canvas size that can still contain all desired images without overlap. CAUTION: Unless you develop your game exclusively for iPhone 3GS, iPad, or iPhone 4 and future devices, you should not use a canvas width or height of 2048. Older devices only support texture dimensions up to a maximum of 1024 1024 pixels. There s one crucial detail you should watch out for when changing the canvas size. If the canvas size is too small and some images overlap because there is not enough space left, as shown in Figure 6 5, you will only notice this because Zwoptex adds a selection rectangle on the overlapping images in the upper-left corner. Sometimes this automatic selection can be hard to spot it s a very indirect indicator. But it s also a good feature because you can then simply delete these images, or move them. You can click and drag any image in the Texture Atlas to manually lay out the images. This is not recommended, however, since you can easily cause images to overlap accidentally, and you ll lose manual layout the next time you click the Apply button. Zwoptex s rotation attempts in Figure 6 5 don t quite work. You can see by the selection rectangle appearing after applying the layout, and by the overlapping images at the top-left corner, that the settings for canvas width and height are too small to fit all images into this Texture Atlas. The Allow Rotation check box in the Layout pane allows Zwoptex to rotate images by 90 degrees. Sometimes this helps fit in more images, especially if there are images that are significantly wider than tall, or vice versa. Rotation does not affect how the sprites are displayed. Cocos2d takes the rotation of images in a Texture Atlas into account and rotates the image back to its regular orientation before displaying it.