【基本操作】タマあんどヒシガタ～３／３　ゲーム仕上げ【パズル】

2022.07.22

●ステージ作成

▷カメラ設定

ステージを見渡せるようカメラの姿勢を調整します。

カメラ設定

・位置、回転、スケール設定

  1. ヒエラルキーの「Main Camera」をクリック
  2. インスペクターのTransformにある位置を(4.5, 16, -2)とする
  3. インスペクターのTransformにある回転を(65, 0, 0)とする
  4. インスペクターのTransformにあるスケールを(1, 1, 1)とする

・アスペクト比設定

  1. ゲームビュー上メニュー左から３番目ドロップダウンをクリック
  2. 「9:16 Aspect」をクリック、無い場合は以降を操作
  3. 左下の「＋」をクリック
  4. ドロップダウン「タイプ」をクリックし、「アスペクト比」をクリック
  5. 幅＆高さの「X」に(9)、「Y」に(16)を入力
  6. 「OK」をクリック

▷プレハブ化

ステージに２つ以上配置するオブジェクトをプレハブ化し、量産化しやすくします。
対象はトゲ、壁、ジャンプ台の３つです。

プレハブ化

・プレハブ化

  1. ヒエラルキーの「Toge」をプロジェクトの「Assets」にドラッグ＆ドロップ
  2. ヒエラルキーの「Block」をプロジェクトの「Assets」にドラッグ＆ドロップ
  3. ヒエラルキーの「Jump」をプロジェクトの「Assets」にドラッグ＆ドロップ

▷単一オブジェクト配置

タマ、ヒシガタ、ゴールの位置を設定します。

単一オブジェクト配置

・位置設定

  1. ヒエラルキーの「Tama」をクリック
  2. インスペクターのTransformにある位置を(1, 0, 8)とする
  3. ヒエラルキーの「Hisi」をクリック
  4. インスペクターのTransformにある位置を(8, 0, 1)とする
  5. ヒエラルキーの「Goal」をクリック
  6. インスペクターのTransformにある位置を(7, 0, 4)とする

▷トゲ配置

トゲ配置用の空オブジェクトにトゲを格納し、複製しながら配置していきます。

トゲ配置

・空オブジェクト作成

  1. ヒエラルキー左上の「＋」をクリック
  2. 「空のオブジェクトを作成」をクリック
  3. 「Toges」と入力し、ENTERキーを押す

・位置スケールリセット

  1. インスペクターのTransformにある縦の三点リーダーをクリック
  2. リセットをクリック

・階層設定

  1. ヒエラルキーの「Toge」をヒエラルキーの「Toges」にドラッグ＆ドロップ

・位置設定

  1. インスペクターのTransformにある位置を(1, 0, 0)とする

・複製、位置設定

  1. ヒエラルキーの「Toges>Toge」をクリック
  2. CTRLを押しながらDキーを押す
  3. インスペクターのTransformにある位置を(9, 0, 1)とする
  4. ヒエラルキーの「Toges>Toge (1)」をクリック
  5. CTRLを押しながらDキーを押す
  6. インスペクターのTransformにある位置を(8, 0, 9)とする
  7. ヒエラルキーの「Toges>Toge (2)」をクリック
  8. CTRLを押しながらDキーを押す
  9. インスペクターのTransformにある位置を(0, 0, 8)とする
  10. ヒエラルキーの「Toges>Toge (3)」をクリック
  11. CTRLを押しながらDキーを押す
  12. インスペクターのTransformにある位置を(5, 0, 4)とする
  13. ヒエラルキーの「Toges>Toge (4)」をクリック
  14. CTRLを押しながらDキーを押す
  15. インスペクターのTransformにある位置を(6, 0, 2)とする
  16. ヒエラルキーの「Toges>Toge (5)」をクリック
  17. CTRLを押しながらDキーを押す
  18. インスペクターのTransformにある位置を(5, 0, 2)とする
  19. ヒエラルキーの「Toges>Toge (6)」をクリック
  20. CTRLを押しながらDキーを押す
  21. インスペクターのTransformにある位置を(4, 0, 2)とする

・階層を閉じる

  1. ヒエラルキーの「Toges」左にある「▼」をクリック

▷ジャンプ台配置

ジャンプ台配置用の空オブジェクトにジャンプ台を格納し、複製しながら配置していきます。

ジャンプ台配置

・空オブジェクト作成

  1. ヒエラルキー左上の「＋」をクリック
  2. 「空のオブジェクトを作成」をクリック
  3. 「Jumps」と入力し、ENTERキーを押す

