はじめに

ゲームとグラフィックスをさまざまな画面サイズに合わせる際には、いくつか考慮することがあります。

• 低解像度のピクセルパーフェクトなグラフィックスを使うレトロゲームですか。それとも、HD 品質のグラフィックスを使う現代的なゲームですか？
• さまざまな画面サイズでフルスクリーン表示してプレイする際に、ゲームはどのように動作するべきですか？
  • 高解像度の画面では、プレイヤーにゲームのコンテンツをより広く見せるべきですか。それとも、常に同じコンテンツが表示されるように、グラフィックスのズームを自動調整するべきですか？
• game.project で設定したアスペクト比と異なる場合、ゲームはどのように対応するべきですか？
  • プレイヤーにゲームのコンテンツをより広く見せるべきですか。それとも、黒い帯を表示するべきでしょうか。あるいは、GUI 要素のサイズを変更するべきでしょうか？
• どのようなメニューや画面上の GUI コンポーネント（GUI component）が必要で、それらをさまざまな画面サイズや画面の向きにどのように合わせるべきですか？
  • 画面の向きが変わったとき、メニューやその他の GUI コンポーネントのレイアウトを変更するべきですか。それとも、向きにかかわらず同じレイアウトを維持するべきですか？

このマニュアルでは、これらの考慮事項の一部を取り上げ、推奨される方法を紹介します。

コンテンツの描画方法を変更する

Defold のレンダースクリプト（render script）を使うと、レンダリングパイプライン全体を完全に制御できます。レンダースクリプトは、何をどのように描画するかと、その順序を決定します。レンダースクリプトのデフォルトの動作では、ウィンドウのサイズが変更されても、実際の画面解像度が一致しなくても、game.project ファイルの幅と高さで定義された同じピクセル領域を常に描画します。そのため、アスペクト比が変わるとコンテンツが引き伸ばされ、ウィンドウサイズが変わると拡大または縮小されます。ゲームによってはこれで問題ないかもしれません。しかし多くの場合、画面解像度やアスペクト比が異なるときには表示するゲームコンテンツの範囲を広げたり狭めたりするか、少なくともアスペクト比を変えずにコンテンツを拡大縮小したいはずです。このデフォルトの引き伸ばし動作は簡単に変更できます。変更方法について詳しくは、レンダリングのマニュアルを参照してください。

レトロ/8ビットのグラフィックス

レトロ/8ビットのグラフィックスとは、古いゲーム機やコンピューターの、低解像度で色数の限られたグラフィックスのスタイルを再現したゲームを指すことがよくあります。たとえば、Nintendo Entertainment System（NES）の画面解像度は 256x240、Commodore 64 は 320x200、Gameboy は 160x144 でした。いずれも現代の画面に比べるとごく小さなサイズです。このようなグラフィックスのスタイルと画面解像度を再現したゲームを、現代の高解像度画面でプレイできるようにするには、グラフィックスを数倍に拡大する必要があります。簡単な方法の1つは、再現したい低解像度とスタイルですべてのグラフィックスを制作し、レンダリング時に拡大することです。Defold では、レンダースクリプトを使い、固定投影（Fixed Projection）に適切なズーム値を設定することで簡単に実現できます。

このタイルセットとプレイヤーキャラクター（出典）を、解像度 320x200 の8ビットのレトロゲームに使ってみましょう。

game.project ファイルで 320x200 を設定してゲームを起動すると、次のようになります。

現代の高解像度画面では、ウィンドウが非常に小さくなります！ウィンドウサイズを4倍の 1280x800 にすると、現代の画面により適した大きさになります。

ウィンドウサイズは適切になりましたが、グラフィックスにも対処する必要があります。小さすぎて、ゲーム内で何が起きているのかとてもわかりにくい状態です。レンダースクリプトを使って、ズームした固定投影を設定できます。

msg.post("@render:", "use_fixed_projection", { zoom = 4 })

結果は次のようになります。

よくなりました。ウィンドウとグラフィックスはどちらも適切なサイズですが、よく見ると明らかな問題があります。

グラフィックスがぼやけています！これは、GPU がレンダリングする際に、拡大されたグラフィックスをテクスチャ（texture）からサンプリングする方法が原因です。game.project ファイルの Graphics セクションでは、デフォルトの設定が linear になっています。

