複数のフォーム ファクタと画面サイズをサポートする

Android デバイスは、さまざまなフォーム ファクタと画面サイズで利用できます。一般的なカテゴリには、次のようなものがあります。

  • スマートフォン
  • タブレット
  • テレビとテレビ セットトップ ボックス
  • Chrome 向けの Android ランタイムを搭載したノートパソコン

こうした多様性は、さまざまな画面解像度(多くの場合アスペクト比が異なる)でゲームがプレイされることを意味します。次に例を示します。

  • 横向き / アスペクト比 19:9(2280x1080)のスマートフォン
  • 横向き / アスペクト比 20:9(3200x1400)のスマートフォン
  • アスペクト比 16:9(1920x1080)の 1080p HD テレビ
  • アスペクト比 4:3(2048x1536)のタブレット

ゲームの設計では、こうした違いを考慮し、デバイスの画面解像度とアスペクト比に関係なく、ゲームが正しく表示されるようにする必要があります。

Defold の投影モード

Defold プロジェクトは、構成可能な基本解像度を備えています。この解像度は、game.project ファイルで、[Display] カテゴリの [Width] と [Height] フィールドを使用して設定します。

Defold プロジェクトのディスプレイ設定
図 1. Display プロジェクトの設定

Defold のデフォルトの動作は、基本解像度でレンダリングし、生成される画像をターゲット デバイスの実際の解像度に合わせてスケーリングすることです。Defold では、このモードを伸縮投影と呼びます。伸縮投影では、元のアスペクト比は維持されません。一部のゲームでは、このデフォルトの動作が視覚的に許容される場合があります。標準の Defold レンダリング スクリプトには、基本アスペクト比を維持する 2 つの追加投影オプション(固定フィット投影と固定投影)が含まれています。

次の例は、Defold エディタに表示された、基本解像度 480x272 を中心に設計されたサンプル プロジェクトを示しています。

次の例をご覧ください。

  • タイルマップ オブジェクトは、基本解像度の境界を囲むフレームを描画するために使用されています。
  • 2 つのスプライト オブジェクトと 1 つのテキスト オブジェクトが基本解像度の境界内にあります。
  • 4 つのスプライト オブジェクトが基本解像度の境界外にあり、それぞれが上、下、左、右に配置されています。
プロジェクト オブジェクト レイアウトの例
図 2. プロジェクト オブジェクト レイアウトの例

ディスプレイ解像度 960x544、つまり基本解像度のちょうど 2 倍でプロジェクトを実行すると、次のようになります。

デフォルトの伸縮投影を使用した、基本解像度の 2 倍のプロジェクトの例
図 3. デフォルトのストレッチ投影を使用した、基本解像度 2 倍のサンプル プロジェクト

伸縮投影

次の例は、デフォルトの伸縮投影(アスペクト比が維持されない)でウィンドウのサイズを変更した結果を示しています。

伸縮投影の使用により水平方向に押しつぶされたプロジェクトの例
図 4. 伸縮投影の使用中にサンプル プロジェクトが水平方向に押しつぶされた
伸縮投影の使用によりで水平方向に引き伸ばされたプロジェクトの例
図 5. 伸縮投影を使用して水平方向に引き伸ばされるサンプル プロジェクト

固定フィット投影

固定フィット投影モードでは、基本解像度のアスペクト比が維持されます。アスペクト比が維持されるので、スケーリングされた基本解像度ではカバーされない追加の画面領域が生じます。この余分な領域は、アスペクト比の差分の主軸に応じて、基本解像度の上下または左右のいずれかに存在します。固定フィット投影では、この領域を考慮して基本解像度が変更されます。この変更により、ゲームシーンの領域が追加され、基本解像度の範囲外にレンダリングされます。生成される画像は、ディスプレイ解像度に合わせてスケーリングされます。

次の例は、480x272 の基本解像度とアスペクト比が異なるディスプレイ解像度への固定フィット投影レンダリングを示しています。

固定フィット投影の使用により横長のアスペクト比で表示されたプロジェクトの例
図 6. 固定表示を使用して、アスペクト比がベース アスペクト比よりも大きいアスペクト比のディスプレイに投影した例
固定フィット投影の使用により縦長のアスペクト比で表示されたプロジェクトの例
図 7. 固定投影を使用し、基本アスペクト比よりもアスペクト比が横長のディスプレイに投影している例

