ThrowPropsPlugin Blurry Text

[neoaquino]

Hi, I'm creating an app in Android and copied and pasted your ThrowPropsPlugin
 code sample verbatim and made some test in my Samsung Galaxy Tab. Some how the text that generated is muddy and blurry as shown in the attachment. Is there a way to fix this? Btw I'm using a dynamic textfield, anti-alias for readability and disabled catche as bitmap I also tried testing it to both cpu and gpu having the same results

 

Thanks in advance!

[Carl]

Not really sure why that is happening. It appears like what you might see if

Flash Player toggles the stage quality to low (like it does when under stress) perhaps you can trace out stage.quality AFTER your ThrowPropsPlugin has completed.

 

I would also test to see if you are landing on whole pixel values, Flash can do funny things with text if it lands on sub-pixels such as text.x = 23.5234

 

Does the blurry text only happen on that particular device? If you publish to desktop is everything fine?

 

Lastly I would suggest just doing a normal tween of your text.

TweenLite.to(text, 3, {y:400})

Do you get the same results with ThrowPropsPlugin and BlitMask removed?

[neoaquino]

hi carl, thanks for the reply, I already got rid of the sub-pixels and made it a whole number its still the same, so right now the only device that i have is my galaxy tab 10.1 as my testing device, i got rid of the ThrowPropsPlugin plugin and blitmask and just use the tf.text = "" and the result is fine you could check the attachment , and also on desktop result is still the same

 

 

[neoaquino]

i think the issue here is the blitmask when i got rid of it the text is fine but the issue right now its not scrolling anymore

[Carl]

is your stage the exact same size as your devices display, or is it being scaled up to fit a higher resolution?

 

My next idea is that the BlitMask is sampling a bitmap at one size and it is being scaled up by the device. 

[neoaquino]

well no the size that I use is for the mobile device dimension 480x800 and yes its being scaled, i published it in a full screen mode. do you think its got something to do with being scaled?

[Carl]

Absolutely. The resolution of a Galaxy Tab 10.1 is 1280x800.

 

BlitMask creates a bitMap capture of a display object, converting your vector text to a bitmap. If you stretch those pixels by upscaling the stage to the larger size, those pixels will be stretched  (become blurry). The same thing would happen for any bitmap image you have on your stage. 

 

One solution may be to scale the target of your BlitMask to double its size (scaleX=2, scaleY=2) prior to creating the BlitMask which will give you a high resolution and sharp bitmap. 

[neoaquino]

thanks again carl what I did was place a smooth = true code on the blitmask

 

blitMask.smoothing = true;

 

and it works! thanks for your time on helping me out really appreciate it. I just notice one thing if I use an xml base data replacing the default tf.text ="" text in your sample the data does not show unless I turn off blitmask then all my content in my xml appears.

[Carl]

Sorry, I don't know what XML base data is.

[neoaquino]

hi carl, i apologize for that confusing line that i posted what i mean is i replaced the sample text with an xml, for some odd reason the content will only show if blitmask is turned off

 

here is the code that im using

//xml//

var xmlFile:String="72kit.xml";
var contentXML:XML = new XML();
contentXML.ignoreWhitespace=true;
var contentXMLURL:URLRequest=new URLRequest(xmlFile);
var contentLoader:URLLoader=new URLLoader(contentXMLURL);
contentLoader.addEventListener(Event.COMPLETE, contentXMLLoaded);

function contentXMLLoaded(evt:Event):void {
	contentXML=XML(evt.target.data);
	var htmlContent=contentXML.content.text();
	content_txt.htmlText=htmlContent;
}

contentLoader.load(contentXMLURL);

//throwprops//

var bounds:Rectangle = new Rectangle(30,84.4,425.95,630);
var mc:Sprite = new Sprite();
addChild(mc);
setupTextField(mc, bounds);
var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, true);

var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number;

blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
	TweenLite.killTweensOf(mc);
	y1 = y2 = mc.y;
	yOffset = this.mouseY - mc.y;
	yOverlap = Math.max(0, mc.height - bounds.height);
	t1 = t2 = getTimer();
	mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseMoveHandler(event:MouseEvent):void {
	var y:Number = this.mouseY - yOffset;
	//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
	if (y > bounds.top) {
		mc.y = (y + bounds.top) * 0.5;
	} else if (y < bounds.top - yOverlap) {
		mc.y = (y + bounds.top - yOverlap) * 0.5;
	} else {
		mc.y = y;
	}
	blitMask.update();
	var t:uint = getTimer();
	//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
	if (t - t2 > 50) {
		y2 = y1;
		t2 = t1;
		y1 = mc.y;
		t1 = t;
	}
	event.updateAfterEvent();
}


function mouseUpHandler(event:MouseEvent):void {
	mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
	mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	var time:Number = (getTimer() - t2) / 1000;
	var yVelocity:Number = (mc.y - y2) / time;
	ThrowPropsPlugin.to(mc, {throwProps:{
								 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}
							 }, onUpdate:blitMask.update, ease:Strong.easeOut
							}, 10, 0.3, 1);
}

function setupTextField(container:Sprite, bounds:Rectangle, padding:Number=20):void {
	var xmlText:String = "xml_test";
	content_txt.width = bounds.width - padding;
	content_txt.x = content_txt.y = padding / 2;
	content_txt.htmlText = xmlText;

	content_txt.autoSize = TextFieldAutoSize.LEFT;
	container.addChild(content_txt);

	container.x = bounds.x;
	container.y = bounds.y;

};

[Carl]

This appears to be a problem with the order of operations.

 

You are creating your BlitMask BEFORE the xml is loaded. 

 

Either wait until the XML is loaded to create the BlitMask OR when the XML is loaded call the BlitMasks's update() method like so

blitMask.update(null, true);

http://api.greensock.com/as/com/greensock/BlitMask.html#update()

[neoaquino]

nice, it worked. thanks a lot carl!