44.キャラクターをイチから作成する①実践

今回実装する機能↓

Characterクラスを選択して空のブループリントクラスからキャラクターを作っていきます。カメラの視点移動だったり、カメラ方向に合わせてキャラクターの前後左右移動だったりを実装していきます。

https://youtu.be/rx_4eShqRPA

ブループリントクラスの章の前のページで学んだゲームモードやインプット、Characterクラスなどを使用していきます。

①まずは空のレベルの用意する

今回全部1から作っていきたいのでファイル > 新規レベル > Basicを選択して空のレベルから作成していきます。

https://scrapbox.io/files/65c3e0044f9ed800246a1381.png

レベルが開きます。

https://scrapbox.io/files/65c3e02a5670d10023ff56fb.png

そしたら新規フォルダでMapsフォルダを作成します。作成したレベルを保存しておきます。Ctrl+Alt+Sで「名前を付けてレベルを保存」しておきます。名前はCharacterTestなどにしておきます。

https://scrapbox.io/files/65c3e075780f110025be591a.png

Blueprintsフォルダを作成します。右クリック > ブループリントクラス > GameModeを作成して名前をMyGameModeにします。

https://scrapbox.io/files/65c3e09c5ab81100257b084d.png

エディタ右上の設定からワールドセッティングを開きます。現在ゲームモードオーバーライドはNoneになっています。

https://scrapbox.io/files/65c3e0d202d4ef00241c65a5.png

作成したMyGameModeをセットします。

https://scrapbox.io/files/65c3e0f2630e400024b9ea39.png

復習しておくとゲームモードはゲームのルールを決めるブループリントクラスです。プレイヤーをここにセットして使用したりします。

Blueprintsフォルダにて、右クリック > ブループリントクラス > Characterを選択して、名前をMyCharacterにします。

https://scrapbox.io/files/65c3e166ddc34600260160ec.png

ゲームモードのDefaultPawnClass(操作するプレイヤーの設定)にMyCharacterをセットします。

https://scrapbox.io/files/65c3e192630e400024b9ebf4.png

もしもPlayerStartがない場合は、新たにプレイヤーのスタート地点を決めるPlayerStartを設置します。

https://scrapbox.io/files/65c3e1b70d7ce70024b5f494.png

ここまで出来たら一旦プレイしてみましょう。現状操作出来ないキャラクターがスポーンしてそのキャラクター視点になります。

https://scrapbox.io/files/65c3e1edb54965002332c992.gif

②三人称視点のキャラクターを1から作成する

では今回キャラクターのメッシュも変更したいので、アセットを追加してからキャラクターを作成していきます。使用するアセットは無料なので試していきましょう。

EpicGamesLauncherを開いて、UnrealEngine > マーケットプレイスを開きます。

https://scrapbox.io/files/65c3e2615ab81100257b0ea6.png

「Stylized Character Kit: Casual 01」と検索します。プロジェクトに追加(最初は無料と記載されてます)をクリックします。

https://scrapbox.io/files/65c3e28b3dba50002507b8d5.jpg

今回作成したプロジェクト名をクリックして、プロジェクトに追加をクリックします。

https://scrapbox.io/files/65c3e513229c86002529f50b.png

EpicGamesLauncherはもう閉じて、エディタにSCK_Casual01というフォルダがある事を確認します。

https://scrapbox.io/files/65c3e526af7af80024f26632.png

先ほど作成したMyCharacterを開きます。

Meshを選択した状態で、SkeltalMeshにMESH_PC_03にします。

https://scrapbox.io/files/65c3e54f82cdaf00247bdae3.png

メッシュをコリジョンの底に合わせます。ワイヤーフレームを右にすると見やすく調整できます。位置は大体で構いません。

https://scrapbox.io/files/65c3e56aa4b9c50025ffb68d.png

水色の矢印方向が正面になるようにキャラの向きを変えます。

https://scrapbox.io/files/65c3e58dfe170600251dd0ed.png

Meshコンポーネントを選択した状態で、AnimationのAnimClassをThirdPerson_AnimBPにします。これでキャラはアニメーションし始めます。

https://scrapbox.io/files/65c3e5aac0dc760024dac702.png

AnimClassではキャラクターにどのアニメーションを適用するのか設定できる項目です。今回は既存のサードパーソンのキャラクターアニメーションを適用しています。なお今回はアニメーションに関する詳細説明は省きます。

SpringArmコンポーネントを追加します。

https://scrapbox.io/files/65c3e62b88ccaa0025fa0f9a.png

SpringArmコンポーネントはカメラの位置を調整する自撮り棒的なコンポーネントでしたね。

SpringArmコンポーネント下にCameraコンポーネントを追加します。

https://scrapbox.io/files/65c3e65a38e6250028b61b34.png

もうすでにゲームモードにキャラクターがセットしてあるので、これでプレイしてみましょう↓

https://scrapbox.io/files/65c3e693351a2a0023a30b8a.gif

作成したMyCharacterが表示されます。

③カメラ視点を操作する機能を実装する

今回、カメラ視点に合わせたキャラクターの前後左右移動を実装していきたいので先にカメラ視点操作の機能を実装していきます。

設定からプロジェクト設定 > インプット > 軸マッピングを開きます。

https://scrapbox.io/files/65c3e7adfe170600251dd504.png

