GiRAFFIC ARTS　ジラフィックアーツ

主にゲームのUIをデザインする仕事をしています。 UE4はUIデザイナー向けの情報が少…

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・後編」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容前回の「複合・前編」では、 2つの歯車イメージの、位置を動かして、回転を同期させました。今回は、下のGIF画像のようにイイ感じに見えるように調整します。調整は、歯車を個別に調整するのではなく、まとめた状態で、位置、角度、スケールを調整します。初めて使うノード AddRerouteNode 前回の作業内容を確認下図は、前回組んだノードです。（区別するため、色を変えました）大きい歯車

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・前編」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容動かすというテーマで「角度」、「位置」、「スケール」について紹介してきましたが、4回目は「複合」です。角度、位置、スケールを合わせて使いたいときのノードの組み方について紹介します。今回作るもの２つのギアが回転しているマテリアルを作成します。使う画像はこちら↓。 Rチャンネルに小さいギア、Gチャンネルに大きいギア。ギアは垂直にずらすと歯が噛み合うように作っています。チャンネルの使い

GiRAFFIC AR…

3年前

3
[UE4] [UMG] UIデザイナーのマテリアル中級。動かす3「スケール」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容今回は「スケール」です。イメージの大きさ調整と、そのアニメーションの方法を紹介ます。使用する主なノード ScaleUVsByCenter TextureCoordinate （ショートカット [U]＋クリック） AppendVector Time Sine おすすめは ScaleUVsByCenter スケールは、 ScaleUVsByCenter です。使い方は、 ScaleUVs

GiRAFFIC AR…

3年前

7
[UE4] [UMG] UIデザイナーのマテリアル中級。動かす1「角度」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容この後の5回は、マテリアルに慣れてきたら知りたくなる、角度・位置・大きさ・動きの波形・その複合技について、順次紹介します。今回は角度についてです。角度の調整とアニメーションの方法を紹介ます。使用する主なノードCustomRotator Rotator TextureCoordinate （ショートカット [U]＋クリック） Time 初期状態の確認まずは、イメージを動かす前の状

GiRAFFIC AR…

3年前

6

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・後編」

GiRAFFIC ARTS　ジラフィックアーツ

3年前

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・前編」

3

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル中級。動かす3「スケール」

7

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル中級。動かす1「角度」

6

GiRAFFIC ARTS　ジラフィックアーツ

3年前

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす2「位置」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容使用する主なノードTextureCoordinate （ショートカット [U]＋クリック） BreakOutFloat2Components AppendVector ComponentMask Panner （ショートカット [P]＋クリック） Time Frac 初期状態の確認下図はノードの初期状態です。手前の炎の形状と、形状の塗りの色、背景の位置確認用グリッドの絵の3つの要素を Le

GiRAFFIC AR…

3年前

6
[UE4] [UMG] UIデザイナーのマテリアル中級。動かす2「位置」

6

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル中級。コメント

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容前回までは「基礎」でしたが、この後はノードの組み合わせが複雑になるので、以降はステップアップして「中級」にします。（ ...「はじめて」「基礎」と来て「中級」って、ランクの名称に統一性がないって？　いい名称が思いつかなかったんです。）で、今回はノードが増えてきたときにわかりやすくする”コメント”のつけ方です。ノードコメントノードにコメントを付けたい場合は、ノードを選んで、ウィンドウ左の詳

GiRAFFIC AR…

3年前

2
[UE4] [UMG] UIデザイナーのマテリアル中級。コメント

2

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3.5 カラー画像を使う」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。前回の記事はこちら... はじめに、グラデーションの作り方を全3回で説明するつもりでしたが、 3回目が、思いのほか内容が多くなってしまったので、今回はそこに納まらなかった部分です。ということで、今回は... カラー画像でグラデーションを作るです。まずはPhotoshop 早速はじめましょう。前回作ったグレースケールは、グラデーション以外にもアルファチャンネルとして、透過処理などにも使用できるの

GiRAFFIC AR…

3年前

2
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3.5 カラー画像を使う」

2

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル　アドバンス（仮）「Powerrrr!!!」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。はじめに今回は「Power」です。こちらについては、もうちょい後で記そうと考えていたのですが、グラデについて書いていたら、 Power が出てきたので急遽まとめました。今回のノードPower 「べき乗」です。 Base が元の値 Exp が指数（n乗のn）、初期値 2 グラデーションの件元が Linear（直線的）なグラデーションでも、 ↓のように端に暗い色が溜まった感じになってしまうと記しました

GiRAFFIC AR…

3年前

2
[UE4] [UMG] UIデザイナーのマテリアル　アドバンス（仮）「Powerrrr!!!」

2

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3 画像を使う」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。前回の記事はこちら... 今回のテーマ 1回目で紹介した LinearGradient は、明度差のあるグラデーションに角度をつけると、暗い方の色が溜まった感じになるんです。（※これは描画時のガンマ補正のせいなのですが、話が長くなりそうなのでまたの機会に） 2回目で紹介した Curve と CurveAtlas を使った方法は、機能的には問題ないのですが、希望通りの色を作るのに時間がかかったり、アトラス

GiRAFFIC AR…

3年前

3
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3 画像を使う」

