みつまめ杏仁

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

Widget

Widgetで回転する数字カウンタを作ってみる 《改》

前回のしくみだと、それぞれの桁が0から目標の数字に向かってUV移動するので、100000 みたいな場合ほとんど動かないことになってしまいます。 もう少しそれっぽく回してみようということで前回の記事で作ったWidgetを改造することにします。 実際のカウンタ…

Widgetで回転する数字カウンタを作ってみる

前の記事でマテリアルを操作してテクスチャのUVを変更する内容を書きましたが、その応用編?です。背景が黒いのでちょっと分りにくいですが、 交通量調査とかで使ってそうなアナログなカウンタを再現してみようかなと。 まずはテクスチャ。64x1024の長方形…

UMGのイメージをマテリアル操作で切り替え

UMGで画像を扱うときに、マテリアルを使うとテクスチャの一部分だけ切り出して使うことができます。さらにテクスチャのUVを移動させることで、アイコンを切り替えたりロール式のカウンタを再現といった使い方なんかができます。 こんなテクスチャを用意して…

マテリアルを使ったゲージ

ゲージは見た目に長さを変えて表現します。 このゲージをマテリアルで増減できるようにしてみます。 マテリアルで表現するのでWidgetでもスプライトでもスタティックメッシュでも、マテリアルがアサインできるものなら何でもOKです。 コンテンツブラウザの何…

Widgetで追跡するカーソル

昔Webページでマウストレイルの仕掛けが流行ったことがありました。 ボタンの見た目を切り替えるのにUMGで作ったアニメーションを使っているので、新しくフローティングカーソル(浮いた状態)を乗せてみます。 前回までの記事『Widgetでタイル型のボタンを…

Widgetでタイル型のボタンをグリッド状に並べる 3

カーソルの移動処理を作ります。 並んでいる状態を眺めているとルールが見えてくる気がする。 上の例だと、上方向には -8、左右はそれぞれ -1と+1、下方向は+8 と、決まったパターンで数値を変化させればよさそうです。 ただ、端まで行ったときにはそ…

Widgetでタイル型のボタンをグリッド状に並べる 2

グリッドに並べる続きです。 2つとも計算でよく使う算術記号です。上のはプログラマ以外で使う機会はまずないと思います。で、これが大変便利なのです。 % は 割った余り を意味していて、例えば 5 % 3 の場合は 2になります。 5 ÷ 3 を普通に計算(小学…

Widgetでタイル型のボタンをグリッド状に並べる

インベントリ画面とかアイテム管理を行う画面では、テキストよりもアイコンで並べた方が、収まりもよく管理しやすいうえにカーソルの移動回数も減るので、グリッドレイアウトが採用されることが多いです。 UMGにはGridPanelという便利そうなものが用意されて…

Widgetでメニューを作ってみる 3

前回で一応完成ということにしようかと思ってましたが、 カーソル(見た目にハイライトされた状態)が移動するようになったら、 次はやっぱり「決定」できないとメニューぽく無いということで、仕上げていきます。 まずは子Widgetの仕込みから。 決定演出を…

Widgetでメニューを作ってみる 2

前回の続き 子Widgetを作る際に、配列に積んでいきます。そうするとインデックス番号で管理できるので、扱いがラクになります。 ForeachLoopが、子Widget作って並べ終えたらCompleteピンに流れます。 そのタイミングで、子Widgetの一つを Getノードを使って…

Widgetでメニューを作ってみる

マウスやタッチみたいに直接ボタンを選択できないゲームパッドは、今ココ(現在地)を表すカーソルが必要になります。 カーソルの場所が選択候補地を示していて「ここ選ぶけどいい?」という状態です。 タッチデバイスが隆盛な昨今、そのうちコントローラ操…

マクロですっきり

Widgetでリストやボタンアイテムを作って、親のWidgetにあるCanvasPanelにAddするのが今自分の中で流行っています。 で、その子Widgetの配置と位置やサイズ、表示優先等の設定が割とごちゃつくので、マクロにするとすっきりしていい感じです。 ざっくりと囲…

どっちの入力でも

基本的にInput Eventでキー入力の受付処理をすることが多いかと思うのですが、Tickとかで常に操作をチェックするような場合に、Was Input Key JustPressed ノードが便利。 ゲームパッドで操作する場合、スティック操作と方向キー両方受け付けた方がユーザー…