Flash AS2 - flipping object while maintaining center

[Ivan-Aedler]

Hello there,

I am into an interesting problem. I had to interrupt my progress in two games because of this.
I have these blocks (each one must be a MC with code inside). (+) Is the registration point of them. The red circle is the center where all blocks should flip around (using _xscale).

block1.jpg (5.25 KiB) Viewed 2751 times

I know it flips around its center only if the registration point is in the center.
When I put _xscale*=-1, they flip, but like this.

block2.jpg (24.67 KiB) Viewed 2749 times

I cant use x_scale=-100 and +100 because they stretch a transformed MC (e.g. a smaller size). And they dont flip in the same center as well. So a given enemy is walking in a given corridor. When it changes direction, they...become tiny as a paper or huge like the fattest thing of the world. I cant just reset the transformation because I use those enemies in different sizes according to levels. They can also be really tiny if shrunk by a gun.

I know I only have those variables to calculate horizontal distances in a movie clip:
- _x
- _width

I dont know how to calculate this space (I will call _xdistance).

block3.jpg (4.47 KiB) Viewed 2751 times

I've searched through google and I've found a 'FlipHorizontal' code, but it involves a Matrix in AS3 only. http://www.actionscript.org/forums/show ... 3?t=215445
And this one only works for bitmaps http://board.flashkit.com/board/showthr ... ith-Matrix

Is there a way to do that in AS2?
I know its easier to put all of them in the middle because , when flipped, it does correctly without any further code. I also know that, putting the reg. point in the left corner (or right corner) only needs to sum up with _width when flipped, but those current registration point placements are required.

Thank you in advance.

[KaTsuO_O]

What I did was that I created a symbol that is 400 pixels wide, and placed the registration point between the left side and the middle of it. Then I added this code to flip it.

flippystick._x -= flippystickA*flippystick._xscale/100;
flippystick._xscale -= flippystick._xscale*2;

For that to work properly, you need to figure out what value flippystickA should be, in this case it is -220. So you need a different variable for each enemy.

[Ivan-Aedler]

What I did was that I created a symbol that is 400 pixels wide, and placed the registration point between the left side and the middle of it. Then I added this code to flip it.

Thank you, KatSuoo! Only a question, do I need to create an inner MC 400 pixels wide for this? Or did you use just an example (an object who is 400 pixels wide?) So, in that 400 pixel object, 220 was the value, so if I use in a 300 pixel wide enemy, do I just need to play with some flippystickA values until finding a good one, like Newton approach? (but without the complexity)

[KaTsuO_O]

I haven't tried this before, so thank you as well for making me learn another thing.

Actually, I just did a few tests, and noticed that the pixel width of the symbol and the position of the registration point can tell us how much that variable should be. So I just used it as an example at first, but now I see that you need to make it 400 pixels in order for 220 to work.

If you check my post again, you'll see that I have changed _x +=, to _x -=, as well as flippystickA to -220. That makes it easier to figure out the variable. As you know, the symbol is 400 pixels wide with the registration point between the left side and the middle. 220 happens to be about half of the pixel width of the symbol, the variable is -220 and that is because the registration point is on the left side. If the registration point would be on the right side, then it would be 220. If it would be in the middle, then the variable would be 0, far right would be 400 and far left would be -400.

[Ivan-Aedler]

I haven't tried this before, so thank you as well for making me learn another thing.

Interesting! This function might vary in a parabolical / logarithm way, where the limit reaches 400. We might be able to calculate flippstickA that way.

And how to return to the initial position (re-flip?)
I have a ragdoll program (that one) who plays with the FLIP thing. Right now, it justs 'invert' the horizontal based on registration point placement, so when you click in an object (e.g. a skirt) and press SPACE, you see it moves because of the uneven reg point.

Click to Play
(Javascript Required)

peach ragdoll4.swf [ 323.37 KiB | Viewed 2714 times ]

I'll try out the function, seeing how it works. Thanks

[KaTsuO_O]

The code flips it both ways. You may think that, flippystick._x -= flippystickA*flippystick._xscale/100;, would cause the symbol to move when you flip it back. But since flippystick._xscale is -100 when you have flipped it once, so it doesn't move anywhere.

To make it calculate the variable you need to use flippystick._width, other than that, I don't know how it could be calculated.

Another way you could get this to work, is if you placed each symbol inside another symbol. You really just need to convert each symbol on the stage in to a symbol. So let's say that I have the flippystick on the stage, I would convert it to a symbol and call it flippystickoutside. Then i would go inside the new symbol and drag flippystick where i want it. Now it could calculate flippystickA with this,

flippystickA = flippystickoutside.flippystick._x*2;

