SpritePackedManager not working properly


I’m working on my website.

I imported a mesh from Blender successfully and everything looks great with 3D, but as for 2D sprites I’m having some troubles.

I want to animate a logo on the top-left corner of the screen and I’m doing some tests with SpritePackedManager.

I created a SpritePackedManager from a PNG and a JSON files just like documentation explain, and this is the result I’m getting on screen:

Both PNG and JSON have been created from TexturePacker. I reviewed them and they are correct.

This is my scene (I’m doing everything on a self-made scene layer constructor, just for testing purposes):

constructor(engine: Engine, canvas: HTMLCanvasElement, private readonly isDevelopmentMode: boolean) {
        this.engine = engine;
        this.canvas = canvas;
        this.babylonjs = new BabylonJsScene(engine.babylonjs);

        const camera: UniversalCamera = new UniversalCamera('Camera', new Vector3(-3, 0, 0), this.babylonjs);
        camera.target = new Vector3(1, 0, 0);
        camera.attachControl(canvas, true);

        const light1: HemisphericLight = new HemisphericLight('light1', new Vector3(1, 1, 0), this.babylonjs);

        // Logo
        const spriteLogo = new SpritePackedManager('sprite logo', './assets/sprites/logo.png', 1, this.babylonjs);
        const logo = new Sprite('sprite logo', spriteLogo);
        // logo.cellIndex = 1;
        logo.playAnimation(0, 117, true, 100);

Everything looks quite simple, but the result is not the desired.

Things I see:

  • The sprite size is squared on screen instead 451x113 as indicated on json
  • The cell is filling the whole sprite rect instead using its trim
  • Loop property is not working
  • On other tests I did, the rotated json property wasn’t working
  • cellIndex isn’t working, it always displays the first frame

Am I doing something wrong or SpritePackedManager is broken / unfinished?

Here the files I use:
logo.zip (157.5 KB)

Thanks in advance.

Adding @Pryme8 who implemented the feature :slight_smile:

In the meantime @Khanon could you create a repro in the playground ???

Hi @sebavan thanks for the quick answer.

I created the playground in this link: Babylon.js Playground

1 Like

Rotated was never implemented. I believe currently we only support square ratios but it was forever ago and I don’t remember entirely. Not sure what loop is. I might be thinking about the spriteMap paring of json files.

This was a really long time ago and actually @sebavan did i do this one? I don’t remember :laughing:.

@Pryme8, yup you did with the spritemap support and I loved the prince of percia looking demo you made hence how I remembered :slight_smile:

Would you be willing to add the extra missing support ?

Thanks for the answer @Pryme8

So it is not fully implemented?

JSON spriteSourceSize and sourceSize are not implemented?
rotated property is not so important to be honest, but those two above yes.

The loop property is the third argument of playAnimation method.

Could I help somehow to end the implementation of this class?

1 Like

Would be awesome if you both collab on it !!! I love community developped features !!! I am all down for doing reviews and so on :slight_smile:

1 Like

Sure I can try to squeeze that in with the spriteMap updates.

And holy crap I forgot about that demo.


Hi @Pryme8 !

Thanks for the answer, let me know if I can help with something, it would be a pleasure.

In the meantime I’ll be developing the 3D side of my web until those features are present on SpritePackedManager.

Couple of questions:

How will I know when those features will be present on babylon package?
Could you share the github branch for that squeeze?
Has SpriteMap all those features implemented?

This is on hold for me for a couple weeks at the very least. I have a few installations that I’m working on that take all my focus for now.