How to rotate BitmapData? + other question

Hey guys, I am trying to integrate my game engine with Box2D and also trying to use BitmapData for all of the rendering to increase speed however I haven't used it much and am having trouble figuring out how to get something to rotate...

I have all of my objects stored in BitMap data objects and I call render on each of them and then copyPixels over to the main BitmapData object which is shown on screen.

Also I was wondering how you could draw all of a Sprite / Movieclip object with BitmapData.draw() if the Sprite placed so that the origin is in the center...in other words when I draw from a sprite that is w:50,h:50 and it's x,y is at -25,-25 it only draws the positive part that shows up. Any way to fix this?

Thanks

thats the problem of copyPixles, you cant rotate, you'll have to create bitmapData's for every possible rotation of an object, so 360 bmp's per object.

the only other option is use draw with a matrix.

use matrix.translate to fix your last problem.

You *could* try Matrix.rotate(angleInRadians), but I got some funny results in my case.

Well I am using an animated bitmap class I created so I'd actually have to create a HUGE amount of frames...I guess the total rotation for every frame of the animation, on every clip that was animated. Not sure if that is a good idea....but if the memory usage wouldn't be a big deal I suppose I could do it. Thoughts?

I haven't been able to figure out the matrix rotating. It just doesn't seem to be working right...Does anybody know how to use it that can give me some tips?

you should rotate the matrix before you translate it.

maybe try:

matrix = new Matrix()
matrix.rotate(radain)
matrix.translate(25, 25)

bmp.draw(clip, matrix)

That won't work for me, I've already "drawn" all of my clips into an array of bitmap datas. I am rendering using copypixels for speed and am trying to figure out how to do it...I've already spent 5 hours looking for a way to do this I'm getting frustrated =/

If I use bitmap.draw every single frame that seems to slow down the app by a lot.

Have you tried graphics.beginBitmapFill? I :lovers: g.bBF.

http://www.8bitrocket.com/newsdispla...?newspage=6765
Actionscript 3: Tutorial - BitmapData rotation with a matrix

Same issue here, also, using draw incurs the same performance hit that drawing vector MCs does. So I am finding that sticking to copyPixels and blitting different sprite frames is the best way to go here. Will post back if i find out otherwise...

What I do is draw() my movie clip 72 times, with its _rotation increasing by 5º each time. I store these frames in an array, and at run-time copyPixels() the required one in.

Okay I've read some posts from 8bitrocket.com and the method you have about rotating is out for me since it uses BitmapData.draw every single frame.

I did read some speed tests you had about using individual sprites for each character to display rather than blitting everything to one BitmapData and it seemed to be just as fast until around 10K+ objects...which should be fine for me...HOWEVER my question is that how much would it slow down once you start rotating stuff compared to a matrix rotation?

Also, who would recommend using vengeances method? How feasable is that? Also if I did that, I'd have to write something that makes the bitmap data actually bigger because you will have to account for longer images than the height etc...

To have a bitmapData for each angle will work only for when you would rotate a static image,i mean, imagine if your animation is a walking guy that you have 12 frames for him to walk, for each frame you will have to add 360 another frames, one for each angle, and thats just for walking, imagine if he also jumps, hides, dies, whatever
Slow of not, i dont think that there is too much option for that besides draw()

Colby, to give you an idea of how fast my method is:

http://birchlabs.co.uk/Invasion5CP.swf

Granted, that particular swf didn't preprocess the sprites, it loaded in an existing spritesheet:

http://birchlabs.co.uk/ArrowSheet.png

But this spritesheet can be very easily generated as part of the game's loading sequence (would only take about half a second, probably less, for Flash to prepare it). An example of a file where I do generate a 'rotation' sheet for each sprite is here:

http://birchlabs.co.uk/Polygon.swf

The square (there seems to be a problem with it disappearing between 270-360º, since it rotates differently to the other objects), the ship, and all its bullets are calculated with 5º intervals of rotation. Note that they also have pre-rendered glow effects, which only add time to the preprocessing stage - they don't slow down the game at run-time. When rendered onto the screen, we round up to the closest sprite we have, so 173.23º becomes 175º. Now, you'd be hard-pushed to tell by sight that any BitmapData is being used in this at all. :)

To get the dimensions of the BitmapData, I allocate Math.max(width*√2, height*√2) width and height for every cell. Now, this doesn't give us the smallest possible sprites, but culling it would make it hell to work out what coordinates to draw and render the objects at.

FYI, this system can handle at least 7,000 animated objects without breaking a sweat. Just means a lot of work goes into the preprocessing.

Thank you vengeance, I suppose I'll just have to take into consideration what type of game I am making as to what method I would want to use: individual sprites, or preprocessed rotations.

I may want to copy bitmapdata into sprites with bitmap smoothing for a lengthy animated char and then for all non animated objects I would probably want to use your method. That is my guess anyway.

It wouldn't be too hard for me to write two classes for both cases and just use whichever one suited the particular object I am trying to render.

