ペット育成ゲームの作り方#1｜縦画面のプロジェクトとUIのレイアウトを作ろう

ゲームを1本作ろうと思ったとき、最初に悩むのが「画面をどう作るか」ではないでしょうか。とくにスマホの縦画面は、機種によって縦横の比率や切り欠き（ノッチ）の位置がバラバラ・・・。今回はペット育成ゲームのシリーズの1回目として、縦画面のプロジェクトを作り、どの機種で見てもくずれないUIのレイアウトを作ってみたいと思います！

• シリーズの目次：ペット育成ゲームの作り方

今回作るもの

今回はまだ何も動きません。ゲームの「画面の土台」を作る回です。

• 縦画面（1080×1920）のプロジェクト
• 画面の上に「おなか」「きげん」のゲージとコインの枚数
• 真ん中にペットを置く場所
• 画面の下に「ごはん」「あそぶ」「ショップ」のボタン
• スマホの切り欠きにUIがかくれないようにする（Safe Area）

画像は、この回ではUnityで作れる仮の図形を使います。ペットの画像は次回差し替えます。

プロジェクトを作ろう

プロジェクトの確認

• Unityのバージョンは6.3 LTS
  • 記事作成時点では6000.3.22f1で確認しています
• テンプレートはUniversal 2D
• プロジェクト名は「PetRaising」
  • 名前は好きなものでOK

• プロジェクトを初めて開いたときに「URP Material upgrade」というダイアログが出たら、OKを押して進める
  • テンプレートのマテリアルを、今のURPに合わせてくれるだけです

テンプレートの違いについては、1-2 プロジェクトを作る時のテンプレート選択で詳しく紹介しています。

フォルダを作る

自分で作ったものと、テンプレートに最初から入っているものを分けるため、Assetsの中にシリーズ用のフォルダを作ります。

• Assets>Create>Folderで「PetRaising」フォルダを作る
• その中に次のフォルダを作る
  • Scenes
  • Scripts
  • Sprites
  • Fonts
• Assets/Scenes にある「SampleScene」を PetRaising/Scenes に移動して、名前を「Main」に変更

スライム

フォルダ分けはぶっちゃけ好みですが、シリーズが進むとファイルがどんどん増えるので、最初に決めておくと後がラクです

Gameビューを縦画面にする

作るゲームはスマホの縦画面なので、Gameビューも縦長にしておきます。

• Gameビュー上部の解像度のドロップダウン（最初は「Free Aspect」）をクリック
• 一番下の「+」を押して、次のように入力
  • Label：Portrait FHD
  • Type：Fixed Resolution
  • Width & Height：1080、1920
• OKを押して、作った「Portrait FHD」を選ぶ

Gameビューが縦長になればOK！

Canvasをスマホ向けに設定しよう

UIの土台になるCanvasを作ります。Canvasの基本は9-1 UnityのUI（Canvas）システムを知ろうで説明しています。

• Hierarchyで右クリック>UI (Canvas)>Canvas
  • CanvasとEventSystemが作られる
• Canvasを選択して、Canvas Scalerを次のように設定
  • UI Scale Mode：Scale With Screen Size
  • Reference Resolution：X 1080、Y 1920
  • Screen Match Mode：Match Width Or Height
  • Match：0

• Scale With Screen Size：画面の大きさに合わせてUI全体を拡大・縮小する
  • 1080×1920の画面で作ったレイアウトが、ほかの解像度でも同じ見た目になる
• Match：幅と高さのどちらに合わせるか
  • 0が幅、1が高さ。縦画面のゲームでは0（幅に合わせる）がオススメ
  • 横幅がいつも1080として扱われるので、横に並べたゲージやボタンがはみ出さない
  • 縦の長さは機種によって変わりますが、その分は真ん中のペットの場所が伸び縮みして吸収します

日本語のフォントを用意しよう

ボタンに「ごはん」と書きたいのですが、TextMeshProに最初から入っているフォントには日本語がありません。日本語のフォントアセットを作っておきましょう。

• Google Fontsから「Noto Sans JP」をダウンロード
• NotoSansJP-Regular.ttf を PetRaising/Fonts に入れる
• 右クリック>Create>TextMeshPro>Font Asset>SDF で「NotoSansJP-Regular SDF」を作る

詳しい手順は9-3 TextMeshProで美しいテキストを表示しようを見てください。

