Gradient background

[AustinG08]

I am a total beginner with phaser and graphics programming so pardon my newbness. I am trying to do something similar to game.stage.backgroundColor only I want backgroundGradient. The only gradient methods seem to be for BitmapData however. Furthermore I can't even get any BitmapData to render. I just want to make my stage have a background gradient. Can somebody help me? Thanks!

 

P.S. I have looked at this similar phaser post but couldn't make the canvas example work. http://www.html5gamedevs.com/topic/3330-gradient-fill-on-text/

[Heppell08]

Have you looked at this:

    /**    * Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient.    * Once the gradient is created colors can be inserted using the addColorStop method.    * @method Phaser.BitmapData#createLinearGradient    * @param {number} x - The x axis of the coordinate for the gradients starting point.    * @param {number} y - The y axis of the coordinate for the gradients starting point.    * @param {number} width - The width of the gradient.    * @param {number} height - The height of the gradient.    * @return {CanvasGradient} The Linear Gradient.    */    createLinearGradient: function (x, y, width, height) {        return this.context.createLinearGradient(x, y, width, height);    },

Pulled straight out of phaser.

[AustinG08]

Have you looked at this:

    /**    * Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient.    * Once the gradient is created colors can be inserted using the addColorStop method.    * @method Phaser.BitmapData#createLinearGradient    * @param {number} x - The x axis of the coordinate for the gradients starting point.    * @param {number} y - The y axis of the coordinate for the gradients starting point.    * @param {number} width - The width of the gradient.    * @param {number} height - The height of the gradient.    * @return {CanvasGradient} The Linear Gradient.    */    createLinearGradient: function (x, y, width, height) {        return this.context.createLinearGradient(x, y, width, height);    },

Pulled straight out of phaser.

 

Hey,

 

I have looked at that. I have tried many variants to make it work.  I do something like:

 

grd = game.add.bitmapData(game.width, game.height);

 

I also do

 

grd = New Phaser.BitmapData(game.width, game.height);

 

then I do

 

grd.createLinearGradient(0,0,game.width,game.height);

grd.addColorStop(0, '#eeeeee');

grd.addColorStop(0, '#cccccc');

grd.fill();

 

This is a terrible example and I know it is wrong but it's just off the top of my head to say I have been trying. But I have many variations, as well as copying examples from http://docs.phaser.io/Phaser.BitmapData.html and I just can't get it to work. The examples from the doc like " myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).rect(20, 20, 120, 120);" throw me an error. If anyone can get this to work or give me a working example or point me in the right direction I would appreciate it. Thank you.

[AustinG08]

I will put a bounty of 20 dollars on this to whoever can present an efficient working example. All you need is a paypal address.

 

*Edit: I am not a total newbie at canvas programming. I can get a gradient on a canvas easy. How the heck do you do it with Phaser?

[ctmartinez1992]

Not gonna lie, this was a tough one to crack, this is the version in typescript:

var myBitmap: Phaser.BitmapData = this.game.add.bitmapData(100, 100);myBitmap.beginLinearGradientFill(["#000", "#FFF"], [0, 1], 0, 20, 0, 120);myBitmap.rect(20, 20, 120, 120);myBitmap.fill();this.game.add.sprite(50, 50, myBitmap);

and this is the javascript version:

var myBitmap = game.add.bitmapData(100, 100);myBitmap.beginLinearGradientFill(["#000", "#FFF"], [0, 1], 0, 20, 0, 120);myBitmap.rect(20, 20, 120, 120);myBitmap.fill();game.add.sprite(50, 50, myBitmap);

This puts the gradient on a rect, the parameters might be a little wobbly but i'm sure that you can figure it out from here, hope it helps.

 

P.S. I appreciate the bounty but i don't have money problems so you can keep the 20 bucks

[AustinG08]

Thanks for the great answer. Was able to breath a sigh of relief when I saw it render. If you change your mind, just pm me your paypal address. I really appreciate it!

[Heppell08]

Nice fix there! Glad this also got an answer. Was a bit of a headscratcher to say the least. Although I have no use for gradients I'm more than sure a lot of others are.

[freaker]

It's just me or beginLinearGradientFill has been removed from Phaser 2 ????

 

I'm trying to find it even in the source and there's nothing about gradients.... 

[rich]

Everyone please please read the migration guide, it covers this! But to answer the question you can do it exactly as you would on a normal canvas, just do it on the bitmapdata.context property instead.

[Kapsonfire]

i tried to use the context, but dont get it working :/ if i use "grd" for fillStyle in Text it works

  var myBitmap: Phaser.BitmapData = this.game.add.bitmapData(100, 100, "Background", true);            var grd = myBitmap.context.createLinearGradient(0, 0, 100, 100);            grd.addColorStop(0, "#0000FF");            grd.addColorStop(1, "#FFFFFF");            myBitmap.context.fillRect(0, 0, 100, 100);            this.add.image(0, 0, "Background");

[jpdev]

var myBitmap = game.add.bitmapData(800, 600);var grd=myBitmap.context.createLinearGradient(0,0,0,500);grd.addColorStop(0,"white");grd.addColorStop(1,"#0a68b0");myBitmap.context.fillStyle=grd;myBitmap.context.fillRect(0,0,800,580);grd=myBitmap.context.createLinearGradient(0,580,0,600);grd.addColorStop(0,"#0a68b0");grd.addColorStop(1,"black");myBitmap.context.fillStyle=grd;myBitmap.context.fillRect(0,580,800,20);game.add.sprite(0, 0, myBitmap);

Double gradiant, resulting in a 800x600 sprite, that has 580 pixel gradiant from white to blue and then 20px gradiant from blue to black.

(Using the new method, tested in chrome & firefox)

Hope this helps

[Kapsonfire]

Yeah its working. Forgot the fillStyle and needed to use Sprite instead of Image. Thanks

[zetafactor]

I came across this thread looking to implement gradients in phaser-- big help.

 

I thought it was worth noting that a gradient can have more than two color stops, just like CSS.  The double gradient in jpdev's post can be shortened to:  

var myBitmap = game.add.bitmapData(800, 600);var grd = myBitmap.context.createLinearGradient(0,0,0,600);grd.addColorStop(0,"white");grd.addColorStop(500/600,"#0a68b0");grd.addColorStop(580/600,"#0a68b0");grd.addColorStop(1,"black");myBitmap.context.fillStyle = grd;myBitmap.context.fillRect(0,0,800,600);game.add.sprite(0, 0, myBitmap);

The first argument to addColorStop() is a fractional distance along the gradient, so the first gradient goes from 0px to 500px (out of 600) and the second starts at 580px and goes to 600px.

 

[jouniii]

Just to add small trick we used. Instead of trying to create gradients programmatically (createLinearGradient) you can leave it to the graphics designer very easily. Decide that gradient has to be an image size of ie. 1x256. Then just use this as sprite and stretch it up where you need it. This makes it easy to change the gradient in Photoshop and have any sort of color changes.