Jump to content

Gradient Fill on Text


Recommended Posts

So Bitmaps are scaleable in the sense that they can be scaled. However, scaling up can cause the text to get blurry. Using regular fonts are kind of like using vector graphics as opposed to bitmap graphics. It will scale up (or down) as much as you need and have relatively the same quality.


If you're restricting your game to use Canvas only, I know a solution for it. There is probably a way in WebGL too, but I am not familiar with it.


So, to render text, Phaser uses Pixi.js. So looking at Pixi's source file for Text rendering you'll notice this line: this.context.fillStyle = this.style.fill;


It is using the fillStyle of the context to render the text color. Thus you can use something like createLinearGradient to make a gradient color.


Relevant Canvas Code:

var myGradient=game.canvas.getContext('2d').createLinearGradient(0,0,0,32);myGradient.addColorStop(0,"blue");myGradient.addColorStop(1,"red");scoreText = game.add.text(16, 16, 'Score: 0', { font: '32px arial', fill: myGradient });
Link to comment
Share on other sites


  • Recently Browsing   0 members

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