これを nearest に変更すると、求めている結果が得られます。

これで、レトロゲーム向けの、くっきりした ピクセルパーフェクト なグラフィックスになりました。ほかにも、game.project でスプライト（sprite）のサブピクセルを無効にするなど、考慮することがあります。

Subpixels オプションを無効にすると、スプライトが半ピクセルずれた位置に描画されることはなくなり、常に最も近い整数ピクセル位置にスナップします。

高解像度のグラフィックス

高解像度のグラフィックスを扱う場合、プロジェクトとコンテンツの設定には、レトロ/8ビットのグラフィックスとは異なる取り組み方が必要です。ビットマップグラフィックスでは、高解像度画面で 1:1 のスケールで表示したときにきれいに見えるようにコンテンツを作成する必要があります。

レトロ/8ビットのグラフィックスと同様に、レンダースクリプトを変更する必要があります。この場合は、元のアスペクト比を維持しながら、画面サイズに合わせてグラフィックスを拡大縮小するようにします。

msg.post("@render:", "use_fixed_fit_projection")

これにより、game.project ファイルで指定した範囲のコンテンツが常に表示されるように、画面のサイズが調整されます。アスペクト比が異なるかどうかによっては、上下または左右に追加のコンテンツが表示されることがあります。

game.project ファイルの幅と高さは、ゲームコンテンツを拡大縮小せずに表示できるサイズに設定することをお勧めします。

High DPI 設定と Retina ディスプレイ

高解像度の Retina ディスプレイもサポートしたい場合は、game.project ファイルの Display セクションで有効にできます。

この設定により、対応するディスプレイでは高 DPI のバックバッファーが作成されます。ゲームは Width と Height の設定値の2倍の解像度でレンダリングされますが、スクリプトやプロパティで使用する論理解像度は引き続きこの設定値のままです。つまり、すべての寸法は変わらず、1x のスケールでレンダリングされるコンテンツの見た目も同じです。ただし、高解像度の画像をインポートして 0.5x に縮小すると、画面上では高 DPI で表示されます。

自動調整される GUI の作成

GUI コンポーネントを作成する仕組みは、いくつかの基本構成要素であるノード（node）を中心に構築されています。一見すると単純すぎるように思えるかもしれませんが、ボタンから複雑なメニューやポップアップまで、さまざまなものを作成できます。作成した GUI は、画面サイズや向きの変化に自動で対応するように設定できます。たとえば、ノード を画面の上端、下端、左右の端に固定し、ノードのサイズを維持するか、引き伸ばすことができます。ノード 間の関係やサイズ、外観も、画面サイズや向きが変わったときに変更されるよう設定できます。

ノード のプロパティ

GUI 内の各 ノード には、ピボット点（pivot point）、水平方向と垂直方向のアンカー（anchor）、および調整モード（adjust mode）があります。

• ピボット点は、ノードの中心点を定義します。
• アンカーモードは、シーンの境界または親ノードの境界が物理的な画面サイズに合わせて引き伸ばされたときに、ノードの垂直方向と水平方向の位置がどのように変わるかを制御します。
• 調整モードの設定は、シーンの境界または親ノードの境界が物理的な画面サイズに合わせて調整されたときに、ノードに何が起こるかを制御します。

これらのプロパティについて詳しくは、GUI のマニュアルを参照してください。

レイアウト

Defold は、モバイルデバイスで画面の向きが変わったときに自動調整される GUI をサポートしています。この機能を使うと、さまざまな画面サイズの向きやアスペクト比に対応する GUI を設計できます。特定のデバイスモデルに合わせたレイアウトを作成することもできます。この仕組みについて詳しくは、GUI レイアウトのマニュアルを参照してください。

さまざまな画面サイズでのテスト

Debug メニューには、特定のデバイスモデルの解像度またはカスタム解像度をシミュレートするオプションがあります。アプリケーションの実行中に Debug->Simulate Resolution を選択し、リストからデバイスモデルを1つ選べます。実行中のアプリケーションのウィンドウサイズが変更され、異なる解像度やアスペクト比でゲームがどのように見えるかを確認できます。