固定投影

固定投影モードでは、基本解像度のアスペクト比が維持され、指定されたズーム倍率で基本解像度がスケーリングされます。ディスプレイ解像度とズーム倍率に応じて、基本解像度領域のサブセットまたはスーパーセットが表示されます。

次の例は、644x408 の画面解像度と、1 倍および 2 倍のズーム倍率をそれぞれ使用した固定投影モードを示しています。

固定投影を使用した解像度 644x408 / ズーム倍率 1 倍のプロジェクトの例
図 8. 固定投影、1 倍ズーム ファクタ、644x408 のディスプレイ解像度で投影されたサンプル プロジェクト
固定投影を使用した解像度 644x408 / ズーム倍率 2 倍のプロジェクトの例
図 9. 画面解像度 644x408、固定投影、ズーム倍率 2 倍のサンプル プロジェクト

投影モードの変更

適切なメッセージをレンダラに送信して、アクティブな投影モードを実行時に切り替えることができます。このメッセージは、標準の Defold メッセージ システムを使用して送信されます。すべての投影モード メッセージには、近接平面と遠方平面の Z 値を指定するパラメータが含まれています。

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

Defold のレンダリング スクリプト

Defold のレンダリング動作は、レンダリング スクリプトと呼ばれる特殊なスクリプト ファイルによって制御されます。レンダリング スクリプトは、他の Defold Engine スクリプトと同様に、Lua プログラミング言語で記述されています。プロジェクトの作成時にデフォルトのレンダリング スクリプトが組み込まれますが、これをカスタム レンダリング スクリプトに置き換えることもできます。

伸縮投影、固定フィット投影、固定投影の各モードは、デフォルトのレンダリング スクリプトの機能です。いずれかのモードを使用すると、レンダリング スクリプトは、ゲーム オブジェクトのレンダリングで使用される 2D 直交投影マトリックスを生成します。このマトリックスの構成は、使用される投影モードによって異なります。

カスタム レンダリング スクリプトを使用すると、投影マトリックスの構成を拡張または変更できます。アスペクト比が異なるレターボックスやピラーボックスなど、デフォルトのスクリプトではサポートされていない機能も、カスタム レンダリング スクリプトで実装できます。

オープンソースのデベロッパーは、デフォルトの Defold スクリプトより多くの機能を備えたレンダリング スクリプトとカメラ パッケージを作成しています。よく使われる 2 つのパッケージに、RenderCamDefold-Orthographic があります。

Defold の GUI システム

Defold には、GUI シーンファイルのコンセプトに基づく GUI システムがあります。GUI シーンファイルには、画像やテキストなどの個々の UI 要素を定義するノードというオブジェクトが含まれています。

GUI シーンファイルは、Defold ゲーム オブジェクトにコンポーネントとして追加できます。GUI シーンとそれに含まれるノードは個別にレンダリングされ、通常のゲーム オブジェクトとは動作が若干異なります。こうした違いがあるため、GUI シーンによる複数のディスプレイ解像度のサポートには、GUI システム座標と GUI ノードのピボットおよびアンカーに関連する追加の考慮事項があります。

GUI システム座標

通常の Defold ゲーム オブジェクトは、世界空間における自身の座標を指定します。カメラ オブジェクトは世界空間を画面空間に変換し、カメラの現在の仮想ビューに入り込むゲーム オブジェクトを表示します。GUI システムは、GUI システム固有の別個のカメラを使用します。GUI シーンに属するノードは、世界空間座標ではなく画面空間座標を使用します。ディスプレイ解像度が GUI ノードのレイアウトに使用されたプロジェクトの基本解像度と異なる場合、画面の端または親ノードの端に対して異なるマージンがノードに設定されることがあります。Defold には、ディスプレイ解像度の違いを考慮して GUI レイアウト調整を行う方法が複数あります。

GUI ノードのピボットとアンカー

