Add the Images Resources for the Player
In this game, the player controls a character named Blob. Because there’s not much to Blob’s walk cycle, you can get away with using only three images for this animation. The following image shows the individual frames you’ll use for Blob’s walk cycle:
Before you can animate Blob, you need to create a new sprite atlas and get these three images added to the project.
First, open the gloopdrop project in Xcode.
In the Project Navigator, select the Assets.xcassets asset catalog. Click the + button at the bottom of the Outline View and select New Sprite Atlas, like so:
Xcode automatically creates a new sprite atlas with the name Sprites.
Xcode 12 and Sprite Atlas Creation | |
|---|---|
|
In Xcode 12, the New Sprite Atlas option does not exist. To create a new sprite atlas, click the + button at the bottom of the Outline View and select AR and SceneKit ▶ Sprite Atlas. |
Inside the new sprite atlas folder, you’ll see a single image set named Sprite, like this:
Select the Sprite image set and press the Delete key or use the - button at the bottom of the Outline View to delete the default image set.
Next, select the Sprites sprite atlas and with it highlighted, single-click the folder name and rename the sprite atlas to blob.
Finally, open Finder and drag all of the images from the resources/blob_walk folder into the blob sprite atlas, like so:
When you’re done, you’ll have a new sprite atlas with three new image sets—one for each frame of Blob’s walk animation as shown in the image.
To verify that you’re using a sprite atlas, right-click the folder name in the Project Navigator and select Show in Finder.
When Finder opens, you’ll see something similar to this:
Notice the different folder extensions: an image set ends with imageset, and a sprite atlas ends with spriteatlas. By looking at the extension, you can tell what type of asset you have in the catalog.
Using a sprite atlas combines the features of a texture atlas with that of an asset catalog. A texture atlas helps improve memory usage and increase rendering performance by combining multiple image assets into a larger image file. In contrast, an asset catalog helps to keep assets organized.
Another benefit of using asset catalogs is that your games can use app thinning.[23] There’s a lot to app thinning, but one of the major benefits is to support different resolutions without creating a huge data footprint on the device.
With the image assets added, it’s time to get Blob added to the scene.