・位置スケールリセット

  1. インスペクターのTransformにある縦の三点リーダーをクリック
  2. リセットをクリック

・階層設定

  1. ヒエラルキーの「Jump」をヒエラルキーの「Jumps」にドラッグ＆ドロップ

・位置設定

  1. インスペクターのTransformにある位置を(1, 0, 9)とする

・複製、位置設定

  1. ヒエラルキーの「Jumps>Jump」をクリック
  2. CTRLを押しながらDキーを押す
  3. インスペクターのTransformにある位置を(0, 0, 1)とする
  4. ヒエラルキーの「Jumps>Jump (1)」をクリック
  5. CTRLを押しながらDキーを押す
  6. インスペクターのTransformにある位置を(8, 0, 0)とする
  7. ヒエラルキーの「Jumps>Jump (2)」をクリック
  8. CTRLを押しながらDキーを押す
  9. インスペクターのTransformにある位置を(9, 0, 8)とする
  10. ヒエラルキーの「Jumps>Jump (3)」をクリック
  11. CTRLを押しながらDキーを押す
  12. インスペクターのTransformにある位置を(6, 0, 9)とする
  13. ヒエラルキーの「Jumps>Jump (4)」をクリック
  14. CTRLを押しながらDキーを押す
  15. インスペクターのTransformにある位置を(5, 0, 9)とする
  16. ヒエラルキーの「Jumps>Jump (5)」をクリック
  17. CTRLを押しながらDキーを押す
  18. インスペクターのTransformにある位置を(4, 0, 9)とする
  19. ヒエラルキーの「Jumps>Jump (6)」をクリック
  20. CTRLを押しながらDキーを押す
  21. インスペクターのTransformにある位置を(3, 0, 4)とする

・階層を閉じる

  1. ヒエラルキーの「Jumps」左にある「▼」をクリック

▷壁配置

壁配置用の空オブジェクトに壁を格納し、複製しながら配置していきます。

壁配置

・空オブジェクト作成

  1. ヒエラルキー左上の「＋」をクリック
  2. 「空のオブジェクトを作成」をクリック
  3. 「Blocks」と入力し、ENTERキーを押す

・位置スケールリセット

  1. インスペクターのTransformにある縦の三点リーダーをクリック
  2. リセットをクリック

・階層設定

  1. ヒエラルキーの「Block」をヒエラルキーの「Blocks」にドラッグ＆ドロップ

・位置設定

  1. インスペクターのTransformにある位置を(0, 0, 9)とする

