Use Phaser to prescale an image and then use resulting image as spritesheet

[Uhfgood]

So I already asked about prescaling sprites, and I got a suggestion to use bitmap data, however all my attempts didn't work.

 

So I'm going to clarify.  I want to take an image I use as a sprite sheet for my asteroids, and then I want to shrink that down twice (50%, 25%), then I want to use the two smaller images as spritesheets.  Scaling them in-game causes a small performance hit vs just creating the sheets in a paint-program.

 

So basically I want phaser to scale the image down twice, then use the resulting images as spritesheets for my asteroids.

 

Is there a way to do this with bitmap data or whatever?

[lewster32]

This will almost certainly perform worse than simply scaling the sprites down - having three sprite sheets (with WebGL at least) means three draw calls. If you have one sprite sheet and just scale the sprites it will only be one draw call, and draw calls are a major factor for performance with WebGL. The only benefit I can see to your method is the sprites may look a little better when made smaller - in fact this is pretty much the definition of 'mip-mapping', where you create several reduced size textures from the original high-resolution version and use those textures as the object moves further away - the result being less noise and moire on distant objects. With Phaser though, I struggle to see any minor benefit in image quality that would outweigh the increased memory consumption and decreased performance of this method.

 

If after all that is said you want to do this, you should be able to create a BitmapData instance (ensuring you give it a key and add it to the cache), copy your full spritesheet to it from the cache by using game.cache.getImage (adding the relevant scaling into the transform) then call game.cache.addSpriteSheet passing it the key you set and the relevant dimensions (also scaled down). I've not tested this myself but this roughly covers the steps I think you'd need to take.

[lewster32]

I've put a little routine for this together here - it works specifically for spritesheets at the moment, but it could easily be adapted for images too: http://jsfiddle.net/lewster32/u5vhvg6d/

[Uhfgood]

Interesting.  Currently my code right now just uses the scale.x and scale.y members to scale down, and whenever it does (it has to do this multiple times, 9 sprites for one asteroid, and 5-15 asteroids), it drops the framerate a bit.  Not a lot but it's noticeable enough that I figure it would chug on a mobile browser (which I haven't tested this with yet).

 

My only other option was to create 3 separate sprite sheets for each size.  So that's why I asked about prescaling.  In fact your above code is just what I needed.  I didn't know you could add a spritesheet to the cache manually.

 

In any case thanks.

[lewster32]

Scaling in WebGL should pretty much be 'free' in terms of performance, and I imagine it'd be pretty fast in canvas too; certainly in the GPU accelerated canvas available on most devices. It'd be interesting to see your code or better, a demo, to see what's going on.

[Uhfgood]

https://dl.dropboxusercontent.com/u/32895233/sroids/index.html -- this is the game itself

 

Here is a zip of the project folder (essentially what's above but in a way that allows you to look at the source more easily)

https://dl.dropboxusercontent.com/u/32895233/sroids.zip

[NewGamer]

hey guys,

I want to scale the image according to the size of canvas. Is there a way I can do it?

game.load.spritesheet("background", "assets/prod.jpg", PIECE_WIDTH,PIECE_HEIGHT,9);

Before this image gets loaded I want it resized to the size of canvas.

 

Please help!