feiss

Different sprites from cropping a single texture.

Recommended Posts

Hi everyone,

 

I have a big image, from which I want to create many sprites with different sizes (imagine bricks of different size). I use Sprite.crop()for that, but it seems that the last crop affects and updates all previously created sprites.

 

I don't want to just scale the sprite, but to use more or less area of a base texture.

 

I have something like:

for (var i in blocks){   var bx= Math.random(<whatever>);   var by= Math.random(<whatever>);   var bw= Math.random(<whatever>);   var bh= Math.random(<whatever>);   var block= game.add.sprite(x, y, 'texture');   var rect= {x:bx, y:by, width: bw, height: bh};   block.crop(rect);}

All sprites end with different sizes, but they share the same texture crop! (it streches)

 

Any clue? is this doable?

 

I tried with block.cacheAsBitmap, but no luck..

 

 

wOcFWeN.jpg

Share this post


Link to post
Share on other sites

It's a bit of a hack but you could treat it as a texture atlas and generate the JSON data object part of the atlas yourself, feed it into the game.load.atlasJSONArray function as the last parameter (atlasData) and have it work as needed. The other way (and probably the better and more 'correct' way) would be to use BitmapData objects and copy parts of the full image to these as needed using the copyPixels function.

Share this post


Link to post
Share on other sites

I have a big texture atlas and many sprites within it. I use GIMP to point the sprites pixel-perfect, then manually edit the JSON data object to generate frames for each sprite.

Ofcourse this wouldn't work if you need random sprites.

Share this post


Link to post
Share on other sites

Thanks guys!

Lewster32: but I have many sprites overlapping in the texture (i forgot to show that situation in the image), so i think it may not work, does it? I don't know if phaser/pixi can manage overlapped sprites in an Atlas.. But the BitmapData option is surely the way to go, thank you!! :)

Share this post


Link to post
Share on other sites

Both methods will work with overlapping, if what you mean is that the rectangle defined on the atlas of one sprite may overlap with the rectangle of another - this is perfectly fine within atlases, and indeed one of the features of TexturePacker is 'auto aliasing' which can create several frames from a single part of the image if the contents of the frames are exactly the same. Same goes for BitmapData as you're just saying 'copy this rectangular area of this image to a new smaller image'; it doesn't care if anything overlaps.

Share this post


Link to post
Share on other sites

I was trying to apply different cropping to various sprites using the same texture, and I noticed just what feiss says, all my sprites are updated whenever I change the cropping.

I need to use this for kind of different progress bars in the game, so pregenerating BitmapData doesn't sound too good (I would need like 100 Bitmaps for each original texture), but the TextureAtlas hack suggested by lewster sounds like something that would totally work here.

Besides that, I was wondering if this is something that is meant to work like that, or if this Phaser behavior could be improved. I think it's kind of the same reason why you can't use crop on TextureAtlas sprites (because the crop is Texture based, not frame based). Do you think it's worth spending some time trying to code this in a different way, or will I just be wasting my time because it's a PIXI limitation maybe?

Share this post


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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.