Gradient backgrounds

[Qqwy]

In my game, I want to have a simple screen size rectangular area filled with a gradient(the start and stop color change per room) as a background.

 

In the canvas renderer, this is quite straightforward by using canvasContext.createLinearGradient

 

However, there are ways to do this in WebGL as well. I know how to write a shader for it, but not how to implement such a shader.

 

Also, as this is not text and just a simple rectangle, maybe there already exists some kind of function for it in Phaser?

 

Any help would be appreciated.

 

~Qqwy

[lewster32]

What you're looking for is the BitmapData object, which gives you a canvas context to play with, and use as a texture to your Sprite, Image and other objects. Create an instance of BitmapData, do your canvas trickery on its ctx or context property, then use it as the key to an Image instance and it'll work fine in both canvas and webGL.