Paper 2D 入門 (6) キャラクター ブループリント 2 (動き)

ビデオの内容紹介 
キャラクターの動きを設定します。キャラクターの動きを特定のキーやモバイル用仮想ジョイスティックなどに割り当てます。また、左右の動く時のキャラクターの向きを制御します。

原題 Introduction to Paper2D: Character Blueprint 2 – Movement

[1] キャラクターの動作とキーをバインドする

まず、メニューバーの Edit から Project Settings (プロジェクトの設定) を開きます。
6001
左側のメニューから Input を選びます。
6002
まず、Axis Mappings (軸のマッピング) を設定します。Axis Mappings の横についている + をクリックして、さらに頭に付いている三角をクリックして展開します。そして、空欄に MoveRight (右に動く) という名前を付けます。さらに、この MoveRight の横についている + を 2 回クリックしてマッピングを指定するための空欄を増やし、MoveRight の頭に付いている三角で展開し、空欄にそれぞれ Gamepad Left X、D、A を選択します。A の横の Scale には -1.0 と入れます。
6003
なお、この場合の Axis (軸) とは動く方向を座標軸に見立てています。つまり、動く方向 (この場合左右、つまり X 軸方向) についてキーなどを割り当てています。Gamepad Left X は、ゲームパッド (コントローラー) の左側のアナログスティックのことです。X がついているのは、「左側のアナログスティックの X 軸方向にキャラクターの動き (この場合、左右の動き) を割り当てる」ということになります。

Action Mappings (動作のマッピング) についても、上記と同じ要領で次のように設定します。Jump (ジャンプ)という名前を付けて、ジャンプという動作に割り当てるものはそれぞれ、Gamepad Face Button Bottom、Space Bar、W、Touch1 とします。
6004
Gamepad Face Button Bottom は、フェイスボタン (PlayStation で言えば○×△□ のボタン)の内で一番下のボタンのことです。Space Bar はスペースキーのことです。

次に、下の方にある Mobile (モバイル) セクションに行き、Default Touch Interface (デフォルトのタッチ インターフェイス) で、ドロップダウンメニューから LeftVertualJoystickOnly (左仮想ジョイスティックのみ使用) を選択します。しかし、これがドロップダウンメニューに表示されていない場合があります。その場合は、ドロップダウンメニューを開いた時にその下部に次のように View Options があるので、
6005
Show Engine Content (エンジンのコンテンツを表示する) にチェックを入れます。
6006
すると、次のように LeftVertualJoystickOnly が表示されるようになるので、それを選択します。
6007
全体では次のようになります。
6008
これで Project Settings のウィンドウを閉じます。

[2] ここまでの設定をチェックする
果たしてうまく設定できているでしょうか?

メインエディタのツールバーの Play 横のドロップダウンメニューから Mobile Preview を選択します。つまり、モバイル (スマートフォン) での実行をプレビューしてみます。先ほど設定した LeftVertualJoystickOnly (左仮想ジョイスティックのみ使用) がちゃんと機能するでしょうか?
6009
Play をクリックすると、次のように表示されて、
6010
若干時間がかかりますが、次のように表示されます。
6011
ちゃんと左側に仮想ジョイスティックが表示されています。これは次のように動かしても、今のところキャラクターは動きません。それをこれから (以下の [4] で) 設定します。
6012

[3] ブループリントでキャラクターをレプリケートする
このゲームはマルチプレイヤー ゲームを想定しているので、まず、アクタがレプリケートされる (各マシンで同じようにアクタが複製される) ように設定します。

まず、メインエディタのコンテンツ ブラウザで Blueprints フォルダを開いて、MyCharacter をダブルクリックしてブループリントを開きます。
6013
左上が Graph モードになっていることと、Event Graph のウィンドウが開かれていることを確かめます。
6014

スペースを右クリックしてメニューを表示し、begin で検索して Event Begin Play (ゲームが開始されたら発動するイベント) をクリックします。
6015
次に、Set Is Replicated を右クリック メニューから選択します。(この場合、Context Sensitive のチェックを外すと Set Is Replicated が表示されるようになります。あるいは、これから配置する Sprite 変数を先に配置して、そこからワイヤを延ばしてスペースで放すと表示されるメニューで検索すると出しやすいかもしれません。)
6016
なお、Set Is Replicated は、「レプリケートされるかどうか」(Is this replicated?) をセットする関数です。

ここまでで次のようになっています。
6017

