Make a sprite with a specific portion of an image

[ashtrail]

Hi,

for the project I'm doing I need to deal with imperfect spritesheet (and I can't modify them myself, my code needs to do this, and I'm using phaser and it's sprites).

So I was wondering is there some kind of function that goes like that :

mySuperSprite = new Phaser.Sprite(game, coord_x_in_img, coord_y_in_img, sprite_width, sprite_height, img);

Where the point P(coord_x_in_img, coord_y_in_img) is the upper left corner of the sprite you want to create.

 

With this you could for example make a sprite that's a nose, from a picture with a face on it.

It would be really cool if it existed...

 

Thanks in advance for your answers!

[Tom Atom]

Hi, create atlas-like metadata and load it along with your image. This is example of .json for one frame atlas:

{"frames": [{    "filename": "MyItem",    "frame": {"x":1,"y":1,"w":304,"h":113},    "rotated": false,    "trimmed": true,    "spriteSourceSize": {"x":0,"y":0,"w":304,"h":113},    "sourceSize": {"w":304,"h":113},}],"meta": {    "app": "Spritor"}}

[ashtrail]

But will that make it a Phaser.Sprite object? Cuz I want a Phaser.Sprite so I can use Sprite methods... (that's the problem in fact T_T).

Is it a way to load only a part of the image and then assign it to a Sprite? Or does it create a new object called Spritor? (I don't use json yet, I'm still on the localhost phase, using real images that are in files, so I apologize for my lack of knowledge in that field)

[drhayes]

That's what the sprite atlas will do for you: pick the individual frames out of a more complicated image so you can refer to them in a Sprite constructor, e.g. "var player = new Phaser.Sprite(game, 32, 32, 'atlasName', 'atlasFrameName');"

 

Make sense?

[ashtrail]

I think so. So based on Tom Atom's example "atlasFrameName" would be "Spritor"? And that will take the specific area of the image for the sprite, or am I wrong?

[Tom Atom]

 Atlas format is based on export format from TexturePacker, which is tool for creating atlases. Any other tool can mimic it and produce export in the same format, that Phaser can load. Spritor is name of my tool, which can create sprite atlases and is free (you can download it here: http://sbcgamesdev.blogspot.cz/2012/10/sprite-atlas-tool-part-i-creating-atlas.html ... it is named PicOpt here, as I have little mess in names :-))

 

 Basicly, atlas tool works like this: you take individual sprites and atlas tool arranges it into one big image + creates metadata, where in the big image the original sprite starts and how big it is. In your case, you already have big image, so you have to create only metadata... probably by hand.

 

 In the above example of atlas with 1 frame, the name of sprite frame inside atlas is "MyItem". TexturePacker's property for it is "filename", as it names sprites in atlas with names of original sprite files. But you can name it as you wish, as long as in your game you use exactly the same name (case sensitive).

 

 Sprite usage then will be exactly as drhayes wrote (you are always selecting atlas + frame).

[ashtrail]

OK I think I got it. Thanks a lot!