How would I use a texture packer

[joshuacurtiss]

In the past, I've used free-tex-packer-core to pack my sprites into one image. I could then reference the frames by name (as stored in the json file that goes with the sprite sheet) and in the case of Phaser it could this.load.multiatlas() the sprite sheet and pretty easily define all the animations with this.anims.generateFrameNames(). (See example tutorial here) As I'm developing in Kaboom, I'm missing the ability to have a sprite sheet that can be built dynamically.

Does anyone know a tool that could help with this when the engine doesn't have it built in, and then of course secondly, whatcha think about support for "text atlas" or "sprite sheet" in Kaboom???? 😄

[slmjkdbtl]

Definitely interested in supporting natively 👍

[slmjkdbtl]

Is this what you're looking for? https://kaboom2000.slmjkdbtl.repl.co/demo#spriteatlas (origin sprite atlas image here)

[slmjkdbtl]

it has loadSpriteAtlas() which lets you define custom image areas and map them to sprite names, can also write loaders to load different formats generated by other softwares

[joshuacurtiss]

Sorry, I've been away and not working on game stuff much.

That demo is great start!! But not exactly. Take a look here: (Bear in mind this game is a stalled WIP just for fun)

Image: textures.png and its definitions in textures.json

I did not make these, they were generated by free-tex-packer-core which I use as part of the build process. By doing this I can have all of the frames of all my sprites be separate files and it packs them itself. But it may pack them in different positions each time, that's why you need to reference the generated json file instead of hard-coding the definitions in the code.

The JSON does not have the definitions for the animations though. So I handle that programmatically with their anims.create() method, notice in this example:

https://github.com/joshuacurtiss/dungeon-crawler/blob/main/src/client/characters/Faune.ts#L11-L45

Just showing this stuff to demonstrate the workflow of generating a packed image with json definitions and then defining the anims from there.

josh

[slmjkdbtl]

Gotcha. Sounds like it just needs a bridge between the texture packer format and the format loadSpriteAtlas() is using? Maybe we can add a "kaboom" exporter to https://github.com/odrick/free-tex-packer-core/tree/master/exporters

[slmjkdbtl]

Wonder if this is what you're looking for: https://github.com/slmjkdbtl/kaboom_texpack/blob/master/index.html

[joshuacurtiss]

Sweet, I see! I'm trying it out now but I got the packing successfully outputting the way Kaboom wants. Will take a bit longer to get it working though, because I'm still on 0.5.x. I guess I have to finally make the plunge to Kaboom@next if I want to use loadSpriteAtlas.

[joshuacurtiss]

I see the next problem that is happening now, and that is defining the animation frames. If I understand, right now the anims can only be a range of frames (i.e. from: 0, to: 5). Plus I have to know the full size of the set of frames that make up all the anims for the one character, because I need to provide the width/height of them all and then a sliceX or sliceY. It would be nice if I could just pass an array of sprite names to make up the anim frames. Does that make sense?

I'm thinking something like this (just as an idea)...

loadSpriteAtlas("sprites/dungeon.png", {
    "hero-side-1": {
        x: 0,
        y: 0,
        width: 32,
        height: 32,
    },
    "hero-side-2": {
        x: 32,
        y: 0,
        width: 32,
        height: 32,
    },
    "hero-side-3": {
        x: 64,
        y: 0,
        width: 32,
        height: 32,
    },
});
createSprite('hero', {
    width: 32,
    height: 32,
    anims: {
        "walk-side": {
            frames: ['hero-side-1', 'hero-side-2', 'hero-side-3'],
            // other anim params, like `loop`, `pingpong`, `speed`
        }
    }
})