Jump to content

Multistroked text function


kleepklep
 Share

Recommended Posts

Just wanted to share a little function I created with anyone who needs to dynamically generate multistroked text. I'm using it to generate text like this:

 

post-12464-0-59271400-1444260964.jpg

 

There are some things I added that can be stripped out:

- I am adding hair spaces to space the letters out further.

- I had problems with text.setShadow with the font I was using so had to make my own,

- I added a hole filler that puts a bullet in the middle of where a capital C appears so that the back stroke doesn't show through.

 

If you can think of any ways to improve or expand on this code I'd be interested to hear :)

// I'm only adding 2 strokes here but you can add more by adding items to the last 2 arrays.// Just make sure that the widest strokes are first in that array because I didn't add code to sort automatically.var myText = multistroke(Number(i + 1) + '. ' + levelNames[key], '20px bpreplaybold', '#FFF', ['#231f20', '#a8bf38'], [11, 7]);btn.add(myText);// returns a group of text objects that simulates text with mutliple strokesfunction multistroke(chars, font, fill, stroke, strokeThickness) {	var multistroked = game.add.group();	// add letter spacing	// copy spaces from https://www.cs.tut.fi/~jkorpela/chars/spaces.html	var charCopy = '';	for (var c = 0; c < chars.length; c++) {		charCopy += chars.charAt(c) + ' '; // hair space	}	chars = charCopy.substr(0, charCopy.length - 1);	// add strokes based on lenght of stroke array	for (var i = 0; i < stroke.length; i++) {		// add shadow		// shadow was being cropped into a box for some reason so can't use text.setShadow(-3, 3, 'rgba(0,0,0,0.5)', 0, true, false);		// likely a custom font glitch like 		if (!i) {			var shadow = game.add.text(-strokeThickness[i] / 2 - 2, -strokeThickness[i] / 2 + 2, chars, {				font: font,				fill: fill			});			shadow.stroke = stroke[i];			shadow.strokeThickness = strokeThickness[i];			shadow.alpha = 0.25;			multistroked.add(shadow);		}		// hack to fill in holes that show the outside stroke in the middle of uppercase Cs using 2 hair spaces and a bullet		if (i == stroke.length - 1) {			if (chars.indexOf('C') != -1) {				var holeFiller = game.add.text(0, 0, chars.split('C').join('  •'), {					font: font,					fill: stroke[i]				});				multistroked.add(holeFiller);			}		}		// add stroked text		var text = game.add.text(-strokeThickness[i] / 2, -strokeThickness[i] / 2, chars, {			font: font,			fill: fill		});		text.stroke = stroke[i];		text.strokeThickness = strokeThickness[i];		multistroked.add(text);	}	return multistroked;}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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