みつまめ杏仁

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

ブループリント

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

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

スコア表示のときに

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

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

前回、前々回とキャラ絵をUMGでゲームっぽく作って表示する記事を書きましたが、いいねをたくさんもらえてありがたい限りです。さらにスポットライトに取り上げてもらえて ☺️ pic.twitter.com/aRGrXafszf — アンリアルエンジン (@UnrealEngineJP) 2019年11月…

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

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

チャットUIを作る

11 再生してみると、テキストを何度か入力してうちにズレてくる。手で改行を入れる一つ前の入力タイプでは、自然とこの問題を回避できていたのだ。表示バグというやつだ。 入力方法の違う2タイプを作ったことで、結果的にモックの段階で発見できたのは良か…

チャットUIを作る

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

チャットUIを作る

9 メッセージは立木坂から届いたものだった。一時的にチームから捨てられたという表現をしていたが、まぁアイツのデフォルトの物言いなので無視しつつ、やり取りしていると、どうもスタンプの絵を描く仕事を請けたらしい。プロデューサーの手の速さに若干の…

チャットUIを作る

8 近くに窓が無いので外の様子が分からないが湿度が高い。帰るまでに雨がやんでるといいんだけど。エレベータを待つ間、ホットにしようかアイスにしようかな迷ったけど、それほど喉が渇いているわけではなかった。少し体が冷えた感じがするので軽くストレッ…

チャットUIを作る

7 調べてみたら、テキスト入力を扱った記事が見つかった。思ってたよりむずかしくなさそうだ。よしさっそく参考にしながら作ってみよう。そういえば、入力のスタイルを2種類作ってみる、などと谷山田との会話で豪語していたのを思い出した。仕方がない、ま…

テキスト入力を試してみる

最近帰りが遅くて、駅から家までの経路に田んぼがあるんですが、毎晩カエルの大合唱を聞きながら歩いて帰宅しています。 月の映る水面をチラ見しながら歩きつつ、ダンジョンメーカーに勤しんでる今日この頃です。はい、歩きスマホはダメですよ~。 さてさて…

チャットUIを作る

6 ListViewはまた今度時間作っていじってみようと心に決め、VerticalBoxでスクロールアウトした部分の処理について考えることにする。できれば削除せずににひたすらスクロールさせれることができればいいのだけど。短いとはいえ2分程度の観戦時間でもかなり…

チャットUIを作る

5 外に出たら雨だった。昼休み時間であちこちのオフィスからこぼれ出るように出てきたスーツ姿の人々で、通りは賑やかになる。歩行者用信号待ちでひしめく傘を避けつつ書店へと向かう。ネットで発売日を調べれば無駄足にならないことは分かっているけど、な…

チャットUIを作る

4 ミーティング中に出た話はほとんど頭に入ってこなかった。珍しくいつもより短く20分ほどで解散となったが、早く続きを触ってみたくて落ち着かなかったのだ。何となくイメージはするものの、ブループリントは直接ノードを手で並べながら試行錯誤したい。ど…

チャットUIを作る

3 翌朝出社してメールをチェックすると、最近よく名前を目にするようになったDCCツール関連の案内くらいしか来てなかった。誰かがフロアに入ってくる気配がしたので振り向くと谷山田がこちらに向かってくるところだった。気だるげに挨拶を交わした後、 「昨…

UI ボタンでカメラを切り替える《後編》

前回の続きです。 limesode.hatenablog.com 前編ではカメラを切り替えるUIをWidgetで作って、レベルにオブジェクトと切り替えるためのカメラを設置しました。 後編は実際のカメラ制御の部分を作ります。 Blueprint Interface まず、Widgetからメインカメラ用…

UI ボタンでカメラを切り替える《前編》

突然ですが、ブループリントのタイムラインノードってものすごく便利なのです。 UMGには専用のタイムラインが装備されていますが、UMG以外でUIのインタラクションを表現する際に利用します。 ただトラックに直接的な値のKeyを打ってしまうと、とたんに汎用性…

ゆらゆらするマテリアル

なんとか第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パーツなので、引き続き同じアセットもいじりつつアップデートしていこうと思います。 で、さっそく テクスチャをひとまとめ…