Google

2016年9月28日水曜日

Unreal EngineでMatinee速度変化処理3

長くてすみませんが、今回が最後です。
前回はマチネでルートを作成する部分まで終わらせました。

今回はマウスイベントや速度増減に関する処理を入れ込みます。
アニメーションツールであるが故にMatineeには再生速度がありますが、元々GUIで指定する固定値となっています。
今回はそれをBluePrintから制御することで、アクセル的な機能として実装してみます。
C++で処理すれば短いコードになるのですが、それでは面白みも無いかと。

概念としてはこんな感じです。
  • マウス左ボタンがアクセル
  • 離せばブレーキ
  • 押してすぐ動くのではなく、段階的に加速減速
  • 再生レートの上限下限を作る
  • マチネの再生レートを変化させてこれらを実現
では始めます。
今まで作成してきたマチネはもう良いので、レベル全体のビューポートに戻ります。
画面上部からブループリントというアイコンメニューを探してクリック。


メニュー一覧から、レベルブループリントを開いて下さい。
このレベル(Unityで言う所のシーン)全体の処理実装です。


開くと当然ながらまだ何もありません。

変数作成

まずはここに変数を作っていきます。
左側にある変数の+ボタンを押して、変数を2つ作成します。


上図の通りに作成しましょう。
以下の項目2つが必要です。
  • pressFg
    • Boolean
  • speedRate
    • float
変数を作った際、一度はコンパイルしないと初期値が入りません。
初期値は通常の高級系言語と同じように、falseと0.0にしておいてください。

コンパイル前
コンパル後

図のようになっていればOKです。
pressFgはマウスの状態記憶に、speedRateはマチネの再生レート制御に使います。
一旦変数に格納するのは元々のプロジェクト上の都合と、連続して飛んでこないイベント等への対処です。
さらに簡易な方法もありますので、あくまで一例と考えて下さい。

マウスイベント処理

さらに続けて、ここにマウスイベントで変数の値を変化させる処理を付けます。
画面上には「右クリックして新規ノードを作成」とありますが、その辺の何もない部分で右クリック。
以下のような一覧が表示されます。

この中から目的の項目を探すのは大変です。
また、条件によって項目があったりなかったりするので、道筋から外れた操作をすると戸惑ってしまうと思われますのでご注意を。
そして欲しい項目を検索するには前方一致検索が1番便利です。


前方一致検索は枠の上部にあるテキストボックスで行います。
まず、ボックスにmouseと入れて下さい。近似の候補が出ます。
そして、その中から「マウスの左ボタン」という項目を選択して下さい。


マウスボタンイベントハンドラ用ノードができました。
続けて、先程の変数、pressFgをビューにドラッグ&ドロップ。
変数の項目からぐいっと持っていくやり方が簡単です。


ドロップするとサブメニューが出るので、セットを選択。
これを2個作成して下さい。


こうなりました。
これをつなぎ合わせます。
そして上のセットのチェックマークを付けましょう。付いていると真として扱います。


これでマウス状態を変数に記憶する処理が完成しました。
押したら真に、離したら偽になります。
これはここで完結するので、後はほっといて大丈夫です。

毎フレーム処理

続いてまたなにもない場所で右クリック。
tickと入れて、イベントTickを作成します。


これは毎フレーム飛んでくるイベントです。UnityだとUpdate()にほぼ該当します。
ここで監視を行い、マチネ再生速度の変更を行います。

Tickを作ったら、先程のプレスフラグを今度はゲットでドラッグ&ドロップ。



上図のようにプレスフラグの状態を常に見続ける準備ができました。
しかしこの再生レート、無制限に値が変化してはたまりません。
上限の再生レートを1.0、加減を0.0とします。
つまり、1倍の速度が最大で、離したら0倍、すなわちストップ状態を再現することになります。

なにもない場所で右クリックし、branchと入力し選択。



ブランチが生成されたら、上図のように白線と赤線をつなぎます。
白線はコンテキストなので、これが繋がらないと処理が動きません。赤線は参照です。
ちなみにこのブランチはプレス状態を判断するif文です。

