Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm working on an android game where my sprite is controlled by a joystick. I just added an animation to my sprite with 4 rows and 3 columns:

enter image description here

Now I want to change the animation of my sprite depending on its direction. How do I calculate the direction of my sprite?

This is my controls:

public void update(MotionEvent event)
{
    // drag and drop
    if (event.getAction() == MotionEvent.ACTION_DOWN)
    {
        _dragging = true;
    }
    else if (event.getAction() == MotionEvent.ACTION_UP)
    {
        _dragging = false;
    }

    if (_dragging)
    {
        // get the pos
        _touchingPoint.x = (int) event.getX();
        _touchingPoint.y = (int) event.getY();
        // get the angle
        double angle = Math.atan2(_touchingPoint.y - inity,
                _touchingPoint.x - initx) / (Math.PI / 180);

        // move the beetle in proportion to how far
        // the joystick is dragged from its center
        _pointerPosition.y += Math.sin(angle * (Math.PI / 180))
                * (_touchingPoint.y / 70);
        _pointerPosition.x += Math.cos(angle * (Math.PI / 180))
                * (_touchingPoint.y / 70);
    }
}

And this is the drawing method in my sprite-class:

private void update()
{
    currentFrame = ++currentFrame % BMP_COLUMNS;
}

public void draw(Canvas canvas, int x, int y)
{
    update();
    int srcX = currentFrame * width;
    int srcY = 1 * height;
    Rect src = new Rect(srcX, srcY, srcX + width, srcY + height);
    Rect dst = new Rect(x, y, x + width, y + height);
    canvas.drawBitmap(bitmap, src, dst, null);
}
share|improve this question

2 Answers 2

up vote 1 down vote accepted

So, _pointerPosition seems to be the position of the sprite you're animating.

If the player was moving the sprite with say, arrow keys, you'd need to compute the sprite's direction upon moving it, and get the angle out of it using Math.atan2().

But here your lucky. You already have the sprite angle available in your controls update. Let's say you store it in a _spriteAngle variable:

        // (...)

        // get the angle
        double angle = Math.atan2(_touchingPoint.y - inity,
                _touchingPoint.x - initx) / (Math.PI / 180);

        // store it for animation
        _spriteAngle = angle;

        // (...)

Then you just pass it to your sprite drawing method, and choose your animation from it:

public void draw(Canvas canvas, int x, int y, double angle)
{
    update();

    int currentAnim = 0;

    // play "going up" animation if angle between 45° and 135°
    // (= in radians, PI/4 and 3PI/4)
    if ((angle > Math.PI * 0.25) && (angle <= Math.PI * 3.0 * 0.25))
    {
        animIndex = 3; // up
    }
    // play "going left" animation if angle between 135° and 225°
    // (= in radians, 3PI/4 and 5PI/4)
    else if ((angle > Math.PI * 3.0 * 0.25) && (angle <= Math.PI * 5.0 * 0.25))
    {
        animIndex = 1; // left
    }
    // play "going down" animation if angle between 225° and 315°
    // (= in radians, 5PI/4 and 7PI/4)
    else if ((angle > Math.PI * 5.0 * 0.25) && (angle <= Math.PI * 7.0 * 0.25))
    {
        animIndex = 0; // down
    }
    // play "going right" animation otherwise
    else
    {
        animIndex = 2; // right
    }

    int srcX = currentFrame * width;
    int srcY = currentAnim * height;
    Rect src = new Rect(srcX, srcY, srcX + width, srcY + height);
    Rect dst = new Rect(x, y, x + width, y + height);
    canvas.drawBitmap(bitmap, src, dst, null);
}
share|improve this answer
    
will try this 2morrow, but it looks like it should work :) EDIT: I am using a singe bitmap for my animation, with 3 rows and 4 columns, so there is no bitmapRight, bitmapleft, bitmapFront etc. Should I just change the bitmap im using and do it that way instead, because I can do that, or is there a solution for my case aswell? Just asking cus I want to learn about this stuff. –  iQue Aug 6 '12 at 20:07
    
I assumed those were different frames of one animation, so that you would have different animations stored in different bitmaps. Could you just post this bitmap in your question? –  Laurent Couvidou Aug 6 '12 at 21:02
    
I cant since I dont have enough rep on this site =/ But its fine, Ill divide the animation into smaller parts :) –  iQue Aug 8 '12 at 21:26
    
Well you don't have to actually, you could just tweak srcX or srcY depending on the animation to play, if your animation strips are stored vertically or horizontally, respectively. –  Laurent Couvidou Aug 8 '12 at 22:49
    
Im trying a bunch of different stuff atm. srcX changes perfectly but its the "1" in "1 * height" I need to change to something, but havnt figured out what yet, might be in a bit over my head here.. Never worked with animations b4. I've used this tutorial alot for my animation: edu4java.com/en/androidgame/androidgame5.html . But since he does not use controls in his game I cant really use his calculations for this. –  iQue Aug 8 '12 at 23:15

Use this to grab the angle

point start; // center of joystick 
point end;   // current touch position
double angle =  Math.atan2(start.Y - end.Y, end.X - start.X) * 180 / Math.PI;

Then use something like this to draw with rotation

canvas.save(); // so we can restore after we rotate
canvas.rotate(angle);
canvas.drawBitmap(...);
canvas.restore();

See also http://stackoverflow.com/questions/3587644/sprite-rotation-in-android-using-canvas-drawbitmap-i-am-close-what-am-i-doing

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.