読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

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

はみ出た文字のサイズを調整

久しぶりの更新。なかなか記事を書く時間がないので困ったものです。 NintendoSwitchにもUE4が対応するということで、どんなゲームUIが出てくるか楽しみです。 さてさて以前テキストに合わせてフキダシの大きさを変えるのを書きましたが、今回は逆に決められ…

テキストブロックのスクロール 続き

前回の続きでスクロールバーを付けてみます。 limesode.hatenablog.com 以外にサクッとできました。まずはUMGのパーツを追加するところから。 スクロールバー全体の大きさを決めるキャンバスパネルを親にして、スクロールバーの下敷きとバー本体を表すImage…

テキストブロックのスクロール

テキストブロックで、長文を表示しようとしたときに、たいていAuto Wrap Text(=自動改行)にすると思います。 文字量が多いとサイズが大きくて表示しきれないので、スクロールさせるのが我々UI業界では当たり前の仕組みです。 UMG パーツ まずはイイ感じの…

UMGでよくやらかすやつ

最近カレンダーを見るのが怖い。 年が明け、あっという間に1月も残り1週とちょっと。ブログの更新もペースが落ちて前回から随分間が開いてしまいました。世間から忘れ去られないように頑張っていきたいと気合だけは入れているのですが・・・ さてさて、今…

アンリアルエンジン4を使いながら

UE4

このブログも始めてから1年経ちました。どーせすぐ飽きるかなと思ってたけど、なんとか続けることができて今更ながら自分に驚いてます。これも素晴らしいエンジンに出会えたからに他ならなくて、ゲームユーザーインターフェイスの制作で少しでもお役に立る…

ストラクチャを使ってみる

前にEnum(いーなむ)を使ったリストメニューについて書きましたが、最近になってUser Defind Structureが便利なことに気付きました。 ストラクチャはプログラム界では《構造体》とか呼ばれているようで、Enumと同じように、アセットで管理できます。Enumと…

UV座標の計算をマテリアルでやらせると指定がラクチン

以前、マテリアルのパラメータ指定で細かい小数を扱っているのを、改良する記事を書きました。 limesode.hatenablog.com 今回はもう少しだけ発展させます。 テクスチャの一部を切り出して使うには、UとVの2つの値を扱うことになります。このUとV、2つの値…

フォントのフチドリを試す

遅ればせながらようやく 4.14インストールできた。 なんといっても試してみたかったのが、フォントのフチドリ機能! というわけでさっそくWidgetを作ってみる。 Designerモードで、Textblockを置いたところ。 設定を確認してみると、特に変化は見られない・…

UE4でパーセント表記

戦績などのスコアを表示するリザルト画面や、武器やキャラのステータス表示で、「命中率」や「回避率」など「○○率」を表記することがよくあります。 この「○○率」を表示してやんよ~というわけで気軽にやってみたのですが、なかなかうまくいきませんでした。…

A と B を交互に切り替える処理でハマった話

TVのリモコンを握っている状況をイメージしてください。 TVが点いていない状態で電源ボタンを押すと起動して、点いている状態で押すと待機モードになります。 どちらの操作も同じボタンを押すことで切り替わります。 このように、A と B の2つの状態があっ…

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

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

最近ハマったつなぎ方

ちょっとネタが無くなってきたのもあって更新ペースが落ちてます。 なので自分のウッカリでもさらしてみようかなと。 それは思ったような値にならず、原因も分からず、しばらく首をひねっていたつなぎ方です。 まずUMGでパーツを置いて、Widgetブループリン…

スタッフロールをつくる 《完結編》

鶏肉は柔らかいのより噛みごたえのある方が好きです。 で前回の続き。 limesode.hatenablog.com 名前を表示するための器が用意できたところで、次に必要なのは中身です。 スタッフロールには関わった多くの人々の名前が載るので結構な行数になることが多く、…

スタッフロールをつくる 《Widget準備編》

画面の下から出てきて上に消えていくだけの、どシンプルなスタッフロールを作ってみました。 今回用意するアセットは以下の6種類8個。 右のWidgetブループリント3つはほとんど同じ内容。 スタッフロールは、ただ名前が並んでるだけではなく、組織やグループ…

わりと本気のコンボカウンター 《完結編》

いよいよ動作確認です。 前回の記事はこちら わりと本気のコンボカウンター 《準備編》 - みつまめ杏仁 わりと本気のコンボカウンター 《UMG編》 - みつまめ杏仁 わりと本気のコンボカウンター 《Widgetブループリント編》 - みつまめ杏仁 一揃いのアセット…

わりと本気のコンボカウンター 《Widgetブループリント編》