The flip code would now look like this,

flippystickoutside.flippystick._x -= flippystickA*flippystickoutside.flippystick._xscale/100;
flippystickoutside.flippystick._xscale -= flippystickoutside.flippystick._xscale*2;

Which works, but it is not a very good setup.

So I would give the symbol inside, the instance name symbol, or any other simple name.

When a symbol is selected, it would change this,

flipvariable = this.symbol._x*2;

and then flip it with this,

this.symbol._x -= flipvariable*this.symbol._xscale/100;
this.symbol._xscale -= this.symbol._xscale*2;

or this,

this.symbol._x -= (this.symbol._x*2)*this.symbol._xscale/100;
this.symbol._xscale -= this.symbol._xscale*2;

[Ivan-Aedler]

Thank you for your help
As for creating a symbol outside, I think it defeats the purpose of the 'all in one' approach, because I can create a outside symbol with a centered reg point. So its just a matter to use _xcale*=-1 directly.
I'll do some experiments with the first approach (the current code), using flippystick._width.

Which works, but it is not a very good setup. So I would give the symbol inside, the instance name symbol, or any other simple name.

But this one also requires a symbol inside another symbol, doesnt it?

[IrrelevantComment]

object.transform.pixelBounds gives the rectangle of an mc on the stage.
object.globalToLocal(pt) converts a point from stage co-ords to local co-ords

so
var rect = object.transform.pixelBounds;
var local = object.globalToLocal({x: rect.x, y: rect.y});
var offset = local+object.width/2;

gives offset as the horizontal distance between the geometric centre and the origin.

object.scaleX *= -1;
object._x += 2*offset.

flips the object and moves it to the correct place.
maybe.
or some shit like that, working this out in my head without checking. the point is, use transform

hope that helps

[IrrelevantComment]

btn.onPress = function(){
var rect = object.transform.pixelBounds;
object.globalToLocal(rect);
var offset = (object._xscale > 0 ? rect.x : -rect.x)+object._width/2;
object._xscale *= -1;
object._x += 2*offset;
}

does this:

Click to Play
(Javascript Required)

as2iscrap.swf [ 27.36 KiB | Viewed 2646 times ]

green line is geometric centre, red line is object origin

[Ivan-Aedler]

object.transform.pixelBounds gives the rectangle of an mc on the stage.
object.globalToLocal(pt) converts a point from stage co-ords to local co-ords...flips the object and moves it to the correct place. maybe. or some shit like that, working this out in my head without checking. the point is, use transform

THANK YOU!! You and Katsuoo! I'll test this approach, analysing the function.
This is better because it avoids the creation of an outer MC.

PS: As2 might be crap, but I dont have time to change more than 9,000 lines to AS3 just yet.
PS2: when I zoomed your example, and tried to click a bit bigger button, the object disappeared altogether, and clicking many times didnt take it back.
I think you need to put a localToGLobal line before globalToLocal or I think we need to refresh the pixelBounds because its coordinates changes with zoom.

[GoRepeat]

This might be over simplifying, but why don't you just wrap the object in another container that revolves around the center? That way you can flip and rotate around the new "center" but still place or locate around the original _x/_y values of the object? Unless I am misunderstanding your goal.

[Ivan-Aedler]

This might be over simplifying, but why don't you just wrap the object in another container that revolves around the center? That way you can flip and rotate around the new "center" but still place or locate around the original _x/_y values of the object? Unless I am misunderstanding your goal.

The problem is that this will create more complexity (making the level slower too), because there are times I have up to 200 different objects scattered there. So I would need +200 containers.
Also, this will create ambiguity, because I will need to use the raw objects (with different reg points) to check for collisions and such, and the container ones, with a centered reg point, to check for other properties. I would just transform all reg points in all objects to the center (it will work too and it will make them compliant) but I have to do that to more than 2,000 samples scattered through the game. So the getRects worked even better because I have full control of xMin, xMax, yMin and yMax

Code: Select All Code

function checkDistance(obj)
{
if (!obj.once)
    {
     obj.once=true; //it just initializes it
     //set center
      obj.rect = obj.getRect(_root.Level); //'_root.Level' parameter already acts like localToGlobal.
      obj.center= new flash.geom.Point(obj.rect.xMin+(obj.rect.xMax-obj.rect.xMin)/2,obj.rect.yMin+(obj.rect.yMax-obj.rect.yMin)/2);
      }

 //loop to check distance
 obj.dist_x = _root.Level.PLAYER._x-obj.center.x;
 obj.dist_y= _root.Level.PLAYER._y-obj.center.y;

 if (obj.dist_x>-550 and obj.dist_x<550)
   //do something
}