Add Icons, Images, and Effects

To create and manage user interface elements for your app, Xcode offers several tools in addition to Interface Builder.

You create many images for your app, including icons, custom artwork, and launch screens for different iOS devices. Some of these images are required for App Store submission. The asset catalog helps you manage them.

../art/AssetCatMac_2x.png../art/AssetCatMac_2x.png

With the particle emitter editor, you can enhance your app by adding animation effects involving moving particles such as snow, sparks, and smoke. These effects are especially useful in games for iOS and Mac.

../art/LeafParticles_2x.png../art/LeafParticles_2x.png

For Mac apps, the Scene Kit editor helps you work with scenes created in 3D authoring tools and exported as COLLADA Data Asset Exchange (DAE) files.

Add App Icons

Create app icons for all of the operating system versions and devices that your app supports. iOS apps and Mac apps require different types of icons. For either platform, add the required versions of your app icons to an asset catalog in Xcode.

For an iOS app, create an icon to be displayed on a device’s Home screen and in the App Store. Xcode doesn’t include graphics tools for creating icons; use a graphic design app. You should create several different versions of the icon for use in different situations. Your iOS app can include a small icon (to use when displaying search results) and a high-resolution icon (for devices with Retina displays). When your iOS app’s target is universal, you also create versions of the icon for iPad and iPhone devices.

For a Mac app, create a set of icons, consisting of pairs of icons (standard and high resolution) for each icon size—16 x 16, 32 x 32, 128 x 128, 256 x 256, and 512 x 512—used by the Finder to represent your app to the user.

When you create a new project, Xcode creates an asset catalog named Images.xcassets. Select the asset catalog from the project navigator, and Xcode opens the catalog in the editor area.

The asset catalog contains a list of image sets. Each image set, such as AppIcon in the screenshot, contains all the versions of an image that are necessary to support various devices and scale factors. You can add icon images to your app by dragging them to the appropriate cell in the icon set grid.

../art/iOSAppIcon_2x.png../art/iOSAppIcon_2x.png

You can create additional image sets, such as for buttons and other controls in your app. To create an empty image set or to import images into a new set, click the Add button (+) at the bottom of the image set list.

Create and Set iOS Launch Images

Launch images are displayed while your app is launching on iOS. A launch image matching the device resolution appears as soon as the user taps your app icon. Use screenshots to create your app’s launch images, and use the asset catalog to manage all the representations of the launch image.

You can easily capture screenshots for launch images on a device. On the device, configure the screen the way you want it to appear. Press the Lock and Home buttons simultaneously. Your screenshot is saved in the Saved Photos album in the Photos app. Copy the screenshot from the device to your Mac. You can use the iPhoto app, for example, to import the screenshot from the device and then export the screenshot to your Mac as a PNG file.

To set the screenshot as a launch image, select the asset catalog in the project navigator, and select the LaunchImage set. Drag your screenshot to the appropriate cell in the grid.

Add Particle Emitter Effects

Especially useful for developers of iOS and Mac games, Sprite Kit provides a graphics rendering and animation infrastructure. This infrastructure includes particle emitters. Particle emitters can range from a single image that barely moves, to thousands of small particles flying across the screen. You can use particle emitters to simulate fire, rain, smoke, snow, sparks, and other animated effects.

Xcode provides eight particle emitter templates and an editor for manipulating the appearance and behavior of particles.

Create a Sprite Kit–enabled game from the New Project template in Xcode, or use the General pane in the project editor to add the Sprite Kit framework to an existing target. Then add a particle emitter to your project by choosing File > New > File and choosing Resource > SpriteKit Particle File.

../art/AddParticleEmitterFile_2x.png

Select the particle template from the drop-down menu, and click Next. Enter a name for the emitter in the Save As field. Select the checkbox associated with your project in the Targets area. Xcode creates a file with the extension .sks.

Select your particle emitter file in the project navigator, and Xcode opens the file in the particle emitter editor.

../art/MagicParticles_2x.png../art/MagicParticles_2x.png

Modify the look and feel of the particles with the particle emitter inspector (../art/ParticleEmitterInspector_2x.png). For example, you can change the rate at which particles are created, what a particle looks like, and how it acts after it’s created. Changes made to the inspector take effect immediately and can be viewed in the editor.

Add 3D Scenes to Your Mac App

Scene Kit is a 3D-rendering framework for Mac apps. Sprite Kit supports the import, manipulation, and rendering of 3D assets without requiring advanced 3D graphical programming skills on your part. With the Scene Kit editor, you can preview 3D scenes, inspect them for information needed for your source code, and adjust scene object parameters to enhance and fine-tune the rendering for your app.

To import a COLLADA Data Asset Exchange (DAE) file into the project, use the project navigator. Select a folder in which you want to save the file. Choose File > Add Files, select the file, and click Add. To browse the 3D scene in Xcode, select the DAE file in the project navigator. Xcode opens the file in the Scene Kit editor.

To preview the scene and run animations, use the controls in the Scene Kit editor’s main area. Press the Play button to play an animation. Click the Pause button to pause the animation, and drag the slider to scroll through it. Use the trackpad or mouse to manipulate the point of view.

The inspectors in the utility area allow you to view and edit information about the node in the scene graph list or the object in the entities list. For example, with the nodes attributes inspector, you can adjust camera, light, or geometry attributes, and with the materials inspector, you can adjust many settings on a material and its properties, such as by selecting a lighting model for it and colors and textures for its contents.