Asset Catalogs With RubyMotion


Following on from my previous article Using Launch Screens with RubyMotion this article shows you another good reason to jump into Xcode for your RubyMotion project, this time to create Asset Catalogs.

Asset Catalogs were introduced in iOS7 and have been supported by RubyMotion since v2.11 but I hadn’t got round to trying them out until recently.

They provide a visual representation of all the different sizes of images @2x @3x etc.. and for each device ~iphone, ~ipad, etc… so you don’t have to worry about the naming conventions, it takes care of that for you. It’s like you give a label to your set of images and then reference the set with that label in the code.

Setting up

You will need to add the IB gem to your RubyMotion project and open xcode (see the previous article for details). I’ll assume you’ve got as far as here.


Creating an Asset Catalog

Right-click on Resources and choose New file... this time selecting iOS > Resource > Asset Catalog and give it a name like Assets


This will create an archive file in your RubyMotion project called resources/Assets.xcassets.

The casset is like zipped folder of many assets each with their different image sizes for different platforms.

Now we’re going to create a new App Icon image set. You should be presented with an empty Catalog with two columns. In the left column right-click and selct New App Icon.


This will create a new App Icon set called Appicon and you should be presented with a template for all the different app icons on each platform.


Now it’s as simple as dragging and dropping your required assets for each Device/OS combination you plan to support. One thing I particularly like is that Xcode will validate the assets are the correct dimensions and warn you if you make a mistake. I’ve chosen to only support iOS7+8 on the iPhone App.



Back in RubyMotion all we now need to do is tell the app to use that Appicon Icon Set as the app icon.

Motion::Project::App.setup do |app|
  app.icons = ['Appicon']

You can see RubyMotion picking up the new Asset Catalog in the log when you next compile. Here’s the result.


This also works just the same for any normal Images you use in your application. You can choose New Image Set and then create universal images for all devices or specify different versions of your images for different devices.