【Unity道場教育スペシャル】Cinemachineで教えるゲームの3つの大切なこと

Cinemachineで教えるゲームの3つの大切なこと 安原 広和 ユニティ・テクノロジーズ・ジャパン合同会社

自己紹介 安原広和 ( Yasuhara Hirokazu ) -経歴セガエンタープライゼズ社にて「Sonic The Hedgehog」を手掛けたのち渡米、NaughtyDog社にて「Jak and Daxter」「Uncharted」を制作、北米ナムコバンダイ社、北米任天堂にてゲーム制作に携わる 現在Unity Technologies Japan合同会社で教育関連事業に従事、 東京工科大学特任准教授

「カメラ」こそがゲーム体験のかなめ 「Cinemachine」を使った自分の授業の話 4

「ゲーム」の「カメラ」、3つの大切なこと １、 「カメラ」の位置が、ゲームジャンルをつくりだす ２、 「カメラ」の視界が「プレイヤー」の視界そのもの ３、 「カメラ」はプレイヤーの感情を先取りして伝えるツール 5

１、 「カメラ」の位置が、ゲームジャンルをつくりだす Unityを使った「ゲームデザイン実習」の初日課題 「あなたの好きなゲームをUnityのオブジェクトで表現してください」 学生のスキル ・ エディターでオブジェクトをsceneに置ける ・ 色（material）をセット付ける ・ メインカメラを移動できる 6

こういうものがあがってきます 2D横スクロール 3D Action レース対戦 格闘対戦 FPS Cardバトル 7

「カメラ」の位置こそが、ゲームのジャンル トップダウンビュー サードパーソン ビューアクション 2D横スクロール

ヒトはゲームの世界を、常に「３Ｄ」でイメージしてる つくる側も、あそぶ側も３Ｄでイメージしてます

代表的な構図 1980年代の コンシューマ機 Top Down View ２Dゲーム ２D Side Scroll ２D横アクション なぜ、この構図を選んだのでしょう？ 10

1980年代の コンシューマ機 Top Down View ２Dゲーム W A S D 方向キー ・ ・ ・ ・ ２D Side Scroll ２Dアクション 上、下、左、右、 ２次元、（ｘ、ｙ）、平面の画面、エクセル 理解しやすい ＝ 操作に慣れやすい 物理的、技術的な表現の限界の問題 11

固定カメラの 切り替え 1990年代の コンシューマ機 Fixed Angle Switching & Fixed Camera View 「本当はこのゲーム世界を３Ｄで表現したいんだ！」 という思いを抱いた、たくさんの開発者 12

斜めに 進ませた方が いいの？！ Switching & Fixed Camera View 「十字キーのジレンマ」 ゲームの「カメラ」は、プレイヤーの「目」、 コントロールのUI・ＵＸ問題と切り離せない 13

Third Person View (Interactive Camera) （カメラがキャラクターに近づいたり遠ざかったり、対象との距離が変化） 「カメラの正面に進む」 「正面を変える」 14

余談ですが・・ ・戦闘 ・防御 ・魔法 ・仲間 ・道具 ・セーブ ・炎魔法・ ・冷凍魔法 ・治療魔法 ・Yes ・No メニューの選択・・ ウィンドウと「縦移動メニューのUI」 （十字キーで選びやすい）

FPS （「カメラ」がプレイヤーの目） 「カメラの移動」 「カメラの方向」 16

UI・UXは変化し続けます 攻 飛 魔 道 「押し込み」 「トリガー」 逃 仲 変 コントローラでメニューのUIも変化・・ レバーで選びやすい「円配置メニュー」 UI/UXはメディアの進化と共に変わっていく

ほぼすべてのゲームは、「３D」のイメージで発想されます 「カメラ」＝「見せ方」の違いによって、操作方法が変わり UI・UXが変わり、「ゲームジャンル」として分化していく ボードゲームも・・ 上に「カメラ」を置けば トップダウン２Dゲーム 「カメラ」を動かせば FPSゲーム 18

２Dゲーム？ ３Dゲーム？ ではなく 「どんな「カメラ」を使うのか」が、「ゲーム」にはとても大切です 「カメラの視点」からゲームを発想してみよう！ ・ 将棋やチェス、双六などの古典ボードゲームを、 斜め俯瞰視点で再構築したらどうなるか？ ・ アクションRPGを横スクロール視点で追いかける シーンにした場合、どうなるか？ など・・ 19

このように、ゲームにおける「カメラ」は とても重要なのですが、 実装が複雑で簡単には扱えないものでした 20

