What I have are two MovieClips that I wish to move around the screen (one horizontally and the other vertically) my ideal scenario would be an android type animation like this...
TranslateAnimation moveDown;
if (isMainGuiVisible)
{
moveDown = new TranslateAnimation(0, 0, 0, 150);
}
else
{
moveDown = new TranslateAnimation(0, 0, 150, 0);
}
moveDown.setDuration(time);
moveDown.setFillAfter(true);
frmMainGUI_mc.startAnimation(moveDown);
Where it's doing this...
moveDown = new TranslateAnimation (fromXDelta, toXDelta, fromYDelta, toYDelta)
Edit: I basically need a way to animate a MovieClip moving off and on screen in the direction I tell it to. If that is like above where I'm telling it to move back and forth by 150 pixels that moves it off and on screen or some other way...
Use a tweening library. Greensock's TweenLite is a popular one but there are others (I use GTween generally).
Basic example from the TweenLite page:
TweenLite.to(mc, 1, {x:65, y:117});
Where mc is the display object to tween, 1 is the duration of the tween and x and y are the new x and y positions.
Related
The past few days I've been trying to figure out a display bug I don't understand. I've been working on a simple 2d platformer with box2d and orthogonal Tiled maps. So far so good, the physics work and using the b2d debug renderer I can assert proper player fixture and camera movement through the level.
Now next step I've tried to load textures to display sprites instead of debug shapes. This is where I stumble. I can load animations for my player body/fixture, but when I use the setCenter() method to center the texture on the fixture it is always out of center.
I've tried approaches via halving texture witdths and heights hoping to center the texture on the player fixture but I get the exact same off position rendering. I've played aorund with world/camera/screen unit coordinates but the misalignement persists.
I'm creating the player in my Player class with the following code.
First I define the player in box2d:
//define player's physical behaviour
public void definePlayer() {
//definitions to later use in a body
BodyDef bdef = new BodyDef();
bdef.position.set(120 / Constants.PPM, 60 / Constants.PPM);
bdef.type = BodyDef.BodyType.DynamicBody;
b2body = world.createBody(bdef);
//Define needed components of the player's main fixture
FixtureDef fdef = new FixtureDef();
PolygonShape shape = new PolygonShape();
shape.setAsBox(8 / Constants.PPM, 16 / Constants.PPM); //size of the player hitbox
//set the player's category bit
fdef.filter.categoryBits = Constants.PLAYER_BIT;
//set which category bits the player should collide with. If not mentioned here, no collision occurrs
fdef.filter.maskBits = Constants.GROUND_BIT |
Constants.GEM_BIT |
Constants.BRICK_BIT |
Constants.OBJECT_BIT |
Constants.ENEMY_BIT |
Constants.TREASURE_CHEST_BIT |
Constants.ENEMY_HEAD_BIT |
Constants.ITEM_BIT;
fdef.shape = shape;
b2body.createFixture(fdef).setUserData(this);
}
Then I call the texture Region to be drawn in the Player class constructor:
//define in box2d
definePlayer();
//set initial values for the player's location, width and height, initial animation.
setBounds(0, 0, 64 / Constants.PPM, 64 / Constants.PPM);
setRegion(playerStand.getKeyFrame(stateTimer, true));
And finally, I update() my player:
public void update(float delta) {
//center position of the sprite on its body
// setPosition(b2body.getPosition().x - getWidth() / 2, b2body.getPosition().y - getHeight() / 2);
setCenter(b2body.getPosition().x, b2body.getPosition().y);
setRegion(getFrame(delta));
//set all the boolean flags during update cycles approprietly. DO NOT manipulate b2bodies
//while the simulation happens! therefore, only set flags there, and call the appropriate
//methods outside the simulation step during update
checkForPitfall();
checkIfAttacking();
}
And my result is
this, facing right
and this, facing left
Update:
I've been trying to just run
setCenter(b2body.getPosition().x, b2body.getPosition().y);
as suggested, and I got the following result:
facing right and facing left.
The sprite texture flip code is as follows:
if((b2body.getLinearVelocity().x < 0 || !runningRight) && !region.isFlipX()) {
region.flip(true, false);
runningRight = false;
} else if ((b2body.getLinearVelocity().x > 0 || runningRight) && region.isFlipX()) {
region.flip(true, false);
runningRight = true;
}
I'm testing if either the boolean flag for facing right is set or the x-axis velocity of my player b2body has a positive/negative value and if my texture region is already flipped or not and then use libGDX's flip() accordingly. I should not be messing with fixture coords anywhere here, hence my confusion.
The coordinates of box2d fixtures are offsets from the position, the position isn't necessarily the center (although it could be depending on your shape definition offsets). So in your case i think the position is actually the lower left point of the box2d polygon shape.
In which case you don't need to adjust for width and height because sprites are also drawn from bottom left position. So all you need is ;
setPosition(b2body.getPosition().x , b2body.getPosition().y );
I'm guessing you flip the box2d body when the player looks left the position of the shape is now bottom right so the sprite offset of width/2 and height/2 is from the bottom right instead. So specifically when you are looking left you need an offset of
setPosition(b2body.getPosition().x - getWidth() , b2body.getPosition().y );
I think looking right will be fixed from this, but i don't know for sure how you handle looking left in terms of what you do to the body, but something is done because the offset changes entirely as shown in your capture. If you aren't doing some flipping you could add how you handle looking right to the question.
EDIT
It seems the answer was that the sprite wasn't centered in the sprite sheet and this additional space around the sprite caused the visual impression of being in the wrong place (see comments).
I have to move some pictures in my flash. So I have got a background image in my main MovieClip(which I get by Loader class). Inside the image I have rectangles. I'm going to put small image in this rectangle and move it. I need the small image slowly disappear while crossing the rectangle boundaries.
I tried to put another movieclip in rectangles and moved image in this movieclip. But while crossing the rectangle the image didnt disappear. The image just continued its motion without disappearing.
How can I make dissapearing of image while crossing rectangle boundaries?
Sorry for my English.
Get TweenLite. It's an animation "tweening" library that makes animation a breeze. There are others, but this is the one I use.
It depends on the methodology you employ to move and detect your overlaps of image & rectangles.
Let's imagine you have two squares (red square, and blue square) and you want red square to fade-out whenever it overlaps blue square. Is this controlled with the mouse, keyboard, or a pre-calculated move that performs a guaranteed eclipse? Is the fade a factor of the percentage of overlap, or a straight-up 0-to-100 timed transition the moment it comes in contact with blue square? It's not clear from the description you gave as to what exactly you expect your code to do. Please review SO's "Asking" section, to help improve the quality of your question so that you get the right answer you're looking for.
That said, here's one way you could resolve the issue:
import com.greensock.*;
// Create some sample red & blue squares
var red:Sprite = new Sprite();
red.graphics.beginFill(0xFF0000, 1);
red.graphics.drawRect(0, 0, 100, 100);
red.graphics.endFill();
addChild(red);
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateRed);
var blue:Sprite = new Sprite();
blue.graphics.beginFill(0x0000FF, 1);
blue.graphics.drawRect(0, 0, 100, 100);
blue.graphics.endFill();
addChild(blue);
blue.x = 200;
blue.y = 100;
var overlap:Boolean = false; // global state tracker
function updateRed(e:MouseEvent):void {
// Position the red square every time the mouse moves
red.x = stage.mouseX - red.width/2; // center relative to red square's dimensions
red.y = stage.mouseY - red.height/2;
if (red.hitTestObject(blue) && overlap != true) {
// Make sure we only animate on the initial overlap
overlap = true;
TweenLite.to(red, 1, {alpha:0});
} else if (red.hitTestObject(blue) == false && overlap) {
// And converserly, on the initial exit
overlap = false;
TweenLite.to(red, 1, {alpha:1});
}
}
I've seen examples where it's possible to tween a rectangle using scaleX, but I can't find anything that tweens a circle. (The "circle" that I'm drawing is actually a donut shape and I want the outside circle to be the one that is tweened).
var resizeVar:Number = 75;
myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), resizeVar);
myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), 75);
I tried doing it this way, but this throws lots of errors. I don't think it's possible this way:
TweenMax.to(myCircle, 2, {resizeVar:150, ease:SlowMo.ease.config(1, 0)});
Normally with display objects, it is done this way. It doesn't work with this "donut" though:
TweenMax.to(myRectangle, 2, {scaleX:1.5, scaleY:1.5 ease:SlowMo.ease.config(1, 0)});
So my question is, how can I tween the radius size of my outside circle?
EDIT: This is how the donut is being drawn, so the resizeVar needs to change from 75 to 150.
var myCircle:Sprite = new Sprite();
myCircle.graphics.beginFill(0xbbbbbb);
myCircle.graphics.drawCircle(0, 0, 150); // this is what should be tweening/scaling
myCircle.graphics.drawCircle(0, 0, 75); // this should stay the same
myCircle.graphics.endFill();
addChild(myCircle);
You should be able to tween the scaleX and scaleY properties of ANY displayObject:
var radius:Number = 75;
var myCircle:Sprite = new Sprite();
myCircle.graphics.beginFill(0);
myCircle.graphics.drawCircle(radius/2, radius/2, radius);
myCircle.graphics.endFill();
addChild(myCircle);
TweenMax.to(myCircle, 2, {scaleX:2, scaleY:2, ease:SlowMo.ease.config(1,0)});
EDIT
This is how you would scale just the outside of the donut:
var resizeObject:Object = { innerRadius:75, outerRadius:150 };
myCircle = new Sprite();
myCircle.graphics.beginFill(0xbbbbbb);
myCircle.graphics.drawCircle(0, 0, resizeObject.outerRadius);
myCircle.graphics.drawCircle(0, 0, resizeObject.innerRadius);
myCircle.graphics.endFill();
addChild(myCircle);
TweenMax.to(resizeObject, 2, {outerRadius:300, ease:SlowMo.ease.config(1,0), onUpdate:updateCircle, onUpdateParams:[resizeObject]});
function updateCircle(resizeObject:Object):void
{
myCircle.graphics.clear();
myCircle.graphics.beginFill(0xbbbbbb);
myCircle.graphics.drawCircle(0, 0, resizeObject.outerRadius);
myCircle.graphics.drawCircle(0, 0, resizeObject.innerRadius);
myCircle.graphics.endFill();
}
The reason it works with the rectangle is that you are changing the scale of the rectangle. When you change the scale Flash Player adjusts the scale of the display object containing your graphics.
However, with the circle, you are trying to change the radius of the circle. The radius is only used when you draw the circle with the drawCircle() method. One way to tween the radius is to use your tween to re-draw the circle many times (not that ideal).
To re-draw the circle with a new radius, you can use the onUpdate callback that TweenMax offers:
TweenMax.to(myCircle, 2, {resizeVar:150, onUpdate: onUpdateCallback, onUpdateParams: [resizeVar] });
function onUpdateCallback(radius):void
{
myCircle.graphics.drawCircle(myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), radius);
}
[Edit]
Note, I've added some params that you need to pass to the onUpdateCallback() function. I've also modified the function to add a radius parameter, and then use the radius when drawing the circle.
In regards to "trying to change the outside circle of this donut", this may be more complex. You might need to draw both circles of the donut. You might need to also call graphics.clear() before you draw the circle.
However, perhaps the answer from #Marcela is better, just change the scaleX and scaleY of the object you've already drawn. But if you need to get to a specified radius, the only way to do that is by re-drawing the circle(s) on each interval of the tween.
I need to scale a dynamic text box from it's center point using Tween class AS3.
Basically, I need to scale down to 50% in 300ms or so... and after finish I want to scale up again to 100% and stop animation.
I tried to set the center point to the center of the text box but it always scale from left.
Well I been trying hard to learn the basics of Tween class and I believe it's missing some good properties and methods like greensock!
Thank you.
title_txt.text = "Text";
var textScaleX:Tween;
var textScaleY:Tween;
title_txt.addEventListener(MouseEvent.MOUSE_OVER, scaleObj(1,2, 1));
function scaleObj(startUp:int, endUp:int, duration:int){
textScaleX = new Tween(title_txt, "scaleX", Strong.easeInOut, startUp, endUp, duration, true);
textScaleY = new Tween(title_txt, "scaleY", Strong.easeInOut, startUp, endUp, duration, true);
}
The oringin of a textfield will alwasy be in the top left corner. You could however calculate where the top left corner would be at 50% of the scale and the tween the x and y postion along with the scaleX and scaleY values.
A quick calculation of the 50% x and y would be something like:
50% x = 100% x position + (100% textfield width)/4
50% y = 100% y position + (100% textfield height)/4
Edit: Here is how this calculation in code would look like:
var targetScale:Number = .5; //scale 50% but any other scale would work here as well
var targetX:Number = title_txt.x + (title_txt.width - title_txt.width * targetScale) / 2;
var targetY:Number = title_txt.y + (title_txt.height - title_txt.height * targetScale) / 2;
I use my own tween class so I'm not sure how to implement this with either the Adobe tween class or the TweenLite class, but if you stick these numbers in any tween class the textfield (or any object with it's origin in the top left corner for that matter) will scale around is center point.
Number 1 tip for tweening:
Don't use adobe tweening classes: their functionalities are not good enough.
Use TweenLite: it's easier to use and has more features.
I realise it's not really an answer to your question, but others have already covered that.
I am programing a little game in flash,
and I am programing the animations of the character,
the character body is made of different objects, for example, I have an movie clip that is the head, Torso, Arms, Hands, Legs, etc,.
and I am making the animations with AS3, for example:
(only programed 1 leg movement)
public function walk(){
if(_etapa==5){
_etapa=1;
}
var etapa=_etapa;
switch(etapa){
case 1:
Animar(musloDer,22,RetomarAnimacion);
break;
case 2:
Animar(musloDer,0,RetomarAnimacion);
break;
case 3:
Animar(musloDer,-22,RetomarAnimacion);
break;
case 4:
Animar(musloDer,0,RetomarAnimacion);
break;
}
}
the walk animation haves 4 stages,
then I have the Animar function:
private function Animar(parte, valor, callback){
trace(direccion);
if(direccion=="SE" || direccion=="NO"){
valor=valor+45
valor=Math.abs(valor);
if(valor>180){
valor=360-valor;
}
if(valor<0){
}
_scaleY = (1-(valor)/90);
trace(_scaleY);
_rotation = 0;
}
else if(direccion=="N" || direccion=="S"){
_scaleY = .5;
_rotation = -valor;
}
_etapa++;
TweenLite.to(parte, 2.5, {rotation:_rotation, scaleY:_scaleY,ease:Linear.easeNone, onComplete:caminar});
}
that function moves the body part to the degrees that I want, It also decides what to do, the character can walk in 8 directions, front back, left right, and diagonals, and the character is showed from isometric view,. So the animation function decides what to do depending on the direction that the character is.
for example, if the character is walking right, viewed from lateral view, in that case rotating one leg 22 degrees is very simple, just LeftLeg.rotation = 22; great, but when the character is facing the camera, the leg rotation is not a rotation, is a change in scaleY property, for example, since the body is in isometric view, the scaleY of 1 leg in normal position is .5 (or 50%) when the leg is at 45º the scaleY is 1, and so on.
But I have a problem, because, for example if the LEG initial position is 0º (scaleY = 0.5) and I want to move it to 90º, 90º would be also scaleY = 0.5, so my function does nothing, it tweens from .5 to .5 (nothing), it should go from .5 to 0 and then to .5 again.
I hope someone understands my problem.
best,
Alvaro
Not sure if this is of any use...
http://dragonbones.github.com/index.html#.ULZvXqUq54F