🐱既にサードパーソンテンプレートのインプットが用意されていますが、今回は1から作成していきます。カメラ移動させる操作入力を作成していきます。

軸マッピングのプラスボタンを二回クリックします。

https://scrapbox.io/files/65c3e7ceb617440025d17bed.png

まず一つ目の名前を「MyCharacter Look Up / Down Mouse」にして、マウスのY軸を割り当てます。Scaleを-1にします。

https://scrapbox.io/files/65c3e7fefe170600251dd585.png

マウスのY軸はマウスのカテゴリの中にあります。

https://scrapbox.io/files/65c3e81a82cdaf00247be0c1.png

これでマウスの上下移動の操作入力が作成されました。続けて作ってしまいます。

もう一つのインプットの名前を「MyCharacter Turn Right / Left Mouse」にします。マウスのX軸を割り当てます(マウスカテゴリの中)。Scaleを1にします。

https://scrapbox.io/files/65c3e86468e15c00239c275e.png

そしたらプロジェクト設定はそのまま閉じて、MyCharacterのイベントグラフを開きます。

https://scrapbox.io/files/65c3e888fe170600251dd6a7.png

インプットAxis MyCharacter Look Up/Down Mouseノードを作成して、AddControllerPitchInputを作成します。

https://scrapbox.io/files/65c3e8ed0d7ce70024b61ab3.png

後から解説しますが、LookUp/DownMouseノードでマウスの上下移動させていて、AddControllerPitchinputでキャラクター(カメラ)の向きを上下させています。

🐱上下にカメラを回転させるノードを実装した訳ですが、デフォルトの状態だとSpringArmコンポーネントは動かずカメラも回転しない設定になっているので修正していきます。

SpringArmコンポーネントを選択した状態で、カメラセッティングのUsePawnControlRotationにチェックをいれます。

https://scrapbox.io/files/65c3e962adc5010023050dad.png

UsePawnControlRotationとは？

先ほど作成したAddControllerPitchInputノードでコントローラー、つまりキャラクター(カメラ)の向きを変更できるのですが、この設定項目にチェックが入っていないと回転はできません。なのでチェックする事で回転させるようにしています。

これでプレイしてみます。マウスを上下に動かすとカメラが上下に動くようになりました。

https://scrapbox.io/files/65c3e9a673246c002484fdd0.gif

作成したノード解説↓

ではカメラの上下視点移動で作成したノードを順に解説していきます。

https://scrapbox.io/files/65c3e8ed0d7ce70024b61ab3.png

インプットAxis MyCharacterLookUp/DownMouseノードとは？

先ほどプロジェクト設定で作成したインプットです↓マウスのY軸でScaleを-1に設定しています。

https://scrapbox.io/files/65c3e7fefe170600251dd585.png

マウスのY軸、つまり上下にマウスを移動させた場合にこのノードは起動して、Scale値を出力します。例えば以下のようなノードを作ったとします↓

https://scrapbox.io/files/65c3eab90ed6a000255b9d20.png

プレイしてみてマウスを上に動かすと動かした分に応じて-0.2とか-1とかそういった値が出て、下に動かすと0.2とか1とかの値がでます。

https://scrapbox.io/files/65c3eadb5e6606002610d2cc.gif

AddControllerPitchInputとは？

AddControllerPitchInputはキャラクターの向き(Y軸)を変更するノードです。厳密に言うとコントローラーと言われるものの向きを変更するものですが、キャラクター(カメラ)の向きと言った方がわかりやすいのでそう説明します。キャラクターの向きが変更すると言っても、キャラクター自体の向きはマウスを上下させても変化はありません。これは既存のキャラクターはPitch軸(X軸)に対して変更しないように設定されているためです。しかしながらSpringArmコンポーネント自体は回転するため、カメラもSpringArmに合わせて視点移動するという仕様になっています。

全体ノードを解説

https://scrapbox.io/files/65c3eb5e7dcc4d00236bdb48.png

マウスの上下操作によってキャラ(カメラ)の向きを変更しています。

🐱一旦カメラの上下視点移動は実装できたので続いてカメラの左右移動を作りましょう。ここでも解説していきます。

同じくMyCharacterのイベントグラフにインプットAxis MyCharacter Turn Right/Left Mouseノードを作成して、AddControllerYawInputを作成します。

https://scrapbox.io/files/65c3ec6dfe170600251de7d5.png

プレイしてみましょう。キャラクターの横視点移動が実装できました。

https://scrapbox.io/files/65c3eca6798f9a00242e7340.gif

しかし現在キャラクターの向きも変更する仕様になっています。カメラの向きだけを視点移動させたいので設定を変更していきます。

コンポーネントの一番上のMyCharacterを開きます。ポーンのUseControllerRotationYawのチェックを外します。

https://scrapbox.io/files/65c3ecfa73246c0024850517.png

これでキャラクターの向きは変更されなくなりました。ちなみにマウスを上下した時にキャラクターの向きが変更されない理由はデフォルトではUse Controller Rotation Yawの上にあるUse Controller Rotation Pitchにチェックが入っていないからです。

プレイしてみましょう。

https://scrapbox.io/files/65c3ed568c2f010025933e42.gif

キャラクターの向きは変更されずに、カメラの視点移動のみ行われるようになりました。