Questions about text

(Jason Pickering) #1

Hey guys I have a bunch of questions about font.

  1. how does one set up word wrap? I have a box I would like to keep my text in, but don’t want to break it up myself.
  2. is the font still kind of blurry sometimes? is this a bug? or was it fixed?
Escape Characters (newline, tab) in Text object?
(Zachary Lewis) #2
  1. I’m not 100% sure. I’m sure others here have more experience working with it.
  2. The font can be blurry if it isn’t a pixel font, if it is a pixel font at the wrong size, or is a pixel font at the right size, but positioned at a fractional value (x = 20.3).
(Draknek) #3

This should work:

text.width = 500;

text.wordWrap = true;

(Jason Pickering) #4

anyway to make so I don’t get a fractional value when using align to center?

also I don’t think I was using width and wordwrap so that’s working now.

(Jason Pickering) #5

so when using the center, left and right in the text.align, is there anyway to make sure it always uses a whole number?

(ConnorUllmann) #6

I demand answers!

But really, I’m having this problem as well, and it’s a bit of an issue. Here’s some extra info I’ve gathered about it:

  1. Doesn’t just happen to the first line in the text.
  2. Also happens if I remove the red styling.
  3. Only happens with center aligned text.

Image link (since I’m new and can’t post them directly…)

(Nicole Brauer) #7

Firstly you should check, that the position is not on a fractional value (like x = 1.24). I’m sure you already did that but just in case you can do the following:

x = int(x);
y = int(y);

If that doesn’t work try this:

myText.smooth = false;

With “myText” being your text object. This should make it so the graphic has no antialiasing which might fix the problem.

I have a question for you though: How did you make one word colored red? I wanted to use that effect but never knew how to do it other than by using two texts overlaid which is a pain in the bum.

(azrafe7) #8

I fiddle with it a bit (with the default font, which seems the same one you’re using), but couldn’t replicate the blurry issue as shown by @ConnorUllmann, even positioning the text on fractional pixels.

Are you setting the size to a non-multiple of 8, or scaling it in some way? This could lead to problems as suggested by @zachwlewis, but doesn’t really explain why only the first line is affected.

Can we see some minimal code to reproduce it?

EDIT: @VoEC: richText in combination with setStyle() is one of the most powerful and less known things that the Text class could do. From the docs:

/**
 * Set the style for a subset of the text, for use with
 * the richText property.
 * Usage:
	   text.setStyle("red", {color: 0xFF0000});
	   text.setStyle("big", {size: text.size*2});
	   text.richText = "<big>Hello</big> <red>world</red>";
 */
(ConnorUllmann) #9

Here’s some of the code I’m using:

//Some constants used.
private const EDGE_MARGIN_X:int = 8;
private const EDGE_MARGIN_Y:int = 12;

// Initializing
textO = new Text("", 0, 0, { "size":8 } );
textO.setStyle("red", { color: 0xFF0000 } );
textO.setStyle("bigger", { size:12 } );
textO.width = FP.screen.width - EDGE_MARGIN_X * 2;
textO.wordWrap = true;
textO.smooth = false;
textO.align = "center";
textO.richText = 
   "It is a long established fact that a reader will be distracted by It is "+
   "It is a long established fact that a reader will be distracted by It is "+
   "It is a long established fact that a reader will be distracted by It is ";

// Render
textO.render(FP.buffer, new Point(EDGE_MARGIN_X, int(FP.screen.height * 3 / 4 + EDGE_MARGIN_Y)), new Point);

This text will make all three lines fuzz out, like this:

Other information if you’re really looking to reproduce it exactly:

  • FP.screen.width = FP.screen.height = 320;
  • FP.screen.scale = 2;
(azrafe7) #10

Thanks for the testing code - used it all, up to the screen scale and size.

Aaand… confirmed O.o !

I’m getting the same results as you (even commenting out the richText related stuff it’s still blurry).

I’ve tried several combinations to spot the causes of the problem (fractional postions, use an entity, move text graphic, richText, updateTextBuffer not called?, different scaling (screen or font), sizes, etc.). All of them reproduced the issue and gave almost no clue on how to fix it.

After quite some testing I’ve got a case (with a custom font) in which a TextField works fine, while a FP Text does not. Still experimenting with it, but it probably has to do with font loading or more probably with wordWrapping in Flash.

Will post soon if I find the culprit (or some other clues)!

(Jonathan Stoler) #11