そこでUnityの 「Cinemachine」を活用してみました！ 「Cinemachine」はムービーシーンなどで タイムラインを通してシーンの演出のために主に使われますが、 ゲームの「カメラ」としても、とても便利に使えます！ 21

① Cinemachineのインストール Window > Package Manager １、Window ＞ PackageManager ＞ Cinemachine を選びダウンロードします

インストールするとCinemachineのタグがメニューに現れます ① ② １、 cinemachine ＞ create ２D camera を選び、２Dの横スクロールカメラを つくります 2、 ｚ軸方向を向いた ヴァーチャルカメラ（CM vcam1）ができます

MainCameraに「Cinemachine Brain」という Componentがつきます ① １、 「Main Camera」の横に cinemachineの赤いマークが現れます 2、 ヴァーチャルカメラ（CM vcam1）ができると MainCamera内に「CinemachineBrain」という Componentがあらわれます これ以降、「カメラ」は「Cinemachine」によって 制御されます ② ②

ヴァーチャルカメラを好みの場所に移動します （自分のレベルに合ったカメラ位置に移動させましょう） 1、 「CameraDistance」を調整して ゲームのプレイスクリーンの サイズを決めます ※transformのposition数値を変えても Followするオブジェクトが設定されて いるとカメラの位置は変わりません 外してから、位置を変えましょう ① 「Scene」タブを「Game」タブに変えれば 「CameraDistance」をドラッグして オブジェクトまでの距離を 確認しながら調整することができます

このままでは、カメラは動きません

１、「CM vcam1」の「Follow」に「Player」を入れます ① ② ２、「Body」を「Framing Transposer」にします

「CM vcam1」が「Player」を「Follow」してくれます

「Game」 プレイヤーが動いてもスクリーンを動かさない範囲 （DeadZone）を決めます １、Game Window Guides にチェックを 入れて、カメラの補助線を表示させます ① 2、「Dead Zone」の幅と高さを調整します ② Dead Zoneとはプレイヤーが移動しても ゲームの画面フレームが動かない範囲のこと

プレイヤーから先がどの程度見えるかを調整します （２Dスクロールゲームで右側に進む場合） １、Screen Xを調整してスクリーンを 左に寄せてプレイヤーの前方を 見せるようにします また,Screen Y を調整して レベルの下をあまり見せないように 調整もできます ① これで授業の下準備は完了です！

２、 「カメラ」の視界が「プレイヤー」の視界そのもの カメラが写したものがプレイヤーの得られる情報のすべて 「プレイヤーにあたえる情報をデザイン（設計）できる」 制作者は、それをやらなければいけない！ 31

学生には各自でオブジェクトを並べて 横方向に進む上下の差があるレベルをつくってもらいます

「カメラ」に写すべきもの プレイヤーに「与える情報」 ・ 「行き先」 「出口」、「ゴール」 ・ 「目的」 「アイテム」、「スイッチ」等 ・ 「危険」 「敵」、「ダメージを受けるもの」 溶岩 「敵」 「ダメージを受けるもの」 33

一度、学生に自分のレベルをプレイしてもらいます

ゲーム中に、プレイヤーに見せた方がいい場所がありますね 下が見えない・・ ああ、なるほど ON! Camera-B Camera-A 透明な「コライダー」オブジェクトを置いて、そこにプレイヤーが来た時に カメラを切り替えてあげましょう

GameObject＞Create Emptyで透明なオブジェクトをつくります ※「Gizmo」をONにしていないと ラインが表示されません ① ② ２、 名前を「cam-trigger」と付けて Scaleで大きさを調整します

Tagを新しく作り、”Switch”とします ② ③ ① １、 つくった透明のオブジェクトの「Add Tag..」を クリックすると、Tagを追加するウィンドウが開きます ２、 「＋」を押すと、新しいTagの名称を入力する欄が 開くので、そこで「Switch」と入力してください ３、 メニューをプルダウンして、できたことを確認します

AddComponentボタンを押して、「Physics」を選びます そして、開いたタブから「Box Collider」を選び、空のオブジェクトにセットします ① １、Box Colliderの 「Is Trigger」に チェックを入れます これで、このキューブはカメラの 切り替えスイッチとして働きます

低い場所を見るための「ヴァーチャルカメラ」を新たにつくります ① １、 メニューのCinemachineから 「Create２DCamera」を えらんで、新たなカメラをつくります 2、 Priorityを「5」にします （１つ目のヴァーチャルカメラは プライオリティが「10」です） ② プライオリティ（優先順位）は数字の 大きなものが優先されます これがとても重要です

