みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

ゲージ

ちょっと変わった形のゲージをメッシュで作る《宿題編》

E3のトレーラーを見てて、ゲージの長さが可変していたのをみてしまったので、我流ですが対応してみました。 ここでいう可変とは、ゲージの物理的な見た目の長さのことです。成長段階やステータス変化を表現する方法の一つで、長さが比較しやすいゲージを使う…

ちょっと変わった形のゲージをメッシュで作る《おまけ編》

やっぱり下敷きとか枠が無いと完成した感じがしないので作ってみます。 とその前に、前回の記事で満タンを 1.0 に、空っぽを 0.0 という仕様にしていたので、見た目にゲージが見えないのに、まだ「ある」状態が起こる仕様になっていました。いわゆる「表示バ…

ちょっと変わった形のゲージをメッシュで作る《後編》

前回の続き。 カーブを描いたゲージを作る場合、できるだけ細かいメッシュで作らないと、テクスチャが歪みます。細かいメッシュは頂点数が多くなるのでUV編集が地獄です。キレイに比率を維持してまっすぐなUV展開をしてくれるスクリプトでも書ければいいので…

ちょっと変わった形のゲージをメッシュで作る《前編》

キングダムハーツIIIのトレーラーを見てて急に作ってみたくなったのでメモメモ。 3/4の円形部分と直線部分が合わさったゲージで、スクショから割り出した直線部分の長さは円周のおよそ1/2。全部で円周の5/4な長さっぽいです。 UVスクロールを使うのでこの辺…

ボスゲージを作ってみる

RPGとかアクションゲームのボス戦なんかで、ボスキャラの体力がものすご~くたくさんあるのを表現したゲージがありますが、そのひとつ作ってみました。 参考にしたのは、大人気モバイルゲームタイトルのFGOです。 普通は1本のゲージが何本もあるかのように見…

キャラセレを作ってみる おまけ編

続きです。 シンプルな作りですが、キャラセレ画面としてある程度必要と思われる内容まで用意できました。今回はキャラを選ぶにあたっての能力値をグラフで表現したものを作って追加します。 まずはテクスチャ。 40x40 のグレースケールでアルファチャンネ…

5分で作る マテリアルを使わないゲージ

超簡単お手軽ゲージを作ってみます。マテリアルは使いません。 Widgetブループリントを一つ用意します。 キャンバスに配置するパーツは3つ。 ゲージ用のキャンバスとゲージの下敷きは同じ大きさにします。下敷きは暗めの色にしておきます。 ゲージ本体の「I…

円形ゲージのアレンジとテクスチャの節約

UE4はマテリアルで円形のゲージが簡単につくれます。公式のドキュメントに載ってるので、ここで紹介しなくてもいいかな~とか思ってたんですが、購読してるブログ、ぼっちプログラマのメモにあった pafuhana1213.hatenablog.com を見てて、ちょっと試してみ…

マテリアルで棒グラフを作る

カラフルな棒グラフをマテリアルで作ってみたら以外に簡単にできたのでメモ。 ↓どこかで見たことがあると思いますが、UE4で再現してみました。 割合の計算はしないタイプで、パラメータをそのまま追加していきます。 マテリアルのみでテクスチャーは使いませ…

ゲージの長さに合わせてカラーを変える

Lerp を使うと、AとB2つを線形補間して途中地点の値を拾うことができます。 似たようなやり方で、ちょっと変わったゲージの作り方を紹介します。 まずグラデーションでカラフルにしたテクスチャを作ります。 サイズは小さくていいので 256x16です。 このテ…

ラバランプ風のゲージ

スプラトゥーンのフェス楽しかったです。もうないのかと思うとさみしい。開発スタッフおつかれさまです。 で、そのスプラトゥーンのバトル結果ゲージをつくってみようと思い立ってそれっぽくなったのでメモ。 今回はマテリアルがメインです まずはテクスチャ…

残り少なくなったら点滅

体力ゲージが残り少なくなったら点滅させるのを作ってみます。 いろんな方法が考えられますが、簡単なやつをご紹介します。 ゲージは、前回の記事で作ったものを使用します。 limesode.hatenablog.com 体力ゲージ用のマテリアルに点滅する処理を入れます。 ↓…

ちょっと遅れて減るダメージゲージ

最近UE4のマニュアルというかチュートリアルを書く機会があって、急いだせいかさすがに疲れました。でちょっとブログも休憩してました。 久しぶりに書きます。 格闘ゲームの体力ゲージは、ダメージを受けた瞬間に減らします。これは遅延があるとゲージがまだ…

マテリアルを使ったゲージ

ゲージは見た目に長さを変えて表現します。 このゲージをマテリアルで増減できるようにしてみます。 マテリアルで表現するのでWidgetでもスプライトでもスタティックメッシュでも、マテリアルがアサインできるものなら何でもOKです。 コンテンツブラウザの何…