Wednesday, August 24, 2005

Stroke hinting in Flash Player 8 (A.K.A. better round rects)

I noticed a comment from John Olson asking if we addressed the well known issues with 1pt strokes in the Flash Player. Well I have good news and bad news :-)

First the good news: Yes, we did try to address this in this release and I came up with a solution which should work in most cases. It's called 'Stroke hinting'. This feature does two things:

  • Hint anchor points of curves to full pixels. This means that you will not see disjoints anymore when combining curves and straight lines. This will change the way rounded rectangles look in Flash.

  • Hint the stroke width to full pixels. This means as you scale a stroke inside a symbol it will never blur, snap to full pixels and therefore always look sharp.


Here is an example (blown up to 200%) which shows the difference between using stroke hinting and not using it:

Since we need to stay compatible with older Flash versions we decided to offer this new method of drawing strokes as an option which is turned off by default:



BTW, ALL of the new stroke options are also accessible through ActionScript, so you devs out there won't have to use the UI if you don't want to. :-)

The bad news about this new feature is that this approach can lead to rendering artifacts in itself. It's also not really suitable for animation as strokes might 'jitter' due to the hinting which is done. Another problem is that a small radius in rounded rectangles might not always look perfect. The underlying problem here is that Flash uses quadratic curves. The only way to really fix this would be to add real arc support to the Flash Player which was simply too much in this release, not to speak of the technical difficulties we would have encountered trying to add this.

Anyway, I still think it was worth adding the stroke hinting feature. It should address 90% of the problem cases.

10 Comments:

Anonymous Anonymous said...

Great blog, very interesting. This post made me wonder if maybe you can shed some light on something I have never quite understood though: non-whole pixels. How can there be fractions of pixels? Isn't the pixel the smallest unit there is when it comes to screen based dimensions? On or off, one or the other? I also find it maddening that even when I have turned on 'snap to pixels', which I think should be on by default, symbols I drag to the stage are still sometimes placed on non-whole pixels. What gives?

Wednesday, August 24, 2005 2:36:00 PM  
Anonymous JesterXL said...

For the latter, file an ECR, but for the former, it's just like how the screen is measured in twips, which are like 20 to the pixel or something.

You can store more information per pixel vs. 1 square.

Why does this matter?

Compare animation in Director vs. Flash. Why is Flash smoother & overall more eye-catching? Because Director cannot blend from 1 pixel to the next, you will see the animation "jitter".

Flash, however, can blend 1 square pixel to the next via antialiasing, which makes the "appearence" be a lot smoother when you all really did was move 1 pixel to the next.

Put that in context with a finely detailed image that is scaling, etc, and you can see how youre animations can become a lot better looking.

...hopefully Tinic can do a new blog entry talking about this!

Wednesday, August 24, 2005 6:41:00 PM  
Anonymous mray said...

"Compare animation in Director vs. Flash. Why is Flash smoother & overall more eye-catching?"

Flash may come with it out of the box, but you can implement your own subpixel animation code in Director as well...Many old-skool Director folks did something similar to stroke hinting - calculate all positions using floats and then 'snap' to nearest pixel when the time comes to render the stage.

Most of the pixel-scrollers built in Director did this, and if anyone is interested in the nitty-gritty, Andy Phelps wrote a great article delving into the details of tile scrollers and isometric games back in the day under "Tile Engines and Scrolling Theory" over here. May be in lingo, but some of the theory is great.

Have a feeling that a lot of this knowledge will be useful to Flash developers now have access to am imaging API.

Wednesday, August 24, 2005 7:43:00 PM  
Anonymous Anonymous said...

ECR... Elephant Change Request? :) Although I have never heard of twips, your point about smoother movement makes sense. I still can't think of a situation where you'd want to place something on a fraction of a pixel though. Oh well, to each his own I guess, just seems like whole pixels would be infinitely more common, and therefore the default setting.

Wednesday, August 24, 2005 7:48:00 PM  
Anonymous JesterXL said...

If it really ticks you off that much, use this:

http://dev.jessewarden.com/flash/jsfl/Round%20Pixel%20Coordinates.jsfl

http://dev.jessewarden.com/flash/jsfl/Round%20Pixels.mxp

Wednesday, August 24, 2005 9:27:00 PM  
Anonymous John said...

Thanks Tinic for the follow-up post regarding the 1pt stroke bug. I realize that stroke hinting may not fix all instances, but I am glad to see progress.

- John

Wednesday, August 24, 2005 10:38:00 PM  
Blogger oo00o said...

Mhh, i think it is still NOT good enough...

Sunday, September 04, 2005 12:53:00 PM  
Anonymous Anonymous said...

I haven't been able to find any documentation on using stroke hinting when drawing with ActionScript. Anybody know where I can find info on this?

Friday, December 09, 2005 10:21:00 PM  
Anonymous Anonymous said...

To use stroke hinting in ActionScript, simply set the new stroke hinting parameter of the lineStyle method to true.

Sunday, December 11, 2005 9:49:00 PM  
Anonymous Anonymous said...

Why can't we use Stroke Hinting (snapping to pixels) with the custom strokes? All I want is to be able to draw freakin' pixel-sharp dotted lines!

Sunday, March 26, 2006 8:59:00 PM  

Post a Comment

<< Home