soimy / maxrects-packer

A max rectangle 2d bin packer npm-module for packing glyphs or images into multiple sprite-sheet/atlas

Home Page:https://soimy.github.io/maxrects-packer/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Actual examples?

MrBrax opened this issue · comments

I'm searching the web dry for a texture packer that's a bit more modular, but i can't figure out how this would generate an image - does anything support it?

In short: this module is just for packing algorithms, not image generator.
Checkout soimy/msdf-bmfont-xml for usage example

I checked it out for a bit, but it's way too messy. I'm just gonna drop node, it doesn't have very good/accessible image processing.

You need to read all your images and store in an Array of Object in the following structure:

width: <image width>
height: <image height>
data: <raw image data>

and add to packer with:

packer.addArray(input); // Start packing with input array
packer.bins.forEach(bin => {
    canvas.putImageData(rect.data.imageData, rect.x, rect.y);
});

Note that I'm using node-canvas module to generate packed atlas. Take a lot at it's API, super easy to use.

BTW: I'm planing to write a more general bitmap/vector packer module other than msdf-bmfont-xml in the near future, stay tuned.

node-canvas seems pretty clunky install-wise, node is already bloated as-is. it's just not a very suited language.

thanks for the clarification anyway

the only reason i'm having difficulties with this is that it needs to support splitting of atlases, custom file input arrays, and metadata in the output json

I'm not telling you to use node-canvas, but this is the approach I used. (And I used canvas-prebuilt to avoid install issues). If you feel node.js is no good for you, you can also extend this algorithm in other languages.
Note this is just an algorithm module which takes arrays of w/h and outputs multiple bins with placement info, nothing more. If you a looking for a full-featured packing software, this is the wrong place. Maybe consider writing your own. Closing this issue for now.