• 最初にTextMeshProの文字を作ると「TMP Importer」のウインドが出るので、Import TMP Essentialsを押しておく
• 作ったフォントアセットを、Project Settings>TextMesh Pro>Settings の Default Font Asset に設定しておくと、新しく作るテキストが最初から日本語対応になって便利です

画面を3つに分けて配置しよう

いよいよレイアウトです。画面を上・真ん中・下の3つに分けて、それぞれをアンカーで画面の端に固定します。

最終的なHierarchyは下のような形になります。

• Canvas
  • Background（背景）
  • SafeArea（切り欠きをよける枠）
    • StatusBar（上のゲージとコイン）
    • PetArea（真ん中のペットの場所）
    • ButtonBar（下のボタン）

背景を置く

• Canvasを右クリック>UI (Canvas)>Image で作り、名前を「Background」にする
• Rect Transformの左上のアンカーのボタンを押し、Alt（Macは Option）を押しながら右下の「stretch-stretch」を選ぶ
  • 画面いっぱいに広がる
• Image の Color を薄い水色（例：#CFEFFF）にする

背景は切り欠きの裏まで広げたいので、SafeAreaの外（Canvasの直下）に置いておきます。

SafeAreaの枠を作る

• Canvasを右クリック>Create Empty で作り、名前を「SafeArea」にする
• アンカーをBackgroundと同じく「stretch-stretch」にして、Left・Top・Right・Bottomをすべて0にする

中身は後でスクリプトを付けます。ゲージやボタンは、全部このSafeAreaの子にしていきます。

上・真ん中・下に分ける

SafeAreaの子に、空のオブジェクトを3つ作ります。

• StatusBar（上）
  • アンカー：top-stretch（Alt を押しながら選んで、位置も上に合わせる）
  • Height：260
• ButtonBar（下）
  • アンカー：bottom-stretch
  • Height：320
• PetArea（真ん中）
  • アンカー：stretch-stretch
  • Top：260、Bottom：320（上下のバーの分だけあける）

アンカーを「上」にしておくと、縦に長い機種でもStatusBarは画面の上にくっついたまま。真ん中のPetAreaだけが伸び縮みしてくれます。

ゲージ・コイン・ボタンを仮に置こう

ゲージを作る

ゲージは「背景の枠」と「中身」の2枚の画像で作ります。中身の Image Type を Filled にすると、Fill Amount（0〜1）でどこまで塗るかを変えられます。

• StatusBarの子に Image を作り、名前を「HungerGauge」にする
  • アンカー：top-left、Pos X：240、Pos Y：-60、Width：480、Height：60
  • Pivot：X 0、Y 1（左上を基準にする）
  • Color：濃いグレー（ゲージの枠）
• HungerGaugeの子に Image を作り、名前を「Fill」にする
  • アンカー：stretch-stretch、Left・Top・Right・Bottom：8
  • Source Image：UISprite など何か1つ設定しておく（空だと Image Type が選べません）
  • Image Type：Filled
  • Fill Method：Horizontal、Fill Origin：Left
  • Fill Amount：0.7（確認用）
  • Color：オレンジ
• HungerGaugeの子に Text – TextMeshPro を作り、名前を「Label」にする
  • アンカー：middle-left、Pivot：X 1、Y 0.5、Pos X：-20、Width：160、Height：60
  • テキスト：「おなか」、Font Size：44、Alignment：右寄せ
  • ゲージの左側に「おなか」と表示される

• HungerGaugeを複製（Ctrl+D）して「MoodGauge」にし、Pos Y：-160、Fill の Color をピンク、Labelのテキストを「きげん」にする

Fill Amountを動かすと、ゲージの長さが変わるのを確認しましょう。スクリプトからこの値を書き換えるのは#3で行います。

コインの表示

• StatusBarの子に空のオブジェクト「Coin」を作る
  • アンカー：top-right、Pos X：-60、Pos Y：-60、Width：300、Height：100、Pivot：X 1、Y 1
• Coinの子に Image を作り、名前を「CoinIcon」にする（コインのアイコンの代わり）
  • アンカー：middle-left、Pivot：X 0、Y 0.5、Width・Height：90
  • Source Image：Knob、Color：黄色
• Coinの子に Text – TextMeshPro を作り、名前を「CoinText」にする
  • アンカー：stretch-stretch、Left：110（アイコンの分あける）
  • テキスト：「0」、Font Size：64、Alignment：左寄せ

ボタンを並べる（Horizontal Layout Group）

ボタンを3つ手で並べるのは大変なので、Horizontal Layout Group に並べてもらいます。Layout Group の基本は9-6 Scroll ViewとLayout Groupで紹介しています。

