AustinG08 Posted March 11, 2014 Share Posted March 11, 2014 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 More sharing options...
Heppell08 Posted March 11, 2014 Share Posted March 11, 2014 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 More sharing options...
AustinG08 Posted March 12, 2014 Author Share Posted March 12, 2014 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 More sharing options...
AustinG08 Posted March 12, 2014 Author Share Posted March 12, 2014 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 More sharing options...
ctmartinez1992 Posted March 13, 2014 Share Posted March 13, 2014 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 Link to comment Share on other sites More sharing options...
AustinG08 Posted March 13, 2014 Author Share Posted March 13, 2014 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! Link to comment Share on other sites More sharing options...
Heppell08 Posted March 13, 2014 Share Posted March 13, 2014 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. Link to comment Share on other sites More sharing options...
freaker Posted March 16, 2014 Share Posted March 16, 2014 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.... Link to comment Share on other sites More sharing options...
rich Posted March 16, 2014 Share Posted March 16, 2014 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. AustinG08 1 Link to comment Share on other sites More sharing options...
Kapsonfire Posted May 7, 2014 Share Posted May 7, 2014 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 More sharing options...
jpdev Posted May 7, 2014 Share Posted May 7, 2014 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 Sam and Kapsonfire 2 Link to comment Share on other sites More sharing options...
Kapsonfire Posted May 7, 2014 Share Posted May 7, 2014 Yeah its working. Forgot the fillStyle and needed to use Sprite instead of Image. Thanks Link to comment Share on other sites More sharing options...
zetafactor Posted June 3, 2014 Share Posted June 3, 2014 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. Sam and jpdev 2 Link to comment Share on other sites More sharing options...
jouniii Posted June 6, 2014 Share Posted June 6, 2014 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 More sharing options...
Recommended Posts