Char spacing

[ceco-fmedia]

Added additional property letterSpacing in BitmapText to set extra space between each character.
Set textWidth/lineWidth to include the additional space at the end of the last character as it includes the space before the first one.

[themoonrat]

should be this._letterSpacing

[themoonrat]

this isn't public. The getter is what's public

[themoonrat]

Testing it with the following code, and comparing current and your version of bitmap text... there appear to be issues with center and right aligning when letter spacing is used in conjunction with maxWidth.

const config = {
  width: 960,
  height: 540,
  resolution: 1,
  autoResize: true,
  transparent: true
};

const app = new PIXI.Application( config );
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();
graphics.beginFill(0xFF700B, 1);
graphics.drawRect(0, 0, 300, 300);
graphics.position.set(100, 100);
app.stage.addChild(graphics);
window.graphics = graphics;

PIXI.loader
	.add('desyrel', 'img/desyrel.xml')
	.load(onAssetsLoaded);

function onAssetsLoaded() {
	var text = new PIXI.extras.BitmapText("Now this is a story all about how my life got flipped-turned upside down.", { font: '35px Desyrel', align: 'right' });

	
	text.position.set(100, 100);
	text.letterSpacing = 40;
	text.maxWidth = 300;

	app.stage.addChild(text);
	window.text = text;
}

Pure pixi, so letterSpacing now applied: right aligns correctly within maxWidth

PR version of pixi: letterSpacing in effect; right aligns incorrectly.

[cursedcoder]

Please consider to add some unit tests for this feature.

[ceco-fmedia]

Can anyone help me find out why the TravisCI is failing?

[ivanpopelyshev]

There's something wrong with Travis

[ceco-fmedia]

@themoonrat the problem with the center and right aligning was because the BitmapText supported only space as line breaking character and the line flipped-turned was too big. All lines are currently aligned to the biggest line, not the maxWidth property.

[bigtimebuddy]

@themoonrat could you review this again?

[themoonrat]

@bigtimebuddy will do. Code lgtm ... just wanna have a little play to try and see if I can break things :)

[bigtimebuddy]

Sure, no problem. Fiddles welcomed

[themoonrat]

So, the letter spacing itself I'm happy with.
A couple of other things.
The first is the change in how you treat hyphens. Previously they would be kept together as a word, but now they are allowed as a break for word wrapping. Are there any other expected changes to how bitmap text will look with this PR even with letterSpacing 0? I'm not sure if this is important or not @bigtimebuddy ?

For example

Current Pixi:

PR Pixi:

Second: And this bug isn't unique to your code, but also existed in the existing code.... it doesn't take into account line breaks added into strings already.

const config = {
  width: 960,
  height: 540,
  resolution: 1,
  autoResize: true,
  transparent: true
};

const app = new PIXI.Application( config );
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();
graphics.beginFill(0xFF700B, 1);
graphics.drawRect(0, 0, 300, 300);
graphics.position.set(100, 100);
app.stage.addChild(graphics);
window.graphics = graphics;

PIXI.loader
	.add('desyrel', 'img/desyrel.xml')
	.load(onAssetsLoaded);

function onAssetsLoaded() {
	var text = new PIXI.extras.BitmapText("One\ntwo\nthree\nfour five six seven eight nine ten", { font: '35px Desyrel', align: 'right' });
	
	text.position.set(100, 100);
	text.letterSpacing = 0;
	text.maxWidth = 300;

	app.stage.addChild(text);
	window.text = text;
}

Produces

Notice how it repeats the 'ei' on line 4... the first 2 letters of eight. It doesn't distinguish between line breaks already within the text, and line breaks created internally due to word wrap.

I don't know whether it's worth fixing in this PR, or put this PR through as it matches old behaviour and ask for a new PR later on to fix this? Thoughts again @bigtimebuddy ?

[bigtimebuddy]

1. We should match existing behavior with regards to hyphens.
2. Line-breaks can be another PR, I'd rather not pile on this PR

[bigtimebuddy]

@ceco-fmedia and @themoonrat where are we with this PR? Would like to get into 4.8 if we can. Please let me know. Also @ceco-fmedia could you resolve conflicts?

Issues have been addressed above

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.