Quantcast
The World Famous 8bitrocket.com Home Page



Tutorial Update: Basic Blit with Transparency
7/30/2008 12:00:00 AM by: Jeff Fulton
Category: Tutorials, Series:AAA [None AAA] , Syndication:(XML/RSS)

Blogs In This Series


Blogs In This Category


Last 10 Blogs

utorial Update: Basic Blit with Transparency

Super cool 8bitrocket.com reader, MR. K, asked a very interesting question today. He asked if this tutorial included transparency because both the screen background and the helicopter background are black. Some how I completely missed that point when I created the original tutorial. The answer is that of course blitting can be done against a complex background with transparency, but the sprite sheet I used was didn't have any transparency, and my background was just a black square. Opps!

Sure enough, the original tile sheet was a png file, but it had a solid non-transparent background. So, I opened up the tile sheet in Fireworks, selected the background with the selection tool and deleted it out. I saved it off as a png file and re-imported it into Flash. The new file looks like this:

Since our site has a dark gray background, you can tell right away the difference between that file and this one from the original tutorial.

The difference is HUGE. As the original file created a set of sprite tiles with a big black square around them.

I also created a 400x400 background tile to use as a background:

When they are put together, they look like this:

Very few code changes were needed, I just referenced a library item as the background instead of instantiating a black square. The tile sheet in my code was already set to use transparency, so no other changes were needed.

All of the new source files are here



GamerBlips: vote it up!

Comments
MrK: 8/17/2008 5:27:18 PM
ow, thanks for the tutorial-response :) I have one question which I've found trying to port an old game of mine. From the helicopter tutorial , imagine I want to render another helicopter. I just add the following code at the end of the Main.as heliPoint.x+=16 heliPoint.y+=32 canvasBD.copyPixels(tileSheet,heliRect, heliPoint) heliPoint.x-=16 heliPoint.y-=32 (sorry for the format) This prints one helicopter over another, looks "nice" However, if I chan
MrK: 8/17/2008 5:30:44 PM
(sorry, continuing) However, if I change canvasBD=new BitmapData(400,400,false,0x000000) to canvasBD=new BitmapData(400,400,true,0x000000) it doesn't work correctly anymore (the second heli doesn't seem to use the alpha channel anymore) Why does this happen? Is there any way to make it work correctly, while keeping the canvas transparent? Thanks again! :) MrK
MrK: 8/17/2008 5:41:30 PM
I hate when this happens. As usual, a few minutes after asking an stupid question I get the answer by myself. The last parameter of CopyPixels ,"mergeAlpha", does what I asked when set to true. I suppose it's a clear case of RTFM ) Anyways thanks again for the quick tutorial response! :)
Jeff Fulton: 8/17/2008 6:01:52 PM
Mr. K, no problem. I'm glad you got it to work!!!
Jay: 8/26/2008 12:12:12 PM
Hi Jeff.. first thing, i'm new with this kind of tile animation, but this thing is interesting me so much. so i try it... and I got a problem with your code. I try your code in flashDevelop. And i think i just have to embed the heli_sheet.png and turn it to Class as BitmapData. But the end of result it doesn't work ?! so i'll try to changed it to Bitmap, and it's still not working.. ? do you know what i suppose to do to make the code work ?!! Thanks
Jeff Fulton: 8/26/2008 1:11:42 PM
Hmm, Jay I have not tried it outside of CS3 using just Flash Develop and  the Flex SDK. It should work though. It could be that creating an instance of a BitmapData class is not the same with Flex and the <embed></embed> command. Maybe some one else here has tried it.
Jay: 8/28/2008 12:12:46 AM
ok thanks Jeff, maybe some one can answer it in here.
Jade: 8/28/2008 1:34:00 PM
ey there Jay, I too wanted to do this whole thing in code. I've coded games before for fun, and have always done everything in code. At any rate, the bitmap class points to a specific bitmap object, so you need to access the actual data within the object. I added this right after the main class declaration:

        [Embed(source='../images/heli.png')]
        private var heli_sheetClass:Class
        private var tileSheet_bmp:Bitmap = new heli_sheetClass ()
        private var tileSheet:BitmapData = tileSheet_bmp.bitmapData

I did the same thing for the background image. I then commented out the following lines in the main class:

//        public var tileSheet:BitmapData
        //background
//        public var backgroundBD:BitmapData

And commented these lines in the main fun
Jade: 8/28/2008 1:36:27 PM
(good thing I use an editor before I post comments! continuing...)
And commented these lines in the main function:

//            backgroundBD=new background_png(400,400)
//            tileSheet = new heli_sheet(640, 400)

Basically the commented out parts are taking out the redeclarations of the vars. Run the program and it works just fine! Hope this helps someone like me who never used Flash and just wants to stay in the "code realm".

Jeff Fulton: 8/28/2008 3:26:01 PM
Thanks, Jade. Great addition!
jade: 8/28/2008 4:28:31 PM
Glad to help Jeff. Hey I've got a couple of questions:

1) Is there a reason you had the main class extend MovieClip instead of Sprite? I tried both and they seem to work the same way.

2) Would there be much slowdown if you used this animation method with, say 50 space invaders lined up in rows all animating at the same time on the screen?

What if, for example, I took the drawHeli function, made all of those animation vars in the function parameters that are passed in, and stick this function in a loop which passed in the info for each space invader. Is this feasible speed wise or will it go so slow it isn't worth it? Is this how animation is typically done in Flash or do people use specially optimized animation classes?
Jeff Fulton: 8/28/2008 5:07:44 PM
Hey Jade!
1. Because I like to have all MovieClip methods available when I make a game. If you are in CS3 and not Flex you need t opre-load using 3 frames and that means the main class must extend from Movieclip. Also Mochiads needs work with a main class that is a Dynamic MovieClip. If none of those things apply to your application,  then you can use the Sprite class as your main class.
2. That is what this is for. Blit operations allow many objects on the screen. As long as you coordinate your update and render methods by eithet looping through all display objects or using a single event to trigger update and render all of the rows of invaders will move together. If you use older Flash methods like running a n enterFrame for each object it will be much more difficult to control (even impossible to blit like that)
Jay: 8/29/2008 2:41:39 AM
Thanks jade for the answer, maybe my result a little bit different from your. i'm rather use this:
canvasBD.copyPixels(tileSheet_bmp.bitmapData,heliRect,heliPoint)

then declare like this:
private var tileSheet:BitmapData = tileSheet_bmp.bitmapData

but the result is same, No problem at all i think. Thank You again for answering my Question..
Mark: 8/30/2008 11:01:34 AM
Excellent tutorial!

I put everything into a class, changed the loop a little bit so that it switches rows after a while and am now hooking it up to XML for making a list of animations available in the sheet, for selecting. Working on a 2D (fighter) engine :D
Add Your Own Comments
Message
Name:
Email:


This will not be displayed. It is used for a email one-time validation only.
Note: You MUST Respond To The Verification Email The First Time To Have These And all future Comments Displayed!
Validation Text:
Please type in validation text from the graphic.
Comment:

Max: 2500 Characters characters left


Questions? Comments?
For more information, contact: info@8bitrocket.com