• ButtonBarに Add Component>Horizontal Layout Group
  • Padding：Left 40、Right 40、Top 40、Bottom 60
  • Spacing：30
  • Child Alignment：Middle Center
  • Control Child Size：Width・Height にチェック
  • Child Force Expand：Width・Height にチェック
• ButtonBarの子に UI (Canvas)>Button – TextMeshPro を3つ作る
  • 名前：FeedButton・PlayButton・ShopButton
  • 子のテキスト：「ごはん」「あそぶ」「ショップ」、Font Size：56

3つのボタンが同じ大きさで横に並べばOK！

ペットを置く場所

• PetAreaの子に Image を作り、名前を「PetFrame」にする
  • アンカー：middle-center、Width・Height：600
  • Source Image：Knob（丸い画像）、Color：白

次回、ここにペットの画像とアニメーションを入れます。

Safe Areaに対応しようッ！

最近のスマホは、画面の上にカメラの切り欠き（ノッチ）があったり、下にホームバーがあったりします。そのまま置くと、ゲージやボタンが切り欠きに重なってしまいます・・・。

UnityのScreen.safeAreaで、切り欠きをよけた「安全な範囲」が取れるので、SafeAreaのオブジェクトをその範囲に合わせるスクリプトを作りましょう。

• PetRaising/Scripts に「SafeArea」スクリプトを作る

using UnityEngine;

// 付けたRectTransformを、画面のSafe Area（切り欠きをよけた範囲）に合わせる
[RequireComponent(typeof(RectTransform))]
public class SafeArea : MonoBehaviour
{
    private RectTransform rectTransform;
    private Rect lastSafeArea;
    private Vector2Int lastScreenSize;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        Apply();
    }

    private void Update()
    {
        // 画面の回転やSimulatorの機種切り替えで変わったときだけ計算し直す
        if (Screen.safeArea != lastSafeArea
            || Screen.width != lastScreenSize.x
            || Screen.height != lastScreenSize.y)
        {
            Apply();
        }
    }

    private void Apply()
    {
        Rect safeArea = Screen.safeArea;
        lastSafeArea = safeArea;
        lastScreenSize = new Vector2Int(Screen.width, Screen.height);

        // ピクセルの位置を、画面全体に対する割合（0〜1）にしてアンカーに入れる
        Vector2 anchorMin = safeArea.position;
        Vector2 anchorMax = safeArea.position + safeArea.size;
        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;

        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
        rectTransform.offsetMin = Vector2.zero;
        rectTransform.offsetMax = Vector2.zero;
    }
}

• Screen.safeArea
  • 切り欠きをよけた範囲が、ピクセル単位の Rect で取れる
• アンカーを割合で指定する
  • アンカーは「親の何割の位置か」なので、ピクセルを画面の幅と高さで割って0〜1にしている
  • offsetを0にすると、SafeAreaのオブジェクトがアンカーの範囲ぴったりになる
• Updateで変化を見ている
  • 毎フレーム計算すると無駄なので、値が変わったときだけ Apply() する

作ったスクリプトを、HierarchyのSafeAreaにドラッグ＆ドロップして付けます。

いろいろな画面サイズで確認！

最後に、Simulatorで機種を切り替えて、レイアウトがくずれないか確認しましょう。Simulatorの基本は2-6 ゲームビューとコンソールウィンドウの使い方で紹介しています。

• Gameビュー左上の「Game」を「Simulator」に切り替える
• 上部の機種のドロップダウンから、切り欠きのある「iOS Notch Device」を選ぶ
  • Unity 6.3では、機種は「iOS Notch Device」「Punch Hole Left」のような名前で入っています
• 再生（▶）して、StatusBarが切り欠きの下に下がることを確認
• 機種を「Punch Hole Left」（Androidによくある、左上にカメラの穴がある形）などに切り替えて、見え方を比べる

どの機種でもゲージが上、ボタンが下にくっついて、真ん中の丸い枠が収まっていれば成功です！

スライム

Safe Areaは再生中しか反映されないので、編集中はゲージが切り欠きに重なって見えます・・・

フェアリー

スクリプトはAwakeとUpdateで動くから、再生してから確認してね！

あとがき

今回は画面の土台だけでしたが、ここをしっかり作っておくと、後から部品を足してもくずれにくくなります。次回はペットの画像を表示して、ぴょこぴょこ動くアニメーションを付けたいと思います！