soimy/atlasify

GPU friendly assets packer using max-rects algorithm

What is Atlasify

Atlasify is an open-source app designed to pack graphical assets like

• sprite images
• textures
• Bitmap fonts
• True-type fonts
• Vector graphics (SVG)

into a single/several GPU friendly texture atlas to reduce draw call, and a spritesheet catalog json\xml to locate those assets.

Why Atlasify

Yes, there are many excellent packing tools like Texture packer etc. already. But the goal of Atlasify is being able to managing, generating and packing all kinds of graphical assets like above into a single atlas in one application.

Together with proper render pipeline, this will be a perfect solution for rendering GPU accelerated vector and true-type text on any game engine.

And most of all, it will be free and open source.

The architecture

Proposal Map, modules marked as ☑️ is implemented.

Atlasify's pipeline contain these kinds of modules:

Controller

Controllers get input assets and settings from user, and start the whole packing process. Controllers will have the following forms:

• GUI Of cause! Will be Electron based, cross-platform, separated module. (Working in progress)
• WebAPI More accessible from the internet. (Planned)
• CLI Command-line interface for terminal user & CI automation. (Implemented)

Generators

Reading different input data and generate Array of Buffer & Metric for the core controller. Buffercontaining image data and Metric containing sizing & spacing of the Buffer. Currently scheduled generators:

• PNG/Jpeg image reader Through file I/O & Jimp
• Multi-signed distance field font renderer msdf-bmfont-xml

  msdf-bmfont-xml will be depreciated when Atlasify is finished. I'm planning to rewrite msdf generator as a separate module using Rust.

Post-Processor

Store Buffer & Metric as Sheet object and do the following manipulation based on settings:

• TrimAlpha
• Extrude edge pixels
• Split/Composite ARGB channels
• Rotation

Core

Core module to control the whole pipeline:

1. Aquire settings from front-end(CLI, GUI)
2. Store array of Buffer & Metric from generator;
3. Doing Buffer post-processing like TrimAlpha & Extrude Edge;
4. Calling Packer to process the Metric and composing the Buffer onto the atlas;
5. Generate the spritesheetdata object;
6. Calling the Exporter to compile the spritesheet onto different templates;

Packer

Atlasify uses maxrects-packer to calculate sheets position & rotation on the atlas using Maximum Rectangle Algorithm (Same as TexturePacker).

Exporter

Almost every game engine has it's own data structure to represent the spritesheets, Exporters use mustache.js template system, so it's highly customizable through modifying mst template files. Atlasify supports these types out-of-the-box:

• bmfont/xml
• json (font)
• jsonHash (TexturePacker)
• jsonArray (TexturePacker)
• Cocos2d
• Phaser3
• Spine
• Starling
• UIKit
• Unreal

Engine plugins

Atlasify extends the "standard" TexturePacker data structure to better utilize the power of GPU accelerated asset rendering like multi-channel & multi-page, and most importantly, MSDF (multi-signed distance field) based vector object. Many game engine don't support these feature yet, so it's important to implement plugins as separated modules for them. (Coming soon)

---

Installation

For now only CLI controller and core module is implemented. In order to reduce package size, GUI will be a separate Repo and platform dependent installer will be publish in the Release section of Main Repo

To install the CLI, run the following command in terminal:

npm i -g atlasify

Usage (CLI)

$ atlasify --help

Usage: cli [options] <image-files/folder>

CLI tools to packing and compositing image files into atlas using MaxRects packing algorithm

Options:
  -V, --version            output the version number
  -o, --output <filename>  output atlas filename (Default: sprite.png)
      --load <filename>    load saved project atl file
  -m, --size <w,h>         ouput texture atlas size (Default: 2048,2048)
  -p, --padding <n>        padding between images (Default: 0)
  -b, --border <n>         space to atlas edge (Default: 0)
  -a, --auto-size          shrink atlas to the smallest possible square (Default: false)
  -t, --pot                atlas size shall be power of 2 (Default: false)
  -s, --square             atlas size shall be square (Default: false)
  -r, --rot                allow 90-degree rotation while packing (Default: false)
      --trim [n]           remove surrounding transparent pixels with optional tolerence [n] (Default: false)
      --extrude <n>        extrude edge pixels (Default: 0)
      --debug              draw debug gizmo on atlas (Default: false)
      --instant            instant packing is quicker and skip sorting (Default: false)
      --seperate-folder    Seperate bin based on folder (Default: false)
      --group-folder       Group bin based on folder (Default: false)
      --save               Save configuration for reuse (Default: false)
  -h, --help               output usage information

