Search code examples
iosxcodexcasset

Sprite Atlas - Importing @3x, @2x, and @1x images into XCAssets

I have a script that I wrote that takes a folder of images, and automatically resizes them to the @3x, @2x, and @1x equivalents.

I named the folders @3x, @2x, @1x, and inside each folder every image has a suffix of @3x.png, @2x.png, @1x.png, respectively. (So for example [email protected] resides in the @3x folder)

The way I used to import images was just this:

  1. Manually create a new sprite atlas folder in XCAssets using the "+" button in Xcode
  2. Manually drag and drop the @3x images into this folder. Xcode will then use these images as their @3x versions.
  3. Manually (1 by 1) move each @2x image, and each @1x image, into their respective "slots" next to the @3x image.

But now that I have tons of images i'll be using, this is just a lot of work for me.

I was hoping I could just drag and drop an entire folder into XCAssets (with all of the 3x,2x,1x images), and Xcode would automatically put each image where it belongs in one giant sprite atlas.

Is this sort of thing possible? I could've sworn I read somewhere that if you name the folders/images a certain naming convention, and suffix the parent as .atlas, then it does this all for you without having to manually do it.

Could anyone offer advice/solution for this?

Thanks!

Solution

  • I figured out how to do this, and wanted to share:

    You create a new atlas within Xcode, and remove the default image it gives you.

    ..Now, create a folder on your computer, and put all of the images in there. EVERY image. The 1x, the 2x, and the 3x.

    The naming conventions should be like this (assume my images are 25 frames like bouncing-ball-1.png, bouncing-ball-2.png, etc)

    If you had 25 frames of animation, you'd have 75 images in one folder.

    Then you drag all 25 of these files to your target xcassets/ folder I mentioned above, and you're done.

    Xcode will look at bouncing-ball-1, bouncing-ball-1@2x, bouncing-ball-1#3x, ..., etc, and create 1 image for all 3 sizes (so in my case 25)