２Ｄタップシューティングゲーム 手順４
最終更新：
orika_ex_miyako 2024年08月01日(木) 08:49:06履歴
この手順では、プレイヤーとなるキャラをゲーム画面に配置して設定を行います。
今回プレイヤー役に利用しようとしているモデルはワールド空間(ゲームオブジェクトをいつも配置する場所)用のキャラモデルであるため、実装方法としては２パターンがあります。
１つは、２Ｄの静止画(Image コンポーネント)として Canvas 内に設置する方法、もう１つはキャラモデル専用のカメラとアセットを用意して、Canvas 上にキャラモデルとして表示する方法です。
主な違いとしては、２つ目のキャラモデルとしてゲーム画面に表示する場合には、キャラモデルの持つアニメーションを再生することが出来ます。
まずは２Ｄの静止画として実装しますので、最初に【６】の手順を進めてください。
【６】の手順を実装後に、【７】の手順を確認していただいて、課題として取り組めそうであれば実装していきますが、難しいと感じたら手順【７】はスキップしてください。
＜実装画像＞
＜実装動画 応用課題。手順７で実装＞
動画ファイルへのリンク
手順４ −プレイヤーの作成−
新しい学習内容は、以下の通りです。
６．Canvas内にプレイヤー用のゲームオブジェクトを配置し、設定する
１．設計
この手順では、Canvas ゲームオブジェクト内にプレイヤーの分身となって操作を行うためのキャラを製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。
ここでは、キャラを管理するためのフォルダ役のゲームオブジェクトと、キャラ画像を設定するゲームオブジェクトの２つを順番に作成し、キャラを設計します。
２．Canvas ゲームオブジェクトの子オブジェクトとして PlayerSet ゲームオブジェクトを作成する
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクト(Transfrom コンポーネントのみアタッチされている、役割のまだないゲームオブジェクト)が作成されますので、名前を PlayerSet に変更します。
PlayerSet ゲームオブジェクト ヒエラルキー画像
PlayerSet ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。
PlayerSet ゲームオブジェクト インスペクター画像
PlayerSet ゲームオブジェクト Sceneビュー画像(Sceneビューの中央にある)
以上でこのゲームオブジェクトの設定は完了です。
３．PlayerSet ゲームオブジェクトの子オブジェクトとして、imgChara ゲームオブジェクトを作成する
PlayerSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Sceneビュー内の中央に、Imgae コンポーネントがアタッチされた白いゲームオブジェクトが新しく作成されますので、名前を imgChara に変更します。
imgChara ゲームオブジェクト ヒエラルキー画像
imgChara ゲームオブジェクト インスペクター画像
imgChara ゲームオブジェクト Sceneビュー画像(真ん中の白いゲームオブジェクト)
PlayerSet ゲームオブジェクトの子オブジェクトとして設置されているか、確認した後、次の設定の手順へ移ります。
４．imgChara ゲームオブジェクトの設定を行う
最初に画像を設定します。
imgChara ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。
こちらの画像がゲーム画面に適用されるキャラの画像となりますので、無料アセットとしてインポートしたアセット内の画像をこちらに利用します。
パス
フォルダ画像
上記のパスのフォルダ内にある対象の画像ファイルを、Source Image の欄までドラッグアンドドロップしてアサインしてください''。
画像が登録されて、Sceneビューに反映されます。
インスペクター画像
Sceneビュー画像(白いゲームオブジェクトではなくなっている)
画像の設定が終了したら、Image コンポーネントの Raycast Target のスイッチを外してオフにしておいてください。
画像を設定したら、大きさを調整します。
imgChara ゲームオブジェクトの RectTransfrom コンポーネント内にある、Scale の値を (1, 1, 1) => (3, 3, 3) に変更してください。
現在のサイズが３倍になります。今回も設定しながら、Gameビューにどのように映っているかを確認しておきます。
imgChara ゲームオブジェクト インスペクター画像
imgChara ゲームオブジェクト Sceneビュー画像
imgChara ゲームオブジェクト Gameビュー画像
以上で設定は完了です。
キャラのサイズは後でも調整できますので、画面を確認しながら調整をしましょう。
次の手順は実装してもしなくても問題ありません。続けて学習してもよいですし、後で振り返って学習をしてもよいです。
次は 手順５ −バレットの作成− です。
７．キャラモデルを Canvas 上に表示させる(応用課題)
１．設計
Unityでは、Canvas に設置する UI 用のゲームオブジェクトの描画を行う場合には、Image コンポーネントを利用するように設計されています。
ですが、ワールド空間に設置することを前提に作成されている２Ｄや３Ｄのキャラモデルは、ゲーム画面に描画を行う際に Image コンポーネントではなく、
２Ｄであれば SpriteRenderer コンポーネントが、３Ｄであれば MeshRenderer コンポーネントや SkinedMeshRenderer コンポーネントが利用されています。
このように、ゲーム画面に描画を行う設定自体が異なる構造になっているため、多くのキャラモデルは Canvas 内には設置することが出来ません。
（厳密にいうと設置は出来るのですが、サイズや挙動が正常に動作しなくなります。)
そのため、キャラモデルのゲームオブジェクトについては、通常のゲーム制作で利用するUnityのワールド空間に設置します。
そして新しくキャラモデル専用のカメラを作成し、そのカメラを通じて Canvas 上にキャラモデルを映す手順で設計を行います。
ワールド空間であればキャラモデルは正常に描画処理が行われます。
ワールド空間にあるキャラモデルのゲームオブジェクトをカメラを通じて Canvas に投影し、２つのカメラが映す対象を合成して映しています。
＜実装動画 Canvas 以外の場所にいるキャラキャラの情報が、カメラを通じて Canvas 内に投影されて表示されている＞
動画ファイルへのリンク
この手法を利用することによって、Canvas 用の描画設定を持っていないゲームオブジェクトであっても Canvas ゲームオブジェクトと一緒にゲーム画面に登場させることが出来ます。
手順としては、次の流れになります。
＜完成図＞
重要なことは、手順通りに進めて実装を行うことではなく、処理の内容をしっかりと理解をしたうえで、この教材を活用できているか、という部分です。
教材の内容通りに進めていければエラーは出たとしても実装を行うことはできます。
ですが、その実装内容を振り返って、自分の技術として覚えることが出来るかどうかは、処理の理解度によります。
そのため、もしも上記の手順についてわからない部分があったり、実装を進めていく中で難しい部分がある場合には、この手順はスキップしてください。
しっかりと Unity の知識を深めてから再度挑戦していただくことをお勧めします。まったく問題ありません。
２．PlayerSet ゲームオブジェクトの子オブジェクトである imgChara ゲームオブジェクトを非表示に設定する
キャラモデルのキャラを Canvas 上に移すようにしますので、先ほどの手順で作成したキャラの画像のゲームオブジェクトは不要となります。
手順【６】で作成したPlayerSet ゲームオブジェクトの子オブジェクトである imgChara ゲームオブジェクトの名前の横のスイッチを切って非表示にしてください。
PlayerSet ゲームオブジェクト自体は今後も利用しますので、非表示にする対象を間違えないようにしてください。
ヒエラルキー画像
３．Little_Cat_Girl ゲームオブジェクトをヒエラルキーに作成して、設定を行う
インポートしてあるアセットのキャラモデルをヒエラルキーに配置します。
以下のパスにあるゲームオブジェクトのプレファブを探して選択してください。
他の無料のアセットを利用している場合には、そちらのゲームオブジェクトを選択してください。
パス
フォルダ画像
インスペクター画像
ヒエラルキーの空いている場所にドラッグアンドドロップしてください。
このとき、Canvas ゲームオブジェクトの子オブジェクトにしないように注意してください。
ヒエラルキー画像
Little_Cat_Girl ゲームオブジェクト インスペクター画像
この時点ではまだ Canvas 上にはキャラキャラの画像は表示されません。
キャラモデルはTransfrom コンポーネントによってワールド座標の位置情報が管理されているのに対して
Canvas ゲームオブジェクトは Canvas 用の RectTransform コンポーネントによって Canvas 上での座標によって管理されているため
それぞれが別の位置に配置されているためです。
キャラモデルが Canvas の後ろに隠れてしまっているため、そのままですと重なってしまって今後の作業がしにくくなります。
Little_Cat_Girl ゲームオブジェクトの Transform の Position.x を -10 に設定し、Canvas の左側にキャラを移動させて、Sceneビューに並んで映るようにしてください。
またアタッチされているコンポーネントや、子オブジェクトの設定も確認しておきましょう。SpriteRenderer コンポーネントがアタッチされていることが分かります。
Little_Cat_Girl ゲームオブジェクト インスペクター画像
Sceneビュー画像
４．キャラモデル描画用のレイヤーを追加して、Little_Cat_Girl ゲームオブジェクトに設定する
この先の手順で、キャラモデルの専用のカメラを作成するにあたり、各カメラでは Layer によってカメラに映す対象を制限することが出来ます。
そこで、キャラモデルだけを映せるように専用の Layer を作成し、その Layer の設定を持つゲームオブジェクトのみをキャラモデル専用のカメラでは映すように設定をします。
そのためには、新しいキャラモデル描画用のレイヤーの追加登録と、そのレイヤーを Little_Cat_Girl ゲームオブジェクトに設定します。
ヒエラルキーにある Little_Cat_Girl ゲームオブジェクトを選択し、Layer の部分をクリックします。
プルダウンメニューが開きますので、一番下にある Add Layer… ボタンを選択します。
インスペクターの内容が、新しいレイヤーを追加することができる内容に切り替わりますので、User Layer 8 の部分に 3D_Chara レイヤーを追加して登録してください。
今回のアセットのキャラモデルは厳密には３Ｄキャラではありませんが、区別しやすい名前ということでレイヤー名を作成しています。別の名称でも構いません。
Tags & Layers インスペクター画像
登録が終了したら、Little_Cat_Girl ゲームオブジェクトに、このレイヤーを設定します。
先ほどと同じように Little_Cat_Girl ゲームオブジェクトのインスペクターの Layer を選択して、プルダウンメニューから 3D_Chara レイヤーを選択してください。
その際、レイヤー変更の確認のウインドウが開きます。これは、Little_Cat_Girl ゲームオブジェクトのレイヤーの設定を子オブジェクトにも適用するかどうかの確認になりますので
Yes, Change Children を選択して、子オブジェクトのレイヤーもまとめて 3D_Chara レイヤーに変更してください。
レイヤー変更確認ウインドウ
Little_Cat_Girl ゲームオブジェクト インスペクター画像
以上でこのゲームオブジェクトの設定は完了です。
５．Project 内に RenderTextures フォルダを作成し、フォルダ内に CharaRenderTexture を作成する
RenderTexture（レンダーテクスチャ）という、ランタイムで描画を行うテクスチャを作成します。
この情報を、次の手順で作成する、キャラモデル専用のカメラに設定することによって、カメラが映している描画情報をテクスチャにして更新し、
RawImage コンポーネントを通じて、ゲーム画面に描画をすることが出来るようになります。
最初に、RenderTexture を格納しておくためのフォルダを作成しておきます。
Project 内の空いている場所で右クリックをするか、Projectビューの下にあるプラスボタンを押してメニューを開き、Create => Folder を選択してください。
新しいフォルダが作成されますので、名前を RenderTextures に変更します。
このフォルダの中で再度右クリックをしてメニューを開き、Create => RenderTexture を選択します。
新しく RenderTexture が作成されますので、名前を CharaRenderTexture に変更します。
フォルダ画像
CharaRenderTexture インスペクター画像
特に設定を行う必要はありません。
６．CharaCamera ゲームオブジェクトを作成して設定を行う
先ほどの手順で作成した RenderTexture に描画した情報を映すためのカメラを作成します。
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create => Camera を選択します。
新しい Camera ゲームオブジェクトが作成されますので、名前を CharaCamera に変更してください。
ヒエラルキー画像
CharaCamera ゲームオブジェクト インスペクター画像(座標情報は変わりますが、後で設定するので問題ありません)
CharaCamera ゲームオブジェクトの設定を行います。
最初に、AudioListener コンポーネントを Remove してください。
このコンポーネントは、ゲーム内においてマイクのような機能を持ち、ゲーム内で発生した音源（BGMやSE）を拾って、PCやスマホのスピーカーから再生する役割を担います。
参考サイト
このコンポーネントは、ヒエラルキーにあるいずれかのゲームオブジェクトに１つアタッチされていれば動作するコンポーネントです。
すでに Main Camera ゲームオブジェクトにアタッチされていますので、２つ目以降の AudioListener コンポーネントは不要になります。
また２つ以上の AudioListener コンポーネントが存在していると、警告文が表示されます。
つづいて、Camera コンポーネントの設定を行います。５つの項目を順番に設定します。
１．Clear Flags の設定を Skybox => Solid Color に変更します。
２．その下にある Culling Mask の設定を Everything => 先ほど作成したレイヤーのみ（3D_Chara）に変更します。
３．Projection の設定は Perspective のままでもよいですが、Orthographic にしていただいても構いません。
４．Clipping Planes の設定は far については 1000 も必要ありませんので、 10 よりも大きな値(20 など)に設定していただければキャラは映りますが、これは任意です。
ただし 10 ピッタリに設定するとキャラモデルがアニメーションした際に一部が映らなくなることもありますので、変更する場合には少なくとも 15 以上に設定してください。
５．最後に、Target Texture のプロパティ欄に、先ほど作成した CharaRenderTexture をドラッグアンドドロップしてアサインしてください。
インスペクター画像
各プロパティについては解説を省略しています。下記のマニュアルを読んで理解を深めてください。
他にも良い記事のサイトが複数ありますので、自分で調べてみましょう。
参考サイト
Camera コンポーネントの設定が終了したら、CharaCamera ゲームオブジェクトの位置をキャラが映る位置に移動します。
Position.x をキャラと同じ -10 に設定し、Position.z を -10 に設定して、CharaCamera ゲームオブジェクトの位置をキャラモデルの位置よりも手前にしてください。
双方のレイヤーの設定が正しければ、CharaCamera にワールド座標にいるキャラが映ります。
CharaCamera ゲームオブジェクト インスペクター画像
Sceneビュー画像 Sceneビューの右下のCharaCameraビューにキャラが映っている
この時点でも、まだGameビューにはキャラは映りません。最後に CharaCamera ゲームオブジェクトを情報を投影するためのゲームオブジェクトを作成します。
６．Canvas ゲームオブジェクトの子オブジェクトとして RawImageChara ゲームオブジェクトを作成して、設定行う
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => RawImage を選択します。
RawImage コンポーネントがアタッチされた、新しい RawImage ゲームオブジェクトが作成されますので、名前を RawImageChara に変更してください。
ヒエラルキー画像
RawImageChara ゲームオブジェクト インスペクター画像
Sceneビュー画像 中央に白い画像のゲームオブジェクト
RawImage コンポーネントにある Texture の設定はスプライトテクスチャ以外の画像を設定することができます。
この機能を活用することで、カメラが描画した RenderTexture の情報をテクスチャとしてUI上に２Ｄ画像として表示することが出来ます。
参考サイト
RawImage コンポーネントの設定を行います。最初に、Raycast Target のチェックを外してオフにしてください。
次に、RawImage コンポーネントの Texture プロパティ欄に、CharaRenderTexture をドラッグアンドドロップしてアサインしてください。
インスペクターの最下段に、RawImageChara として、Textureにキャラのイメージが表示されていれば成功です。
見当たらない場合、Add Component ボタンよりも下に、RawImageChara という項目がありますのでクリックしてください。テクスチャが表示されます。
まだ小さいサイズですが、ついに Gameビューにキャラが映るようになりました。
RawImageChara ゲームオブジェクト アサイン後のインスペクター画像
Gameビュー画像
最後に、RectTransfom の Scale の値を変更し、手順【６】のCanvas 内に製作したキャラの大きさ(imgChara)とサイズを合わせます。
Scale を （1, 1, 1） => (3, 3, 3) に変更してください。
RawImageChara ゲームオブジェクト インスペクター画像
Sceneビュー画像
Gameビュー画像
以上で完成です。
７．ゲームを実行して、動作を確認する
ゲームを実行してみてください。Sceneビューの Canvas の隣にいる大きなキャラモデルのアニメーションの動きがCanvas 内に反映されて、
キャラがアニメーションしていれば制御成功です。Gameビューと Sceneビューの両方で確認してみてください。
＜実行動画＞
https://gyazo.com/d822a4422e0a4caa6ccfd6fb11877ef6
最後に、アニメーションの初期設定を行いましょう。
８．初期アニメーションの設定
現在はゲームを実行すると、キャラモデルが歩くアニメーションのループ再生を行うようになっています。
これは、ゲームを実行時に初期値として、歩くアニメーションが設定されているためです。
このままでもよいですが、このキャラモデルには待機用のアニメーションもありますので、初期値のアニメーションを別のアニメーションに変更します。
Unityの左上にあるメニューの中から Window => Animation => Animator を選択してください。
SceneビューやGameビューのような Animatorビューがエディターのレイアウト内に追加されます。
Animatorビュー・タブ(いずれかのビュー・タブの隣に追加される)
アニメーションの切り替えの設定は、このAnimatorビューの中で行います。他のタブと一緒でいつでも切り替えが出来ます。
設定を行うためには、対象となるゲームオブジェクトをヒエラルキーで選択している必要があります。
ヒエラルキーにあるキャラのゲームオブジェクトを選択した状態にしてください。(インスペクターに表示されている状態)
この状態になると、キャラのゲームオブジェクトにアタッチされている、Animator コンポーネントに登録されているAnimatorの情報がAnimatorビュー内に表示されます。
Animatorビューの操作ですが、マウスのホイールボタンを押しながらマウスを移動させることによって、Animatorビューの中を移動できます。
キャラを選択して Animator ビューを見ると、次のような画面になります。
変更前
Entry というアイコン(State（ステート）といいます)部分から walk という部分に矢印がつながっているのが分かります。
この Entry から出ている → の先にあたるステートの部分が、ゲームを実行した際の初期値のアニメーションとなります。
この設定を、walk の下にある、idle に変更します。
Entry のステートを左クリックして選択し、その上で右クリックをしてメニューを開き、Set StateMachine Default State というコマンドを選択してください。
このコマンドは、ゲーム開始と同時に、Entry の先をどのアニメーションにするか設定するものです。
コマンドを選択すると Entry ステートから矢印が出ますので、この矢印を idle ステートまで移動させていって、左クリックを idle ステートの上で押します。
矢印が Entyr => idle につながっていれば成功です。walk への矢印がなくなったと思います。
変更後
ステートとステートをつなぐ矢印をトランジションといい、トランジションによって、ステートとステートが切り替わることをステートの遷移（せんい）といいます。
これはまた学習しますが、覚えておいてください。
９．ゲームを実行して動作を確認する
これでゲームの開始と同時に、walk アニメーションではなく、idle アニメーションが再生されるようになりました。
ゲームを実行して確認してみてください。
＜実行動画＞
https://gyazo.com/6189aaf89f7d091c766c2876cd5cdc09
ゲーム実行中にGameビューの他にも、対象のゲームオブジェクトを選択してからAnimator ビューを見ることで、ステートの遷移が確認できます。
以上でこの手順は終了です。
次は 手順５ −バレットの作成− です。
今回プレイヤー役に利用しようとしているモデルはワールド空間(ゲームオブジェクトをいつも配置する場所)用のキャラモデルであるため、実装方法としては２パターンがあります。
１つは、２Ｄの静止画(Image コンポーネント)として Canvas 内に設置する方法、もう１つはキャラモデル専用のカメラとアセットを用意して、Canvas 上にキャラモデルとして表示する方法です。
主な違いとしては、２つ目のキャラモデルとしてゲーム画面に表示する場合には、キャラモデルの持つアニメーションを再生することが出来ます。
まずは２Ｄの静止画として実装しますので、最初に【６】の手順を進めてください。
【６】の手順を実装後に、【７】の手順を確認していただいて、課題として取り組めそうであれば実装していきますが、難しいと感じたら手順【７】はスキップしてください。
＜実装画像＞
＜実装動画 応用課題。手順７で実装＞
動画ファイルへのリンク
手順４ −プレイヤーの作成−
６．Canvas内にプレイヤー用のゲームオブジェクトを配置し、設定する ７．キャラモデルを Canvas 上に表示させる(応用課題)
新しい学習内容は、以下の通りです。
・キャラモデルをUI(Canvas)上に表示する方法(RawImage コンポーネント、RenderTextureの活用)【７】
６．Canvas内にプレイヤー用のゲームオブジェクトを配置し、設定する 
１．設計
この手順では、Canvas ゲームオブジェクト内にプレイヤーの分身となって操作を行うためのキャラを製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。
ここでは、キャラを管理するためのフォルダ役のゲームオブジェクトと、キャラ画像を設定するゲームオブジェクトの２つを順番に作成し、キャラを設計します。
２．Canvas ゲームオブジェクトの子オブジェクトとして PlayerSet ゲームオブジェクトを作成する
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクト(Transfrom コンポーネントのみアタッチされている、役割のまだないゲームオブジェクト)が作成されますので、名前を PlayerSet に変更します。
PlayerSet ゲームオブジェクトは、キャラに関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。
PlayerSet ゲームオブジェクト ヒエラルキー画像
PlayerSet ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。
PlayerSet ゲームオブジェクト インスペクター画像
PlayerSet ゲームオブジェクト Sceneビュー画像(Sceneビューの中央にある)
以上でこのゲームオブジェクトの設定は完了です。
３．PlayerSet ゲームオブジェクトの子オブジェクトとして、imgChara ゲームオブジェクトを作成する
PlayerSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Sceneビュー内の中央に、Imgae コンポーネントがアタッチされた白いゲームオブジェクトが新しく作成されますので、名前を imgChara に変更します。
imgChara ゲームオブジェクト ヒエラルキー画像
imgChara ゲームオブジェクトは、ゲームに登場するプレイヤー役のキャラの画像表示の役割を持ちます。
imgChara ゲームオブジェクト インスペクター画像
imgChara ゲームオブジェクト Sceneビュー画像(真ん中の白いゲームオブジェクト)
PlayerSet ゲームオブジェクトの子オブジェクトとして設置されているか、確認した後、次の設定の手順へ移ります。
４．imgChara ゲームオブジェクトの設定を行う
最初に画像を設定します。
imgChara ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。
こちらの画像がゲーム画面に適用されるキャラの画像となりますので、無料アセットとしてインポートしたアセット内の画像をこちらに利用します。
パス
Assets/Little Cat Girl/Little_Cat_Girl_ref.png
フォルダ画像
上記のパスのフォルダ内にある対象の画像ファイルを、Source Image の欄までドラッグアンドドロップしてアサインしてください''。
画像が登録されて、Sceneビューに反映されます。
インスペクター画像
Sceneビュー画像(白いゲームオブジェクトではなくなっている)
画像の設定が終了したら、Image コンポーネントの Raycast Target のスイッチを外してオフにしておいてください。
画像を設定したら、大きさを調整します。
imgChara ゲームオブジェクトの RectTransfrom コンポーネント内にある、Scale の値を (1, 1, 1) => (3, 3, 3) に変更してください。
現在のサイズが３倍になります。今回も設定しながら、Gameビューにどのように映っているかを確認しておきます。
imgChara ゲームオブジェクト インスペクター画像
imgChara ゲームオブジェクト Sceneビュー画像
imgChara ゲームオブジェクト Gameビュー画像
以上で設定は完了です。
キャラのサイズは後でも調整できますので、画面を確認しながら調整をしましょう。
次の手順は実装してもしなくても問題ありません。続けて学習してもよいですし、後で振り返って学習をしてもよいです。
次は 手順５ −バレットの作成− です。
７．キャラモデルを Canvas 上に表示させる(応用課題)
１．設計
Unityでは、Canvas に設置する UI 用のゲームオブジェクトの描画を行う場合には、Image コンポーネントを利用するように設計されています。
ですが、ワールド空間に設置することを前提に作成されている２Ｄや３Ｄのキャラモデルは、ゲーム画面に描画を行う際に Image コンポーネントではなく、
２Ｄであれば SpriteRenderer コンポーネントが、３Ｄであれば MeshRenderer コンポーネントや SkinedMeshRenderer コンポーネントが利用されています。
このように、ゲーム画面に描画を行う設定自体が異なる構造になっているため、多くのキャラモデルは Canvas 内には設置することが出来ません。
（厳密にいうと設置は出来るのですが、サイズや挙動が正常に動作しなくなります。)
そのため、キャラモデルのゲームオブジェクトについては、通常のゲーム制作で利用するUnityのワールド空間に設置します。
そして新しくキャラモデル専用のカメラを作成し、そのカメラを通じて Canvas 上にキャラモデルを映す手順で設計を行います。
ワールド空間であればキャラモデルは正常に描画処理が行われます。
ワールド空間にあるキャラモデルのゲームオブジェクトをカメラを通じて Canvas に投影し、２つのカメラが映す対象を合成して映しています。
＜実装動画 Canvas 以外の場所にいるキャラキャラの情報が、カメラを通じて Canvas 内に投影されて表示されている＞
動画ファイルへのリンク
この手法を利用することによって、Canvas 用の描画設定を持っていないゲームオブジェクトであっても Canvas ゲームオブジェクトと一緒にゲーム画面に登場させることが出来ます。
手順としては、次の流れになります。
１．キャラモデルのキャラ(以下、キャラ)をワールド空間に設置する ２．キャラの設定を行う ３．専用のタグを設定する ４．RenderTexture を作成する ５．キャラを映す専用のカメラを作成し、設定を行う ６．Canvas ゲームオブジェクトの子オブジェクトとして RawImage ゲームオブジェクトを作成し、設定を行う
＜完成図＞
重要なことは、手順通りに進めて実装を行うことではなく、処理の内容をしっかりと理解をしたうえで、この教材を活用できているか、という部分です。
教材の内容通りに進めていければエラーは出たとしても実装を行うことはできます。
ですが、その実装内容を振り返って、自分の技術として覚えることが出来るかどうかは、処理の理解度によります。
そのため、もしも上記の手順についてわからない部分があったり、実装を進めていく中で難しい部分がある場合には、この手順はスキップしてください。
しっかりと Unity の知識を深めてから再度挑戦していただくことをお勧めします。まったく問題ありません。
２．PlayerSet ゲームオブジェクトの子オブジェクトである imgChara ゲームオブジェクトを非表示に設定する
キャラモデルのキャラを Canvas 上に移すようにしますので、先ほどの手順で作成したキャラの画像のゲームオブジェクトは不要となります。
手順【６】で作成したPlayerSet ゲームオブジェクトの子オブジェクトである imgChara ゲームオブジェクトの名前の横のスイッチを切って非表示にしてください。
PlayerSet ゲームオブジェクト自体は今後も利用しますので、非表示にする対象を間違えないようにしてください。
ヒエラルキー画像
３．Little_Cat_Girl ゲームオブジェクトをヒエラルキーに作成して、設定を行う
インポートしてあるアセットのキャラモデルをヒエラルキーに配置します。
以下のパスにあるゲームオブジェクトのプレファブを探して選択してください。
他の無料のアセットを利用している場合には、そちらのゲームオブジェクトを選択してください。
パス
Assets/Little Cat Girl/Little_Cat_Girl.prefab
フォルダ画像
インスペクター画像
ヒエラルキーの空いている場所にドラッグアンドドロップしてください。
このとき、Canvas ゲームオブジェクトの子オブジェクトにしないように注意してください。
ヒエラルキー画像
Little_Cat_Girl ゲームオブジェクト インスペクター画像
この時点ではまだ Canvas 上にはキャラキャラの画像は表示されません。
キャラモデルはTransfrom コンポーネントによってワールド座標の位置情報が管理されているのに対して
Canvas ゲームオブジェクトは Canvas 用の RectTransform コンポーネントによって Canvas 上での座標によって管理されているため
それぞれが別の位置に配置されているためです。
キャラモデルが Canvas の後ろに隠れてしまっているため、そのままですと重なってしまって今後の作業がしにくくなります。
Little_Cat_Girl ゲームオブジェクトの Transform の Position.x を -10 に設定し、Canvas の左側にキャラを移動させて、Sceneビューに並んで映るようにしてください。
またアタッチされているコンポーネントや、子オブジェクトの設定も確認しておきましょう。SpriteRenderer コンポーネントがアタッチされていることが分かります。
Little_Cat_Girl ゲームオブジェクト インスペクター画像
Sceneビュー画像
４．キャラモデル描画用のレイヤーを追加して、Little_Cat_Girl ゲームオブジェクトに設定する
この先の手順で、キャラモデルの専用のカメラを作成するにあたり、各カメラでは Layer によってカメラに映す対象を制限することが出来ます。
そこで、キャラモデルだけを映せるように専用の Layer を作成し、その Layer の設定を持つゲームオブジェクトのみをキャラモデル専用のカメラでは映すように設定をします。
そのためには、新しいキャラモデル描画用のレイヤーの追加登録と、そのレイヤーを Little_Cat_Girl ゲームオブジェクトに設定します。
ヒエラルキーにある Little_Cat_Girl ゲームオブジェクトを選択し、Layer の部分をクリックします。
プルダウンメニューが開きますので、一番下にある Add Layer… ボタンを選択します。
インスペクターの内容が、新しいレイヤーを追加することができる内容に切り替わりますので、User Layer 8 の部分に 3D_Chara レイヤーを追加して登録してください。
今回のアセットのキャラモデルは厳密には３Ｄキャラではありませんが、区別しやすい名前ということでレイヤー名を作成しています。別の名称でも構いません。
Tags & Layers インスペクター画像
登録が終了したら、Little_Cat_Girl ゲームオブジェクトに、このレイヤーを設定します。
先ほどと同じように Little_Cat_Girl ゲームオブジェクトのインスペクターの Layer を選択して、プルダウンメニューから 3D_Chara レイヤーを選択してください。
その際、レイヤー変更の確認のウインドウが開きます。これは、Little_Cat_Girl ゲームオブジェクトのレイヤーの設定を子オブジェクトにも適用するかどうかの確認になりますので
Yes, Change Children を選択して、子オブジェクトのレイヤーもまとめて 3D_Chara レイヤーに変更してください。
レイヤー変更確認ウインドウ
Little_Cat_Girl ゲームオブジェクト インスペクター画像
以上でこのゲームオブジェクトの設定は完了です。
５．Project 内に RenderTextures フォルダを作成し、フォルダ内に CharaRenderTexture を作成する
RenderTexture（レンダーテクスチャ）という、ランタイムで描画を行うテクスチャを作成します。
この情報を、次の手順で作成する、キャラモデル専用のカメラに設定することによって、カメラが映している描画情報をテクスチャにして更新し、
RawImage コンポーネントを通じて、ゲーム画面に描画をすることが出来るようになります。
Unity公式マニュアル
RenderTexture
https://docs.unity3d.com/ja/2019.4/Manual/class-Re...
最初に、RenderTexture を格納しておくためのフォルダを作成しておきます。
Project 内の空いている場所で右クリックをするか、Projectビューの下にあるプラスボタンを押してメニューを開き、Create => Folder を選択してください。
新しいフォルダが作成されますので、名前を RenderTextures に変更します。
このフォルダの中で再度右クリックをしてメニューを開き、Create => RenderTexture を選択します。
新しく RenderTexture が作成されますので、名前を CharaRenderTexture に変更します。
フォルダ画像
CharaRenderTexture インスペクター画像
特に設定を行う必要はありません。
６．CharaCamera ゲームオブジェクトを作成して設定を行う
先ほどの手順で作成した RenderTexture に描画した情報を映すためのカメラを作成します。
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create => Camera を選択します。
新しい Camera ゲームオブジェクトが作成されますので、名前を CharaCamera に変更してください。
ヒエラルキー画像
CharaCamera ゲームオブジェクト インスペクター画像(座標情報は変わりますが、後で設定するので問題ありません)
CharaCamera ゲームオブジェクトの設定を行います。
最初に、AudioListener コンポーネントを Remove してください。
このコンポーネントは、ゲーム内においてマイクのような機能を持ち、ゲーム内で発生した音源（BGMやSE）を拾って、PCやスマホのスピーカーから再生する役割を担います。
参考サイト
Unity公式マニュアル
AudioListener
https://docs.unity3d.com/ja/2019.4/Manual/class-Au...
このコンポーネントは、ヒエラルキーにあるいずれかのゲームオブジェクトに１つアタッチされていれば動作するコンポーネントです。
すでに Main Camera ゲームオブジェクトにアタッチされていますので、２つ目以降の AudioListener コンポーネントは不要になります。
また２つ以上の AudioListener コンポーネントが存在していると、警告文が表示されます。
つづいて、Camera コンポーネントの設定を行います。５つの項目を順番に設定します。
１．Clear Flags の設定を Skybox => Solid Color に変更します。
２．その下にある Culling Mask の設定を Everything => 先ほど作成したレイヤーのみ（3D_Chara）に変更します。
３．Projection の設定は Perspective のままでもよいですが、Orthographic にしていただいても構いません。
４．Clipping Planes の設定は far については 1000 も必要ありませんので、 10 よりも大きな値(20 など)に設定していただければキャラは映りますが、これは任意です。
ただし 10 ピッタリに設定するとキャラモデルがアニメーションした際に一部が映らなくなることもありますので、変更する場合には少なくとも 15 以上に設定してください。
５．最後に、Target Texture のプロパティ欄に、先ほど作成した CharaRenderTexture をドラッグアンドドロップしてアサインしてください。
インスペクター画像
各プロパティについては解説を省略しています。下記のマニュアルを読んで理解を深めてください。
他にも良い記事のサイトが複数ありますので、自分で調べてみましょう。
参考サイト
Unity公式マニュアル
カメラ
https://docs.unity3d.com/ja/2019.4/Manual/class-Ca...
Camera コンポーネントの設定が終了したら、CharaCamera ゲームオブジェクトの位置をキャラが映る位置に移動します。
Position.x をキャラと同じ -10 に設定し、Position.z を -10 に設定して、CharaCamera ゲームオブジェクトの位置をキャラモデルの位置よりも手前にしてください。
双方のレイヤーの設定が正しければ、CharaCamera にワールド座標にいるキャラが映ります。
CharaCamera ゲームオブジェクト インスペクター画像
Sceneビュー画像 Sceneビューの右下のCharaCameraビューにキャラが映っている
この時点でも、まだGameビューにはキャラは映りません。最後に CharaCamera ゲームオブジェクトを情報を投影するためのゲームオブジェクトを作成します。
６．Canvas ゲームオブジェクトの子オブジェクトとして RawImageChara ゲームオブジェクトを作成して、設定行う
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => RawImage を選択します。
RawImage コンポーネントがアタッチされた、新しい RawImage ゲームオブジェクトが作成されますので、名前を RawImageChara に変更してください。
ヒエラルキー画像
RawImageChara ゲームオブジェクト インスペクター画像
Sceneビュー画像 中央に白い画像のゲームオブジェクト
RawImage コンポーネントにある Texture の設定はスプライトテクスチャ以外の画像を設定することができます。
この機能を活用することで、カメラが描画した RenderTexture の情報をテクスチャとしてUI上に２Ｄ画像として表示することが出来ます。
参考サイト
Unity公式マニュアル
RawImage
https://docs.unity3d.com/ja/2019.4/Manual/script-R...
RawImage コンポーネントの設定を行います。最初に、Raycast Target のチェックを外してオフにしてください。
次に、RawImage コンポーネントの Texture プロパティ欄に、CharaRenderTexture をドラッグアンドドロップしてアサインしてください。
インスペクターの最下段に、RawImageChara として、Textureにキャラのイメージが表示されていれば成功です。
見当たらない場合、Add Component ボタンよりも下に、RawImageChara という項目がありますのでクリックしてください。テクスチャが表示されます。
まだ小さいサイズですが、ついに Gameビューにキャラが映るようになりました。
RawImageChara ゲームオブジェクト アサイン後のインスペクター画像
Gameビュー画像
最後に、RectTransfom の Scale の値を変更し、手順【６】のCanvas 内に製作したキャラの大きさ(imgChara)とサイズを合わせます。
Scale を （1, 1, 1） => (3, 3, 3) に変更してください。
RawImageChara ゲームオブジェクト インスペクター画像
Sceneビュー画像
Gameビュー画像
以上で完成です。
７．ゲームを実行して、動作を確認する
ゲームを実行してみてください。Sceneビューの Canvas の隣にいる大きなキャラモデルのアニメーションの動きがCanvas 内に反映されて、
キャラがアニメーションしていれば制御成功です。Gameビューと Sceneビューの両方で確認してみてください。
＜実行動画＞
https://gyazo.com/d822a4422e0a4caa6ccfd6fb11877ef6
最後に、アニメーションの初期設定を行いましょう。
８．初期アニメーションの設定
現在はゲームを実行すると、キャラモデルが歩くアニメーションのループ再生を行うようになっています。
これは、ゲームを実行時に初期値として、歩くアニメーションが設定されているためです。
このままでもよいですが、このキャラモデルには待機用のアニメーションもありますので、初期値のアニメーションを別のアニメーションに変更します。
Unityの左上にあるメニューの中から Window => Animation => Animator を選択してください。
SceneビューやGameビューのような Animatorビューがエディターのレイアウト内に追加されます。
Animatorビュー・タブ(いずれかのビュー・タブの隣に追加される)
アニメーションの切り替えの設定は、このAnimatorビューの中で行います。他のタブと一緒でいつでも切り替えが出来ます。
設定を行うためには、対象となるゲームオブジェクトをヒエラルキーで選択している必要があります。
ヒエラルキーにあるキャラのゲームオブジェクトを選択した状態にしてください。(インスペクターに表示されている状態)
この状態になると、キャラのゲームオブジェクトにアタッチされている、Animator コンポーネントに登録されているAnimatorの情報がAnimatorビュー内に表示されます。
Animatorビューの操作ですが、マウスのホイールボタンを押しながらマウスを移動させることによって、Animatorビューの中を移動できます。
キャラを選択して Animator ビューを見ると、次のような画面になります。
変更前
Entry というアイコン(State（ステート）といいます)部分から walk という部分に矢印がつながっているのが分かります。
この Entry から出ている → の先にあたるステートの部分が、ゲームを実行した際の初期値のアニメーションとなります。
この設定を、walk の下にある、idle に変更します。
Entry のステートを左クリックして選択し、その上で右クリックをしてメニューを開き、Set StateMachine Default State というコマンドを選択してください。
このコマンドは、ゲーム開始と同時に、Entry の先をどのアニメーションにするか設定するものです。
コマンドを選択すると Entry ステートから矢印が出ますので、この矢印を idle ステートまで移動させていって、左クリックを idle ステートの上で押します。
矢印が Entyr => idle につながっていれば成功です。walk への矢印がなくなったと思います。
変更後
ステートとステートをつなぐ矢印をトランジションといい、トランジションによって、ステートとステートが切り替わることをステートの遷移（せんい）といいます。
これはまた学習しますが、覚えておいてください。
９．ゲームを実行して動作を確認する
これでゲームの開始と同時に、walk アニメーションではなく、idle アニメーションが再生されるようになりました。
ゲームを実行して確認してみてください。
＜実行動画＞
https://gyazo.com/6189aaf89f7d091c766c2876cd5cdc09
ゲーム実行中にGameビューの他にも、対象のゲームオブジェクトを選択してからAnimator ビューを見ることで、ステートの遷移が確認できます。
以上でこの手順は終了です。
次は 手順５ −バレットの作成− です。
コメントをかく