執筆バージョン: Unreal Engine 4.23
|
突然ですが、まずはUI用のマテリアルを作りましょう。
マテリアルを作ったら、下記のような設定に変更してください。
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_16h54_12.jpg)
- 「Material Domain」を”User Interface”に変更
- 「Blend Mode」を”Translucent”に変更
すると出力ノードが下図のように変わります。
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_16h54_53.jpg)
今回は、赤枠で囲った「Screen Position」を使って、色々遊んでみようと思います。
※これから紹介する一部のアニメーションは、「Text Block」に直接マテリアルをセットすると正常に動作しないのでご注意ください。
(具体的にはマテリアル内で「Texture Coordinate」使っていると駄目なようです。「Text Block」から正常にUVを取得できない模様です)
下図のように、「Retainer Box」に「Text Block」を入れて、「Retainer Box」側にマテリアルをセットしてください。
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_17h44_44.jpg)
1.左右にスライド
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/Desktop-2019.10.21-17.00.14.06_1_1.gif)
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_17h27_24.jpg)
※”Sine”ノードのアウトプットを”Y”に繋げば縦スライドになります
2.拡縮アニメーション
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/Desktop-2019.10.21-17.00.14.06_1_2.gif)
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_17h30_28.jpg)
※縦横比は考慮しないので、長方形のWidgetは均一に拡縮できません
3.シェイク
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/Desktop-2019.10.21-17.00.14.06_1_3.gif)
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_17h37_23.jpg)
4.斜めフリフリ
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/Desktop-2019.10.21-17.00.14.06_1_4.gif)
![](https://historia.co.jp/wp/wp-content/uploads/2019/10/2019-10-21_17h39_28.jpg)
※使い道はよくわかりません
4頂点をアニメーションさせるだけなのであまり複雑なアニメーションはできませんが、アイデア次第でまだまだ色々な使い道ができそうです。
ぜひ活用してみてください!