続けて、上限と下限の値である1.0と0.0を準備します。
これはリテラル値として扱います。
なにもない場所で右クリックし、literalと入れて下さい。


似たようなのがあって紛らわしいですが、Make Literal floatを2個造ります。


片方に1.0と入れましょう。
そしてこれらと比較すべき変数、speedRateをドラッグし、ゲットで作成します。


こんな感じになりました。

今度は比較演算子です。このあたりがBluePrint使ってて嫌になる所orz。
なにもないところで右クリックし、>を入力。
これもまた、floatでなければならず、紛らわしいので注意を。



そして上図のように2つ作成します。
この演算子、コネクタの上下位置で比較する前後が違う点には注意。

そしてこれを比較演算の結果を判断するブランチを2つ生成します。
これは「1.0 > 変数」と「変数 > 0」の2つを行うためです。
ちなみに、以下の図のように既に存在するノードを右クリックしてDuplicateすると簡単にコピーが作成できます。


そしてやや分かりづらいですが、生成した演算子、ブランチを以下のように結びます。
左側に隠れて見づらいのは、最初のイベントTickから出ているマウス押下フラグのブランチです。
演算子のコネクタ上下の位置に注意して下さい。


C++でコードを書けば簡単なはずのマウス押下状態フラグと、float比較がこうなってしまうのが頭の痛い部分です。

次は加速減速の変化値です。
先程1.0と0.0を作った方法で、0.05という値のリテラルを追加します。
この値は加速減速の変動値として使います。


そしてまた右クリックで出るウィンドウで、+を入れます。
紛らわしいfloatのプラス演算にご注意を。


プラスが作成されたら、再度sppedRateからドラッグし、今度はセットで生成して下さい。


プラス同様にマイナスも造り、さらにspeedRateのセットも追加で造ります。
合計でプラスとマイナス、speedRateのセットが2個の合計4個です。
speedRateも必要なので扱いやすい位置に引っ張るか、ゲットのノードをもう一個作っておきましょう。


かなり複雑になってきましたが、上図のようになります。


上限、下限のブランチからセットにコンテキストのラインを接続します。
これは判断の結果、処理が真ならspeedRateに新しい値を入れることを意味します。


残りを接続するとこうなります。
speedRateが1.0より少なければ0.05を加算してspeedRateに加算、speedRateが0より大きければ0.05を減算、その結果をspeedRateに代入という流れです。

再生レート変更処理

そしてこのspeedRateの値をマチネの再生レートに入れ込みます。
一度ビューポートやアウトライン等でMyMatineeを選択しておいてからレベルブループリントに移動し、なにもない場所で右クリックした際、MyMatineeへのリファレンスを作成という項目が存在しているはずです。
Unrealではこのビューポートでの選択という操作がキモです。これをやらないために検索しても出てこない等、無駄に時間を食うつまづきが多いかも知れません。

これを選択して下さい。


すると以下の図のようなノードが生成されます。


この青いコネクタからドラッグし、なにもない場所でマウスを離してみましょう。
こんな一覧が出ますので、Rateと入れて下さい。


ここからSet PlayRateを選択します。
つまり、MyMatineeの再生レートのセッターです。


このようなノードが生成されます。
speedRateの値をマチネの再生レートに代入し、イベント処理が完成します。


セットされたSpeedRateをつなげて完了です。
お疲れ様でした。

途中、分かり辛い点があったかと思いますので、レベルブループリントの全体図をアップしておきます。



しかし簡単な処理だけでもこの長さ、、、

ツールのモードや癖に対応

さて、まだこのままでも処理は繋がりません。
UnrealやUnityで微妙な部分の一つかと思うのですが、ツールの癖を理解して、他の機能とバッティングしないように調整するという処理です。

まずはその証拠に、このまま保存、コンパイルして実行してみましょう。


まだThirdPersonが動いてます。
これは今回のワールド設定、レベル設定、BluePrintの構造上からプレイヤーが優先されて、マチネとそのディレクタが動いていない事を意味します。

