みつまめ杏仁

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

UMG

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

さっそく前回作ったやつを改造していこうと思います。 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…

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

前回 キーリピート処理を試すために作ったUIパーツのスライダーを並べてそれっぽく操作できるようにしてみようというのが今回の記事です。 limesode.hatenablog.com まずは スライダーのWIdgetにパーツとアニメーションを追加します。追加するパーツは3つ。…

キーリピート機能をつくってみる

パソコンでキータイプしていると気づくこともあると思いますが、カーソルキーとか同じキーを押しっぱなしにしたときに、1文字目と2文字目の間にちょっとだけ間があります。タン、タタタタタタ・・・・・・ 初めてパソコンを触ったとき、当時子供だった私は…

よいお年を

ついに大晦日ですねぇ。このブログもペースは落ちてますが、なんとかマル2年続けることができました。これも多くの方に読んでいただいているのが、励みになっています。ありがたや、ありがたや。 2年も経つとエンジンのバージョンも随分アップデートされて…

UMGの移動アニメーションを作る場合

UMGで移動アニメーションを作る場合、Position と Translation の2種類があって、表示された見た目には違いがないように感じますが、それぞれ仕様が違うので私は使い分けて使っています。 今回はその使い分けについての私なりの解釈をぐだーと書いてみます…