続きです。 前回の記事はこちら。 わりと本気のコンボカウンター 《準備編》 - みつまめ杏仁 わりと本気のコンボカウンター 《UMG編》 - みつまめ杏仁 Widgetブループリント 絵的な素材が用意できたところで、いよいよブループリントに手をつけていきます。 …

わりと本気のコンボカウンター 《UMG編》

わりと本気です。コンボカウンターです。ということで前回の続きで用意したマテリアルをUMGにセットしていきます。 limesode.hatenablog.com レイアウトする Widgetブループリントを作ったらさっそくパーツを配置していきます。 全体の位置調整用にCanvasPan…

わりと本気のコンボカウンター 《準備編》

ちょっとガチなコンボカウンターを作ってみようと思い立って始めてみたら、意外に時間がかかってしまった。まぁほとんど寝落ちが原因だけど・・・ コンボカウンターは格ゲーではお馴染みの表示です。アクションゲームやシューティングゲームでも見かけます。…

アセットを作らずにWidgetを作る 《おまけ》

前回の記事でWidgetブループリントで、テキストWidgetを好きなだけ作ってキャンバスに置く方法を書きました。 limesode.hatenablog.com これを使って遊んでみました。正直何の役にたつか謎なので、暇つぶし程度にしかならない気がする・・・ まず前回の記事…

アセットを作らずにWidgetを作る

Widgetで何か表示しようとすると、UMGでキャンバスにパーツを置いていきます。これはあらかじめ表示する数が分かっている場合ですが、数を必要に応じて動的に配置したいときは、別のWidgetブループリントをアセットとして用意しておいて、これをCreateWidget…

マテリアル操作で簡単アイコン切り替え

