もうちょっと なんとか…

アプリの画面の大きさは def.hの SCREEN_WIDTH、SCREEN_HEIGHTで定義され、実際のAndoroid端末の画面に合わせて拡大・縮小されて表示されます。しかし、アプリの定義と端末で画面の比率が合っているとは限りません。

例えばアプリの画面が3:4に対して端末の画面が9:16の縦長の場合、描画の上下はカットされ黒い帯となります。

今回は、端末に合わせるための画面サイズと、内部で描画できる画面のサイズを別に持って、画面比率の違う端末で黒い部分にも絵が出せるようにしてみます。


例えば、サンプルの定義
def.h

static const int	SCREEN_WIDTH  = 640,					// 画面サイズ
					SCREEN_HEIGHT = 960;
static const int	LIMIT_WIDTH   = 640,					// 表示画面サイズ
					LIMIT_HEIGHT  = 1136;

この場合、アプリの内部での画面範囲は (-640/2, -1136/2) - (640/2, 1136/2)になりますが、640x960の端末では (-640/2, -960/2) - (640/2, 960/2)の範囲しか描画されません。
上下88ドットずつ、端末の画面サイズによって描画されたりされなかったりする部分となります。
640:960より横長の端末では、縦960ドット分が描画され左右に黒い帯ができます。

このように仕様を決めてしまえば、変更点は多くありません。

Renderer.h

	static SRect			screen_rect;				// 画面解像度
	static SRect			limit_rect;					// 表示画面解像度

クラス sys::Rendererに表示画面解像度を追加しています。

Renderer.cpp

	if ( width*SCREEN_HEIGHT < height*SCREEN_WIDTH ) {		// 横長（上下カット）
		screen_rect.w = width;
		screen_rect.h = width*SCREEN_HEIGHT/SCREEN_WIDTH;
		limit_rect.w  = width*LIMIT_WIDTH/SCREEN_WIDTH;
		limit_rect.h  = width*LIMIT_HEIGHT/SCREEN_WIDTH;
	}
	else {													// 縦長（左右カット）
		screen_rect.w = height*SCREEN_WIDTH/SCREEN_HEIGHT;
		screen_rect.h = height;
		limit_rect.w  = height*LIMIT_WIDTH/SCREEN_HEIGHT;
		limit_rect.h  = height*LIMIT_HEIGHT/SCREEN_HEIGHT;
	}
	screen_rect.x = (width - screen_rect.w)/2;
	screen_rect.y = (height - screen_rect.h)/2;
	limit_rect.x  = (width - limit_rect.w)/2;
	limit_rect.y  = (height - limit_rect.h)/2;

画面初期化部分です。
フレームバッファは表示画面の大きさ LIMIT_WIDTH、LIMIT_HEIGHTに合わせます。
画面の拡大率は今まで同様 SCREEN_WIDTH、SCREEN_HEIGHTで計算して、limit_rectをそこに合わせるようにします。

	// フレームバッファテクスチャ描画
	glBindFramebuffer(GL_FRAMEBUFFER, 0);
	glViewport(limit_rect.x, limit_rect.y, limit_rect.w, limit_rect.h);

描画部分です。
ビューポートを limit_rectで設定しています。
描画ではもう screen_rectの方は使用していないのですが、タッチパネルの座標変換で使用しているので screen_rect自体は残しています。


サンプルでは、今まで640x960だった背景を 640x1136のものに差し替えています。

上下の追加部分をわかりやすく模様にしています。


※ビー玉の画像は「かわいいフリー素材集 いらすとや」から使わせていただきました。どうもありがとうございます。

プロジェクト一式は、こちらです。