そこでここからが本当に最後の修正。

まずはマチネを実行時に動作させるように修正します。
固定で処理する場合、アウトラインからMyMatineeを選択し、詳細画面にあるPlay on Levelにチェックを付けます。
まずこれでマチネがレベルロード時に自動的に動作するようになりました。
他にも方法はあり、BluePrint側でBeginPlayイベントで動かしてもどちらでも構いません。


また、BluePrintの構造上、レートの初期値がゼロだと正しく動作しないため、speedRateの値を0.1にして、初回に減衰するようにしておきます。
ちょっとこの方法はアレな感じですが、サンプルという事なのでご勘弁を。


これでレベルに戻って実行して下さい。
全ての処理が終わっていれば、動画のようになるはずです。


マウスが押されれば加速し、戻せば減速します。
ブレーキは付けていませんが、減速を極めて小さくして右クリック等に割り当てる等々、この仕組みに追加するのは比較的簡単でしょう。

また、加速減速の0.05という値を変更すれば加減速のレートを変更できますし、マチネのシステムレート上限は1.0ではありませんので、最大値のリテラルを大きくすればジェットコースターも可能です。

終点まで戻るとまたThirdPersonに戻りますが、マチネ側でイベントを作って再度再生し直す等の方法で無限ループも可能です。
実践ではマチネとキャラクターを混在させて処理するなどのケースも考えられるため、敢えてこのまま残してみました。
また、今回はThirdPersonをベースにしましたが、GameModeやControllerを作ることでキャラクターを無効化しマチネをメインとした事も可能です。

基礎構造の紹介という事でこの記事はここまでですが、改造し易い余地は残してあるつもりです。
デモプロジェクトはサイズが大きいのでちょっと躊躇しましたが、一応アップしておきます。

  ANGEWORK 公式pubフォルダよりダウンロード
  AcceleratorProject.zip(842,445,392 byte)
  MD5:229651aaf76f7e544739bea8c0d273b3

また、Unreal環境が無い方のためにHTML5版に変換したプロジェクトもアップしました。
変換しただけだとcdnとかにミスがあって動かなかったのでそこも修正済です。

  HTML5版デモ注意!ロードが非常に重いです
  http://angework.co.jp/demo/AcceleratorProject/AcceleratorProject.html

まんま変換したので、一周するとそのままThirdPersonに戻ります。
HTML5ではこの程度の処理でもかなり重く、リロードするだけでエラーになる場合もあります。
スマホではまず動かないかと。

拙いプロジェクトですが、何かの参考になれば幸いです。

2016年9月27日火曜日

Unreal EngineでMatinee速度変化処理2

Unreal EngineのMatinee速度処理の続きです。
前回はMatineeを作成しビューポートに配置するところまで進みました。


今回は配置したMatineeを使用してレール上を動くカメラを作っていきます。
マチネそのものの仕組みや操作説明は私が書くより公式や他の方のブログの方が詳しいので、概念や操作はそちらを見て頂くほうがいいかも知れません。
ここでは手順のみ記載します。

で、既にアクタがビューポート上に配置してあるのなら、アウトラインにはこのようにマチネアクタが存在しているはずです。


さて、これを編集するわけですが、開くためにこれをダブルクリックしてはいけません。
マチネそのものの処理には全く関係ないウィンドウが出るだけです。
実はマチネの編集方法も1種類ではないのですが、上図のようにビューポートかアウトラインで選択した状態であれば、詳細ウィンドウに開くボタンが表示されます。


ver 4.13.0だと、毎回開こうとする度に最新のレベルシーケンスに変換するかどうか聞かれて五月蝿い状態になると思われます。


しかしマチネを使っている所もあるかと思いますので、今回はこのまま変換せずにマチネで進める事にします。
ここではOpen Matineeを選択して下さい。


するとUnrealユーザにはおなじみのマチネ編集画面が出ます。
ここに先程のカメラ付きアクタを動かすトラック部分を作って行きます。

