How To Properly Scale A Game On Android

for the sake of simplicity let's assume that I'm making a simple Pong clone game for Android. Let's assume that it would only be playable in the landscape mode. (ignore square phon

Solution 1:

I only played once with the draw canvas functions and then switched all to opengl but the logic stays the same (I think).

first issue you'll want to keep a ratio constant form one phone to the other. in my app I add a " black band" effect on each side. in onSurfaceChanged, you'll want to calculate a ratio, this ratio will allow you to determine how much space you have to remove on each side to keep a consistent aspect to your drawing. this will give you a delta X or Y to apply to all your draws the following code is something I adapted from the ogl version so it might need to be tweeked a bit

@OverridepublicvoidonSurfaceChanged(int w, int h){
   floatratioPhysicScreen= nativeScreenResoltionW/nativeScreenResoltionH;
   floatratioWanted= GameView.getWidth()/GameView.getHeight();
   if(ratioWanted>ratioPhysicScreen){
      newHeight = (int) (w*GameView.getHeight()/GameView.getWidth());
      newWidth = w;
      deltaY = (int) ((h-newHeight)/2);
     deltaX = 0;
   }else{
      newWidth = (int) (h/GameView.getHeight()*GameView.getWidth());
      newHeight = h;
      deltaX = (int) ((w-newWidth)/2);
      deltaY = 0;       
}

then you'll also want to be able to draw your pictures on the canvas by knowing there size as well on the canvas than there real size and that where the difference in between image.getWidth() (actual size of the picture) and a image.getScaledWidth(canvas) which give you the size of the element in dp which means how big it will appear on the screen) is important. look at the example underneath.

publicclassMainMenuViewextendsPixelRainView{
privateBitmapbmpPlay=null;
privatefloatplayLeft=0;
privatefloatplayRight=0;
privatefloatplayBottom=0;
privatefloatplayTop=0;

publicMainMenuView(Context context, AttributeSet attrs) {
    super(context,attrs);
}



@OverridepublicvoidunLoadBitmaps() {
    super.unLoadBitmaps();
    if(bmpPlay != null){
        bmpPlay.recycle();
        bmpPlay = null;
    }
}



@OverrideprotectedvoidonDraw(Canvas canvas) {
    super.onDraw(canvas);
    if(bmpPlay == null){
        bmpPlay = getBitmapFromRessourceID(R.drawable.play_bt);
        playLeft = (this.getWidth()-bmpPlay.getScaledWidth(canvas))/2; 
        playRight = playLeft + bmpPlay.getScaledWidth(canvas);
        playTop = (this.getHeight()-bmpPlay.getScaledHeight(canvas))/2;
        playBottom = playTop+bmpPlay.getScaledHeight(canvas);
    }
    canvas.drawBitmap(bmpPlay,playLeft, playTop, null);

    }       
}


@OverrideprotectedvoidonSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
}



@OverridepublicbooleanonTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_DOWN){
        floatx= event.getX();
        floaty= event.getY();
        //test central buttonif(x>playLeft && x<playRight && y<playBottom && y>playTop){
            Log.e("jason", "touched play");
            PixelRainView.changeView(R.layout.composedlayoutgroup);
        }
    returnsuper.onTouchEvent(event);
}
}

This should solve all your ratio problem cross plateforms I would suggest opengl because it will simplify your need for keeping a constant aspect but I guess its not an option ^^

Hope this helps you enough

Solution 2:

Use dips and paint the paddles instead of using PNGs

Solution 3:

I think that there are only 3 standard resolutions available (ldip, mdip, hdip) and you should have a resource folder for each of them.

http://developer.android.com/guide/practices/screens_support.html

If you manually scale your PNG's to fit each of the 3 available resolutions, the phone should load the specific resource folder in a transparent way