カメラを新しいヴァーチャルカメラにしたまま、問題の場所に行きます （プレイして、現場までいきます） 1、 新しいカメラで見せたいものが 見えているかを確認します ② ③ ① ④ ２、 GameWindowGuideに チェックを入れます ３、 「Follow」にPlayerをセットします ４、 現場で、もっともよいと思われる スクリーンになるよう「Body」の 設定を調整します ※ 各ヴァーチャルカメラの「Solo」 ボタンを押すと、そのカメラビューに なります

このエリアに来た時に、カメラを切り替えるC#スクリプトをつくります ① １、 Assets ＞ Create ＞ C#Script として 新しいスクリプトをつくり 名前（クラス名）をつけます （※後から、名前（クラス名）を変えることはできません）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Cinemachine;
public class MultiSwitchCamera : MonoBehaviour
{
public CinemachineVirtualCamera vCamera;
int priNum;

Triggerに入って留まってる時と、出ていった時に
カメラのPriorityの数字を変えることで
メインカメラをスイッチしています

始めに using Cimemachine と書いて
Cimemachineの機能を使えるようにします

void Start()
{
priNum = vCamera.GetComponent<CinemachineVirtualCamera>().Priority;
}
void OnTriggerStay(Collider other)
{
if (other.tag == "Player")
{
vCamera.Priority = 100;
}
}

}

void OnTriggerExit(Collider other)
{
if (other.tag == "Player")
{
vCamera.Priority = priNum;
}
}

// はじめにそのヴァーチャルカメラのPriorityに入ってる数字を取得します

// Colliderに当たって、入った時に判断します
//もし当たったotherオブジェクトのTagが”Player”だったら・・

プレイヤーがそのエリアにとどまっている時、
そのエリアのカメラのPriorityを１００にします
// Colliderから出ていった時に判断します
//もし出ていったotherオブジェクトのTagが”Player”だったら・・

プレイヤーが出ていったら、そのエリアのPriorityを元の数字に戻します

42

「MultiSwitchCamera」スクリプトをコライダーのobjectに入れます １、 「MultiSwitchCamera」を コライダーオブジェクトに ドラッグして入れます 2、 新しい「VirtualCamera」を 「MultiSwitchCamera」の空欄 に入れます ① ②

カメラの切り替えで、見せたいものがフレームに収められてることを確かめます

クオーターヴューの場合、 「Create Virtual Camera」を選びます ①

作られたヴァーチャルカメラを選んで、スクリーンを合わせます GameObject > Allign With View を選びます ② ① それがゲームのスクリーンになります

「Soft Zone」はFollowしているオブジェクトが、絶対に出ていかない範囲です １、Unlimited Soft Zoneのチェックを はずすと「SoftZone」を自分で 設定できます 赤い枠がSoft Zoneです Followしているオブジェクトは この枠内には入りません ①

Playerを後ろから追いかけるTPS視点はLookAtにPlayerをドラッグして Aiｍ欄を開き、「POV（Point Of View）」を選びます ① １、 LookAtにPlayerオブジェクトを ドラッグして入れます ② 2、 Aiｍ欄が開くので、 そこでPOVを選びます

作った「２Dスクロール」のレベルをTPS視点のカメラでプレイすると・・ たのしくあそべる ２Dスクロール なんか・・微妙 TPS視点 「カメラ」を変えることで、２Dと３Dの「レベルデザイン技法の違い」に気付きます

複数の切り替えポイントをつくる場合 Camera-A Camera-B Camera-C Camera-D 切り換える方法をプレイヤーがどこのエリアにいるかで 切り換えるようにします

Playerが入ったら、そのエリアのカメラのPriorityを100にします 基本のPriority値４０ 基本のPriority値３０ 基本のPriority値５０ 基本のPriority値2０ Camera-A 今ココ１００です Camera-B Camera-C Camera-D プレイヤーが出たら、そのエリアのカメラPriorityをさげます エリアを重なるように配置します