Important: Atlasify is in VERY EARLY STAGE, any interface or API might change

Examples: Packing all assets inside ./assets/actor folder into an autosize atlas with max-size 1024x1024, trim image alpha and extrude 1px on edge pixels, 2px padding and save to sprite.png & save project file for later reuse.

$ atlasify -o sprite.png -ast -p 2 -m 1024,1024 --extrude 1 --trim --save ./assets/actor

Saved atlas: sprite.png
Saved spritesheet: sprite.json
Saved configuration: sprite.atl

Examples: Load previous project files and add all assets inside ./assets/ui folder into the same atlas with same settings except no edge pixel extrude and no trim alpha.

$ atlasify --load ./sprite.atl --extrude 0 --no-trim ./assets/ui

Loading project file: ./sprite.atl
Load completed
Saved atlas: sprite.png
Saved spritesheet: sprite.json
Saved configuration: sprite.atl

Module quick start

import { Atlasify, Option } from "atlasify";
const opts = new Options("sprite.png", 1024, 1024);
opts.extrude = 1;
opts.trimAlpha = true;
imageFiles = [
    "a.png",
    "b.png",
    "c.jpg"
]

const packer = new Atlasify(opts);
packer.addURLs(imageFiles).then(result => {
    // Do your fileIO with results
});

Please refer to ./bin/cli.js & test files(WIP) for further examples.

API Reference

• Atlasify
• Sheet
• Exporter

atlasify's Issues

Need option for preventing uneven sprite image width / height

I use Atlasify for a project where I load the generated spritesheet in Pixi.js.
When source images have an uneven value for width or height, Pixi.js renders them blurry.

It would be great if there was command line option to prevent uneven width or height, so people can prevent this behavior. This can be achieved to increase the width or height in that case.

The following code change allows to generate even width / height but does this always, and not when a commanline option is set.

Index: src/atlasify.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/atlasify.ts	(date 1581610214638)
+++ src/atlasify.ts	(date 1581610214638)
@@ -327,6 +327,15 @@
                 const buffer: Jimp = sheet.data;
                 // sheet.frame.x += sheet.x;
                 // sheet.frame.y += sheet.y;
+
+                // make width/height an even number (increase by 1 if necessary)
+                if (sheet.frame.width % 2 === 1) {
+                  sheet.frame.width += 1;
+                }
+                if (sheet.frame.height % 2 === 1) {
+                  sheet.frame.height += 1;
+                }
+
                 if (this.options.debug) {
                     const debugFrame = new Jimp(sheet.frame.width, sheet.frame.height, this._debugColor);
                     image.blit(debugFrame, sheet.frame.x, sheet.frame.y);

Need multi-resolution support

Artists are usually creating assets in x2 or even sometimes in x4 resolution and letting TP to scale it down to x1, x0.5 resolution. So it would be nice to have support for that.

Requested from #PixiJS slack channel user @martin

Support for multiple sprites (bug?)

Atlasify is a great way to generate spritesheets!

However, when there are more images than fit on the spritesheet, Atlasify generates multiple spritesheet files with the same name. This results in having a spritesheet file with only the remainder of images that did not fit on the previous spritesheet(s).

Some info that might help:
The problem seems to be in atlasify.ts / atlasify.js, in the pack function. The binName is not unique when no tags are used. When

            let binName = basename;

is replaced with

            let binName = basename + '_' + index;

then multiple spritesheet files are generated.

This is not a good solution, but just a quick 'see if this helps' hack for my specific use case.

Please fix this in a proper way.

Replacing Jimp with sharp / libvips

Just curious, have you considered using sharp instead of Jimp?

[benchmark]

Individual control over texture rotation, trim alpha etc.

Need option to allow/disallow trim/rotate on individual textures

Requested from #PixiJS slack channel user @martin

About the format of output file

Dear Soimy,

Can we set up the output files with:

1. CMYK color format, instead of RGBA8888?
2. 300dpi, instead of 240dpi?
3. rectangular frame with specified width & height, instead of square frame of 2048x2048 mm or 1024 x 1024 mm?
4. pre-define the position (x,y) of each small object so that they can be overlapped by each other if we want to?
5. true-font and SVG feature support?

If possible to set up, could you please describe how to make it in detail (or which file/which line)?

Thank you!
Ahn

MSDFGen Font/SVG support

Per discussion opening this issue to see when these are available in atlasify.

Wrong result when load project with option overriding

overriding with --extrude 0 -no-trim get wrong result