Gradient Fill on Text

[Nick]

Is it possible to have style text with a gradient fill using Phaser? I can't use a bitmap font as the text sizes will vary throughout the game.

[Heppell08]

Is the bitmap fonts not scaleable? I am yet to dive into bitmap but most things can be scaled on X/Y.

[SombreErmine]

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 });

[Nick]

I've decided to stick with WebGL when available and I'm going to use a large bitmap font scaled down for the various font sizes. Thanks for your answer SombreErmine, it helped me reach a decision quickly