2 Replies Latest reply on Feb 6, 2008 3:59 AM by Toon81

    Failing to draw transparent PNG

      Hello everyone,

      I've got a bit of a problem that's got me kind of stumped. I could work around it fine, but want to try and solve it so I can learn. Here's what's going on: I'm making a Snake clone to try and make my first game. I divide the snake up into blocks, and make a BitmapObject for each of the blocks. To provide the bitmap data, I embed eight different PNG files in my application (specifically, in the MXML file with their "visible" property set to false).

      Next, each time I need a new block (e.g. when my snake gets longer), I need to duplicate the one of those images, so I make a BitmapData object and call its draw() method, passing it the embedded Image object. I then make a Bitmap object from the BitmapData object and add it directly to the stage (I can't add it to a Canvas, because Bitmaps aren't IUIComponents). But when I do that, the alpha channel isn't rendered. My snake is not a nice shadowed snake, but a bunch of white blocks with a nice shadowed snake inside it!

      I know that I did the PNG image right, however, because when I set the images to visible in the MXML file, they render fine. I'm also sure that the Bitmap objects have their opaqueBackground properties set to null, because I checked in the debugger. I'm also sure to have told my bitmap to make a transparent bitmap because I'm passing it a value of "true" when I construct it.

      My question, of course, is: why won't my Bitmaps render properly? I should, for completeness' sake, add that I'm compiling my application with Flex Builder Beta 3 (downloaded yesterday, february 5) with Flex SDK 3. I'll try to add sample code in a reply later.
        • 1. Re: Failing to draw transparent PNG
          Toon81 Level 1
          I now have some sample code to show you. Unfortunately, although the forum says "Please use 'Attach Code' to include any sample code in the message", I can't find any functionality for doing that, so I'll just paste it right in.

          This is inside a function. The "b" object is returned after this occurs, then it is positioned at the right place and made visible. The "bodyN" object is one of the embedded images from my MXML file, it is 10 by 10 pixels big.

          var bmData:BitmapData = new BitmapData( 10, 10, true );
          bmData.draw( DisplayObject( bodyN ) );
          var b:Bitmap = new Bitmap( bmData );
          b.visible = false; // position it later and make it visible afterward
          this.parent.stage.addChild( b );
          • 2. Re: Failing to draw transparent PNG
            Toon81 Level 1
            Well, it seems I figured it out. Here's how I solved the problem. I don't really know why my earlier approach didn't work. It works now, anyway. What I did was embed the image in ActionScript, which automatically makes classes of my image that I can instantiate in my code. I'm including the solution here in case anyone runs into the same problem.

            internal var bodyEClass:Class;

            var b:Bitmap;
            b = new bodyEClass();
            b.visible = false;
            this.parent.stage.addChild( b );
            return b;