3

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその2 多色」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマグラデーションの作り方を3回に分けて紹介します。 2回目は、カーブアトラスを使った多色のグラデーションの作り方を紹介します。前回の記事（作り方1）はこちら... 使用するアセットとノード Curve（アセット） Curve Atlas（アセット） Curve Atlas Row Parameter（ノード）作り方2　Curve と CurveAtlas Curve と CurveAtl

GiRAFFIC AR…

3年前

3
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその2 多色」

3

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその1　2色」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマグラデーションの作り方を3回に分けて紹介します。今回は、一番簡単な2色のグラデーションの作り方です。使用するノードLinearGradient：線形グラディエント TextureCoordinate： ComponentMask：作り方1-1　LinearGradient ノードを使う LinearGradient ノードはグラデーションを作ります。下図のように、2つの色とLer

GiRAFFIC AR…

3年前

5
[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその1　2色」

5

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて2」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマ前回は、形状のみの画像をグレースケールとして扱う方法を解説しました。今回は、前回と同じような形状のみのイメージを４種類を、1枚の画像ファイルにまとめる方法について解説します。そしてファイルサイズもオトクに！はじめにところで、皆さんはUIパーツの画像圧縮設定って、どうしてますか？わたしも「UIパーツは非圧縮！」派でした。でも、圧縮形式に BC7 が使えるようになってからは、非圧縮にこだわ

GiRAFFIC AR…

3年前

4
[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて2」

4

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて1」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマ今回は画像のチャンネルについて考えます。 RGBAってやつです。これまで様々なツールを使ってきたと思います。けれどRGBAをあまり意識することもなかったし、意識したところであまり意味はなかったのではないかと思います。でもUE4のマテリアルは違うんです。意識して使えばおトクにそして便利になります。はじめにこのブログの初期の記事に、画像を表示させるだけの内容のものがありました。下図のように

GiRAFFIC AR…

3年前

3
[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて1」

3

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「＋－×÷についてその3 Saturate （もしくは Clamp）」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容マテリアルで形状を合成する際必要になるノード、 Saturate （もしくは Clamp）の使い方を覚えます。使用するノードSaturate　サチュレート　 Clamp　クランプ　準備前回は、加算、減算、乗算、除算のイメージの合成を確認しました。今回は、 Add 加算と Subtract 減算を使用します。前回のデータから Subtract, Multiply, Divide のノード

GiRAFFIC AR…

3年前

4
[UE4] [UMG] UIデザイナーのマテリアル基礎。「＋－×÷についてその3 Saturate （もしくは Clamp）」

4

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「四角形 BoxMask-2D」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーママテリアルでイメージを合成しようとすると長方形が必要になることがあります。そんなとき簡単に長方形作れる BoxMask-2D を覚えましょう。使用するノード： BoxMask-2D　最初に覚えます最初に BoxMask-2D の入力ピン A 、 B 、 Bounds 、 EdgeFalloff の役割を覚えます。 A　TextureCoordinate をつなぐ B　UV位置　0～1

GiRAFFIC AR…

3年前

4
[UE4] [UMG] UIデザイナーのマテリアル基礎。「四角形 BoxMask-2D」

4

GiRAFFIC ARTS　ジラフィックアーツ

3年前
[UE4] [UMG] UIデザイナーのマテリアル基礎。「LERPってなんだろう」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマ今回のテーマは "LERP"。 Linear Interpolate で、日本語にすると ”線形補間” だそうです。そして、略語の”L”はともかく複数ある"e"と"r"はどれからとったの？ ”I”の立場は如何に？と、よくわからない"LERP"ですが、デザイナー的な機能としては、マスクです。使用するノード： LinearInterpolate　LERP、線形補間 Radial Gradie

GiRAFFIC AR…

3年前

3
[UE4] [UMG] UIデザイナーのマテリアル基礎。「LERPってなんだろう」

3

GiRAFFIC ARTS　ジラフィックアーツ

3年前

最近の記事

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・後編」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・前編」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす3「スケール」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす1「角度」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・後編」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす4「複合・前編」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす3「スケール」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす1「角度」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす2「位置」

[UE4] [UMG] UIデザイナーのマテリアル中級。動かす2「位置」

[UE4] [UMG] UIデザイナーのマテリアル中級。コメント

[UE4] [UMG] UIデザイナーのマテリアル中級。コメント

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3.5 カラー画像を使う」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3.5 カラー画像を使う」

[UE4] [UMG] UIデザイナーのマテリアル アドバンス（仮）「Powerrrr!!!」

[UE4] [UMG] UIデザイナーのマテリアル アドバンス（仮）「Powerrrr!!!」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3 画像を使う」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3 画像を使う」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその2 多色」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその2 多色」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその1 2色」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその1 2色」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて2」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて2」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて1」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「RGBAについて1」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「＋－×÷についてその3 Saturate （もしくは Clamp）」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「＋－×÷についてその3 Saturate （もしくは Clamp）」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「四角形 BoxMask-2D」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「四角形 BoxMask-2D」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「LERPってなんだろう」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「LERPってなんだろう」

[UE4] [UMG] UIデザイナーのマテリアル　アドバンス（仮）「Powerrrr!!!」

[UE4] [UMG] UIデザイナーのマテリアル　アドバンス（仮）「Powerrrr!!!」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその1　2色」

[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその1　2色」