絶対に完成させるゲーム制作#1｜タイトルとエンディングだけで、ゲームを完成させよう

ゲームを作り始めたのに、気づいたら途中で止まっている・・・。初めてのゲーム作りでは、そんなことがよくあります。このシリーズでは、ちょっと変わった進め方で、毎回エンディングまで遊べる「完成したゲーム」を作りながら、少しずつ中身を足していきます。今回は1回目として、タイトルとエンディングの2つの画面だけで、ゲームを完成させてみたいと思います！

• シリーズの目次：絶対に完成させるゲーム制作

今回作るもの

• タイトル画面：ゲームの名前がふわふわ動き、スライムちゃんが弾んでいる。「はじめる」のボタン
• エンディング画面：スライムちゃんが喜んでいて、「おうちに かえれた！」。「タイトルへ」のボタン
• 「はじめる」を押すと、すぐにエンディング。「タイトルへ」でタイトルに戻る
• 最後にビルドして、Windowsのゲーム（.exe）で遊ぶ

作るスクリプトは3つです。

なぜ「始まりと終わり」から作るの？

ゲーム作りでよくあるのは、「キャラクターを動かす」「敵を出す」と、遊ぶ部分から作り始めるやり方です。楽しいところから作れるのですが、やることがどんどん増えて、タイトルやエンディングにたどり着く前に止まってしまいがちです。

このシリーズでは、逆の順番で作ります。

• 最初に、始まり（タイトル）と終わり（エンディング）を作って、ゲームを完成させる
• 次の回からは、その間に中身をはさんでいく（ステージ → 壁 → 星 → おばけ…）
• どの回も、最後は「完成チェック」と「ビルド」で終わる

こうしておくと、どの回で手を止めても、手元には遊べるゲームが1本あります。「ゲームって、こうやって完成するんだ」という感覚を、毎回つかめるのがポイントです。

慣れた人は、毎回エンディングまで作り直したりはしません。このやり方は「完成させるイメージ」をつかむための練習です。何本か作り終えたら、自分のやりやすい順番で作ってOKです。

スライム

はじめたら、すぐ終わるゲーム・・・？それって、ゲームなんですか？

フェアリー

始まって、終わって、またタイトルに戻れる。それだけで、もう立派な「完成」なの！あとは中身をはさんでいくだけだから、途中で止まらなくなるよ

プロジェクトを作ろう

• Unity Hubで新しいプロジェクトを作る
  • エディターバージョン：Unity 6.3 LTS（記事作成時点では6000.3.22f1で確認しています）
  • テンプレート：Universal 2D
  • プロジェクト名：CompleteGame（好きな名前でOK）

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

プロジェクトが開いたら、先にフォルダとシーンを整えておきます。

• ProjectウインドのAssetsで右クリック>Create>Folderで「CompleteGame」を作る
  • 自分で作ったものは全部この中に入れるので、テンプレートに最初から入っているものと混ざりません
• その中に、ScenesとScriptsの2つのフォルダを作る
• Assets>Scenes>SampleSceneをTitleにリネームして、CompleteGame>Scenesに移動する

素材を取り込もう

シリーズで使う素材は、下のリンクからダウンロードしてください。全10回で使う絵（スライムちゃん・背景・星・おばけ・扉など）と、日本語のフォントが入っています。

• CompleteGameAssets.zip（約17MB）

取り込み方は2つあります。

• かんたん：zipの中のCompleteGameAssets.unitypackageをダブルクリック（またはAssets>Import Package>Custom Package…）
  • 絵の設定が入った状態で入るので、次の「絵の設定」は読むだけでOKです
• 自分で入れる：zipの中のCompleteGameフォルダを、UnityのAssetsにドラッグ＆ドロップ
  • 今作ったCompleteGameフォルダに、Sprites・Fonts・Audioが足されます

unitypackageをダブルクリックすると、下図のウインドが出ます。すべてにチェックが入ったまま、右下のImportを押します。

素材は自由に使ってOKです（クレジット不要。作ったゲームの公開・販売にも使えます）。素材そのものの再配布はご遠慮ください。

絵の設定

• Spritesフォルダの中の画像を全部選ぶ（各フォルダで1枚目をクリック → 最後をShift＋クリック）
• Inspectorで次のように設定して、Apply
  • Texture Type：Sprite (2D and UI)
  • Sprite Mode：Single

