Text on a path (bitmap text on a path?)

[rolandino]

Hi,

Just wondered if anyone knew of a way to render some bitmap text on a path - or even just render any kind of text on a path - in Phaser?

Ideally, I'd like to:

this.mybitmap = game.make.bitmapData

this.mybitmap.somehowrendertextonapath(textToRender, somePathData)

// Then use the bitmap as so:

this.myimage = new Phaser.Image(game, 10, 10);

this.myimage.loadTexture(this.mybitmap);

Just wondered.

Many thanks,

R

[lewster32]

Not natively with Phaser I'm afraid. Your best bet for the moment is to pre-render your text in Photoshop or similar and import it as an image. Making text follow a path is a pretty advanced feature with a lot of subtle problems to solve.

[wayfinder]

If you don't need the text to curve around the curves, you could try the old demoscene sine scroller thing with pixel displacement on a bitmapdata.

[rolandino]

Hi Both,

Many thanks for replies.

RE: text on a curve - it would be handy. I've done some work with D3js and SVG, and there is some capacity in that to do this kind of thing (i.e. text along a path - see http://bl.ocks.org/mbostock/2565344) - hence my question.

RE: "old demoscene sine scroller thing with pixel displacement on a bitmapdata" - sounds great - unfortunately, I don't really know what you're talking about .... sadly. Any chance of a link to an example?

Many thanks again,

It all sounds a bit tricky to do, and resorting to Gimp/PotatoShop isn't a disaster.

R

[wayfinder]

Look here  http://demo-effects.sourceforge.net/

[lewster32]

The text on a path stuff is built in to SVG but no such in-built functionality exists for canvas, webGL or Phaser. Wayfinder's suggestions may get you some of the way to getting text to follow curves but I think you're probably looking for a more controllable effect like SVG's, with orientation and easy to update text.

 

A possible option would be something like fabric.js or similar, which has an SVG-to-canvas parser, and use this to create your text within a hidden canvas and copy it over to a BitmapData object, however fabric.js at least is not feature-complete and I believe it lacks the textPath feature you require.

 

Edit: Looks like KineticJS does support this.

[rolandino]

Hi,

Many thanks for all the answers. All v interesting. Will take a look when I get a mo'.

R