GUI ノードは、X Anchor プロパティと Y Anchor プロパティを使用して、垂直方向または水平方向の端に固定できます。

  • ノードに親ノードがある場合、アンカーは親ノードの端に配置されます。
  • ノードに親ノードがない場合、アンカーは画面の端に配置されます。

次の図は、2 つの GUI ノード(左下隅と右上隅のコントローラ アイコン)を含むサンプルシーンを示しています。どちらのノードでも、X アンカーY アンカーNone に設定されています。

GUI 要素を含むサンプルシーン
図 10. GUI 要素を含むサンプルシーン

アンカーなしでディスプレイのサイズを変更する場合、コントローラ アイコンは基本解像度に対する自身の位置を維持します。

アンカーが None に設定された GUI 要素を含む、サイズ変更されたサンプルシーン
図 11. アンカーが None に設定された GUI 要素を含む、サイズ変更されたサンプルシーン

左下ノードの Y アンカーBottom に設定され、右上のノードの Y アンカーTop に設定されている場合、GUI ノードは適切な画面の端に固定されます。

アンカーが端に設定された GUI 要素を含む、サイズ変更されたサンプルシーン
図 12. アンカーが Edges に設定された GUI 要素を含む、サイズ変更されたサンプルシーン

GUI ノードの Pivot プロパティを使用すると、その画面空間座標の Position プロパティに対応する、ノードの境界四角形上の点を指定できます。GUI ノードのデフォルトは Center 設定であり、その位置の点が境界四角形の真中央に配置されます。その他の可能な [Pivot] 設定には、4 つの基本方向と 4 つの対角線があります。Pivot プロパティを X Anchor プロパティおよび Y Anchor プロパティと組み合わせて使用すると、マージン スペースの指定を簡素化できます。

次の例では、左下のコントローラ アイコン GUI ノードは Position0,0 で、PivotCenter に設定されています。

[Pivot] が [Center] に設定された GUI ノード
図 13. [Pivot] が Center に設定された GUI ノード

[Pivot] を [South West] に変更すると、次のように調整されます。

[Pivot] が [South West] に設定された GUI ノード
図 14. [Pivot] が South West に設定された GUI ノード

GUI ノードのモード調整

ディスプレイ解像度がベース プロジェクトの解像度と異なる場合、GUI ノードのサイズを変更できます。Adjust Mode プロパティは、ノード コンテンツのスケーリング動作を制御します。調整モードには、FitZoomStretch の 3 つの設定があります。

Fit

Fit 設定では、ノード コンテンツのアスペクト比が維持されます。コンテンツは、サイズ変更された境界四角形の幅または高さのいずれかと一致するようにスケーリングされます。差分が小さい軸が選択されます。これにより、コンテンツは元のアスペクト比で境界四角形内に収まります。

Zoom

Zoom 設定でも、ノード コンテンツのアスペクト比が維持されます。Fit 設定と同様に、Zoom は、ノードのサイズを変更した境界四角形の幅または高さに合わせて、コンテンツをスケーリングします。Fit とは異なり、Zoom は元のサイズとの差が大きい軸を一致ターゲットとして使用します。つまり、スケーリングされたコンテンツが境界四角形からオーバーフローする可能性があります。

次の例は、モード調整の設定が異なる 2 つの GUI ノードを示しています。左下のコントローラ アイコンの [モード調整] は Fit で、右上のコントローラ アイコンの [モード調整] は Zoom です。

モード調整の設定が異なる 2 つの GUI ノード
図 15. Adjust Mode の設定が異なる 2 つの GUI ノード

Stretch

Stretch 設定では、ノードのサイズ変更された境界四角形と正確に一致するようにノード コンテンツがスケーリングされます。元のアスペクト比は維持されません。

GUI レイアウト

Defold には、GUI レイアウトをさまざまな画面解像度に適応させる代替手段として、レイアウトがあります。レイアウトを GUI シーンに追加すると、デフォルトの GUI ノード プロパティをオーバーライドできます。レイアウトは特定の画面解像度に関連付けられています。使用可能なレイアウトが複数ある場合、Defold は実際の画面解像度に最も近いレイアウトを選択します。レイアウトにより、GUI ノードで使用されるデフォルトの位置、サイズ、スケール、グラフィック リソースをオーバーライドできます。

参考情報