日本語のフォント

タイトルやボタンに日本語を出すために、zipに入っているNoto Sans JPからフォントアセットを作ります。

• 初めてTextMeshProを使うと「TMP Importer」のウインドが出るので、Import TMP Essentialsを押す
  • 出ない場合は、Window>TextMeshPro>Import TMP Essential Resources
• CompleteGame/FontsのNotoSansJP.ttfを右クリック>Create>TextMeshPro>Font Asset>SDF
  • 「NotoSansJP SDF」が出来る
• Edit>Project Settings>TextMesh Pro>Settings のDefault Font Assetに、NotoSansJP SDFを入れる
  • 新しく作る文字が、最初から日本語で表示されるようになる

フォントアセットの作り方は、9-3 TextMeshProで美しいテキストを表示しようで詳しく紹介しています。

画面の大きさ

このシリーズは、PCで遊ぶ横画面のゲームとして作ります。

• Gameビューの左上の解像度のドロップダウンで、Full HD (1920×1080)を選ぶ
• HierarchyでMain Cameraを選んで、CameraのSizeを5.4にする

背景の絵は1920×1080ピクセルで、Unityでは100ピクセルが1マス（1ユニット）です。カメラのSizeは「画面の縦の半分が何マスか」なので、1080 ÷ 2 ÷ 100 で5.4にすると、背景がぴったり画面におさまります。

タイトルのシーンを作ろう

Titleシーンが開いていることを確かめてから、作っていきます。最終的なHierarchyは次の形です。

• Main Camera
• Global Light 2D（最初からある、2Dの明かり）
• Background（夜の庭の絵）
• Slime（スライムちゃん）
• Canvas
  • TitleText（ゲームの名前）
  • StartButton（はじめる）
• EventSystem

背景とスライムちゃん

• Sprites/Backgroundsのbg_night_gardenを、Hierarchyにドラッグ＆ドロップ
  • 名前をBackgroundにして、Positionを（0, 0, 0）にする
  • Sprite RendererのOrder in Layerを-10にする（いちばん奥に描く）
• Sprites/Characters/Slimeのslime_walk_21を、Hierarchyにドラッグ＆ドロップ
  • 名前をSlimeにして、Positionを（0, -1.3, 0）、Scaleを（1.5, 1.5, 1）にする

Order in Layerは、絵を重ねる順番です。数字が小さいほど奥に描かれます。背景を-10にしておけば、あとから何を置いても背景の手前に出ます。

タイトルの文字とボタン

文字やボタンは、UI（Canvas）で作ります（Canvasの基本は9-1 UnityのUI（Canvas）システムを知ろう）。

• Hierarchyで右クリック>UI (Canvas)>Text – TextMeshPro
  • Canvas・EventSystem・文字が一緒に出来る。文字の名前をTitleTextにする
• Canvasを選んで、Canvas Scalerを次のように設定
  • UI Scale Mode：Scale With Screen Size
  • Reference Resolution：X 1920、Y 1080
  • Match：0.5
• TitleTextを次のように設定
  • Pos X：0、Pos Y：250、Width：1400、Height：200
  • テキスト：星ふる夜の庭
  • Font Style：B（太字）、Font Size：140、Vertex Color：#FFE08A（明るい黄色）
  • Alignment：中央ぞろえ（横・縦とも）

次は「はじめる」のボタンです。

• Canvasを右クリック>UI (Canvas)>Button – TextMeshPro
  • 名前をStartButtonにする
  • Pos X：0、Pos Y：-400、Width：360、Height：100
• StartButtonの子のText (TMP)を選んで
  • テキスト：はじめる、Font Size：48、Font Style：B

Canvas ScalerをScale With Screen Sizeにしておくと、ウインドウの大きさが変わっても、文字やボタンが画面に合わせて大きくなったり小さくなったりします。最後にビルドするときに効いてきます。

ふわふわ・ぷるぷる動かそう

止まったままだと、ちょっとさみしいですね。タイトル画面は、ゲームの第一印象なので、少しだけ動きを付けます。まずは、文字を上下にふわふわ動かすスクリプトです。Scriptsフォルダで右クリック>Create>MonoBehaviour ScriptでFloatingMotionを作ります。

using UnityEngine;

