Entity setting TextureAtlas seems inflexible

[Pete Baron]

Hi all! First off thanks for this very interesting looking game engine.  I've only spent a little time with it so please forgive me if my questions are based on my own mistakes!

Latest version of the game engine (as of last night, github... v3.1.0 in the header comments).

I want to set up a quick demo using some fixed sized sprite-sheets from an old Flash project (Pocket Platoon) but ran into a problem when using the platform tutorial.  Digging through the invaders tutorial doesn't give me a good answer either:

I am using two sprite sheets, a soldier run and soldier idle.  The cell size is different for each sprite sheet.

I'm using:

game.data.player = me.pool.pull('mainPlayer', 100, 100, { width: 30, height: 45, image:'soldier_a_idle_' })

to create a player object and keep a reference to it.  The width/height used here are my desired size for the collision box.

The problem is that the Entity seems to be creating a TextureAtlas object using this width/height.  The AnimationSheet system uses that TextureAtlas for it's offset values to dictate where the images are... but these numbers are the collision box dimensions, not the size of the sprites in the AnimationSheet.

It seems like each AnimationSheet should be able to specify its own width/height, and I hacked in a couple of lines in AnimationSheet.init to allow me to pass some through the settings object, then in addAnimation to use those values.  But of course this doesn't fix the offset in the TextureAtlas, because that is created by Entity.

Is there a way of adjusting the sprite size for an Entity which is using multiple sprite sheets with different sized cells that I am missing?  All of my searches lead me to questions/answers about texture atlases where each cell is a different size and the answer there is to provide information for every cell... which seems overkill for regular sized sprite sheets which only vary by sheet.

If there isn't, may I suggest that each AnimationSheet might create its own offset values based on the dimensions provided for that sheet, instead of relying on a universal value which belongs to the Entity?

(This approach is probably not as common as a Mario type clone where every player sprite is the same dimension, but it is a good compromise to use a fixed size sprite sheet for each separate animation and allow the sizes to vary between sheets.  It allows punching animations to be very wide without requiring that standing animations waste a ton of space, and it avoids the overhead of creating and maintaining a full cell-based offset system.)

cheers

Pete

[aaron.g...@gmail.com]

Hi there!

So the class the entity creates based on an image you pass is an instance of this: http://melonjs.github.io/melonJS/docs/me.CanvasRenderer.Texture.html. It may have texture atlas data, it may not, depending on the options you pass. We use the texture concept to store the image with relevant coordinate data, and display it in canvas, or as a webgl texture.

To fix your issue, you need to adjust the options you're passing. Swap the width and height values to: framewidth and frameheight. This is so the animation sheet class: http://melonjs.github.io/melonJS/docs/me.AnimationSheet.html can create each index of the frames available.

[Pete Baron]

Hi Aaron, thanks for the lightning fast reply!

If I replace width/height with framewidth/frameheight, the Entity.init throws an error saying "height and width properties are mandatory when passing settings parameters to an object entity" and also if I remove the settings entirely - so it's not optional.

I think I'm doing it in the wrong place, this is for the "pull" line (pasted in previous post) which grabs a player entity from the pool.

addAnimation (which is where I would guess I need to specify the framewidth/frameheight for the AnimationSheet it creates) doesn't seem to accept settings.

Is there another animationsheet function which I need to call with these settings?

cheers

Pete

[Pete Baron]

Ah, after a bit more digging I see that each Entity creates its own renderable (an AnimationSheet) and will prefer framewidth over width if both are available in settings.

I'm afraid I'm still not clear on how to specify the different size for my second animation sheet in this piece of code:

    // define a basic walking animation
    this.renderable.addAnimation("soldier_a_run_",  [0, 1, 2, 3, 4, 5, 6, 7]);


    // define a standing animation
    this.renderable.addAnimation("soldier_a_idle_",  [ 0,1,2,1 ], 500);

[aaron.g...@gmail.com]

You will need to make multiple animation sheets if you wish to change size. Then set this.renderable = otherAnimationsheet when you want to change animations. If you have the original split assets, you can use texture packer or shoebox to create the spritesheet, and reference animation keys via image name instead of by index. So you no longer need to specify a framewidth/height.

[Pete Baron]

"set this.renderable = otherAnimationsheet when you want to change animations

Thank you, I can see how that should work... I'll give it a go!

[Pete Baron]

Yes! Thank you that works perfectly.

I also see now that Entity isn't holding the TextureAtlas like I thought originally, I didn't at first notice the step where it creates an AnimationSheet as 'renderable' and of course then the sheet holds the atlas.

I would like to be able to pull an Entity from the pool without giving it a spritesheet initially (because my code will always replace the renderable anyway and it's just repeated code), but I guess I can just use a single loose frame... or hack the engine myself :)

cheers again, this is looking very useful!

Pete

[aaron.g...@gmail.com]

Pass the settings you need to size it, and then whatever image data you want. From there can set the renderable whenever. Or if you prefer, can always write your own version of me.Entity that doesnt need as much to work from the constructor.