I messed around with this a little bit. Here’s what I found:

  • adding a textO.width++ or textO.width-- fixes the problem. textO.width is equal to 304 before modifications.
  • 304 / 8 = 38. If I maintain this ratio with different numbers, the problem does not reappear.
  • disabling the text centering also fixes the problem.
  • disabling wordWrap also fixes the problem.
  • changing FP.screen.scale to 1 also fixes the problem.
  • switching from render() to using addGraphic() and setting textO's x and y properties does not fix anything.
  • if I change FP.screen.width to 480 without changing FP.screen.height, the problem goes away. If I change FP.screen.height to 480 without changing FP.screen.width, the problem persists. If I change both to 480, the problem goes away. Note that changing the width alters the ratio of 38 mentioned above.

So, I guess, temporary fix is to call textO.width -= 0.000001 before using it. I have no idea why this is a bug and I can’t think of anything right now. I’ll report back if I find anything.

The main problems seem to be:

  • setting FP.scale to 2 AND
  • using center alignment for textO AND
  • using wordWrap on textO AND
  • having some mysterious combination of width and size for textO (when textO.size = 8 and width = 304, things get blurry)
(ConnorUllmann) #12

Nice summary Jon!

Adding textO.width -= 0.000001 does fix the problem, but it’s only for that string. I put in the below string (which wasn’t blurry before), and it became blurry with that change:

"Discover here what has befallen the fallen."

What I’m basically getting from this is that it’s primarily dependent on the content of the text itself (which is why, in the images I put up earlier, most of the text gets along just fine) and the width of that line of text.

I think the TextField automatically offsets it to a fractional degree when it formats the center alignment, and I’m guessing that the Flashpunk code that attempts to fix the offset doesn’t actually handle it correctly; although, I couldn’t figure out why it wouldn’t fix this. The section I’m talking about is the lower half of the updateTextBuffer() function in Text.as

If I had to guess, I would think that if (remainder > 0.1 && remainder < 0.9) is the problem. The string might have 0 < remainder < 0.1 or 0.9 < remainder < 1 However, I didn’t see any notable change when I tried tinkering with these values (i.e. change 0.1 to 0.01 and 0.9 to 0.99).

(Abel Toy) #13

I was having a similar issue in my game, and I wrote this quick fix:

counterText.smooth = false;
counterText.setTextProperty("antiAliasType", AntiAliasType.ADVANCED);
counterText.setTextProperty("sharpness", 200);
counterText.setTextProperty("thickness", 0);

It’s not a pretty solution, but it works until you can figure out what’s wrong with text.

(ConnorUllmann) #14

I tried it, and it fixed it for me! :smile: Thanks a ton!

(Zachary Lewis) #15

A monospaced font might also fix your problem without all the hacks. I’m guessing it’s a kerning issue.

(azrafe7) #16

I think I found the problem!

It seems to have to do with TextLineMetrics getting “dirty” and not reporting the correct values (see this related question on StackOverflow). So the offsetRequired fix gets skipped due to wrong values.

The workaround I’ve found that seems to work fine with both plain and rich text is a single line to add in Text.updateTextBuffer():

	var offsetRequired: Boolean = false;
			
	var i:int;
			
	// reassign text to force a recalc of TextLineMetrics and so be sure they report correct values
	_field.htmlText = _field.htmlText;
			
	var tlm: TextLineMetrics;
	var remainder: Number;
	var tlm_y:Number = 2;
	for (i = 0; i < _field.numLines; i++) {

Can you confirm it works as expected?

Note that using richText and styling a subtext with a font size non-multiple of 8 (with the default font), will still not work. But setting it to 16, for example, will.

(ConnorUllmann) #17

Fantastic! Works great for me :slight_smile: Nice catch!

(azrafe7) #18

@ConnorUllmann: wunderbar!! :beer:

If all of you can test it thoroughly and prove it hasn’t any major drawbacks (haven’t found any yet, but really don’t know what reassigning the text involves underneath), I think it should be merged into the official repo.

What do you admins think (oh… let me :pray: summon the ones I know of @Draknek, @zachwlewis, @AbelToy)?

(Zachary Lewis) #19

If there’s a pull request that fixes this, I’ll shove it in there, provided it doesn’t change the API. :smile:

(azrafe7) #20

Pull request coming your way!

Now Text requires three additional parameters. Plus, the order of the previous ones is slightly changed.

Naahhh, just kidding. :smirk: It’s a one line fix!