Playerから「SwitchCamera」を外して、各エリア（「cam-switch」コライダーbox）に 「MultiSwitchCamera」スクリプトを入れ、各カメラをセットします ③ １、 各エリアに MultiSwitchCamera スクリプトをセットします ２、 そこに各カメラをセットします ３、 PlayerのTagは忘れずに ”Player”にしておきます ② ①

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class PlayerMove : MonoBehaviour
{
public float speed = 10.0f;
public float jumpSpeed = 10.0f;
private Rigidbody rB;
public float brake = 1.0f;
public float moveTurnSpeed = 10f;

カメラの正面方向に向かって、上下左右のキー入力で
進行方向を決めるプレイヤーコントロール
各パラメータは調整してみてください

void Start()
{
rB = GetComponent<Rigidbody>();
}

カメラの向いている方向に合わせて
キー入力を加えます

private void FixedUpdate()
{
Vector3 cameraForward = Vector3.Scale(Camera.main.transform.forward, new Vector3(1, 0, 1)).normalized;
Vector3 direction = cameraForward * Input.GetAxis("Vertical") + Camera.main.transform.right * Input.GetAxis("Horizontal");
if (Input.GetKeyDown(KeyCode.Space) == true)
{
direction.y = 5.0f * jumpSpeed;
rB.AddForce(0.0f, direction.y, 0.0f);
}
if (direction.magnitude > 0.01f && !(Input.GetKey(KeyCode.LeftShift)))
{
}

}

簡易的なジャンプ
左レフトキーを押すと「カニ歩き」が可能です

Quaternion moveRot = Quaternion.LookRotation(direction);
transform.rotation = Quaternion.Slerp(transform.rotation, moveRot, Time.deltaTime * moveTurnSpeed);

回頭させます

rB.AddForce(direction.x * speed - rB.velocity.x * brake, 0, direction.z * speed - rB.velocity.z * brake, ForceMode.Impulse);
}

53

エリアごとに切り替える「カメラ」を手軽に実装できます

「カメラ」と「地形」を「操作する体験」を考えて調整してみましょう

３、 「カメラ」が感情を伝える最強のツール プレイヤーの感情はカメラの挙動とつながっています 「驚かしたい」時にカメラを揺らし、「よろこばせたい」時にズームアップする その時、プレイヤーも一緒に、揺れたり、かけよったりしています 56

俯瞰では傍観者 ふーん・・ 自分の「目」になれば当事者 あー！ どうしよっ！ 57

エネミーに触れて爆発した時に、カメラを振動させます ① スクリプトを書く必要がありません！ Cinemachineにカメラを振動させる機能が備わっています １、 SceneにセットしたVirtualCameraを選び、 下方にある「Extention」の「Add Extention」のメニューから 「Cinemachine Impulse Listener」をAddします

２、 エネミーにRigidbodyを入れ、AddComponentから 「Cinemachine Collision Impulse Source」を入れます ① 検索します！ ＊ AddComponentボタンを押して、 検索欄で検索しないと現れないことがあります

３、 「Cinemachine Collision Impulse Source」の「Signal Shape」の 「Raw Signal」の「歯車アイコン」を押すとメニューが現れます ① ① ① ② ② ③ ③ Preset ＞ 6D Shake を選びます ・ Amplitude Gain ・ Frequency Gain 大きくすると大きな振動になります （適宜調整します） 「How To Generate The Impulse」のすべてにチェックを入れます

Cinemachineで簡単に衝撃による「カメラの揺れ」が実装できます

ゴール地点に特別な「ゴールした時のカメラ」を用意します 「Game」Tabにして「Solo」ボタンを押してカメラビューにします ① ① カメラ位置や 角度を調整します ② ② 何も追わせません 何も見つめません ③ ③ Body 「DoNothing」 Aim 「DoNothing」 Noise「DoNothing」 ゴール地点に固定カメラ（CM vcam3）を用意します

ゴール地点にカメラを切り替えるコライダーオブジェクトを用意します 「MultiSwitchCamera」スクリプトを入れて、そこに用意した「CM vcam3」を入れます

ゴールした時に、カメラ＝プレイヤーが駆け寄る動作をすることで ゴールした達成感を強くすることができます

まとめ １、 「カメラ」の位置が、ゲームジャンルをつくりだす ２、 「カメラ」の視界が「プレイヤー」の視界そのもの ３、 「カメラ」はプレイヤーの感情を先取りして伝えるツール ・ 「カメラ」によって、あそび方はさまざまに変化する、操作方法も変化する ・ プレイヤーに与えられる情報は、「カメラ」によって意図的に取捨選択できる ・ プレイヤーが見たいと本能的に感じる事象を「カメラ」は見せなくてはいけない

まとめ これらのことを実習するツールとして Unityの「Cinemachine」はとても手軽で便利なツールです ぜひ、学生さんと一緒に、新しいゲーム「カメラ」の実装体験を得られる 「Cinemachine」を使ってみてください

まとめ Cinemachineで教えるゲームの3つの大切なこと 安原 広和 ユニティ・テクノロジーズ・ジャパン合同会社