Tag 15 – Letterbox

veröffentlicht am: 15. Dezember 2012

day15Manchmal möchte man, dass das Spiel immer das selbe Bildverhältnis behält und deshalb schwarze Ränder am Bildschirm erscheinen. Diese Ränder nennt man letterbox.

Ich folge hierbei der Idee von blog.arcamara.es.

Zuerst müssen wir definieren, welche Bildschirmgröße unser Spiel hat:

Rectangle viewport;
float virtualWidth=800;
float virtualHeight=480;
float virtualAspectRatio=virtualWidth/virtualHeight;

In create() erstellen wir dann die Kamera und ein Rechteck für den Bereich, der vom echten Fenster gefüllt werden soll.

camera=new OrthographicCamera(virtualWidth,virtualHeight);
viewport=new Rectangle();

In der resize()-Methode berechnen wir dann die Breite der schwarzen Balken und setzen das Viewport-Recheck dementsprechend:

@Override
public void resize(int width, int height) {
	float aspectRatio=width/(float)height;
	
	float scale=1;
	float cropX=0;
	float cropY=0;
	
	// calculate scale and size of the letterbox
	if(aspectRatio > virtualAspectRatio){
		scale = (float)height/(float)virtualHeight;
		cropX = (width - virtualWidth*scale)/2f;
	}else if(aspectRatio < virtualAspectRatio){
		scale = (float)width/(float)virtualWidth;
		cropY = (height - virtualHeight*scale)/2f;
	}else{
		scale = (float)width/(float)virtualWidth;
	}

	// set the viewport
	viewport.set(cropX,cropY,virtualWidth*scale,virtualHeight*scale);
}

In render() müssen wir nach dem Leeren des Bildschirms den Viewport ändern:

Gdx.gl.glClearColor(0,0,0, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

// set viewport
Gdx.gl.glViewport((int) viewport.x, (int) viewport.y,
                          (int) viewport.width, (int) viewport.height);

letterbox1letterbox2
Nun sind die schwarzen Balken am Rand schon da, allerdings haben wir noch ein Problem, wenn wir die Touch-Position abfragen.
Beim projezieren müssen wir jetzt unseren viewport mitgeben. (In diesem Beispiel fragen wir zusätzlich vorher noch ab, ob die Maus sich nicht über den schwarzen Balken befindet):

if(Gdx.input.isTouched()){
	if(Gdx.input.getX()>viewport.x&&Gdx.input.getX()viewport.y&&Gdx.input.getY()

geposted in libgdx

Eine Antwort zu “Tag 15 – Letterbox”

  1. Danox sagt:

    thank you very much!!!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.