みつまめ杏仁

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

UI

ゲージをテクスチャで増減させる

円グラフのように増減するゲージを作るとき、atan2(アークタンジェント2というプログラムの関数)をありがたく使わせてもらっています。少ないノードで実現できてしまうので、大変便利でありがたい存在。解像度に依存しないのもうれしい。ゲームで印象に残…

四角いゲージばかりじゃつまらない

画像を使ったゲージの上限と下限を調整する方法

スコアを表示する方法について試してみた

テクスチャのタイリングでスコアとかの数字を表示できないか試してみた

ボタン長押しゲージを作ってみた《ボタン編》

前回マテリアルを使ったゲージができたので、ボタンの表示とUI用のロジックを作っていきます。一例としてサンプル程度に見ていただけると助かります。 limesode.hatenablog.com まずは簡単なボタンテクスチャのアトラスを用意します。 これをマテリアルで切…

スライダーUIを並べて操作してみる UE5版 続き2

前回の続き 基本の土台としてはそれなりにカタチになったと思うので、スライダー以外のUIパーツを作ってみようと思います。 今回の仕様はキーボードのカーソルキーで操作する想定にしています。 スライダーがUIパーツとして登場する画面にありそうなやつを 3…

スライダーUIを並べて操作してみる UE5版 続き

前回の続き スライダーUIを並べて操作してみる キーリピートの処理が無事動かすことができました。 以前の記事だと、UIパーツとして整えていくところですが、順番を入れ替えてここでブループリントインターフェイスを用意するところから始めていきます。 Blu…

スライダーUIを並べて操作してみる UE5版

時は四年前。 2018年の2月に公開した内容で、間違いに気づかず、問題を避けるかたちで解決したことにしている部分があって、その雪辱戦といいましょうか、修正するにも当時のバージョンはすでになく、空きのないドライブと格闘してスクショ撮るのも大変そう…

そうだ、QUIZゲームを作ろう《おまけ編》たくさんの問題

UE4でクイズゲームを作る記事の続きです クイズゲームなのでここで扱う「問題」はトラブルではありません。なんか、内容に問題ありな題をつけてますが、「問題だらけ」とか「問題がいっぱい」よりはマシかなぁとか考えてみたけど、あまり変わらない気もする。…

そうだ、QUIZゲームを作ろう《おまけ編》クリアへの道 後編

前回タイマーの改造に始まって、ForLoopやらSelectノードやら配列やら説明してたらボリュームがえらいことになったので、2部構成にしました。 クイズゲームとして、制限時間内に規定回数分正解するとゲームクリア。という仕様に決めました。前回の記事でその…

そうだ、UE4でQUIZゲームを作ろう《おまけ編》ボタンのデザインをどうにかする

UE5の早期アクセスが公開されましたね。まだ触れていないので祝祭のツイートを眺めてるとマウスを操作する中指がつりそうです。UIがスッキリしてモダンな雰囲気を醸しているのがなんだかさみしくもあります。 UE4のアイコンはそれなりに丁寧で考え抜かれてる…

そうだ、UE4でQUIZゲームを作ろう《おまけ編》いーなむで切り替えをわかりやすく

いーなむを使って遷移をわかりやすくしよう。します。いや、しませんか?提案させてください。ということで、先日のクイズゲームを作ろうという記事で、WidgetSwitcher を使って複数のWidgetを紙芝居的に入れ替えるというのを作りました。そのとき 0、1、2み…

そうだ、UE4でQUIZゲームを作ろう《組み立て編》

続きの記事になります limesode.hatenablog.com 前回の記事ではクイズゲームに必要な表示を、Widgetブループリントというアセットで用意しました。今回は全部を組み合わせて動くようにします。 目次 その名をQuizGame タイトル画面からの遷移 確認してみる …

そうだ、UE4でQUIZゲームを作ろう《準備編》

UE4で試しに作ってみたらそれっぽいのができたやつ シリーズ第n弾 カウントしていないのでnです。まあいつもの癖です。 とある動画を見ていて、UMGに WidgetSwitcher というのがあって使えそうだなと思ったのと、UMGのチュートリアルの教材にクイズゲーム…

自動回復するゲージ

なんとなく両端から増減するゲージを作ってみたくなって、マテリアルで試してみた。 両サイドから増減するゲージを作っていたら、なんとなくスタミナゲージぽいのができた#UE4 #ue4UMG pic.twitter.com/XiLUNbaNNv— みつまめ杏仁 (@MMAn_nin) 2021年2月1日 …

雑記::20210130

最近Twitterにあげたやつ stepノード触った記念に、ポストプロセスマテリアルでSceneDepthに使ってみた。なんか無理やりだけど。 pic.twitter.com/gyVW6KcMrH— みつまめ杏仁 (@MMAn_nin) 2021年1月25日 動きは上のツイートから確認できます。 UE4がゲーム画…

雑記::20210127

