こんにちは！Unityの入門書で通称”ヒヨコ本”として親しまれている”Unity5入門 最新開発環境による簡単3D&2Dゲーム制作
まずはタイトル画面にアニメーションを追加してみたいと思います。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// UI関連クラスを使用できるようにする
using UnityEngine.UI;
public class PanelScroll : MonoBehaviour
{
// スクロール処理を行うオブジェクトを格納する変数
public GameObject panel;
// スクロール速度
public float speed;
// スクロールを折り返す座標
public float scrollPos;
// ゲーム実行中の処理
void Update()
{
// "RectTransform"コンポーネントの座標（Left / Botom）を取得して
// 変数"leftBottom"に格納
Vector2 leftBottom = panel.GetComponent<RectTransform>().offsetMin;
// 変数"rightTop"のX座標値が"0"より小さければ
// 変数"rightTop"のY座標値が"0"より小さければ
if (leftBottom.x < 0 && leftBottom.y < 0)
{
// スクロール処理
//（変数"leftBottom"のX座標値にスクロール速度値を加算）
leftBottom.x += speed;
//（変数"leftBottom"のY座標値にスクロール速度値を加算）
leftBottom.y += speed;
// 変数"leftBottom"の値を
// "RectTransform"コンポーネントの座標（Left / Botom）に代入
panel.GetComponent<RectTransform>().offsetMin = leftBottom;
}
else
{
// スクロールの折り返し処理
// 変数"leftBottom"の座標値を"scrollPos"の座標値にリセット
leftBottom = new Vector2(scrollPos, scrollPos);
// 変数"leftBottom"の座標値を
// "RectTransform"コンポーネントの座標（Left / Botom）に代入
panel.GetComponent<RectTransform>().offsetMin = leftBottom;
}
}
}
RectTransformコンポーネントの座標移動（オフセット）についてはUnityスクリプトリファレンス Version: 5.4 に記載されています。
作成したスクリプトコンポーネントの変数”panel”フィールドにオブジェクトを割り当てます。
[Hierarchy]ウィンドウ > Canvas > Panel Title を選択。Panel フィールドにドラッグ&ドロップで割り当て。Speed フィールド は 1 を入力。タイトル画面に使用している画像のサイズは512ｘ512ピクセルなので、Scroll Pos フィールド は -512 を入力します。
スクリプトコンポーネントは下図のようになります。
ゲームを再生して動作確認してみましょう。おお！タイトルロゴとスタートボタンも一緒にスクロールしておかしなことに！
修正するためにまず、タイトルロゴとスタートボタンが一緒にスクロールしないようにタイトル画面の階層をいったん解除。
それからタイトル画面オブジェクトのすべての親になるEmptyオブジェクトを作成してタイトル画面オブジェクトの階層を変更しましょう。
まずはEmptyオブジェクトを作成。[Hierarchy]ウィンドウ > [Create]ボタン > Create Empty を選択。作成されたオブジェクト名を”Title”に変更。
オブジェクトの階層を下記の通りに変更します
Title
┣ Panel Title
┣ Panel TitleLogo
┗ Button Start
次にコンポーネントを追加。[Inspector]ウィンドウ > [Inspector]ウィンドウ > [Add Component]ボタン > Layout > RectTransform を選択。下記の通りパラメータを設定。
スタートボタンをクリックしたときに無効化するオブジェクトを変更します。
[Hierarchy]ウィンドウ > Canvas を選択。[Inspector]ウィンドウ > PanelTitle (Script) コンポーネント > Panel Title フィールドに割り当てるオブジェクトを変更します。[Hierarchy]ウィンドウ > Canvas > Title をドラッグ&ドロップで割り当てます。
これでちゃんとタイトル画面の背景だけがスクロールするようになりました。
それではゲームオーバー画面にもタイトル画面と同じようにアニメーションを追加してみたいと思います。
Emptyオブジェクトで親オブジェクト”GameOver”を作成。階層は下記の通りに調整しました。
GameOver
┣ Panel GameOver
┣ Panel GameOverLogo
┣ Text HighScore
┣ Text ResultScore
┗ Button Retry
次にコンポーネントを追加。[Inspector]ウィンドウ > [Inspector]ウィンドウ > [Add Component]ボタン > Layout > RectTransform を選択。下記の通りパラメータを設定。
階層を変更したのでリトライボタンをクリックしたときに無効化するオブジェクトを変更します。
[Hierarchy]ウィンドウ > Canvas を選択。[Inspector]ウィンドウ > GameOver (Script) コンポーネントと PanelGameOver (Script) コンポーネントの PanelGameOver フィールドのオブジェクトを変更します。
ここまでの内容をWebGLでビルドしました。
unityroom で公開しているゲームファイルもあわせて更新しました。