読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

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

キャラセレを作ってみる 素材編

UE4のUMGでUIライフを楽しんでおられる紳士淑女の皆様いかがお過ごしでしょうか。 久しぶりにガッツリとUI画面でも作ってみようかな~と、思い立って準備を進めてみたものの結構かかってしまった。ゲームにはつきもの、キャラクターセレクト画面を作ってみよ…

マクロライブラリを作る

久しぶりです、大丈夫まだ生きてます。 UIの画面を作っていると、「あとはカーソルを動かせれば完成なのに・・・」「パッドのトリガーでページ切り替えしたい・・・」「ウィンドウを閉じたり開いたりしたい・・・」「Xボタンを押しながらだとスクロールがで…

テキストブロックのスクロール 続き

前回の続きでスクロールバーを付けてみます。 limesode.hatenablog.com 以外にサクッとできました。まずはUMGのパーツを追加するところから。 スクロールバー全体の大きさを決めるキャンバスパネルを親にして、スクロールバーの下敷きとバー本体を表すImage…

テキストブロックのスクロール

テキストブロックで、長文を表示しようとしたときに、たいていAuto Wrap Text(=自動改行)にすると思います。 文字量が多いとサイズが大きくて表示しきれないので、スクロールさせるのが我々UI業界では当たり前の仕組みです。 UMG パーツ まずはイイ感じの…

UE4でパーセント表記

戦績などのスコアを表示するリザルト画面や、武器やキャラのステータス表示で、「命中率」や「回避率」など「○○率」を表記することがよくあります。 この「○○率」を表示してやんよ~というわけで気軽にやってみたのですが、なかなかうまくいきませんでした。…

5分で作る マテリアルを使わないゲージ

超簡単お手軽ゲージを作ってみます。マテリアルは使いません。 Widgetブループリントを一つ用意します。 キャンバスに配置するパーツは3つ。 ゲージ用のキャンバスとゲージの下敷きは同じ大きさにします。下敷きは暗めの色にしておきます。 ゲージ本体の「I…

スタッフロールをつくる 《完結編》

鶏肉は柔らかいのより噛みごたえのある方が好きです。 で前回の続き。 limesode.hatenablog.com 名前を表示するための器が用意できたところで、次に必要なのは中身です。 スタッフロールには関わった多くの人々の名前が載るので結構な行数になることが多く、…

スタッフロールをつくる 《Widget準備編》

画面の下から出てきて上に消えていくだけの、どシンプルなスタッフロールを作ってみました。 今回用意するアセットは以下の6種類8個。 右のWidgetブループリント3つはほとんど同じ内容。 スタッフロールは、ただ名前が並んでるだけではなく、組織やグループ…

わりと本気のコンボカウンター 《完結編》

いよいよ動作確認です。 前回の記事はこちら わりと本気のコンボカウンター 《準備編》 - みつまめ杏仁 わりと本気のコンボカウンター 《UMG編》 - みつまめ杏仁 わりと本気のコンボカウンター 《Widgetブループリント編》 - みつまめ杏仁 一揃いのアセット…

わりと本気のコンボカウンター 《Widgetブループリント編》

続きです。 前回の記事はこちら。 わりと本気のコンボカウンター 《準備編》 - みつまめ杏仁 わりと本気のコンボカウンター 《UMG編》 - みつまめ杏仁 Widgetブループリント 絵的な素材が用意できたところで、いよいよブループリントに手をつけていきます。 …

わりと本気のコンボカウンター 《UMG編》

わりと本気です。コンボカウンターです。ということで前回の続きで用意したマテリアルをUMGにセットしていきます。 limesode.hatenablog.com レイアウトする Widgetブループリントを作ったらさっそくパーツを配置していきます。 全体の位置調整用にCanvasPan…

わりと本気のコンボカウンター 《準備編》

ちょっとガチなコンボカウンターを作ってみようと思い立って始めてみたら、意外に時間がかかってしまった。まぁほとんど寝落ちが原因だけど・・・ コンボカウンターは格ゲーではお馴染みの表示です。アクションゲームやシューティングゲームでも見かけます。…

UMGでリストボックスを作ってみる 《おまけ》

前回作ったリストボックスにもう少しだけおまけを追加してみようかと。 limesode.hatenablog.com limesode.hatenablog.com リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげ…

UMGでリストボックスを作ってみる 《続き》

前回でリストを表示するとこまでできました。 limesode.hatenablog.com 今回はカーソルの移動と、表示範囲の移動を作っていきます。 カーソルの移動とキー入力 カーソルを動かすためには、「いまここ」というのが分かっていれば 次に移動する場所が計算でき…

UMGでリストボックスを作ってみる

スクロール機能のついたリストボックスを作ろうと思って、ブループリントを触り始めたら思いのほか手間取ってしまいました。当たり前のように使ってるUIのしくみって作ってみないと分らないものですね。ちょっとボリュームがあるので、うまくまとまるか自信…

フキダシを作ってみる

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

テキストブロックのサイズを取得する2

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

UMGのテキストブロックのサイズを動的に取得する方法

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

複数Widgetの操作処理、こんな感じでどうかな?

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

艦これ改のUI設計について

UI UX

最近『艦これ』を遊んでます。実は本家は遊んだことは無いので、始めるにはちょうどいいかと思ってVita版を購入。なので正しくは『艦これ改』です。 発売前からUIデザインについてはいろいろ物議を醸してたので、とてもワクワクしてました。元はブラウザゲー…

Enumを使ったチェックボックスUI 続き

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

Enumを使ったチェックボックスUI

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

UE4のマテリアルファンクションっていいな

マテリアルファンクションが便利なので、よく利用するやつを紹介します。 マテリアルファンクションは、何度も同じパターンのノードをつなぐのが面倒になってきたな~という気持ちになってきたら頃合いです。 ライブラリにできるので、コンテンツフォルダの…

WidgetでPieMenu的なのを作ってみる

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

UMG でトランジションを作ってみる

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

UMGでキラキラ効果

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

UE4で 「7セグ」表現を作ってみる

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

Widgetでじゃらじゃらじゃら~ばん

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

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

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

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 ノードが便利。 ゲームパッドで操作する場合、スティック操作と方向キー両方受け付けた方がユーザー…