最近Twitterにあげたやつ UE4 Ver4.26 でマテリアルノードに step 追加されたので使ってみた。以前のVerまではValueStep というノードがあって、それで代用していました。 入力ピンの名前が Y と X になったので、仕様が分かりにくくなった気がします。 ↓こ…

ポップするリスト表示を試してみたのでメモ

3人称視点のアクションRPGとかで、フィールドに落ちている何かを拾うと、ログ表示のように画面端に表示されるあれです。 原神をプレイしてて作ってみようと思い立ったUI表示ですが目コピーではないです。 試そうと思ったきっかけは、 VerticalBoxに追加した …

文字がシャッフルしながら出てきてランダムに消えていくやつについてのメモ

さすがに涼しいと言ってられないほどの気温になってきました。ほんの数日でしたが大好きな稲刈り後の田んぼの匂いと金木犀の香りで秋の深まりを実感している今日この頃です。 さてさて ちょっと間があいてしまいましたが、先日Twitteにあげたテキストエフェ…

斜めになったメニューボタンでも~後略 《いろいろ試す編》

当ブログでは、CEDECで取りあげられることのない、ゲームUI開発で明日使えるかもしれない小ネタを主に扱っています。ためになるかもしれないし、ならないかもしれません。 さてさて 最近、斜めになったボタンでもマウスカーソル(ポインタ)を検出できるかと…

斜めになったメニューボタンを並べてみる《テスト編》

前回のつづき 検証もできて満足したので、そのまま選択するとこまで作ってしまおうと勢いづいて作り込んでみました。 あらかたできた時点でTwitterに上げたのですが、このブログで記事にしていく途中で、いろいろ足りてないところを発見。不具合を直したりあ…

UMGでのアニメーション終了検出について

今回の記事はEditorUtilityWidgetを触ってみようとアレコレしているうちに、気が付くとアニメーションの終了検出について調べる流れになったのでそのメモです。 UIはユーザがゲームと対話するために存在しているので、何かとリアクションするのが重要です。…

最近のツイートまとめ

普段ほとんど呟かないのですが、自宅待機中なので、それとなく何か役に立ちそうなネタを、思いついたものから試して呟やいていこう。そうすれば仕事してる感覚を忘れなくていいかもしれない。と思い立って1日1UIネタ投稿を実践してみたものの、早くもネタ…

ゲームパッドとマウスでカーソルを動かす 《後編》

前回の続きです。 早速Widgetを準備していきます。まずは 子Widgetから。 キャンバスに Image を置いて、TextBlockを重ねます。 とりあえず今回は280x280にしました。 今回見た目と機能をシンプルにしたかったのが理由ですが、Buttonコンポーネントでも大丈…

ゲームパッドとマウスでカーソルを動かす 《前編》

ゲームUIに 「カーソル」は当たり前の存在でした。以前は。 最近タッチデバイスで遊ぶゲームが増えたので、ゲームUIの仕事を志望する新人君に「カーソルってなんですか?」って訊かれる日がやってくる日はそう遠くないかもしれません。とはいえ、現状コンソ…

スコア表示のときに

ふと思いついて作ってみたシリーズ。 よくスコアの表示などにゼロ埋めとかゼロパディングとかいう表記法を見かけます。あらかじめ最大桁数を晒すということは、桁が埋まらないうちはプレイヤーの非力さを示し、埋めていたゼロが無くなってくると今度はカンス…

体力ゲージ的なあれこれについていろいろ

アドベントカレンダー9日目の記事になります。 このブログでは普段アンリアルエンジンでのUI制作に関することを書いています。 今回は久しぶりにエンジンは起動しないで、ゲームUIのネタとして、体力ゲージ的なやつを取り上げてみようと思います。 体力ゲー…

キャラ絵のテクスチャを作って表示する《後編》

前回の記事で、RPGバトル画面風のUIを作る想定で、キャラのバストアップをテクスチャにしてUMGに仕込むところまでを書きました。その続きを作っていきます。 材料はあらかた用意できたので、あとは実用に耐えるように関数をいくつか準備します。 まずはゲー…

キャラ絵のテクスチャを作って表示する《前編》

いつのまにか日も短くなって朝夕の冷え込みが堪える季節になってきました。今回はゲームUI制作のネタでもと思いたったので、キャラクターの絵をちょっと特殊な切り方で表示する方法を、架空のゲーム画面を制作する想定で書いていこうと思います。HUDなどのキ…

チャットUIを作る

12 予定通りディレクターへのお披露目の時間になり、それほど広くないスペースに召集された4人が密集する。一気に湿度と気温が上がるような気がする。 あらかじめ動作確認程度にはセッティングを済ませておいた。いつもの軽い挨拶を交わした後ディレクター…

チャットUIを作る

10 翌日は晴れて澄んだ青空が広がっていた。抱えた屈託が全て溶けてクリアになるようなそんな色。こんな青空を見ていると、どこか遠くに行きたくなる病が発症しそうになる。なんとかチャット画面のモックがそれとなく出来上がってきたのを思い出し、続きを作…