Jump to content

Gradient background


AustinG08
 Share

Recommended Posts

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

  • 1 month later...

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");
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 4 weeks later...

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.

 
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...