Forums » Help » Line Break with font.draw

Hi, is there any way to do this with impact:

font.draw("line break goes here: \n start of new line");

I have experimented with \r \n <br /> but can't get a line break to work.

Thanks,

Matt.

i'd like to know this too, thx for asking!

There's only one way to do it: two separate draw instructions. For the above example:

ig.Font.draw("line break goes here", x, y);
ig.Font.draw("start of new line", x, y + 12);

The +12 part is variable, but of course depends on the size of your font. You need to leave at least the font's height between the two and generally a bit more. 12 seems to work for the 04b03 font included with Impact, though.

@Arantor that's how i'm doing it too. But i wish there was a more straightforward 'HTML' way, like using line breaks.

Hmmm, could be interesting to write, because it looks like it'd require overhauling some of the housekeeping ig.Font does if it's done directly in ig.Font (notably, the ig.Image.drawCount)

Though I guess it wouldn't be that hard to implement it... if you were to modify font.js's draw() function, just after the test that 'text' is typeOf string, you could add this code:

if (text.indexOf("\n") !== -1)
{
  // Note that this charHeight has 2 extra pixels line spacing.
  // Increase if you want more spacing between rows.
  var strings = text.split("\n"), charHeight = this.height * ig.system.scale;

  for (i = 0; i < strings.length; i++) {
    this.draw(strings[i], x, y + i * charHeight, align);
  }
  return;
}

There's likely to be all kinds of strange edge cases, but give it a shot and see what happens. (Note, I haven't tested it, I just threw this together.)

I tried using jquery/html to add in the font text, and I'm finding this method much better. Assuming the fonts are not part of the collision detection, or game movement, then I'm finding it is much easier to use straight html, it looks a lot cleaner, and can be styled much easier.

Fonts aren't part of collision detection or game movement anyway. However, distribution and placement gets interesting because not everyone has the same fonts installed, and unless you have a licence to distribute the fonts (or are using a web fonts service) you can't use it either.

Assuming you then produce multiple font files for the respective browsers needing different formats of font (and assuming you have both the licencing and capability to create the different formats, or the providers gives you said files)...

As of version 1.19, Impact supports multiline text. See ig.Font. Thanks Arantor.

font.draw( "This is a\nMultiline Text!", x, y );

Awesome :)

Thanks for continuing to add value to the ImpactJS framework dominic.

One problem I've noticed with the \n support is that widthForString always returns NAN. It would be ideal if it returned the width of the string after the line break is taken into account. For instance if this string is 20px wide: "onetwo" then widthForString would return 10 for this string: "one\ntwo".

It would also be great if ImpactJS started to support heightForString with the \n support.

When I proposed the code, I'd never tested it, never used it, just throwing it out there in case it would help someone, but let's see if we can't fix those things.

	widthForString: function( s ) {
		var width = 0;

		if ( s.indexOf( '\n' ) !== -1 ) {
			var lines = s.split( '\n' ), cur = 0;
			for ( var i = 0; i < lines.length; i++ ) {
				cur = 0;
				for( var i = 0; i < s.length; i++ ) {
					cur += this.widthMap[lines[i].charCodeAt(i) - this.firstChar] + 1;
				}
				if ( cur > width ) {
					width = cur;
				}
			}
			return width;
		}
		else {
			for( var i = 0; i < s.length; i++ ) {
				width += this.widthMap[s.charCodeAt(i) - this.firstChar] + 1;
			}
		}
		return width;
	},

	heightForString: function( text ) {
		return ( text.indexOf( '\n' ) !== -1 ? text.split( '\n' ).length : 1 ) * this.height;
	},

I still haven't tested them, so use at your own risk. Note that I chose not to make widthForString recursive since instead of doing the test for \n once (on the first call) you'd end up doing it n + 1 times where n is the number of lines.

(I will never get used to indentation Impact-style, I'm far too set in my ways of Allman style indentation for my own stuff, I had to go back and reformat it before posting...)