How SpritePackedManager works or maybe is not working at all

[pavul]

i spent time creating the texture which has many sprites inside like in the example here:

Babylon.js Playground

but obviously i have different sprites, also documentation didn’t say that the json file used there can have the same name as the texture but changing “.png” for “.json” ( anyway, this is not important ).

so, when you have several sprites that contains animations, let me put an example:

` const enemyPacker = new SpritePackedManager(“enemyPacker”,“/assets/atlas/eneAtlas.png”, 30,this.scene)

this.enemies2[0] = new Sprite(“enemy2-”+idx, enemyPacker);
this.enemies2[0].cellRef = “ene2”;
if i use cellRef =0, it will put the sprite index at the first entry of the json file, not my first frame of "ene2" sprite section, also this:this.enemies2[0].playAnimation(3, 7, true, 50);`

does not work, if you put 0 and 4 ( for my sprite animation initial frame and end frame ), it will also change the sprite for the first entry on json file which is not “ene2”.

my question is:
is SpritePackedManager only to put static or sprites with 1 frame?
cause i thought this was a better way to load an atlas with many frames including animations and then select from every sprite what you want to use?, well is only working for static sprites not for animations,
cause when you change the cellIndex it changes to other sprite.

has anybody an example of an animation of the same sprite with different frames, not animation between different sprites. thanks in advance…

[Cedric]

Hi @pavul

Did you check this doc page : Sprite Map Animations | Babylon.js Documentation

It looks like what you need with 1 sprite and different animation frames.

[pavul]

yes, and that work, the difference with SpriteMap and SpritePackageManager is that for SpriteMap i would need every sprite image separated(making one call per texture once the game starts) and is better to put all the sprites of a game in a big image (usually called atlas) cause is better that way, there is one call to that big texture from the server and is kept in memory, hence is easier to get just a portion of the texture that will be renderer in screen(internally speaking).

i think that the usage of spritePackagemanager, but is not working like it should.
that’s why i am asking

EDIT:
by the way SpriteMap is to craete a level based on tiles ( or tilesets ), i don’t see accuarate to create an SpriteMap with stageSize field for sprite measures, so that means i will have to create one spriteMap for sprite in order to animate which i don’t think is the right option

[sebavan]

Adding @Pryme8 who I believe worked on this feature.

[pavul]

i am checking SpriteMap, to see if that works for what i need, will reply my findings later

[Pryme8]

What are you trying to do? The sprite map only supports and atlas so I’m not sure why you would need to load a bunch of images?

I’m not savvy about the packed Manager but what I think you are asking is how you can create your own packed sprite texture and json?

[pavul]

what i am trying to do is to put all my game sprites (in pixel art) in an image and then create every sprite with or without the animations to load just one image and one json file, instead several images.

when an Sprite is instantiated with SpritePackedManager it only works for sprites with one frame, cause so far i haven’t been able to play the animation for that specific sprite, let me give you an example:
const enemyPacker = new SpritePackedManager(“enemyPacker”,“/assets/atlas/eneAtlas.png”, 30,this.scene)

    this.bullet= new Sprite( "bullet0", enemyPacker)
    this.bullet.cellRef = "enebullet";
    this.bullet.position=new Vector3(1,0,0)
    this.bullet.playAnimation( 0,1,true, 300 )

i know my bullet sprite has 2 frames ( 0 and 1 ), but if i use above code playAnimation will loop through cellIndex of sprite enebullet and cellIndex 0 of another sprite

here is the video of what i am talking about:

Babylon Js Sprites Packager

if you feature does not work with animations, you can specify in documentation then.

[Pryme8]

Im not sure, we would have to ask someone that knows the SpritePackedManager better.

It probably can be done, if not then I doubt its a hard fix.

[sebavan]

From the doc it looks like it should work so I suspect there might be a bug in the looping code:

Can you share a repro in the playground so I ll have a look ASAP ?

[pavul]

