Skip to content

Home

Jump to bottom
Johan Steen edited this page Oct 8, 2020 · 8 revisions

Welcome to the Xcode Asset Catalog Generator wiki!

Xcode Asset Catalog Generator - Usage Tutorial

I recommend watching the Usage Tutorial Video to learn about how to use the tool.

ToC

Extras

Config

In the tool's installation folder, edit these attributes in config.js.:

// Root paths for input and output of assets
source_images_root: "/Path/To/Game/Source/Art",
asset_catalog_root: "/Path/To/Game/Asset/Catalog/Assets.xcassets",

// Author of asset catalog.
author: "com.bitbebop",

assets: [
  // Array of assets... 
]
  • The absolute path to the root of your source assets.
  • The absolute path to the Xcode asset catalog.
  • The author of the asset catalog. You can use your reversed domain name or app bundle id.

Then fill the assets array with the generation specification from the source art using the available asset types.

Asset Types

ImageSet

Generate from a single image.

{
  name: "HUD",
  source: "/Output/HUD/hud.png",
  target: "UI/HUD",
  size: { width: 351, height: 36 },
  format: "png",
  type: Type.ImageSet,
  devices: [Idiom.iPhone, Idiom.iPad, Idiom.mac, Idiom.tv]
}
  • name: The name the asset will get in the asset catalog.
  • source: Relative path to the source file.
  • target: The path of folders to generate to the asset in the asset catalog.
  • size: The size final size of the asset in points.
  • format: The file format of the generated versions of the asset.
  • type: Lets the generator now it's a single ImageSet.
  • devices: The devices to generate the asset for.

Image Sequence

Generate from an image sequence.

{
  name: "Drone",
  source: "/Output/Drone/drone_##.png",
  target: "Drone",
  actions: [
    { name: "Jump", start: 0, end: 30 },
    { name: "Run", start: 31, end: 48 }
  ],
  size: { width: 100, height: 100 },
  format: "png",
  type: Type.Sequence,
  devices: [Idiom.iPhone, Idiom.iPad, Idiom.mac, Idiom.tv]
}
  • name: The base name the sequence will get in the Xcode asset catalog.
  • source: Relative path to the source file. ## should match the number of digits used for the sequence.
  • actions: Allows splitting the sequence into different actions, by setting start and end frame for each action. name will be used as a suffix before the number in the asset catalog.
  • target: The path to generate to the asset in the asset catalog.
  • size: The size final size of the asset in points.
  • format: The file format of the generated versions of the asset.
  • type: Lets the generator now it's a sequence.
  • devices: The devices to generate the assets for.

Sprite Atlas

Group multiple imagesets and/or sequences to a Sprite Atlas.

{
  name: "Drone Sprite Atlas",
  target: "Enemies",
  type: Type.SpriteAtlas,
  assets: [
  ]
}
  • name: The name of the Sprite Atlas in the Xcode Asset Catalog.
  • target: The path to create the Sprite Atlas in the Xcode asset catalog.
  • type: Lets the generator now it's a sprite atlas.
  • assets: An array of ImageSets and/or image sequnces to generate inside the Sprite Atlas.

Level

To be documented...

Group

To be documented...

Generate

The tool provides a dev mode to try the generation to an output folder in the tools installation folder.

# Builds the assets to a target folder for dev purposes.
npm run dev

# Builds the assets to the assets folder in Xcode.
npm run prod
Clone this wiki locally