AS3 Bitmap Object Not Smoothing at Low Scale values

Question

I need help getting a bitmap to apply smoothing properly after being scaled very small.

What I am doing now is loading a .png image with a Loader object. After loading the file I cast the loaderInfo's content to a bitmap and set the smoothing value to true. This works without a problem until I reach a ScaleX and ScaleY value less than 0.5.

For example, if I have a 1000x1000 object, scaling it down to 200x200 causes the bitmap smoothing to no longer work.

I can reproduce the problem using all of the following Sizing methods:

Change the scaleX and scaleY properties on the bitmap.
Directly change the height and width properties of the bitmap.
Add the bitmap as a child of another sprite and change the scaleX and scaleY properties of the sprite.
Add the bitmap as a child of another sprite and change the height and width properties of the sprite.
Creating a new BitmapData object with a matrix scale and then drawing the original BitmapData onto it.

I've also tried some other workarounds that I found when searching, such as:

setting the scaleX of the image to 1.001 or 0.999
forcing the height and width of the Bitmap object to be even numbers.

Below is some sample code for reproducing the problem. (I am running this locally so I have a copy of testimage.png in my bin-debug folder)

public class MainObj
{
    public var comp:UIComponent;

    public function MainObj()
    {
    }

    public function LoadContent():void
    {
        var str:String = "testimage.png";
        var l:Loader = new Loader();
        l.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadContentComplete);
        l.load(new URLRequest(str));
    }

    public function LoadContentComplete(e:Event):void
    {
        var li:LoaderInfo = e.target as LoaderInfo;
        var bmp:Bitmap = li.content as Bitmap;

        bmp.smoothing = true;
        bmp.scaleX = 0.2;
        bmp.scaleY = 0.2;
        comp.addChild(bmp);
    }
}

I also have an mxml file that creates an instance of the MainObj class and sets the comp property to a UIComponant instance that's been added in the Application mxml code (the UIComponent is what allows the Bitmap to be added to the Spark elements making up the mxml).

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600"
               width="800" height="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            private var mainObj:MainObj;
            override protected function initializationComplete():void
            {
                mainObj = new MainObj();
                mainObj.comp = comp;
                mainObj.LoadContent();

                super.initializationComplete();
            }
        ]]>
    </fx:Script>
    <s:VGroup width="100%" height="100%">
        <mx:UIComponent id="comp" width="100%" height="100%"/>
    </s:VGroup>
</s:Application>

You can always workaround this by creating a smaller copy of BitmapData via BitmapData.draw() and scaling the copy. This needs some logic for copies creation and bitmap.bitmapData switching. — Maxim Kachurovskiy
Thanks for the tip. :)I did try this and it works, but it's not going to fit well into my current rendering architecture. If worse comes to worse I'll find a way to work it in. — peewee_RotA

Jonathan Dunlap Jonathan Dunlap · Accepted Answer · 2012-02-08T00:23:05

Scale to sizes that are a power of 2 with the original size also being a power of 2
Mipmapping is a term popular in the gaming industry for making multiple zoomed versions of an image in order to reduce scaling aliasing. (especially for radical sizing changes)
As a hack for Flash Player 10, set the 'z' property to 1. This will enable hardware smoothing of the Bitmap, although it will eat more memory and performance.

AS3 Bitmap Object Not Smoothing at Low Scale values

2 Answers