みつまめ杏仁

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

UMG

ゆらゆらするマテリアル

なんとか第11回ぷちコンに応募することができました。今回はギリギリまでかかってしまってキツかった。今使ってるPCではパワー不足だということが思い知らされた感があって寂しくはあるけど、あきらめた表現がたくさんあったのもまた事実で、もう買い替えを…

3Dオブジェクトの上にWidgetをマーカーのように表示できたけどどうなってるの?なんか計算がややこしいのだけれど。

という長いタイトルを付けるのが最近のトレンドぢゃ、とじっちゃが言ってたのでさっそく実践してみたけど、なんというか全然キャッチーにならないのはセンスがないから?などと架空の祖父まで召喚してくだらない言い訳をつらつらと書きながら花粉の猛襲に苛…

3Dオブジェクトの上にWidgetをマーカーのように表示する。画面外にいっても大丈夫。操作手順もできるだけ丁寧に書いてみたけどどうかな?

前回の更新からちょっと間が空きましたが、ぷちコン作品を作ってました。 で、先日とあるツイートに目がとまったのです。 Howdy, gamedevs! Ever wondered, how to prevent widgets in #UE4 from going off screen like this? I think this is a common issu…

UMGパーティクル(なんちゃって)

Widgetでパーティクルっぽいやつを作ったのでTwitterに動画をあげたら、いいねしてもらえたので記事にしてみます。さくっとParticleをWidgetに乗せる方法が見つけられなかったのでUMGで作ってみた次第です。 変数の型に Box2Dというのがありまして、 これを…

クリックするだけの簡単なゲーム 《改造編》

さっそく前回作ったやつを改造していこうと思います。 limesode.hatenablog.com 改造ポイントは4つ。 繰り返し遊べるようにする タイマーのガクガク震えるのをなんとかする ちょっと難易度を上げてみる おまけ まずは、クリアしたあとにボタンを表示したい…

クリックするだけの簡単なゲーム

前回の記事で、パラパラとパネルを出現させるやつで遊んでたら、ビンゴカードになってみたりしたので、さらに調子に乗ってミニゲームにしてみた。もう10年以上前?かな、一度流行ったことがあって、それの再現です。 ルールは、1~25までの数字が書かれたパ…

パラパラとアイテムが表示されるやつ

節分も過ぎて少しづつ暖かくなっていくのは嬉しい。今までこんな風に感じたことなかったのは、寒さに弱くなったせいかもしれない。 さてさて今回は、登場時に動きのあるUIを考えてみました。 グリッド状に並んだパネルが順にめくられていくやつ。 作りは結構…

ついでに丸い形のミニマップ表示を作ってみる

前回作ったミニマップ表示は Widgetの Pivot を使ったので、 今回マテリアルを使って試してみました。マテリアルだとマスクが使いやすいのでカタチを丸くしたりできます。でもマスクできるのはマテリアル内のテクスチャなので、マーカー等の目印やアイコンを…

マウスで操作できるミニマップ表示

2019年が明けました。公私共にいろいろ節目的な年になりそうですが、アンリアルエンジンを使ったUIの研究だけは続けていこうと思うので、今年も引き続きよろしくお願いいたします。 今回マウスで操作するミニマップを考えてみました。ふと、Pivotをちゃんと…

クリックした場所にメニューを 3

リングメニューの表示がそれなりにカタチになったと思うけど、もう少しだけ作り込んでみます。リングメニューの呼び出し時にメニュー項目を任意のセットにできるようにして、閉じた後の通知部分を作ってなかったので追加します。あと選択中の見た目を強調す…

クリックした場所にメニューを 2

前回の続きです。 マウス座標を取得して、そこにWidgetを表示することができました。次はアイコンを並べていきます。 アイコンのテクスチャとマテリアル ↓このようなアイコンのテクスチャを用意。サイズは256x256で、1つが 64x64なので16個分持つことがで…

クリックした場所にメニューを

ゲームパッド操作のUIは今までたくさん作ってきた。最初からマウス操作で設計することはなく、まずゲームパッド用のUIで問題なく遊べるとこまで作りきる。そして後から少ない工数と期間で必要最小限の箇所にマウスのアタリを追加する。 そんな申し訳程度の対…

スライダーを作る《本編》

続きです。 トグルスイッチのUIパーツを作り始めて、今はスライダーを作っています。デザイナとプログラマが作業するアセットで被らないようにできればいいなと思って模索していましたが、さっそく諦めました。てへぺろ。 コンパクトにしたいというデザイン…

次はスライダーを作る《準備》

以前にもスライダーを作って記事にしましたが、今回はマウス操作専用です。 前回のトグルスイッチと同じところに並べて使う想定のUIパーツなので、引き続き同じアセットもいじりつつアップデートしていこうと思います。 で、さっそく テクスチャをひとまとめ…

スライドするトグルスイッチを作る

