UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容 前回の「複合・前編」では、 2つの歯車イメージの、位置を動かして、回転を同期させました。 今…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容 動かすというテーマで「角度」、「位置」、「スケール」について紹介してきましたが、4回目は「…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容 今回は「スケール」です。 イメージの大きさ調整と、そのアニメーションの方法を紹介ます。 使…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容 この後の5回は、マテリアルに慣れてきたら知りたくなる、 角度・位置・大きさ・動きの波形・その…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容 使用する主なノードTextureCoordinate （ショートカット [U]＋クリック） BreakOutFloat2Compo…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容前回までは「基礎」でしたが、この後はノードの組み合わせが複雑になるので、以降はステップアッ…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 前回の記事はこちら... はじめに、グラデーションの作り方を全3回で説明するつもりでしたが、 3回目が、思…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 はじめに今回は「Power」です。 こちらについては、もうちょい後で記そうと考えていたのですが、 グラデにつ…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 前回の記事はこちら... 今回のテーマ 1回目で紹介した LinearGradient は、 明度差のあるグラデーションに…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回のテーマ グラデーションの作り方を3回に分けて紹介します。 2回目は、カーブアトラスを使った多色のグ…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回のテーマ グラデーションの作り方を3回に分けて紹介します。 今回は、一番簡単な2色のグラデーションの…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回のテーマ 前回は、形状のみの画像をグレースケールとして扱う方法を解説しました。 今回は、前回と同じ…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回のテーマ今回は画像のチャンネルについて考えます。 RGBAってやつです。 これまで様々なツールを使って…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回の内容マテリアルで形状を合成する際必要になるノード、 Saturate （もしくは Clamp） の使い方を覚えま…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回のテーマ マテリアルでイメージを合成しようとすると長方形が必要になることがあります。そんなとき簡単…
UIデザイナー向けの、UMGのデータの作り方を紹介しています。 今回のテーマ今回のテーマは "LERP"。 Linear Interpolate で、日本語にすると ”線形補間” だそうです。 …
GiRAFFIC ARTS ジラフィックアーツ
2021年3月23日 12:34
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容前回の「複合・前編」では、2つの歯車イメージの、位置を動かして、回転を同期させました。今回は、下のGIF画像のようにイイ感じに見えるように調整します。調整は、歯車を個別に調整するのではなく、まとめた状態で、位置、角度、スケールを調整します。初めて使うノードAddRerouteNode前回の作業内容を確
2021年3月20日 00:22
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容動かすというテーマで「角度」、「位置」、「スケール」について紹介してきましたが、4回目は「複合」です。角度、位置、スケールを合わせて使いたいときのノードの組み方について紹介します。今回作るもの２つのギアが回転しているマテリアルを作成します。使う画像はこちら↓。Rチャンネルに小さいギア、Gチャンネルに大きい
2021年3月12日 12:13
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容今回は「スケール」です。イメージの大きさ調整と、そのアニメーションの方法を紹介ます。使用する主なノードScaleUVsByCenterTextureCoordinate （ショートカット [U]＋クリック）AppendVectorTimeSineおすすめは ScaleUVsByCenterスケール
2021年3月5日 19:04
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容この後の5回は、マテリアルに慣れてきたら知りたくなる、角度・位置・大きさ・動きの波形・その複合技 について、順次紹介します。今回は角度についてです。角度の調整とアニメーションの方法を紹介ます。使用する主なノードCustomRotatorRotatorTextureCoordinate （ショートカット
2021年2月19日 22:33
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容使用する主なノードTextureCoordinate （ショートカット [U]＋クリック）BreakOutFloat2ComponentsAppendVectorComponentMaskPanner （ショートカット [P]＋クリック）TimeFrac初期状態の確認下図はノードの初期状態です。手
2021年2月18日 18:14
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容前回までは「基礎」でしたが、この後はノードの組み合わせが複雑になるので、以降はステップアップして「中級」にします。（ ...「はじめて」「基礎」と来て「中級」って、ランクの名称に統一性がないって？ いい名称が思いつかなかったんです。）で、今回はノードが増えてきたときにわかりやすくする”コメント”のつけ方です。ノー
2021年2月4日 12:31
UIデザイナー向けの、UMGのデータの作り方を紹介しています。前回の記事はこちら...はじめに、グラデーションの作り方を全3回で説明するつもりでしたが、3回目が、思いのほか内容が多くなってしまったので、今回はそこに納まらなかった部分です。ということで、今回は...カラー画像でグラデーションを作るです。まずはPhotoshop早速はじめましょう。前回作ったグレースケール
2021年2月1日 18:01
UIデザイナー向けの、UMGのデータの作り方を紹介しています。はじめに今回は「Power」です。こちらについては、もうちょい後で記そうと考えていたのですが、グラデについて書いていたら、 Power が出てきたので急遽まとめました。今回のノードPower 「べき乗」です。Base が元の値Exp が指数（n乗のn）、初期値 2グラデーションの件元が Linear（直線的）なグ
2021年1月29日 15:12
UIデザイナー向けの、UMGのデータの作り方を紹介しています。前回の記事はこちら...今回のテーマ1回目で紹介した LinearGradient は、明度差のあるグラデーションに角度をつけると、暗い方の色が溜まった感じになるんです。（※これは描画時のガンマ補正のせいなのですが、話が長くなりそうなのでまたの機会に）2回目で紹介した Curve と CurveAtlas を使った方法は
2021年1月25日 14:15
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマグラデーションの作り方を3回に分けて紹介します。2回目は、カーブアトラスを使った多色のグラデーションの作り方を紹介します。前回の記事（作り方1）はこちら...使用するアセットとノードCurve（アセット）Curve Atlas（アセット）Curve Atlas Row Parameter（ノード）作
2021年1月25日 14:13
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマグラデーションの作り方を3回に分けて紹介します。今回は、一番簡単な2色のグラデーションの作り方です。使用するノードLinearGradient：線形グラディエントTextureCoordinate：ComponentMask：作り方1-1 LinearGradient ノードを使うLinearGrad
2020年12月29日 16:55
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマ前回は、形状のみの画像をグレースケールとして扱う方法を解説しました。今回は、前回と同じような形状のみのイメージを４種類を、1枚の画像ファイルにまとめる方法について解説します。そしてファイルサイズもオトクに！はじめにところで、皆さんはUIパーツの画像圧縮設定って、どうしてますか？わたしも「UIパーツは非圧縮！」
2020年12月28日 17:59
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマ今回は画像のチャンネルについて考えます。RGBAってやつです。これまで様々なツールを使ってきたと思います。けれどRGBAをあまり意識することもなかったし、意識したところであまり意味はなかったのではないかと思います。でもUE4のマテリアルは違うんです。意識して使えばおトクにそして便利になります。はじめにこのブロ
2020年12月24日 18:19
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回の内容マテリアルで形状を合成する際必要になるノード、 Saturate （もしくは Clamp） の使い方を覚えます。使用するノードSaturate サチュレート Clamp クランプ 準備前回は、加算、減算、乗算、除算のイメージの合成を確認しました。今回は、 Add 加算と Subtract 減算を使用します。
2020年12月24日 12:09
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーママテリアルでイメージを合成しようとすると長方形が必要になることがあります。そんなとき簡単に長方形作れる BoxMask-2D を覚えましょう。使用するノード：BoxMask-2D 最初に覚えます最初に BoxMask-2D の入力ピン A 、 B 、 Bounds 、 EdgeFalloff の役割を覚えま
2020年12月21日 16:01
UIデザイナー向けの、UMGのデータの作り方を紹介しています。今回のテーマ今回のテーマは "LERP"。 Linear Interpolate で、日本語にすると ”線形補間” だそうです。そして、略語の”L”はともかく 複数ある"e"と"r"はどれからとったの？ ”I”の立場は如何に？と、よくわからない"LERP"ですが、デザイナー的な機能としては、マスクです。使用するノード：L
