UIキャンバスの設定

モバイルデバイスは、さまざまな画面サイズと解像度で提供されています。ZEPETO Worldでは、UnityのCanvasを使用してUI要素を表現するため、Unityには同じ制限があります。

以下のガイドは、できるだけ多くのデバイスにUIを表示するための中立的な設定を提供します。

したがって、すべてのモバイルデバイスに正確にフィットするUIを表現することはできませんが、ほとんどのデバイスでUI要素を類似の位置に配置することを目指しています。









レイアウトグループを通じてサブオブジェクトとして要素が追加されるたびに、右上のボタンエリアを自動的に左と右に整列させます。

SafeAreaの下に新しいオブジェクトを作成し、以下のコンポーネントを設定します。

ボタンエリアの子としてボタンオブジェクトを作成します。ボタンは自動的に整列され、以下の設定が適用されます。



今、ワールドをビルドしてモバイルデバイスで確認すると、次の画像に示すように右上隅にボタンが表示されます。





画面の左側にUI要素を設定するには、ステップ3で設定した右側の領域でいくつかの変更を行う必要があります。変更が必要な設定は以下の通りです。









右上のボタンエリアを設定し、レイアウトグループを通じてサブオブジェクトとして要素が追加されるたびに自動的に左右に整列させます。

SafeAreaの下に新しいオブジェクトを作成し、以下のコンポーネントを設定します。



ボタンエリアの子としてボタンオブジェクトを作成します。ボタンは自動的に整列され、以下の設定が適用されます。



今、世界を構築してモバイルデバイスで確認すると、次の画像に示すように右上隅にボタンが表示されます。





画面の左側にUI要素を設定するためには、ステップ3で設定した右側の領域にわずかな変更を加えるだけで済みます。変更が必要な設定は以下の通りです。