こんにちは！Unityの入門書で通称”ヒヨコ本”として親しまれている”Unity5入門 最新開発環境による簡単3D&2Dゲーム制作 
Chapter2：インターフェイスと使い方
Chapter3：Unityを使ってみよう！
Chapter4：キャラクターを動かしてみよう！
Chapter5：ゲームのUIを作ってみよう！
Chapter6：ゲームを作ろう！（1）
Chapter7：ゲームを作ろう！（2）
Chapter8：2D機能を使ってみよう！
タイトル画面にスクロールアニメーションを追加する
まずはタイトル画面にアニメーションを追加してみたいと思います。
移動処理のスクリプトを作成する
[Hierarchy]ウィンドウ > Canvasを選択。[Inspector]ウィンドウ > [Add Component]ボタン > New Scriptを選択して下記の通り入力。[Create and Add]ボタンをクリック。Name: PanelScroll / Language: C Sharp
スクリプトを編集する
[Project]ウィンドウ > スクリプト”PanelScroll”をダブルクリックでエディタで開き、下記コードを入力します。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 に記載されています。
スクリプト”PanelScroll”にタイトル画面オブジェクトを割り当て
作成したスクリプトコンポーネントの変数”panel”フィールドにオブジェクトを割り当てます。
[Hierarchy]ウィンドウ > Canvas > Panel Title を選択。Panel フィールドにドラッグ&ドロップで割り当て。Speed フィールド は 1 を入力。タイトル画面に使用している画像のサイズは512ｘ512ピクセルなので、Scroll Pos フィールド は -512 を入力します。
スクリプトコンポーネントは下図のようになります。
動作確認
ゲームを再生して動作確認してみましょう。おお！タイトルロゴとスタートボタンも一緒にスクロールしておかしなことに！
UIオブジェクトの階層修正
修正するためにまず、タイトルロゴとスタートボタンが一緒にスクロールしないようにタイトル画面の階層をいったん解除。
それからタイトル画面オブジェクトのすべての親になる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 をドラッグ&ドロップで割り当てます。
動作確認
これでちゃんとタイトル画面の背景だけがスクロールするようになりました。
ゲームオーバー画面にアニメーションを設定する
それではゲームオーバー画面にもタイトル画面と同じようにアニメーションを追加してみたいと思います。
UIオブジェクトの階層修正
Emptyオブジェクトで親オブジェクト”GameOver”を作成。階層は下記の通りに調整しました。
GameOver
┣ Panel GameOver
┣ Panel GameOverLogo
┣ Text HighScore
┣ Text ResultScore
┗ Button Retry
次にコンポーネントを追加。[Inspector]ウィンドウ > [Inspector]ウィンドウ > [Add Component]ボタン > Layout > RectTransform を選択。下記の通りパラメータを設定。
Canvasオブジェクトにスクリプト”PanelScroll”をを追加
[Hierarchy]ウィンドウ > Canvas を選択。[Inspector]ウィンドウにスクリプト”PanelScroll”をドラッグ&ドロップで割り当て。パラメータを入力します。
無効化するゲームオーバー画面オブジェクトを修正
階層を変更したのでリトライボタンをクリックしたときに無効化するオブジェクトを変更します。
[Hierarchy]ウィンドウ > Canvas を選択。[Inspector]ウィンドウ > GameOver (Script) コンポーネントと PanelGameOver (Script) コンポーネントの PanelGameOver フィールドのオブジェクトを変更します。
WebGL
ここまでの内容をWebGLでビルドしました。
unityroomのゲーム更新
unityroom で公開しているゲームファイルもあわせて更新しました。
