How to rotate BitmapData? + other question

[Incrue]

Them use a bigger rectangle and move the stuff inside

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;
}

[ColbyCheeze]

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!

[mxrider108]

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

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

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?

[mr_malee]

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

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

[ImprisonedPride]

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).

[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

[mxrider108]

Thanks for the responses!

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.

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.

[Incrue]

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

[mxrider108]

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)

[jjhavokk]

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)