Images

Single Images

Image assets are used for sprites and texture maps. The preferred file format is PNG however most common formats are supported. Note that an image can represent a series of "frames" which can be used for animation purposes.

When specifying images in the asset manifest the following properties are supported:

Property	Required	Description
src	yes	specifies the path of the source image file
hslices	yes	specifies the number of horizontal slices in the image file
vslices	yes	specifies the number of vertical slices in the image file
resize	no	specifies a size that the image will be resized to after processing. The size should be specified as WxH Eg. 64x64
format	no	specifies an image format to use. Supported values include rgba16 and rgba32.

An example of converting an image:

{
    "src": "n64_logo.png",
    "hslices": 2,
    "vslices": 2
}

Creating an Atlas

An atlas may also be created from a series of images. The pipeline will assemble them into a grid starting at the top left. Note that when creating an atlas all frames should be the same size.

When creating an atlas, all of the options for images above apply except src. The following additional options are available:

Option	Required	Description
frames	yes*	specifies the list of images to use for the atlas. When this property is specified, the order of the frames will correspond to their position in the specified array
frameDir	yes*	specifies a directory containing image files to use for the atlas. When this property is specified, the order of the frames will be constructed using the alphabetical name of the
frameSize	yes	specifies the size of each image in the atlas
hslices	yes	specifies the number of horizontal tiles in the atlas
vslices	yes	specifies the number of vertical tiles in the atlas

When creating an atlas you must specify either the frames or the frameDir attribute on the image element.

An example of creating an atlas:

{
"name": "fire_sprite",
"frames": [
    "fire_sprite/fireB0001.png",
    "fire_sprite/fireB0003.png",
    "fire_sprite/fireB0005.png",
    "fire_sprite/fireB0009.png",
    "fire_sprite/fireB0011.png",
    "fire_sprite/fireB0015.png",
    "fire_sprite/fireB0017.png",
    "fire_sprite/fireB0021.png",
    "fire_sprite/fireB0023.png",
    "fire_sprite/fireB0025.png"
],
"hslices": 10,
"vslices": 1,
"frameSize": "128x128",
"resize": "320x32",
"format": "rgba32"
}

Alternatively, the same atlas may be constructed using the following JSON:

{
"name": "fire_sprite",
"frameDir": "fire_sprite",
"hslices": 10,
"vslices": 1,
"frameSize": "128x128",
"resize": "320x32",
"format": "rgba32"
}