if you look at the video i posted above, you can see the texture, with the sprite indexes at the right, and the bullet sprite with the index 0 and 1 at the left, also you can see the json at the right of the screen.
if it must work it isn’t that is what i am showing in the video.

[sebavan]

Yes, but please, could you create a repro to help us fix the issue.

Creating the repro does not look much but if you see the number of issues the community helps on, this is an amazing boost for the ppl that are addressing those issues. The best would be to have it in the playground https://playground.babylonjs.com/

[pavul]

yeah i’ll try to do something

[pavul]

i want to revive this tipic cause i am dealing with that right now,
the issue i think is in the looping of play animation when the Sprite is created with SpritePackedManager, because it will take all the frames property ( defined in json file ) as if those are a single image with different animation frames, in my case i am using the atlas where i have a bunch of different sprites and some of them have different animations, here is an example:

jsonwith-Image hosted at ImgBB

so every image it has animations ( or have several frames )

but when i use:

    enemies[3] = new Sprite( "ene3", enemyPacker)
     enemies[3].position =new Vector3(2,-1,0)
     enemies[3].cellRef="ene3"
     enemies[3].playAnimation( 0, 2, true, 400)

enemies[3] will iterate for explosion at index 0, enebullet at index 1, ene2 at index 2 and ene3 at index 3, but i want to animate or run the frames corresponding to “enebullet” ( in this case ), now i am realizing maybe that is not a feature this Class has.

here is how the sprites are created and what i have in the screen

babylon-Sprite-Packed hosted at ImgBB

So now the question is: it is possible, cause the screenshot above the sprite at index 3 iterates over all the sprites but for the defined animation frames.

sorry to revive this but i am restarting with babylon again.

btw i have the project that you can download and build and run to check this issue:
(
1 download
2 execute in a terminal “npm i”
3 and then runm, it in the same terminal execute “npm run start”
)
link to the project:

BabylonSpritePackedManager.zip

[Deltakosh]

cc @Pryme8

[Pryme8]

o_O, Did I make this?

Ummmm, when I get to a stopping point today with work ill take a peep but Im on the fence if this was mine or not. Either way Ill look!

On a side note, love your color scheme! Don’t think I’ve seen many others using it.

[Pryme8]

You know what, I think this script is busted?

This is the entire code for the SPM.

Like what is it even doing? Its just calling a SpirteManager?

I’ve never used it before but have a sneaking suspicion this is not correct.

The SpriteMap uses the SpritePacker package as well to make the atlas json, but not all features of that are supported and a lot of the transformations/parsing of the frame data happens on the shader. So unless we make a special shader to support the json data, or we make some support functions to modify the uv of a rect to match the data something will have to change either way to make this work.

As is, its not going to work to the best of my knowledge (have not looked at the SpriteManager class yet though).

[pavul]

that is fine, if that is really an issue it can be addressed later, what i am trying to achieve here is to use SpritePackedManager to put there all of my sprites with its animations, if i use SpriteManager, it works, but i will have to create an strip per Sprite/animation which will make a lot of calls when loading the assets. let me know once is done so i can help to test it.

[Pryme8]

Basically the sprite packed manager should be doing the strip per sprite/animation thing for you.

If you end up doing that we can probably migrate your code and have the SPM work that way?

Sorry I was not more help, I was hoping that this was something I had done and we coulda just PRed a quick fix for you.

[pavul]

no rush, i am not gonna use it right now, let me see what can i do.

[docEdub]

I did some investigation on this and found that you need to use an atlas .json file to get SpritePackedManager to do what you want, but when I tried to change your example code to use the provided eneAtlas.json file, the format is not what the SpriteManager class expects. I tried adding a top-level “frames” key to it, but the SpriteManager docs are wrong on this. A “frames” array is expected, not a set of objects. So I changed the “frames” to an array to get past that issue but the cellRefs are not being parsed correctly either.

I don’t know what the code is supposed to do, so I think we’re going to need @Pryme8 to look at this further.