1
\$\begingroup\$

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);
}
\$\endgroup\$
1
\$\begingroup\$

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);
}
\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – Green_qaue Aug 6 '12 at 20:07
  • \$\begingroup\$ 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? \$\endgroup\$ – Laurent Couvidou Aug 6 '12 at 21:02
  • \$\begingroup\$ I cant since I dont have enough rep on this site =/ But its fine, Ill divide the animation into smaller parts :) \$\endgroup\$ – Green_qaue Aug 8 '12 at 21:26
  • \$\begingroup\$ 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. \$\endgroup\$ – Laurent Couvidou Aug 8 '12 at 22:49
  • \$\begingroup\$ 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. \$\endgroup\$ – Green_qaue Aug 8 '12 at 23:15
0
\$\begingroup\$

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 https://stackoverflow.com/questions/3587644/sprite-rotation-in-android-using-canvas-drawbitmap-i-am-close-what-am-i-doing

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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