次に、Sprite (キャラクターはスプライトです) の変数を Event Graph にドラッグしてレプリケートの対象 (Target) にします。ところが、左側の My Blueprint のパネルに Sprite が表示されていません。そこで、次のように Show inherited variables (継承された変数を表示する) にチェックを入れて、表示されるようにします。
6018
表示されるようになった Sprite を Event Graph にドラッグアンドドロップして、Set Is Replicated の Target に接続します。また、Event Begin Play と Set Is Replicated も接続します。Set Is Replicated の Should Replicate (レプリケートすべき) にチェックを入れます。
6019
最後に Replication というコメントを入れておきます。(マウス左ボタンで範囲指定して C を押します)
6020

意味 このグラフの意味は、ゲームが開始されると Event Begin Play が発動し、そのせいで Set Is Replicated も発動します。Set Is Replicated の対象はスプライト (キャラクター) です。Should Replicate (レプリケートすべき) にチェックが入っているので、レプリケートを実行します。

[4]ブループリントでキャラクターの動きを設定する

先の [1] でバインディングした入力装置 (キーボードのキーや仮想ジョイスティックなど) にキャラクターが反応するように設定していきます。まず、完成図を先にご覧ください。
完成図
6033
実行結果
6028
6029

グラフ作成上の注意点
Compare Float と Set Control Rotation の間にある白丸は、ワイヤの経路を整えて見やすくするために使用されるもので、それ以外に何も機能はありません。
6032
この白丸がないと、下のようにワイヤがなってしまいます。
6031
この白丸を呼び出すには、
6030
と検索します。

グラフの意味
① InputAxis MoveRight (入力軸 MoveRight) は、[1] で作った MoveRight で指定された Scale の値を 1 フレームに 1 度供給します。
(再掲)
6004
このことを確かめるために少しブループリントを改変してみます。
6024
Scale 値を表示するようにしてみると、ゲームが始まっても入力がない場合は、0 であることがわかります。
6025
ところが、たとえば D キーを押すと、1.0 という値が表示され、放すと 0 に戻ります。
6026

なお、Axis Value (軸の値) を変更すると速度が変わります。ただし、ここに入る値は 1.0 から -1.0 の間にクランプされます (これを超える値は強制的に上限または下限にされてしまう)。たとえば、7.0 は 1.0 になるし、-7.0 は -1.0 になります。速度は、0.1 などにすると非常にゆっくりと進みます。また、マイナスの値になると逆方向に進みます (たとえば MoveRight では A キーに -1 の値を Scale に入れているので、A キーを押すと左側に向かって進むことになります)。

② InputAxis MoveRight が発動すると、関数 Add Movement Input (動きの入力を加える) が発動します (白い三角の実行ピンどうしがワイヤでつながっています)。Add Movement Input の中にある Target はこの動きの入力を追加する対象です。ここでは self になっているので、この MyCharacter 自身です。つまり MyCharacter が動くことになります。

また、World Direction (ワールドにおける方向) は、入力された動きをどの方向軸に沿って実行すべきかを指定します。ここでは X に 1.0 と入っているので、X 軸方向 (ゲーム画面では左右方向) にキャラクターが動くことになります。なお、これを -1.0 などとすると逆方向に動くことになります。たとえば D キーは 1.0 ならば右に向かって動くのですが、-1.0 になると、次のように動くことになります。
6022
6023

Scale Value (スケーリングのための値) は、先ほど出てきたように InputAxis MoveRight から供給される値です。

最後の Force (強制) は、今回のチュートリアルには直接関係ありませんが、IsMoveInputIgnored (動きの入力を無視するかどうか) が有効になっていても構わず動きをキャラクターに追加します。

③ Compare Float (Float 型どうしを比較する) は、その名の通りです。Input に入っている (入ってくる) 値と、Compare with (~と比較する) に入っている (入ってくる) 値を比較します。この場合は、InputAxis MoveRight から供給される Axis Value と 0 を比較しています。つまり、Axis Value が 0 よりも大きいか小さいかを判断しています。

0 よりも大きい場合 (つまり右に向かって進む場合) は、SetControlRotation (コントローラーの回転をセットする) につながりますが、Make Rot (回転を作る) を使って、キャラクターの yaw (z 軸を中心とする回転=キャラクターをコマの軸に見立てた回転) を 0 にしています (ゲームが開始した段階でも 0 になっていますが、反対向きになった場合に 0 に戻すようにしています)。回転が 0 であるとキャラクターは右に向かいます。

0 よりも小さい場合 (つまり左に向かって進む場合) も、SetControlRotation (コントローラーの回転をセットする) につながりますが、キャラクターの yaw は 180 にしています。つまり、180 度回転させるのでキャラクターは左向きになります。

ちなみに、100 にすると、次のようになります。
6027
90 にすると、まったく見えなくなります。

今回は以上です。お疲れ様でした。



About なつのや

アンリアル・エンジン 4 を基礎から勉強するためのサイト「UE4 の学び部屋」を開いています。どうぞよろしくお願いいたします。
Paper 2D, UE4チュートリアル

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>