ぷちコンのゲーム製作中にはまったのでさくっと記事にしてみます。
今回はUMGでアニメーションするウィジェットを動的に配置する方法を紹介します。
UMGはメニュー画面やHUDなどを簡単に作成することが出来る便利機能です。
アニメーションも比較的簡単に実装できますし、値の変更などもBlueprintを使って簡単に行えます。
しかし、例えばスクロールするアイテムウィンドウなどを考えると、動的にテキストを配置する機能などが欲しくなります。
もちろん、これにも対応しているのですが、パッと見でどうすればいいのかわかりにくいです。
しかもそいつがアニメーションするとなるとウィジェットとして作成したくなります。
というわけで、今回の記事ではその実装方法を紹介します。
まず、コンテンツブラウザでメインとなるウィジェットを作成します。
Widgetブループリントを選択し、"Widget_Main"と名前をつけましょう。
このウィジェットは以下のように作成します。
緑の枠が[Canvas Panel]です。
Canvasの位置がわかりやすいようにテキストを配置して位置を確認できるようにしました。
ここで重要なのですが、Canvasにはわかりやすい名前をつけて、[Is Variable]にチェックを入れておきます。
このチェックを入れておくとBPから変数として扱うことが出来ます。
つまり、このCanvasにアクセスすることが出来るようになります。
次にレベルBPでこのウィジェットを作成し、表示します。
まあこれは説明の必要もないと思いますが、一応BPを提示しておきます。
では、続きからで動的配置とアニメーションをやっていきます。
Slateを動的に配置するにはWidgetブループリントを新規に作成し、そちらで追加したいSlateを登録する必要があります。
新しくWidgetブループリントを作成し、"Widget_SlideText"と名前をつけましょう。
このウィジェットは以下のようにします。
テキストを左上に配置しているだけです。
このテキストも変更する対象なので、名前をわかりやすく[MessageText]と市、[Is Variable]にチェックを入れておきます。
そしてアニメーションを作成します。
アニメーションを作成するにはまず[アニメーション]タブで[＋新規]ボタンを押します。
アニメーションが作成されますのでわかりやすい名前をつけましょう。
テキストとこのアニメーションを選択し、[詳細]タブの[Position X]の横にあるキー追加ボタンをクリックします。
するとアニメーションのタイムラインにキーが打たれます。
キーはアニメのタイムバー(っていうのかな？)で指定されている時間(秒)に打たれますので、0秒の位置では数値を1920にしてキー追加ボタンをクリック、1秒の位置では数値を0にしてキー追加ボタンをクリックします。
するとタイムライン上には以下のようにキーが打たれます。
タイムバーをスライドさせるとテキストが画面右からカットインしてくるようになるはずです。
これでアニメーションはOKです。
さて、本日のメインイベントはこれを"Widget_Main"にどのようにして配置するかです。
答えはこちら。
クリックで拡大してみてください。
最初から解説します。
まず最初のコメントブロックでは"Widget_SlideText"を作成し、[MessageText]に指定されたテキストを設定しています。
[MessageText]は[Is Variable]がTrueになっていますので、普通にGet出来ます。
次のブロックがCanvasに追加する部分です。ここが肝心要の部分。
"Widget_Main"は作成した際にBPの変数として設定してありますので、これを取得し、やはり[Is Variable]がTrueになっているCanvasを取得します。
Canvasの関数[Add Child to Canvas]を利用するとこのCanvasに作成したウィジェットを子として登録することが出来ます。
実はPanel系は全般的に[Add Child]という関数を持っているのですが、こちらを使用すると戻り値が[Panel Slot]という型になります。
これは様々なSlotの基底クラスですので、このSlotを使用する場合には適切なSlotにキャストする必要があります。
しかし、[Add Child to Canvas]を利用すると戻り値は[Canvas Panel Slot]という型になり、そのまま使用することが出来るようになります。
Panelの型がわかっているのであれば[Add Child]を使う理由はありません。
登録されたウィジェットの位置やサイズはこの[Canvas Panel Slot]で指定されています。
登録しただけだとまともなサイズで描画してくれなかったりするので、[Set Auto Size]関数でテキストの長さに合わせたサイズを自動的に割り当ててもらいます。
そして、[Set Position]関数でY座標を設定します。X座標は0.0に設定します。
最後のコメントブロックはアニメーションの実行命令です。
作成したウィジェットには[Play Animation]という命令がありますのでこれを利用しますが、どのアニメーションを再生するかを指定する必要があります。
再生アニメーションは[アニメーション]タブでつけた名前で取得できるアニメーションを設定します。
ウィジェットから[Text Slide Anim]を取得し、[Play Animation]関数の[In Animation]引数に渡します。
あとは実行時にこのマクロを呼び出してやればOKです。
テキストはなにか適当なものを設定してください。
結果はこんな感じ。
2MB以上の画像ファイルがアップできなかったので.gifがかなり荒い画質になってますが、動いてるのはわかりますよね。
もちろん、Canvas以外のPanelも使用できるので、自分の実装に必要なPanelを利用して色々試してみてください。
