梅雨入りときいていたのに、今週はずっと晴れが続くようで、うれしいのやら悲しいのやら、トシたんです。
本日は少しばかり技術的な話題です。
描画領域をスマフォの画面いっぱいにして開発していました。
しかし、今まで描画領域を画面いっぱいにしているとゲームに必要な表示と広告が被ってしまうので、とても不親切になってしまいます。
一般に出回っているアプリでは画面の上や下に余白のような領域があって、そこに広告となるバナーなどが表示されるようになっているようです。
さて、libGDXではカメラオブジェクトなる、便利なオブジェクトがあります。
これは、自分で定義した座標系でゲームのキャラクターを表示するためなど使ったりします。
カメラオブジェクトを使わない場合は、スマフォ画面をX,Y座標で表した場合、左上隅の座標が原点(0, 0)となり、右下隅が(320, 480)などになります。
この右下隅の座標は、機種の解像度に依存するため、(480, 800)などであったりするかもしれません。
また、Y座標は上から下に向かって増加するため、キャラクターがジャンプする計算・描画を行う場合、上昇する際にはY座標が小さくなり、下降する際にはY座標が大きくなる、と直感的な感じがしません。
カメラオブジェクトを使用すると、左下隅が(0,0)で右上隅が(320, 480)と自由に定義することができます。
また、機種が違う場合も自動的に画像が伸縮されるため、解像度の違いを意識する必要がありません。
こんな便利なカメラオブジェクトですが、特に何も指定しないと画面いっぱいにしか描画することができません。
自分もハマったのですが、libGDXのWikiに解決策がありました。
OpenGLのAPIを直呼びしないといけないようですね。
備忘も兼ねて記載しておきます。
■解決策
-------
-------
// レンダリングの処理内で
GL10 gl = Gdx.graphics.getGL10();
gl.glViewport(0, 32, 320, 416); // API直呼びでビューポートを直接指定
// glViewport(int x, int y, int width, int height)
// →クリッピングを開始するx,y座標と幅、高さを指定
// 画面いっぱいの座標は(320, 480)に設定しており、
// (0, 32)から幅320,高さ416にすることで、
// 上と下に32ピクセルの余白ができる。
cam.update();
cam.apply(gl); // カメラオブジェクトに適用する
batch.setProjectionMatrix(cam.combined);
------------------------------------------------
見事に余白を作ることができました。
余白あり、なしの画面が単に伸縮されただけというのは気のせいです。
※今回、サンプル画像を載せるにあたり、いろいろサボりました。
ソースが汚いとか、わかりにくいとかいったことも気のせいです。
※ご指摘のほど、よろしくお願い致します。
これで、広告表示のコーディングをすればすべてがうまくいくはず？
まぁ、試して悪戦苦闘するようでしたら、記事にしたいと思います。
っていうか、AndEngineなどのゲームエンジンを使用すると、上記のようなことが簡単に実現できたりするのは内緒です
------------------------------------------------