What is this called?

[tonetheman]

I think every time I use phaser I come to this same problem... I have art I got from opengameart. It is a nicely arranged sheet. Not of animation, just of sprites to use individually.

How in the hell do I use it...

Is that a texture atlas or a spritesheet? I feel like this is a common case and there must be a LOT of examples but I am not sure what I am even searching for.

What I usually do is just cut the sprites out by hand with GIMP since searching on this topic almost always leaves me with nothing.

 

[rich]

It depends. Very often it's neither a sprite sheet OR a texture atlas, it's just an image with the frames pasted into it. So you have to then cut them out yourself as they're effectively useless until you do so. Lots of files on OpenGameArt are like this.

You can tell if it's an atlas because the image will come with either an xml or json file describing every frame within it. No file = not an atlas.

You can tell if it's a sprite sheet because every single frame in the sheet will be the exact same size, and they will all be positioned in a row, with no other crud around them. The rows may wrap to another line, but they are still in rows. If the sheet contains lots of these rows all over the place, again, it's useless and needs cutting up.

[tonetheman]

Man that is a great answer!

Every time I look at this I think I must be missing something.

The file I have is easy enough to decipher. I can just create an atlas for it by hand. The tiles are all placed up against each other in a nice grid. It will end up being math...

I always want some phaser call to look like this

let a = this.load.regularGridSprites("tiles", { w : 16, h : 16, rows: 10, cols : 10 });

That does not appear to exist.

Thanks you have at least pointed me in the correct direction.

 

[jake.caron]

9 minutes ago, tonetheman said:

Man that is a great answer!

Every time I look at this I think I must be missing something.

The file I have is easy enough to decipher. I can just create an atlas for it by hand. The tiles are all placed up against each other in a nice grid. It will end up being math...

I always want some phaser call to look like this

let a = this.load.regularGridSprites("tiles", { w : 16, h : 16, rows: 10, cols : 10 });

That does not appear to exist.

Thanks you have at least pointed me in the correct direction.

 

Hi Tonetheman, if your sprites are all organized in a grid-like fashion, it sounds like you have a spritesheet and Phaser does support that. Take a look at the spritesheet class here. 

Implementation looks something like this: 

this.load.spritesheet('diamonds', 'assets/sprites/diamonds32x24x5.png', { frameWidth: 32, frameHeight: 24 });

this = your current scene.

[tonetheman]

Ha that looks good too! I will test out writing my own atlas and the spritesheet both!

[rich]

Save yourself some time, use Texture Packer or Shoebox. If you're serious about making games, even for a hobby, this is a process you're going to go through potentially hundreds of times per project.

[tonetheman]

I will read about texture packer and see if can handle a sheet of already organized sprites. That would be great.

[tonetheman]

The spritesheet ended up being easy.

https://codepen.io/tonetheman/pen/Wgqgga/

 

Thanks for the help!