久しぶりの更新です。まだそんなに秋を堪能してないのに年賀状が売られていたり、おせちの予約受付とか始まってて、年末感が漂ってくるのが切ない・・・梨食べたくなってきた。 さてさて、ネタを探す旅に出てました~てへぺろ、とか言えたらまだ良かったんだ…

HorizontalBoxの中の表示間隔を調整する

今回応募したぷちコン作品では、プレイヤーを操作して、浮いているタイルを踏んだ数をカウントしてスコアに加算しています。リザルト画面で表示する際に、ただ数字を書くだけだと面白くないし、「いっぱい踏んだなぁ」「あまり踏めてないなぁ」という実感を…

追加するとスクロールするやつ

今回のぷちコンで作ったUIの中から、スクロールするリストについて書こうと思います。 ゲーム内でグレイマンがタイルを踏むたびに、画面下部のリストに文字が追加されていきます。画面いっぱいになると、文字が追加されるたびに、一文字ぶん左にスクロールア…

「ぷち」っとタイマーを作る

UMGでタイマー表示をつくってみたので、「ぷち」っとご紹介。ぶっちゃけ「ぷちコン」用の制作メモみたいなものです。過去にテクスチャを使ったやつを記事にしているんだけど、今回はNo Texture です。UMGです。 タイマー表示にもいろいろあるのですが、今回…

テキストのフェード演出を作ってみる

OCTOPATH TRAVELER遊んでます。面白いですよ。「オクトパス」とカタカナで書くと「octopus」だと間違われるかもしれないので、あえてアルファベットで書きます。ということを語りたくなるくらいオススメしたくなるRPGです。 ゲーム中に挿入されるイントロ表…

UMGでコンパス表示を作ってみる

ふと気がつくと最後の更新から1ケ月が過ぎようとしててびっくりです。近所ではセミが鳴き始めました。ノートPCのファンに問題があるようでUE4を起動すると3秒と触れないくらい熱くなるため、ミニUSBファン(コンセント接続)と扇風機で冷やすのですが、マウ…

UMGで ルビを振ってみる

UMGでルビを振ってみようと思って試してみました。 途中諦めようかと思ったけど、なんとか形にすることができたので、メモっておきます。 今回日本語フォントとして、たぬき油性マジックという書体を使ってます。 仕組みとしては、まずルビ付きの文字をまず…

UMGのテキストブロックで遊ぶ

とあるRPGの曲を作業用に聞きながらYoutubeの動画をチラ見してたら、テキストの表現方法がたくさんあったことに感動したのを思い出しました。で、ふと試してみようと思たったのが今回のネタです。過去記事で似たようなことをやってるのでその応用ってことに…

グレースケールテクスチャ 続き

Photoshopでいい感じのグレースケールテクスチャが作れたので、さっそくエンジンで検証します。もちろんUE4です。テクスチャだけの話だったらUnityでも使える内容ですが、ここからはアンリアルエンジンです。 テクスチャは2種類用意しました。 RGB24bpp の…

ボスゲージを作ってみる

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

横方向のアイテム選択UI 《おまけのオマケ》

4.19がリリースされましたね。楽しみですがまだ落としてないので、引き続き 4.18.3で書いてます。前回のおまけに続いてさらにオマケを作ってみました。今回は ロックとアンロックの状態切り替えを組み込んでます。 ロック状態であることを分かりやすくするこ…

横方向のアイテム選択UI 《おまけ》

昨日家に帰ってから寝落ちしつつ作ったので、なんか文体がおかしい気もしますが無事 喜んでいただけて良かったです。モノ自体はだいたい1時間ほどでできました。アイコンの素材探しと、記事を書くのに時間がかかりましたが、UE4でのUMGユーザーが増えること…

横方向のアイテム選択UI

今回はコメントを頂いたのでその返答として書きます。コメントいただけると嬉しいですね。続けてきた甲斐があるってものです。 で、作ってみたのはこれ。 いくつかのアイテムを左右にスクロールさせて選択するメニューUIです。 今回アイテムの絵素材として F…

スピンボックスも作ってみた

前の記事でインターフェイスを作りましたが、せっかくなのでスピンボックスも作ってみることにしました。 スライダー同様、ゲームの設定画面とかでよく見かけます。スピンボックスはGUIの1スタイルでMicrosoft Developer Networkのドキュメントに簡単な説明…

スライダーUIを並べて操作してみる 《おまけ》

キーリピート処理の説明用にスライダーUIを作ってみたら、なんとなくいい感じになってきたので調子に乗って”初期設定に戻す”機能を追加してブループリント インターフェイスまで扱うとこまできたのですが、もうひとつ「ミュート」の切り替えができるようにし…

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

前回それなりにサウンド設定ができそうな雰囲気を醸し出すことができました。 そこにリセット用の項目を追加してみます。 右端にもオマケでアイコンを追加しています。 前回の記事はこちら。limesode.hatenablog.com ↑これをベースにいじっていきます。 Blue…