// 上下にふわふわ動かす
public class FloatingMotion : MonoBehaviour
{
    [SerializeField] private float height = 20f; // 動く高さ
    [SerializeField] private float speed = 2f;   // 速さ

    private Vector3 startPosition;

    private void Start()
    {
        startPosition = transform.localPosition;
    }

    private void Update()
    {
        float offsetY = Mathf.Sin(Time.time * speed) * height;
        transform.localPosition = startPosition + new Vector3(0f, offsetY, 0f);
    }
}

• Mathf.Sin
  • 時間がたつと、-1 → 0 → 1 → 0 → -1…と、なめらかに行ったり来たりする数を返す
  • それにheightをかけて、上下に動く量にしている
• startPosition
  • 最初の位置を覚えておき、そこからの上下のずれだけを足す（ずれがたまって、どこかへ行ってしまわないように）

次は、スライムちゃんを弾ませるスクリプトです。素材のスライムちゃんは、1つのポーズに3枚の絵（コマ）があります。パラパラまんがのように、絵を順番に切り替えて動かします。同じようにScriptsフォルダにFrameAnimationを作ります。

using UnityEngine;

// 絵（コマ）を順番に切り替えて、パラパラまんがのように動かす
public class FrameAnimation : MonoBehaviour
{
    [SerializeField] private Sprite[] frames;               // 出す順番に並べたコマ
    [SerializeField] private float secondsPerFrame = 0.15f; // 1コマを出す時間

    private SpriteRenderer spriteRenderer;
    private int frameIndex;
    private float timer;

    private void Start()
    {
        spriteRenderer = GetComponent<SpriteRenderer>();
    }

    private void Update()
    {
        timer += Time.deltaTime;
        if (timer < secondsPerFrame)
        {
            return;
        }
        timer -= secondsPerFrame;
        frameIndex = (frameIndex + 1) % frames.Length;
        spriteRenderer.sprite = frames[frameIndex];
    }
}

• timer
  • 前のコマに切り替えてからの時間。secondsPerFrame（0.15秒）たったら、次のコマにする
• % frames.Length
  • %は「割った余り」。コマが4枚なら、0 → 1 → 2 → 3 → 0…と、最後まで行ったら最初に戻る

スクリプトが出来たら、付けていきます。

• TitleTextにFloatingMotionを付ける（Height：20、Speed：2のまま）
• SlimeにFrameAnimationを付けて、Framesに4つ入れる
  • slime_walk_21、slime_walk_22、slime_walk_23、slime_walk_22
  • 1 → 2 → 3 → 2 の順にすると、3から1へ急に戻らず、なめらかに弾みます

再生して、文字がふわふわ、スライムちゃんがぷるぷる動いていればOKです。

エンディングのシーンを作ろう

エンディングは、タイトルのシーンを複製して作ります。置くものはほとんど同じなので、作り直すより早いです。

• ProjectウインドでTitleシーンを選んで、Ctrl＋D（複製）
• 出来た「Title 1」の名前をEndingにして、ダブルクリックで開く
• 4か所を変える
  • BackgroundのSprite RendererのSpriteを、bg_home（おうちの前）に
  • TitleTextの名前をEndingTextにして、テキストを「おうちに かえれた！」に
  • SlimeのFrame AnimationのFramesを、slime_win_01、slime_win_02、slime_win_03、slime_win_02に（喜ぶポーズ）して、Seconds Per Frameを0.45に
  • StartButtonの名前をTitleButtonにして、子のText (TMP)を「タイトルへ」に

背景を替えるのは、タイトルではまだ見えなかったおうちが、エンディングで目の前にあることで「帰ってきた」と伝わるからです。

Seconds Per Frameを0.45にするのは、タイトルの3倍の時間をかけて、ゆっくり喜ばせるためです。タイトルと同じ0.15のままだと、喜ぶポーズがせわしなく切りかわって、うれしさが伝わりにくくなります。同じスクリプトでも、数字1つで動きの印象が変わります。

ボタンでシーンを切り替えよう

いよいよ、2つの画面をつなぎます。ScriptsフォルダにSceneButtonを作ります。

using UnityEngine;
using UnityEngine.SceneManagement;

// ボタンに付けて、決めたシーンへ切り替える
public class SceneButton : MonoBehaviour
{
    [SerializeField] private string sceneName = "Title"; // 切り替える先のシーンの名前