・複製、位置設定

  1. ヒエラルキーの「Blocks>Block」をクリック
  2. CTRLを押しながらDキーを押す
  3. インスペクターのTransformにある位置を(0, 0, 7)とする
  4. ヒエラルキーの「Blocks>Block (1)」をクリック
  5. CTRLを押しながらDキーを押す
  6. インスペクターのTransformにある位置を(0, 0, 6)とする
  7. ヒエラルキーの「Blocks>Block (2)」をクリック
  8. CTRLを押しながらDキーを押す
  9. インスペクターのTransformにある位置を(0, 0, 5)とする
  10. ヒエラルキーの「Blocks>Block (3)」をクリック
  11. CTRLを押しながらDキーを押す
  12. インスペクターのTransformにある位置を(0, 0, 4)とする
  13. ヒエラルキーの「Blocks>Block (4)」をクリック
  14. CTRLを押しながらDキーを押す
  15. インスペクターのTransformにある位置を(0, 0, 3)とする
  16. ヒエラルキーの「Blocks>Block (5)」をクリック
  17. CTRLを押しながらDキーを押す
  18. インスペクターのTransformにある位置を(0, 0, 2)とする
  19. ヒエラルキーの「Blocks>Block (6)」をクリック
  20. CTRLを押しながらDキーを押す
  21. インスペクターのTransformにある位置を(0, 0, 0)とする
  1. ヒエラルキーの「Blocks>Block (7)」をクリック
  2. CTRLを押しながらDキーを押す
  3. インスペクターのTransformにある位置を(2, 0, 0)とする
  4. ヒエラルキーの「Blocks>Block (8)」をクリック
  5. CTRLを押しながらDキーを押す
  6. インスペクターのTransformにある位置を(3, 0, 0)とする
  7. ヒエラルキーの「Blocks>Block (9)」をクリック
  8. CTRLを押しながらDキーを押す
  9. インスペクターのTransformにある位置を(4, 0, 0)とする
  10. ヒエラルキーの「Blocks>Block (10)」をクリック
  11. CTRLを押しながらDキーを押す
  12. インスペクターのTransformにある位置を(5, 0, 0)とする
  13. ヒエラルキーの「Blocks>Block (11)」をクリック
  14. CTRLを押しながらDキーを押す
  15. インスペクターのTransformにある位置を(6, 0, 0)とする
  16. ヒエラルキーの「Blocks>Block (12)」をクリック
  17. CTRLを押しながらDキーを押す
  18. インスペクターのTransformにある位置を(7, 0, 0)とする
  19. ヒエラルキーの「Blocks>Block (13)」をクリック
  20. CTRLを押しながらDキーを押す
  21. インスペクターのTransformにある位置を(9, 0, 0)とする
  1. ヒエラルキーの「Blocks>Block (14)」をクリック
  2. CTRLを押しながらDキーを押す
  3. インスペクターのTransformにある位置を(9, 0, 2)とする
  4. ヒエラルキーの「Blocks>Block (15)」をクリック
  5. CTRLを押しながらDキーを押す
  6. インスペクターのTransformにある位置を(9, 0, 3)とする
  7. ヒエラルキーの「Blocks>Block (16)」をクリック
  8. CTRLを押しながらDキーを押す
  9. インスペクターのTransformにある位置を(9, 0, 4)とする
  10. ヒエラルキーの「Blocks>Block (17)」をクリック
  11. CTRLを押しながらDキーを押す
  12. インスペクターのTransformにある位置を(9, 0, 5)とする
  13. ヒエラルキーの「Blocks>Block (18)」をクリック
  14. CTRLを押しながらDキーを押す
  15. インスペクターのTransformにある位置を(9, 0, 6)とする
  16. ヒエラルキーの「Blocks>Block (19)」をクリック
  17. CTRLを押しながらDキーを押す
  18. インスペクターのTransformにある位置を(9, 0, 7)とする
  19. ヒエラルキーの「Blocks>Block (20)」をクリック
  20. CTRLを押しながらDキーを押す
  21. インスペクターのTransformにある位置を(9, 0, 9)とする
  1. ヒエラルキーの「Blocks>Block (21)」をクリック
  2. CTRLを押しながらDキーを押す
  3. インスペクターのTransformにある位置を(7, 0, 9)とする
  4. ヒエラルキーの「Blocks>Block (22)」をクリック
  5. CTRLを押しながらDキーを押す
  6. インスペクターのTransformにある位置を(3, 0, 9)とする
  7. ヒエラルキーの「Blocks>Block (23)」をクリック
  8. CTRLを押しながらDキーを押す
  9. インスペクターのTransformにある位置を(2, 0, 9)とする

・階層を閉じる

  1. ヒエラルキーの「Blocks」左にある「▼」をクリック

・プロジェクト保存

  1. CTRLを押しながらSキーを押す

●ミスUI作成

▷ミスUI作成

タマがトゲ、もしくはヒシガタに衝突した時に「Miss!」というテキストを表示します。

ミスUI作成（画像はオブジェクト無効化前）

・テキスト作成

  1. ヒエラルキー左上の「＋」をクリック
  2. 「UI＞テキスト – TextMeshPro」をクリック
  3. 「TextMiss」と入力し、ENTERキーを押す

・TextMeshPro準備

  1. TMP Importerの「Import TMP Essentials」をクリック
  2. TMP Importerの右上にある「×」をクリック

・UI位置設定

  1. インスペクターのRectTransform左上にあるアイコンをクリック
  2. アンカープリセットの右下にある「Stretch – Stretch」をダブルクリック
  3. インスペクターのRectTransform右上にある上下左右を全て「0」に設定

・表示文字設定

  1. インスペクターのTextMeshProにある「Text Input>テキスト入力」を「Miss!」に設定

・文字装飾

  1. インスペクターのTextMeshProにある「Main Settings>Font Style」にある「B」をクリック
  2. インスペクターのTextMeshProにある「Main Settings>Audo Size」のチェックボックスをクリック
  3. インスペクターのTextMeshProにある「Main Settings>Vertex Color」右のカラーバーをクリックし、色ダイアログの16進数を「FF0000」に設定
  4. 色ダイアログの右上にある「×」をクリック
  5. インスペクターの「Shader>Outline」左にあるチェックボックスをクリック
  6. インスペクターの「Shader>Outline」にある「Thickness」を「0.2」に設定

・オブジェクト無効化

  1. インスペクター上部の左上にあるチェックボックスをクリック

▷ミス制御