UMGのマテリアル操作でアイコンイメージを切り替える記事を前に書きました。 ちょっとだけラクする方法をひらめいたのでメモしておきます。 簡単といっても指定が楽になる程度ですが。 limesode.hatenablog.com このときは、アイコンのUV値(テクスチャ内の…

UMGでリストボックスを作ってみる 《おまけ》

前回作ったリストボックスにもう少しだけおまけを追加してみようかと。 limesode.hatenablog.com limesode.hatenablog.com リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげ…

UMGでリストボックスを作ってみる 《続き》

前回でリストを表示するとこまでできました。 limesode.hatenablog.com 今回はカーソルの移動と、表示範囲の移動を作っていきます。 カーソルの移動とキー入力 カーソルを動かすためには、「いまここ」というのが分かっていれば 次に移動する場所が計算でき…

UMGでリストボックスを作ってみる

スクロール機能のついたリストボックスを作ろうと思って、ブループリントを触り始めたら思いのほか手間取ってしまいました。当たり前のように使ってるUIのしくみって作ってみないと分らないものですね。ちょっとボリュームがあるので、うまくまとまるか自信…

Widgetコンポーネントにマテリアル

4.13にアップデートしてみたら、うれしい機能が追加されてた。 多分VRでWidget使いたいという声が多く寄せられたんじゃないかと想像してみたり。 Widgetはそのままだと、2Dだけど、とWidgetコンポーネントとしてWorld空間に置くと3次元が表示できる。DeadS…

UIを作ることの難しさ

UIを構成するのはデザインだと思っている人がいる。デザインなんてほんの1割程度だということを理解している方はどのくらいいるのだろうか? UIは目で見て操作するタイプが多いので、見た目に誤解を招いたり、スムーズなオペレーションに誘導できない場合は…

UMGのフォントをアレンジ

UE4で扱えるフォントは大きく分けて2種類あります。これは実装方法によって分けられています。ひとつは Runtime(ランタイム)と呼ばれるもので、これはTrueTypeFontやOpenTypeFontでおなじみのアウトライン情報をメモリに埋め込んで利用します。文字の量が…

マテリアルで目パチ

キャラ絵の目パチ(まばたき)は口パクのようにセリフと連動することはありませんが、キャラが生きていることを表現するために必要な演出です。 その目パチの間隔をランダムで制御しようとするとそれなりにノードを組む必要があります。かといってタイムライ…

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

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

あのニュゥーって伸びながら出てくるヤツ

スーファミとかメガドライブの頃かな、昔のゲームでよく見かけた気がするんだけど、あのニュゥーって伸びながら絵が出来上がっていくやつをマテリアルで再現してみた。 ちょっと大きいので全体図を a~d のパートに分けて紹介します。 まずは a から。 ま…

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

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

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

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

ラバランプ風のゲージ

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

最近気づいた

普段Widgetブループリントを扱ってるくせに、アップデートされていたことに気付いていなかったというのを今更メモ。 リリースノートを隅々まで読めば書かれていたのかもしれませんが・・・ ■ UMGのアニメーションが再生中かどうか isAnimationPlaying ノード…

Lerpノードを使ったスコア表示

alweiさんのブログ Let’s Enjoy Unreal Engine を読んでいて、ふと思いついたので早速試してみたメモです。 あの だらららーってなるヤツ。 まず数字のテクスチャから。 サイズは 512x128で、一文字の大きさは 48x64です。 このテクスチャをインポートして…

残り少なくなったら点滅

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

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

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

タイマーのカウントダウンと点滅 《予備》

前回の記事でTickを使った点滅処理を書きました。 limesode.hatenablog.com 点滅させるのに Branch を使っていたのですが、使わない方法も試してみたらできたので一応記事にすることにします。 で前回のがこれ↓ それがこうなります↓ 判定処理は確かに無くな…

タイマーのカウントダウンと点滅

格ゲーでおなじみのカウントダウンタイマー表示を作っていて、シンプルだけど形になったのでメモ。 カウントダウンなので残り少なくなるとプレイヤーを急かすように主張しないといけません。最初はたっぷりあるので、チラっと確認できればいい程度の目立ち具…

フキダシを作ってみる 続き

前回パーツを一通り揃えるところまでできました。 limesode.hatenablog.com さっそく表示するところを作っていきます。 まずは、Widgetの編集モードをGraphに切り替えて、EventConstructから。 準備前にパーツが表示されないようVisiblity は Hidden にして…

フキダシを作ってみる

テキストブロックのサイズを取得する方法がわかったので、 応用編として、テキストブロックのサイズに合わせてフキダシの大きさを調整するしくみを考えてみた。 ↑かの ウォルト・ディズニーの言葉です。 (この微妙な中華系のフォントが気になる・・・) 9 S…

テキストブロックのサイズを取得する2

前回、動的にテキストブロックに流し込んだ文字列の長さを取得してポジションを調整してみよう、という内容でしたが、 limesode.hatenablog.com Widgetコンポーネントにして表示すると Force Layout Prepass が効かなくなるということが判明しました。Widget…

UMGのテキストブロックのサイズを動的に取得する方法

Widgetで、あるテキストを表示するとして、さらにローカライズすることが分かっているとき。どのように作りますか? 翻訳されたテキストを見て、一番長そうなドイツ語やロシア語なんかに合わせて 固定サイズで作ると、ちょっと短い言語の時にカッコ悪いこと…

Widget第3のEvent

Widgetブループリントに初めから用意されているイベントは、2つだと思ってたらもう一つあることに気付いたのでメモ。 Event Construct とEvent Tick は編集を開始したら置いてあります。 もう一つWidget専用のイベントがありました。 Event Destruct です。…

UMGでマテリアルアニメーション制御

UMGでImageパーツを利用する際に、テクスチャではなくマテリアルをセットすることができます。このマテリアルにパラメータを仕込んでおいてアニメーションしようと思ったときどうしますか? 普通のブループリントだと、タイムラインノードが使えますが、UMG…

モノクロテクスチャに色を付ける

Unreal Fest 2016 Osaka に行ってきました。 興味深い講演ばかりであっという間でした。中でもヒストリアさんの講演でForeachLoopの処理に関数で定義したMakeArrayの検証が衝撃でした。 よく使ってるからというのもありますが、Pure型か通常型かで、速度に違…

Widgetを出したり消したり

Widgetの取り扱いについて気になることがあったので、ちょっと調べてみました。 まず、Widgetを画面に表示するには、いつものコンビネーション。 Create Widget ノードと Add to Viewport ノードです。 大抵のサンプルはこの辺でめでたしめでたしなんですが…

複数Widgetの操作処理、こんな感じでどうかな?

アップデートして、4.11.2になりました。 前回の記事で艦これ改のUI設計について偉そうなことを書いてしまいましたが、思うところあって勉強がてらUE4で試してみることにしました。 さすがに今までの記事みたいに作り方~なんてのはボリューム的に大変そうな…

艦これ改のUI設計について

UI UX

最近『艦これ』を遊んでます。実は本家は遊んだことは無いので、始めるにはちょうどいいかと思ってVita版を購入。なので正しくは『艦これ改』です。 発売前からUIデザインについてはいろいろ物議を醸してたので、とてもワクワクしてました。元はブラウザゲー…

ブループリントのちょっと便利技

UE4

ブループリントをいじってるときに便利そうな小技をメモっておきます。 【その1】ノードを結ぶ線をつなぎ変えたいときの小技 Ctrlキーを押しながらドラッグすると何本でもまとめて移植できます。 ちなみにラインの途中をCtrlキーを押しながらクリックすると…