みつまめ杏仁

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

UMG

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

鶏肉は柔らかいのより噛みごたえのある方が好きです。 で前回の続き。 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 limesode.hatenablog.com リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげ…

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

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

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

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

UMGのフォントをアレンジ

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

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

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

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

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

Widgetを出したり消したり

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

Enumを使ったチェックボックスUI 続き

前回Enumでチェックボックスの内容(テキストラベル)を管理する方法を紹介しました。 limesode.hatenablog.com 今回は操作が完了して閉じる際に、並んだチェックボックスから状態を取り出すところを書いていこうと思います。 まずはWidgetから編集開始。 自…

Enumを使ったチェックボックスUI

前回Enumを使った簡単なメモを書きました。 今回はWidgetで応用してみようと思います。 コンソールゲーム想定なので、マウスは非対応です。 UMGのコンポーネントは使いません。Ver 4.11でゲームパッドにも対応したようなことが公表されていた気がしますが、…

1枚のテクスチャから多重スクロール

久しぶりの更新です。 最近はお絵かきの方に精を出してました。 さてさて、多分もうどこかで既にやられてると思いますが、多重スクロールです。 4重です。これを1枚のテクスチャで、一つのマテリアルで作ります。 まずはテクスチャから。 Photoshopを使い…

WidgetでPieMenu的なのを作ってみる

インフルエンザで寝込んでたりしてあまり時間が取れなかったので、久しぶりの更新になってしまいました。正直ネタに困ってたというのもあります。 さてさて 突然ですがハイライト部分がくるくると切り替わるサンプルを作ってみました。 テクスチャを用意しま…