タマがトゲ、もしくはヒシガタとぶつかった時にミステキストを表示するようにCharCtrlを修正します。

ミス制御

・スクリプト編集開始

  1. プロジェクトの「Assets>CharCtrl」をダブルクリック

・スクリプト変数定義

  1. クラス定義内の先頭に以下の変数を追加
    public GameObject TextMiss;         // ミスUI

・スクリプト関数修正

  1. 「タマとヒシガタの位置が同じだった場合」の条件内にある「タマとヒシガタを削除」前に「ミスUIを有効化」する以下の処理を追加
                // ミスUIを有効化
                TextMiss.SetActive(true);

・スクリプト関数修正

  1. 「トゲと重なったら自分とトゲを削除」の条件内の先頭に「自分がタマだった場合、ミスUIを有効化」する処理を追加
            // 自分がタマだった場合、ミスUIを有効化
            if (tag == "Player")
            {
                TextMiss.SetActive(true);
            }

・スクリプト保存

  1. CTRLを押しながらSキーを押す

・Unityに戻ってスクリプトをビルド

  1. Unityエディタのタイトルをクリック

・オブジェクト割り当て

  1. ヒエラルキーの「Tama」をクリック
  2. ヒエラルキーの「Canvas>TextMiss」をインスペクターの「Char Ctrl (スクリプト)>Text Miss」右の参照ボックスにドラッグ＆ドロップ

・プロジェクト保存

  1. CTRLを押しながらSキーを押す

▷動作確認

ミスした時にミステキストが表示されるかどうか、プレビューして確認します。

動作確認

・プレビュー開始

  1. エディタ上中央の「▶」をクリック

・動作確認

  1. ミスした時にミステキストが表示されるかどうか確認

・プレビュー終了

  1. エディタ上中央の「▶」をクリック

●クリアUI作成

▷クリアUI作成

タマがゴールに衝突した時に「Clear!」というテキストを表示します。

クリアUI作成（画像はオブジェクト無効化前）

・オブジェクト複製

  1. ヒエラルキーの「Canvas>TextMiss」をクリック
  2. CTRLを押しながらDキーを押す

・オブジェクト名変更

  1. F2キーを押して「TextClear」と入力し、ENTERを押す

・オブジェクト有効化

  1. インスペクター上部の左上にあるチェックボックスをクリック

・表示文字設定

  1. インスペクターのTextMeshProにある「Text Input>テキスト入力」を「Clear!」に設定

・文字装飾

  1. インスペクターのTextMeshProにある「Main Settings>Vertex Color」右のカラーバーをクリックし、色ダイアログの16進数を「00FFFF」に設定
  2. 色ダイアログの右上にある「×」をクリック

・オブジェクト無効化

  1. インスペクター上部の左上にあるチェックボックスをクリック

▷クリア制御

タマがゴールと衝突した時にクリアテキストを表示するようにCharCtrlを修正します。

クリア制御

・スクリプト編集開始

  1. プロジェクトの「Assets>CharCtrl」をダブルクリック

・スクリプト変数定義

  1. ミスUIの定義の後に以下の変数を追加
    public GameObject TextClear;        // クリアUI

・スクリプト関数修正

  1. 「自分がタマで、かつゴールと重なった場合」の条件内処理の先頭に以下のスクリプトを追加
            // クリアUIを有効化
            TextClear.SetActive(true);

・スクリプト保存

  1. CTRLを押しながらSキーを押す

・Unityに戻ってスクリプトをビルド

  1. Unityエディタのタイトルをクリック

・オブジェクト割り当て

  1. ヒエラルキーの「Tama」をクリック
  2. ヒエラルキーの「Canvas>TextClear」をインスペクターの「Char Ctrl (スクリプト)>Text Clear」右の参照ボックスにドラッグ＆ドロップ

・プロジェクト保存

  1. CTRLを押しながらSキーを押す

▷動作確認

タマがゴールに衝突した時にクリアテキストが表示されるかどうか、プレビューして確認します。

動作確認

・プレビュー開始

  1. エディタ上中央の「▶」をクリック

・動作確認

  1. タマがゴールに衝突した時にクリアテキストが表示されるかどうか確認

・プレビュー終了

  1. エディタ上中央の「▶」をクリック

完成！

作成手順を書いた記事です。

　　　→紹介
　　　→１／３　キャラクター作成
　　　→２／３　オブジェクト作成
今▷　→３／３　ゲーム仕上げ

完全手順
※紹介と１～３の手順を１ページにまとめています。
　読み込みに時間がかかるかも知れません。

コメント

タイトルとURLをコピーしました