Different sprites from cropping a single texture.

[feiss]

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

 

 

[lewster32]

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.

[eguneys]

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.

[feiss]

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!!

[lewster32]

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.

[feiss]

Oh, I get it, thank you for the information!

 

I've just tried bitmapData solution and works like a charm

[lewster32]

Excellent! Love your avatar btw!

[feiss]

haha, thanks

[mariogarranz]

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?