Thanks for the help!

In the case of animated objects,if you rotate all the bitmapDatas so that you can copyPixels them, that may be a waste since you can do everything draw() based,without the copyPixels part
Im gonna make some tests to see how fast this is compared to movieClips, i bet it will be a joke compared to copyPixels, but it will have rotation, (x,y and rotation,thats all i need 90% of the time)and besides, with a draw engine you can make some cool things with colorTransform and blendModes, that may be handy some day

I think I would be more interested in seeing the speed difference compared to sprites filled with bitmapdata already which is now what I am doing.

I have a class that imports a movieclip and then draws in each frame into an array of bitmapdata and then animates itself by pointing a "bmpData" property to the current bmpData in the array. I then have a sprite on stage with a BMP inside of it holding the "bmpData". This allows me to rotate and resize or whatever, while the animation class handles the actual animation for me.

This is sort of how it was done on 8bitrocket website for his speed tests and there wasn't really any slowdown but he didn't test actual rotation so I don't know how much speed is used when I actually begin rotating things.

I may have to create my own tests as well...

Right, the conclusion with a 100% draw engine,rotating and setting x and y with a matrix is that it does not worth compared to mcs.
ColbyCheese, im curious to see your results but this way you still gotta have a lot of sprites for each item,isnt it?Many of the speed of copyPixels engines came from not having to deal with lots of display objects

I'm not sure why this is difficult for me but I am having a hell of a time figuring out how to create prerotated sprites. I just can't seem to get it to work. Vengeance would you care to share the code you use to do this? Or anyone else?

One easy way to do this is to put your target clip inside a clip container, and in a loop that makes i goes from 1 to 360:
-make the target rotates i
-create a new BitmapData and makes him draw the container, not the target clip.
-store the BitmapData on the array of BitmapDatas at the pos i
and thats it, you will have the array of BitmapDatas, each index is also the angle the stuff is rotated inside

That's the approach I was trying to take, the problem is getting the object inside to rotate and still show up correctly when drawn. For instance when you rotate a square the corners will get clipped as it rotates since they go outside of the rect area of the draw.

Them use a bigger rectangle and move the stuff inside

Code:

---

var tclip:MovieClip = new MovieClip();
var sbmdt:BitmapData = new BitmapData(20,20,true, 0xFF0000FF);
var sbmp:Bitmap = new Bitmap(sbmdt);
tclip.addChild(sbmp);
sbmp.x -= sbmp.width/2;
sbmp.y -= sbmp.height/2;

//container clip
var cclip:MovieClip = new MovieClip();
cclip.addChild(tclip);
tclip.x += tclip.width/2;
tclip.y += tclip.height/2;

var ma:Matrix = new Matrix();
ma.translate((tclip.width/4),(tclip.height/4));

//array of bmdts
var bmdt:Array = new Array();
var bmp:Array = new Array();
var j:int = 0;
var k:int = 0;
for(var i:int = 0; i<=360 ; i++){
        tclip.rotation = i;
        bmdt[i] = new BitmapData((tclip.width + tclip.width/2),(tclip.height + tclip.height/2), true, 0xFFFFFFFF);
        bmdt[i].draw(cclip,ma);       
        bmp[i] = new Bitmap(bmdt[i]);
       
        k++;
        if(k>12){
                k=1;
                j++;
        }
         
        bmp[i].x = 40*k;
        bmp[i].y = j*40;
        addChild(bmp[i]);
}

var showThis:BitmapData = new BitmapData((tclip.width + tclip.width/2),(tclip.height + tclip.height/2),true, 0xFFFFFFFF);
var showBmp:Bitmap = new Bitmap(showThis);
addChild(showBmp);

var c:int = 0;

addEventListener("enterFrame", oef);
function oef(ev){
        c++;
        if(c > 360){
                c =0;
        }
        showThis.fillRect(showThis.rect, 0x00FFFFFF);
        showThis.draw(bmp[c]);
        showBmp.x = mouseX;
        showBmp.y = mouseY;
}

---

Okay I have this almost done. I have created a class that will load in a sprite or a movieclip or a bitmap tilesheet and prerotate it by however many frames you specify, and then it can animate at whatever speed you set it it to. Also it uses an iterator so you can give it an iterator that goes forward, reverse, or maybe skips to random frames...whatever you want. It will also figure out which rotation frame to go to for you, so that you do not have to write that into your "actor" class or whatever.

I still have a few things to do to it before it is ready though. Right now if you load in a very large amount of them with lots of frames of animations or a high rotation frame count for each one (or both) it takes the CPU a VERY long time to get it all loaded, so I am working on a way to have it precompute everything w/o taking over and locking down the app while it's loading...and then it would just send an Event.COMPLETE.

As soon as I get a few things done to it I'll run some speed tests and see how it compares. Thanks for the help so far!

I realize this is an old thread, but I am also trying to pre-process images into a spritesheet as well.

Quote:

---

