Prerender a group of sprites to a single sprite

[borisyankov]

I have a tile of about 100 hexagons, and it seems they are not performing greatly on mobile.

Since they are the background, can I somehow pre render them to a single sprite and render it instead?

[Vidsneezes]

it depends, why are you using hexagons? 

 

[captainherisson]

I don't know the specifics of Phaser, but you could cache your tiles by rendering them on an offscreen canvas, and then use that as a sprite.

 

You'll find a great article over here:

http://mainroach.blogspot.fr/2013/02/fast-html5-canvas-cached-canvas-tiles.html

 

I hope it'll help

[borisyankov]

@Vidsneezes I am using hexagons, just because the game is based on that, no fancy reasons

Thus, the images rendered are overlapping and at least twice the area of the whole screen.

 

@capitanherisson, yeah this approach was exactly what I thought to do, but wanted to see if Phaser supports something out of the box.

[inductible]

Edit: I clearly need to check the post thread - this answer is relevant to pixi, not Phaser (though phaser can/does render via pixi, so this may be a valid solution still?)

You can look at using a RenderTexture to blit to a canvas, or (a solution I deployed recently), simply manage another Pixi display list (another Stage object) with it's own renderer (with a view that you never add to the DOM). So long as any secondary Stage objects don't use interactivity (i.e. no unnecessary overhead), it'll let you do some pretty powerful things with 'pre-composition', etc.

You can use the secondary renderer's view as a new baseTexture via Sprite.fromCanvas()

Edited November 14, 2013 by inductible

[rich]

There are 2 different ways to approach this. First would be a RenderTexture. I actually just put a few examples into the dev branch showing how to use them, so you could start there, but essentially you can paint any Sprite (or Group) to a RenderTexture. In Canvas it creates an "offscreen" canvas, in WebGL it writes direct to the frame buffer, so it's really fast. It's limited in that  you can only draw image data to it though.

 

I've also added a new object (again only in dev right now) called a BitmapData. This is a pure hidden canvas, so anything you can do on a canvas object you can do on this. I.e. gradient fills, lines, copying chunks of it around, etc. It can then be used as the base texture for any Sprite. This is more expensive in WebGL mode as it has to re-upload the texture to the GPU each time you update it, but it's more flexible depending on the effect you're trying to achieve.

 

For this thread specifically though I'd recommend a RenderTexture.