Blurry SWF Assets - MovieClips w/ Bitmap Animations

Hey all, so I have an issue with SWF MovieClip assets being blurry in OpenFL. I have some MovieClip assets that contain bitmap animations (no Vector, just bitmap), and it seems that scaling them results in edges becoming anti-aliased in all targets except Flash:

The code is just simply attaching the clip to the stage:

Assets.loadLibrary("bird", function (_) {
	var wrap:MovieClip = new MovieClip();
	var bird:MovieClip = Assets.getMovieClip("bird:bird");
	// Note: Scaling the bird directly results in the same behavior
	wrap.scaleX = 2.0;
	wrap.scaleY = 2.0;
	wrap.addChild(bird);
	addChild(wrap);
});

Are there any configuration changes I can make to modify the smoothing behavior of Bitmaps that are rendered inside MovieClips? I would like to be able to scale up with 8-bit graphics without the edges being smoothed. I should note that what I’m looking for is the equivalent in the Flash world where you uncheck “Allow Smoothing” and select “Compression Lossless/PNG” for each desired Bitmap in the library.

Any assistance would be much appreciated!

I looked into this, and was able to find a way to improve this behavior for now.

With the updated changes, the “NyanCat” sample scaled uses nearest-neighbor instead of bilinear smoothing. The SWF format defines smoothing per instance on the timeline, but there is a performance optimization that limits our support for smooth/not-smooth to one setting per bitmapData.

I have made it respect smooth = false, unless it encounters an instance that does require smoothing, where it will then change that image’s setting to smooth always. I don’t think this will be a big issue (NyanCat properly has no smoothing now, for example), but we can keep an eye on it.

I have ideas for the proper fix, but that’s a much larger project :slight_smile:

1 Like

Thanks for the quick response! I looked at the commit you made on the OpenFL git repo and that looks exactly like what I expected to see. The code was super understandable, I might need to poke around in there more and get involved :slight_smile:

At any rate, is there a recommended way I can test this before a new version is tagged?

If you can yank the changes into your own version of OpenFL, then openfl rebuild tools should rebuild the SWF tools in the OpenFL library. You’ll need the “format” haxelib, but otherwise I don’t think there are any dependencies :slight_smile:

The changes worked in all platforms except HTML5, and it looks gorgeously sharp!!

I know for HTML5 there is some rendering mode config called “DOM”, but this didn’t work for me. However adding the following CSS styles to the canvas did the trick so it looked just like the other platforms:

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

Thanks so much again for the help!

1 Like

I didn’t know about those CSS properties, thank you :slight_smile:

1 Like