みつまめ杏仁

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

2018-01-01から1年間の記事一覧

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

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

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

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

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

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

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

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

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

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

ストラクチャの書き換えについて

トグルスイッチをいじってて気づいたメモ。 前回の記事でストラクチャの内容を、一部だけ書き換える際に以下のようにしていたんだけど、 部分だけを更新するノードがありました。 下図のこの部分を、 Set Member in xxxx ノードに置き換えます。 ストラクチ…

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

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

ぷちコン応募作品のプロジェクト公開について補足

台風24号がこちらに向かっている中記事を書いていますが、また停電は嫌なので遅筆ながら急いで書きます。 UE4ぷちコン第10回、残念ながら選に漏れてしまいました。サクッと作ってみてそこからネタ拾っていけたら記事にしよう、と考えていたのでそこはまぁま…

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

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

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

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

サウンドの再生管理にもEnumを使ってみた

途中経過はいくらかTwitterで公開していぷちコン作品ですが、今日ようやく応募できました。一段落したのでブログの更新ペースが上がるはず。自信ないけど・・・。 応募の条件としてYoutubeとかニコ動とかに動画をアップするというのがあるので、応募に使った…

[3D]頂点移動でタブウィンドウ的な何かをつくる《拡張版》

今年の4月にメッシュでできたウィンドウ的な何かを頂点変形させる記事を書きました。その内容に関してコメントいただきましたので解決方法を《拡張版》としてを書くことにしました。「まず横幅を広げた後で縦方向に広げたい」という案件です。 limesode.hate…

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

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

オブジェクトをグリッド状に並べる

毎日の暑さ辛いですね。近所で稲の葉先が黄色くなってる畑をいくつか見かけました。この熱エネルギーをやる気に変換するマシンか何かあれば、と思ったけど、やる気に溢れすぎて炎天下に飛び出したり、汗だくで何やら叫びつつ暴れたりする人のイメージが沸い…

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

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

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

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

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

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

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

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

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

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

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

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

UE4のフォントで足りない文字を補充する

文字が足りなくて困ったことはありませんか?私はあります。 アンリアルエンジンではフォントをアセット化して、適時ラスタライズして画面に表示してくれますが、グリフ(字形)がそのフォントに含まれていないと無いとブランク文字が表示されます。 ゲーム…

UMGで ルビを振ってみる

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

[3D]シンプルなリストメニュー作ってみる

前回のタブっぽい何かに、リストメニューっぽい何かを追加してみます。 背景のマテリアルにPARAGONのアセット使わせていただきました。 その前に前回のマテリアルで、大事な設定を見つけました。 UI 表示では フォグの影響を受ける必要はないので、Apply Fog…

[3D]頂点移動でタブウィンドウ的な何かをつくる

先日4/21のアンリアルフェスに参加してきました。あっという間の8時間で、アンリアルエンジンに関わってる人たちのお話をもっともっと聞いていたい、そんなイベントでした。残念ながら懇親会のチケットは速攻でSOLD OUT。横浜のフェスも行きたいけど遠いな~…

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

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

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

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

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

ふと気になって、グレースケールについて調べることにしました。 UI表示のためのテクスチャは、アルファチャンネルを使った半透明で「抜き」を扱うことがほとんどなので、Photoshopで作ることが多いと思います。 で、ちょっと解像度の話 最近のモニタ解像度…

ボスゲージを作ってみる

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

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

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

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

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