    // ボタンの On Click () から呼ぶ
    public void LoadScene()
    {
        SceneManager.LoadScene(sceneName);
    }
}

• SceneManager.LoadScene
  • 名前で指定したシーンに切り替える。シーンの切り替えは、8-3 スクリプトでシーンを切り替えようでくわしく紹介しています
• sceneNameをInspectorで決める
  • 行き先をスクリプトに書かずにInspectorで入れるので、どのボタンにも同じスクリプトを使い回せます

ボタンに付けよう

Titleシーンを開いて、「はじめる」に付けます。

• StartButtonにSceneButtonを付けて、Scene NameにEndingと入れる
• ButtonのOn Click ()の＋を押して、出来た欄にStartButtonをドラッグ
• 右のドロップダウンで、SceneButton>LoadScene ()を選ぶ

Endingシーンも同じようにします。

• TitleButtonにSceneButtonを付けて、Scene NameにTitleと入れる
• On Click ()の＋を押して、TitleButtonをドラッグし、SceneButton>LoadScene ()を選ぶ

キーボードでも押せるようにしよう

このままだと、ボタンはマウスでしか押せません。最初からボタンを選んだ状態にしておくと、Enterキーやゲームパッドのボタンでも押せるようになります。

• TitleシーンのEventSystemを選んで、First SelectedにStartButtonをドラッグ
• EndingシーンのEventSystemも、First SelectedにTitleButtonをドラッグ

キーボードやゲームパッドでのUIの操作は、9-8 キーボード・ゲームパッドでUIを操作しようでくわしく紹介しています。

シーンの一覧に入れよう

最後に、ゲームで使うシーンを登録します。

• File>Build Profilesを開いて、左のScene Listを選ぶ
• Projectウインドから、TitleとEndingをドラッグして入れる
  • Titleを一番上（0番）にする。ゲームは0番のシーンから始まります
• 最初から入っているSampleSceneなど、ほかのシーンがあれば外す

完成チェック

Titleシーンを開いて再生し、最初から最後まで通して遊びます。

全部できていたら、これで「星ふる夜の庭」は完成です！遊ぶところはまだ何もありませんが、始まって、終わって、また最初に戻れる。これがゲームの骨組みです。

ビルドして遊ぼう

最後に、Unityが無くても遊べる形（.exe）にします。ビルドの基本は、10-2 初めてのビルド：Windows/Mac向け実行ファイルを作ろうにまとめてあるので、ここでは、このゲームで設定するところだけ書きます。

ゲームの名前とウインドウの大きさ

Edit>Project Settings>Playerを開いて、次のようにします。

• Product Name：星ふる夜の庭（ウインドウの上に出る名前）
• Resolution and Presentationを開いて
  • Fullscreen Mode：Windowed
  • Default Screen Width / Height：1280 / 720
  • Resizable Window：チェックを入れる

全画面ではなく、1280×720のウインドウで起動します。Canvas ScalerをScale With Screen Sizeにしてあるので、1920×1080より小さいウインドウでも、文字やボタンの並びはそのままです。

ビルドする

• File>Build ProfilesでWindowsを選ぶ（Activeになっていなければ、Switch Platform）
• Buildを押して、空のフォルダを選ぶ（例：プロジェクトのフォルダの中にBuild/StarGardenを作って選ぶ）
  • ファイルの名前はStarGardenにする（英語にしておくと安心です）
  • Assetsの中は選ばないでください。ビルドしたファイルがプロジェクトに混ざってしまいます
• 終わったら、フォルダの中のStarGarden.exeをダブルクリック

ウインドウが開いて、タイトル画面が出たら成功！「はじめる」と「タイトルへ」を押して、エディタと同じように遊べるか確かめましょう。

次の回からも、毎回この「完成チェック」と「ビルド」で終わります。2回目からは、Build Profilesを開いてBuildを押し、同じフォルダを選んで上書きするだけです。

あとがき

1回目は、タイトルとエンディングだけの、とても短いゲームでした。でも、ちゃんと始まって、終わって、ビルドして遊べる。ここまで来たら、もう「途中で止まったゲーム」にはなりません。

次回は、タイトルとエンディングの間にステージをはさみます。スライムちゃんを上下左右に動かして、扉に入ったらエンディング。いよいよ遊べるようになります！

スライム

自分のゲームが.exeになると、ちょっとうれしいですね・・・！