格ゲーでおなじみのカウントダウンタイマー表示を作っていて、シンプルだけど形になったのでメモ。 カウントダウンなので残り少なくなるとプレイヤーを急かすように主張しないといけません。最初はたっぷりあるので、チラっと確認できればいい程度の目立ち具…

前回パーツを一通り揃えるところまでできました。 limesode.hatenablog.com さっそく表示するところを作っていきます。 まずは、Widgetの編集モードをGraphに切り替えて、EventConstructから。 準備前にパーツが表示されないようVisiblity は Hidden にして…

テキストブロックのサイズを取得する方法がわかったので、 応用編として、テキストブロックのサイズに合わせてフキダシの大きさを調整するしくみを考えてみた。 ↑かの ウォルト・ディズニーの言葉です。 （この微妙な中華系のフォントが気になる・・・） 9 S…

前回、動的にテキストブロックに流し込んだ文字列の長さを取得してポジションを調整してみよう、という内容でしたが、 limesode.hatenablog.com Widgetコンポーネントにして表示すると Force Layout Prepass が効かなくなるということが判明しました。Widget…

Widgetで、あるテキストを表示するとして、さらにローカライズすることが分かっているとき。どのように作りますか？ 翻訳されたテキストを見て、一番長そうなドイツ語やロシア語なんかに合わせて 固定サイズで作ると、ちょっと短い言語の時にカッコ悪いこと…

Widgetブループリントに初めから用意されているイベントは、２つだと思ってたらもう一つあることに気付いたのでメモ。 Event Construct とEvent Tick は編集を開始したら置いてあります。 もう一つWidget専用のイベントがありました。 Event Destruct です。…

UMGでImageパーツを利用する際に、テクスチャではなくマテリアルをセットすることができます。このマテリアルにパラメータを仕込んでおいてアニメーションしようと思ったときどうしますか？ 普通のブループリントだと、タイムラインノードが使えますが、UMG…

Widgetの取り扱いについて気になることがあったので、ちょっと調べてみました。 まず、Widgetを画面に表示するには、いつものコンビネーション。 Create Widget ノードと Add to Viewport ノードです。 大抵のサンプルはこの辺でめでたしめでたしなんですが…

アップデートして、4.11.2になりました。 前回の記事で艦これ改のUI設計について偉そうなことを書いてしまいましたが、思うところあって勉強がてらUE4で試してみることにしました。 さすがに今までの記事みたいに作り方～なんてのはボリューム的に大変そうな…

前回Enumでチェックボックスの内容（テキストラベル）を管理する方法を紹介しました。 limesode.hatenablog.com 今回は操作が完了して閉じる際に、並んだチェックボックスから状態を取り出すところを書いていこうと思います。 まずはWidgetから編集開始。 自…

前回Enumを使った簡単なメモを書きました。 今回はWidgetで応用してみようと思います。 コンソールゲーム想定なので、マウスは非対応です。 UMGのコンポーネントは使いません。Ver 4.11でゲームパッドにも対応したようなことが公表されていた気がしますが、…

久しぶりの更新です。 最近はお絵かきの方に精を出してました。 さてさて、多分もうどこかで既にやられてると思いますが、多重スクロールです。 ４重です。これを１枚のテクスチャで、一つのマテリアルで作ります。 まずはテクスチャから。 Photoshopを使い…

インフルエンザで寝込んでたりしてあまり時間が取れなかったので、久しぶりの更新になってしまいました。正直ネタに困ってたというのもあります。 さてさて 突然ですがハイライト部分がくるくると切り替わるサンプルを作ってみました。 テクスチャを用意しま…

丸い穴が小さくなっていき最後は真っ黒になる、おなじみ？の画面切り替えです。 昔のアニメでよく見かけた気がします。最近のゲームではどうぶつの森で使われてます。 トランジションのアイリスエフェクトとかいうそうですが動画は詳しくないのと編集ツール…

UMGでキラキラ効果を作ってみます。 UMGの動画キャプチャがうまくいかず、静止画しか載せられませんがかなりキラキラします。用途が伝わりにくいかと思い頑張って金塊の絵を描きました。 リワード演出とか、ランクアップ演出とかで使えるのではないかと。 キ…

いかにもデジタルな見た目の数字といえば、７セグです。 Amazonで気になる商品名を見つけたので貼ってみます。 幻の5速！ シフトインジケーター 5速表示 鮮やか 赤の7セグ DIY カスタム 出版社/メーカー: akindou メディア: この商品を含むブログを見る これ…

スコアとかの数字がもったいぶって確定するアレです。 ドラムロールなんかがSEだったりするとドキドキしたりするアレです。 くるくる回ったりしないので、作るのは簡単です。 いままでの作りとそれほど変わらないので、新しいテクニックはほぼ出てこないと思…

交通量調査とかで使ってるカウンタは、ボタンを押すたびに一番右端の桁が回ります。 それが 9まで回って次の 0になると同時に、繰り上がってようやく隣の桁が一つ進みます。この仕組みが不思議で、子供のころよく見入ってました。ラジカセにはテープカウンタ…

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

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

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

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

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

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

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

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

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

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

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

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