Jump to content

Gradient background


Go to solution Solved by ctmartinez1992,

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 post
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 post
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 post
Share on other sites
  • Solution

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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...