Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Contributor
insultcomicdog
Posts: 42
Registered: ‎01-05-2011
My Device: Not Specified
Accepted Solution

Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

[ Edited ]

Hey party people,

 

I'm having issues with embedded fonts in LabelButton not rendering cleary when run in the Simulator. They are crisp when published stand alone. The button is on whole pixels and I double checked that the text field in the button is also on a whole pixels.

 

Standalone:

 

Screen shot 2011-02-05 at 1.53.16 PM.png

Simulator:

Screen shot 2011-02-05 at 1.55.08 PM.png

 

My code:

 

 

public class GenericLabelButton extends LabelButton
	{
		protected var labelStr:String;
		
		public function GenericLabelButton(labelStr:String)
		{
			this.labelStr=labelStr;
			
			super();
		}
		
		override protected function init():void
		{
			var format:TextFormat=new TextFormat();
			format.font="font_helveticaNeue";
			format.size=16;
			format.color=0x000000;
			format.align=TextFormatAlign.CENTER;

			super.init();
			
			setTextFormatForState(format, SkinStates.DISABLED);
			setTextFormatForState(format, SkinStates.UP);
			setTextFormatForState(format, SkinStates.DOWN);
			setTextFormatForState(format, SkinStates.SELECTED);
			setTextFormatForState(format, SkinStates.DISABLED_SELECTED);
			label_txt.embedFonts=true;
			label=labelStr;
			label_txt.x=Math.round(label_txt.x);
			label_txt.y=Math.round(label_txt.y);
		}
	}

 

Is anyone else experiencing this? Is font_helveticaNeue a bad font to be using for PlayBook development? Should I used native fonts instead?

 

I should also add that I'm using the font elsewhere in my app as a plain text field and it renders fine/crisp in the Simulator.

 

I could use native components wholesale, but I figure I should at least try use my own fonts.

 

And while on the subject of the native LabelButton.....

 

Why does text render differently in the simulator that standalone? The bg of the LabelButton doesn't seem to resize properly when I use the Simulator. Do I need the font installed on the host computer?

 

Standalone:

Screen shot 2011-02-05 at 2.20.06 PM.png

 

In Simulator:

Screen shot 2011-02-05 at 2.19.34 PM.png

 

 

Would appreciate any input into this...

 

Thanks,

 

SMJOHN

 

Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

In regards to the second set of buttons in your example, the simulator is rendering with the default BB Sans font.  If you install that font onto your normal computer, then your AIR fonts will look closer to that what is seen in the simulator.

 

I have seen that any type of drawing in oddly pixelated when displayed in the simulator.  I've always assumed that the simulator has issues in rendering graphics (especially when you try to draw stuff with the graphics attribute).  I've been betting that the final PB, because of its increased screen density, that this will appear correctly.

Contributor
insultcomicdog
Posts: 42
Registered: ‎01-05-2011
My Device: Not Specified

Re: Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

So jtegen,

 

If I install "BB Sans font" on the host computer...Will the bg of the button not resize properly on Standalone as it is currently doing on the Simulator? It's strange that the the bg doesn't autosize....

Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

The LabelButton will size based on the text and the font. There is a slight difference between the AIR BB Sans Font and the one on the simulator, so if you have controls near the buttons, make certain they are relative to them in terms of the coordinate system.

Contributor
insultcomicdog
Posts: 42
Registered: ‎01-05-2011
My Device: Not Specified

Re: Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

Sorry if I was not clear...Why does the LabelButton not resize based on the text and font in the Simulator with the default font?

Developer
studiochris
Posts: 165
Registered: ‎10-26-2010
My Device: BlackBerry® PlayBook™

Re: Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

[ Edited ]

Oops -- just realized I wrote this for TextInput and you asked about LabelButton, in which case you'd use label_txt for the TextField as you've already done (it is the default TextField fom flash.text).

 

Embedded fonts will render nicely in the QNX TextInput on the simulator, just as they do with Flash's TextInput from fl.controls; 100 times better than vector shapes.

 

To make them look good, you have to edit some properties in the TextInput's textField.

 

You can adjust sharpness and thickness to your liking. The gridFitType property may also help on its own. I haven't tested it without the custom AA settings, though.

 

 

_textInput.textField.antiAliasType = AntiAliasType.ADVANCED;
_textInput.textField.sharpness = 1;
_textInput.textField.thickness = 25;
_textInput.textField.gridFitType = GridFitType.PIXEL;

 

 

I've attached a before and after screenshot from the simulator. Unlike my screenshot, be sure to size your type, TextInput and/or its TextField properly to not cut off descenders. Myriad Pro is shown.

 

TextField reference for anyone who comes across this thread and needs it:  http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html

 

Contributor
insultcomicdog
Posts: 42
Registered: ‎01-05-2011
My Device: Not Specified

Re: Blurry Embedded Fonts in LabelButton in Simulator and Differences Font Rendering

Thanks studiochris!

 

Tweaking sharpnesss, thickness and gridfittype helped with text rendering in the Simulator. The text in my components is much crisper now.

 

 

_textInput.textField.antiAliasType = AntiAliasType.ADVANCED;
_textInput.textField.sharpness = 1;
_textInput.textField.thickness = 25;
_textInput.textField.gridFitType = GridFitType.PIXEL;

 

 

It's strange that text appears fine without these tweaks, when you publish Standalone.

 

I still don't understand why the bg of default LabelButtons aren't resizing with the text when run in the Simulator.