Originally Posted by ColbyCheeze

For instance when you rotate a square the corners will get clipped as it rotates since they go outside of the rect area of the draw.

---

Quote:

---

Originally Posted by Incrue

Them use a bigger rectangle and move the stuff inside

Code:

---

bmdt[i] = new BitmapData((tclip.width + tclip.width/2),(tclip.height + tclip.height/2), true, 0xFFFFFFFF);

---

---

This method will not work. What if my source image is a straight line?

VENGEANCE said he was using Math.max(width*√2, height*√2), but this is not as tight as the bounding square could be. I wrote a script in javascript for Photoshop, (viewable here in plain text, so open in notepad or whatever), that works by basically making the canvas larger than needed, rotating the image 36 times in 10 degree increments, then using the "trim()" function which just trims any excess transparent pixels from the sides of the image.

What I would like to do is create the canvas at the smallest possible size to begin with (because there is no "trim()" function in actionscript 3). I know there has to be some geometric formula for this, because we are basically dealing with a circle/hypotenuse here...

Any ideas?

getBounds() will return the rectangle area a display object occupies. Use:

myObject.getBounds(myObject) to get the local bounds of itself.

Quote:

---

Originally Posted by mxrider108

This method will not work. What if my source image is a straight line?

---

If your source is a straight line then wouldn't it be the larger width or height, respectively? A straight line can't get any larger if rotated. For rectangles simply the pythagorean theorem to get the hypotenuse. For ovals you'd have to determine the foci and derive a largest diameter from those two points. For a circle it's simply 2xRadius or Circumference/PI, based on what you know about the circle. For any non-standard geometric shape, there is no ingenious formula; just use the getBounds() method by Mr Malee above (and then possibly the pythagorean theorem to determine the hypotenuse if needed).

Isn't easy just to put it inside a bitmap and rotate it?
Sometimes we overcomplicate things just because we can.

Anyway, if its the empty space what is creating the problem, you could cheat and replace the empty pixels for 0x00000001
I remember some strange problems with draw() and empty pixels, so those ones are not empty but noone will notice

Thanks for the responses!

Quote:

---

Originally Posted by ImprisonedPride

For rectangles simply the pythagorean theorem to get the hypotenuse. For ovals you'd have to determine the foci and derive a largest diameter from those two points. For a circle it's simply 2xRadius or Circumference/PI, based on what you know about the circle. For any non-standard geometric shape, there is no ingenious formula; just use the getBounds() method by Mr Malee above (and then possibly the pythagorean theorem to determine the hypotenuse if needed).

---

Yes, I was just going to post this solution myself actually.

The generic solution for any type of shape is to find the farthest non-transparent pixel from the origin and use twice that distance as the width and height for the bitmap canvas on which to draw the rotated images.

You could also just take the square root of the original image's width squared plus the height squared (Pythagorean theorem), but this will waste some space on anything that is not a solid rectangle.

Quote:

---

Originally Posted by Incrue

Isn't easy just to put it inside a bitmap and rotate it?
Sometimes we overcomplicate things just because we can.

Anyway, if its the empty space what is creating the problem, you could cheat and replace the empty pixels for 0x00000001
I remember some strange problems with draw() and empty pixels, so those ones are not empty but noone will notice

---

Not sure what you mean here. The reason I want to know this is so I can make my bitmaps as small as possible to avoid wasting memory on empty data (transparent or not). This can actually be important when creating a multitude of sprite sheets (say 72 frames per object), and especially for larger objects, because memory can be precious.

So, what you want is to cut the empty space around one BitmapData?

Quote:

---

Originally Posted by Incrue

So, what you want is to cut the empty space around one BitmapData?

---

Not exactly (I know BitmapData's getColorBoundsRect method would do this). I need to get one rectangle that will work for all rotated states of an image. This way I can use one fixed Rectangle for copyPixels and the image of the sprite will remain centered and not clipped.

I suppose one way that would work without finding the furthest point from the origin manually would be as follows:

Make an overly large canvas BitmapData
Render all 360 degrees of rotations of the image on top of each other onto this one BitmapData (making an ugly image that is in the shape of a circle)
Use getColorBoundsRect to find the bounding rectangle all non-transparent pixels in this image

From here we can discard the canvas we just drew on, make a new BitmapData of the proper size (using the rectangle we just created), render a rotated state onto the center of this canvas, then repeat.

(In actuality I'm making one single sprite sheet bitmap rather than a whole bunch of bitmaps, but the concept is the same)

Quote:

---

Originally Posted by mr_malee

you should rotate the matrix before you translate it.

maybe try:

matrix = new Matrix()
matrix.rotate(radain)
matrix.translate(25, 25)

bmp.draw(clip, matrix)

---

I know this is an old post, but I wanted to point out that the correct way to translate is:

matrix = new Matrix()
matrix.translate(-25, -25)
matrix.rotate(radain)
matrix.translate(25, 25)

bmp.draw(clip, matrix)