Question

Moving objects in a 2D game is very easy in an Android 2D game, we know. Just use a SurfaceView and draw the single bitmaps with Canvas.drawBitmap().

But when it comes to a rolling object, e.g. a ball, how can I achieve this? Using transformation matrices results in very poor quality of the rendered bitmap, doesn’t it?

Answer 1

If you want to rotate a bitmap using Canvas based drawing, you don’t have much choice but to use transformation matrices, either through a Matrix you pass to Canvas.drawBitmap() or through transformation operations invoked directly on Canvas. And if you enable bitmap filtering with Paint.setFilterBitmap(boolean) the quality will be fine, at least by my standards.

Here is a complete example (Matrix-based) you can play around with, in particular looking at what difference it makes to have bitmap filtering on and off (or just look at my screenshots below). It doesn’t use SurfaceView though, just a normal custom View, but it should be easy to port to SurfaceView:

CustomView.java:

package com.example.android;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.TypedValue;
import android.view.View;

public class CustomView extends View {
    private static final float DP_PER_SECONDS = 10;

    private final float mBallCirfumference;
    private final float mBallRadius;
    private final Bitmap mBallBitmap;
    private final Paint mBallBitmapPaint;
    private final Matrix mBallTransformMatrix = new Matrix();
    private final float mPxPerSecond;

    private long mStartTime = -1;

    public CustomView(Context context) {
        super(context);
        final Resources res = getResources();

        // Load the ball bitmap. You probably want to use a better bitmap ;)
        mBallBitmap = BitmapFactory.decodeResource(res, R.drawable.icon);

        // We need the radius and circumference of the ball for our calculations
        // later
        mBallRadius = mBallBitmap.getHeight() / 2;
        mBallCirfumference = mBallRadius * 2 * (float)Math.PI;

        // Create ourself a paint object so we can adjust the quality of the
        // bitmap drawing
        mBallBitmapPaint = new Paint();

        // Significantly improves quality when drawing transformed bitmaps. Compare
        // with when you disable this, which is the default
        mBallBitmapPaint.setFilterBitmap(true);

        // Calculate speed of ball in pixels
        mPxPerSecond = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DP_PER_SECONDS,
                res.getDisplayMetrics());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // Calculate how far into the animation we are
        if (mStartTime == -1) {
            mStartTime = getDrawingTime();
        }
        long currentTime = getDrawingTime();
        float secondsPassed = (currentTime - mStartTime) / 1000.0f;

        // Calculate how far the ball has moved and how many degrees it has been
        // rotated as a consequence of the movement
        float movedDistance = secondsPassed * mPxPerSecond;
        float fullRotationsMade = movedDistance / mBallCirfumference;
        float rotationInDegrees = fullRotationsMade * 360;

        // Setup the transformation matrix to simulate a rolling ball
        mBallTransformMatrix.reset();
        mBallTransformMatrix.postRotate(rotationInDegrees, mBallRadius, mBallRadius);
        mBallTransformMatrix.postTranslate(movedDistance, 0);
        canvas.drawBitmap(mBallBitmap, mBallTransformMatrix, mBallBitmapPaint);

        // Force redraw so we get an animation
        invalidate();
    }
}

ExampleActivity.java:

package com.example.android;

import android.app.Activity;
import android.os.Bundle;

public class ExampleActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new CustomView(this));
    }
}

Sample screenshot with bitmap filtering enabled. If you run the example, the bitmap will roll like a ball (excuse my poor choice of ball graphics):

Sample screenshot with bitmap filtering disabled.