もんしょの巣穴blog

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

[UE4] UMGのアニメーションと動的な配置

 ぷちコンのゲーム製作中にはまったのでさくっと記事にしてみます。
今回はUMGでアニメーションするウィジェットを動的に配置する方法を紹介します。

UMGはメニュー画面やHUDなどを簡単に作成することが出来る便利機能です。
アニメーションも比較的簡単に実装できますし、値の変更などもBlueprintを使って簡単に行えます。
しかし、例えばスクロールするアイテムウィンドウなどを考えると、動的にテキストを配置する機能などが欲しくなります。
もちろん、これにも対応しているのですが、パッと見でどうすればいいのかわかりにくいです。
しかもそいつがアニメーションするとなるとウィジェットとして作成したくなります。
というわけで、今回の記事ではその実装方法を紹介します。

まず、コンテンツブラウザでメインとなるウィジェットを作成します。
Widgetブループリントを選択し、"Widget_Main"と名前をつけましょう。

ue289.jpg

このウィジェットは以下のように作成します。

ue290.jpg 
緑の枠が[Canvas Panel]です。
Canvasの位置がわかりやすいようにテキストを配置して位置を確認できるようにしました。
ここで重要なのですが、Canvasにはわかりやすい名前をつけて、[Is Variable]にチェックを入れておきます。

ue291.jpg 
このチェックを入れておくとBPから変数として扱うことが出来ます。
つまり、このCanvasにアクセスすることが出来るようになります。

次にレベルBPでこのウィジェットを作成し、表示します。
まあこれは説明の必要もないと思いますが、一応BPを提示しておきます。

ue292.jpg 

では、続きからで動的配置とアニメーションをやっていきます。



Slateを動的に配置するにはWidgetブループリントを新規に作成し、そちらで追加したいSlateを登録する必要があります。
新しくWidgetブループリントを作成し、"Widget_SlideText"と名前をつけましょう。
このウィジェットは以下のようにします。

ue293.jpg

テキストを左上に配置しているだけです。
このテキストも変更する対象なので、名前をわかりやすく[MessageText]と市、[Is Variable]にチェックを入れておきます。

そしてアニメーションを作成します。
アニメーションを作成するにはまず[アニメーション]タブで[+新規]ボタンを押します。
アニメーションが作成されますのでわかりやすい名前をつけましょう。

ue294.jpg 

テキストとこのアニメーションを選択し、[詳細]タブの[Position X]の横にあるキー追加ボタンをクリックします。

ue295.jpg

するとアニメーションのタイムラインにキーが打たれます。
キーはアニメのタイムバー(っていうのかな?)で指定されている時間(秒)に打たれますので、0秒の位置では数値を1920にしてキー追加ボタンをクリック、1秒の位置では数値を0にしてキー追加ボタンをクリックします。
するとタイムライン上には以下のようにキーが打たれます。

ue296.jpg

タイムバーをスライドさせるとテキストが画面右からカットインしてくるようになるはずです。
これでアニメーションはOKです。

さて、本日のメインイベントはこれを"Widget_Main"にどのようにして配置するかです。
答えはこちら。

ue297.jpg

クリックで拡大してみてください。
最初から解説します。

まず最初のコメントブロックでは"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です。
テキストはなにか適当なものを設定してください。
結果はこんな感じ。

ue298.gif 

2MB以上の画像ファイルがアップできなかったので.gifがかなり荒い画質になってますが、動いてるのはわかりますよね。
もちろん、Canvas以外のPanelも使用できるので、自分の実装に必要なPanelを利用して色々試してみてください。
スポンサーサイト
  1. 2015/04/13(月) 00:43:59|
  2. UE4
  3. | トラックバック:0
  4. | コメント:0
<<[UE4] SequenceとDelayの関係 | ホーム | [UE4] Parallax-Corrected Cubemapを実装する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://monsho.blog63.fc2.com/tb.php/158-1760cf4c
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Author:monsho
ゲームプログラマ?

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

ブロとも申請フォーム

この人とブロともになる

ブログ内検索

RSSフィード

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。