Jump to content

Make a sprite with a specific portion of an image

Go to solution Solved by Tom Atom,

Recommended Posts


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!

Link to post
Share on other sites

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"}}
Link to post
Share on other sites

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)

Link to post
Share on other sites
  • Solution

 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).

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...