Chapter 28無料公開

📰ブループリント入門(2)キューブを回転させてみよう [UE5入門チュートリアル #3-2]

Daichi

2022.05.18に更新

このチャプターの目次

① キューブを回転させる|実践
② アクションゲームの回転するステージっぽく設置する

コメント🐤

では前回に引き続きブループリントをまずは作ってみようという事で、今回はブループリントで回転するキューブを作っていきます。今回作成するのはこちら↓

① キューブを回転させる|実践

ではまずはキューブを回転させる機能をブループリントで作成して、その後アクションゲームの回転するステージっぽく作成したものを設置してみようと思います。

まずはサードパーソンのプロジェクトを開きます。前回のままでも構いません。
エディタ左下のコンテンツドロワーからコンテンツブラウザを開きます。コンテンツフォルダを開き、右クリックで新規フォルダを選択します。その後フォルダの名前をBlueprintsにします。

コメント🐤

コンテンツブラウザは使用頻度が高いので、レイアウトにドッキングから固定しておく事をおすすめします。

基本的に固定した状態から戻す必要性も低いのでこれから固定した状態で使用しましょう。下からはレイアウトにドッキングした状態で解説していきます。

Blueprintsフォルダを開いて、右クリック > ブループリントクラスを選択します。

ブループリントクラスとは？

ブループリントクラスとは「ブループリントが付属したアセット」の事で、何らかの機能を持ったアクタを作成したい場合に作成するものになります。ブループリントを作る場合はこのブループリントクラスまたは前回使用したレベルブループリントのどちらかで作っていきます。詳細は後ほど解説します。

次にブループリントクラスの種類を選択するウィンドウが表示されます。ここではどんなブループリントクラスを作るかによって選択するものを決定します。例えばキャラクターなどを作成する場合は「Charcter」、ゲーム上の機能を持つアイテム,(例えば動くステージや回復アイテム)などを作成する場合は「Actor」を選択します。ここは実際に使って覚えていくのが良いと思いますので説明はこの辺りにして、今回はレベルに配置する回転するキューブなのでActorを選択します。
ブループリントクラスを作成したら回転するキューブを作るので名前をRotationCubeにします。ダブルクリックで開きます。
ブループリントエディタが開かれました。ブループリントクラスはブループリントが付属したアセットなので、ブループリントを作成する場所とアセットの構成を決定する場所があります。まずはキューブを追加してみましょう。
左のコンポーネントタブから追加をクリックしてStaticMeshを選択します。
StaticMeshを選択した状態で詳細からスタティックメッシュからSM_ChamferCubeを選択します。

コメント🐤

まずはキューブがこれで追加できました。ブループリントクラスは今追加したStaticMeshのようにいくつかのコンポーネントと呼ばれる構成要素から形成されます。StaticMeshコンポーネントはメッシュを追加するコンポーネントで、このコンポーネントによってキューブが追加されたという事になります。

コンパイルをクリックします。コンパイルによって変更した内容を適用させ、確定する事ができます。

コメント🐤

ブループリントエディタは毎回閉じても構いませんが、おすすめはレベルエディタにタブとして結合しておく事です。こちらだとすぐに切り替える事ができるのでこの状態をおすすめします↓

では一旦レベルに作成したブループリントクラス(キューブ)を追加してみましょう。ドラッグで追加します。
プレイしてみるとキューブのブループリントクラスが追加されました。もちろんブループリントはまだ作っていないので何の機能も持っていません。

では、キューブに回転する機能を追加してみましょう。
もう一度ブループリントエディタを開きます。タブを設置した場合はタブから切り替えます。コンテンツブラウザの元アセットをダブルクリックでも開けます。
ブループリントを編集する場所「イベントグラフ」を開きます。
イベントグラフが開きます。ここでブループリントを作成していきます。既に用意されているノードがありますが最初は無効になっておりここにノードをつなげる事で有効になります。
では今回はゲームプレイ中に常に回転するキューブを作成したいので、そんな時にはTickノードを使用します。デフォルトで用意されています↓

イベントTickノードとは？

イベントTickノードは簡単に説明するとTickノードに繋げたノードを常に実行するためのノードです。正確に解説すると「毎フレーム処理を実行するノード」になります。

フレーム、fpsとは？

フレームについて解説すると、映像は一秒間に何枚もの画像を映し出しています。その画像一枚一枚の事をフレームと呼び、一秒間にフレームが何枚あるかの単位をfps(flame per second)またはフレームレートと言います。なので60fpsの場合は一秒間に60枚のフレーム(画像)があるという事になります。Tickノードの「毎フレーム」という意味は、例えばゲームが60fps(フレームレート)の場合、一秒間に60回Tickノードが呼ばれて、Tickノードに繋がれたノードを実行します。と言われてもイメージがつかないと思うので実際に使った後にも解説致します。

イベントTickのピンからドラッグして離し、「add local rotaion」と検索しAddActorLocalRotationノードを選択します。

イベントTickにAddActorLocalRotationノードがつながりました。

AddActorLocalRotationノードとは？

AddActorLocalRotationノードとはアクタの回転のX,Y,Z軸に大して入力値を加えるノードです。

レベルでキューブを選択した状態で詳細からトランスフォーム > 回転からアクタの角度を調整できますが、ここを調整するノードです。要するにこのAddActorLocalRotationノードを使用するとアクタを回転させる事ができるという事です。。

AddActorLocalRotationノードのX軸に1と入力します。
これで一旦完成したのでプレイしてみると..キューブが回転するようになりました！

作成したノードを簡単に解説

なぜキューブが回転するようになったのかまとめると、イベントTickノードは「常にこのノードにつなげた処理を実行する」という機能を持ったもので、AddActorLocalRotatationノードは「アイテムを回転させる」という機能を持ったものになっています。この二つのノードを繋ぐ事で「常にアイテムを回転させる」という機能になり、ゲームをプレイするとアイテムが回転するようになるといった仕組みになっています。

正確にノードの仕様を説明すると..

抽象的ではなく正確にノードを解説するとイベントTickは「毎フレーム実行」で、AddActorLocalRotatationは「入力値の分(xに1度)回転する」という意味なので、毎フレームx軸に1度回転させるというノードになります。つまり一秒間に60フレーム(60fps)の場合は作成したノードは一秒間に60回x軸に1度回転するという処理になります。

毎フレームx軸に1度回転させる事によって回転するという処理を作っているという事ですね。

では今度はZ軸を回転させてみましょう。X軸を0にして、Z軸に5と入力します。
プレイするとZ軸を中心に回転するようになりました。

コメント🐤

XYZ軸は再度確認しておくと以下です。ワールドに対して水平軸がXとY軸で垂直軸がZ軸です。

これでアクタに回転させる機能をブループリントによってつける事ができました。ではここから実際のゲームっぽくこの回転するキューブを使用してみましょう。

② アクションゲームの回転するステージっぽく設置する

こんな感じ↓に回転するキューブを活用してみてゲームっぽくしていきたいと思います。

ブループリントクラスをドラッグでレベルに追加しましょう。位置は設置されているステージの真ん中辺りにします。位置を調整しましょう。
次にプレイヤーのスタートする場所を変更しておきましょう。サードパーソンだと既存で用意されている「PlayerStart(プレイヤースタート)」というアクタがプレイヤーのスタート位置を決定するものになります。
プレイヤースタートの位置を回転するキューブの目の前に移動させます。トランスフォームの位置を1540,2740,302にして、回転を0,0,-180に入力します。手動で移動させても構いません。
キューブの大きさを少し変えましょう。Rキーを押せば拡大モードに切り替えられ変更ができます。(ショートカットはWキーで移動,Eキーで回転,Rキーで拡大切り替えができます)

最終的にこんな感じのトランスフォーム値になりました↓大体で構いません。
プレイしてみるとアクションゲームの回転するステージっぽくなっている事が確認できます。実際にジャンプで向こうまで渡れるか挑戦してみましょう！

これで回転するキューブは以上になります。

コメント🐤

なんとなくブループリントでゲームの機能を追加するという意味がわかってきたでしょうか？このようにノードを組み合わせて様々な機能のゲームを作成していく事になります。そして今回のように何らかの機能をアクタにつける場合は「ブループリントクラスを作成してそこでブループリントを編集する」という事を覚えておきましょう。お疲れ様でした。