しかしすぐ触るのではなく、作業を開始する前に一度ビューポートに戻り、最初に作成したMyCameraActorをビューポートかアウトラインで選択しておいて下さい。
またこの選択作業時、マチネエディタは閉じずに裏画面にしておく必要があります。


この選択には意味がありますので省かずにお願いします。
そして選択された状態でマチネエディタに戻ったら、トラックウィンドウの左側、何もない場所で右クリック。


一覧からAdd New Empty Groupを選択。
グループは1個しか作らないので、グループ名はそのまま新規グループで造る事にします。



これで空っぽのグループが生成されました。

グループを作るだけとは言え、事前のMyCameraActor選択は重要です。
そして、これが正しく作業できたかどうかの確認をしておきましょう。
マチネエディタでこのグループを選択した際、ビューポートではMyCameraActorが選択されるというヒモ付動作が行われれば正しく行われた事になります。

続いて、作ったばかりの新規グループの上で右クリック。


一覧から新規Movement Trackを選択。


グループの下にMovement Trackが生成されました。
しかしこのままではMyCameraActorのカメラが有効になりませんのでカメラをマチネで有効化しなければなりません。

続けて、再度トラックウィンドウの何もない場所で右クリックします。


Add New Director Groupを選択。
今回はグループ名称は聞かれません。


Movementより上の位置にDirector Groupが生成されました。
しかし、このままでもまだカメラは有効になりません。そのために、今作ったばかりのディレクターとMovementの紐付けを行います。
この状態のまま、更に上部にあるAdd Keyをクリックして下さい。


上図のように「グループへ切り取り」という、意味が通じにくい名称のサブメニューが開きます。
マチネエディタで最初に作った「新規グループ」という名称が、このサブメニューの名称と合致していることを確認してOK。


ディレクターグループのタイムラインに色が付きました。
これでマチネの動きがビューポートに固定されます。
ちなみにこの色、新規グループのアイコンの脇にある色と一致しており、必ず緑になるわけではありません。
面倒でしたが、これでやっとアクタを動かす準備が整いました。

アクタのレール構成目標はこうです。


ぐるっと一周。
起点は図の左にある端っこの部分です。

まずはとりあえず、動かして行きましょう。


マチネエディタで、MovementTrackを選択します。
図のように、既にキーフレームの0秒地点に上三角のマークが既に存在しているはず。
この位置が開始点です。

三角マークからまっすぐ下にある黒いバーを右にドラッグし、3秒のあたりまで引っ張って下さい。
引っ張ったら先程のAdd Keyをクリック。


この場合はメニュー等は何も出ません。
3秒の所に三角マーク、つまりキーができました。


このキーがアクティブになった状態のままで、マチネエディタは閉じずにビューポートに戻ります。
戻ったらMyCameraActorがそのまま選択されているはずなので、位置を移動させましょう。

この時、Director Groupにあるビデオカメラのアイコンが黄色く光っていると、ビューポートがそのカメラの1人称視点になってしまい作業しづらくなるケースがあります。

これです
慣れてないのであれば、このカメラはグレー状態にして置いたほうが無難でしょう。


上図は3秒分の移動です。
カーブを考えて一マス程余裕をもたせました。
そのまま再度マチネエディタに戻り、4秒のあたりにキーを作成。


カーブした先に移動させてみます。


カメラがそのままの向きになっているので、90度回転。
ちなみにビューポートではWキーで移動、Eキーで回転に切り替えが可能です。


このような作業を繰り返して、壁に沿って1周させます。


秒数が足りなくなったら、トラックビューの赤い枠のエリアを右に動かしてアクティブな秒数を増加させます。


途中端折りましたが、最終的にここまで移動させます。

これでマチネによるMyCameraActorのコース設定は完了しました。
マチネ上で黒いバーを移動させたり再生して動作を確かめながら作業して下さい。

しかしまだマウスイベント、速度上昇下降等幾つか処理が残っています。
他の作業はBluePrintを使用して実装します。

長くなったので次回へ。