Hello.
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.inputs.clear();
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.