A Flash Developer Resource Site

Page 2 of 2 FirstFirst 12
Results 21 to 30 of 30

Thread: How to rotate BitmapData? + other question

  1. #21
    Custom User Title Incrue's Avatar
    Join Date
    Feb 2004
    Posts
    974
    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;
    }

  2. #22
    The Cheeze to Your Macaroni ColbyCheeze's Avatar
    Join Date
    Dec 2007
    Location
    Texas
    Posts
    244
    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!

  3. #23
    Junior Member
    Join Date
    Jun 2007
    Location
    Cary, NC
    Posts
    13
    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 View Post
    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?

  4. #24
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,140
    getBounds() will return the rectangle area a display object occupies. Use:

    myObject.getBounds(myObject) to get the local bounds of itself.
    lather yourself up with soap - soap arcade

  5. #25
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,379
    Quote Originally Posted by mxrider108 View Post
    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).
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  6. #26
    Custom User Title Incrue's Avatar
    Join Date
    Feb 2004
    Posts
    974
    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

  7. #27
    Junior Member
    Join Date
    Jun 2007
    Location
    Cary, NC
    Posts
    13
    Thanks for the responses!

    Quote Originally Posted by ImprisonedPride View Post
    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 View Post
    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.

  8. #28
    Custom User Title Incrue's Avatar
    Join Date
    Feb 2004
    Posts
    974
    So, what you want is to cut the empty space around one BitmapData?

  9. #29
    Junior Member
    Join Date
    Jun 2007
    Location
    Cary, NC
    Posts
    13
    Quote Originally Posted by Incrue View Post
    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)
    Last edited by mxrider108; 01-02-2011 at 03:47 PM.

  10. #30
    Junior Member
    Join Date
    Mar 2011
    Posts
    1
    Quote Originally Posted by mr_malee View Post
    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)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center