キャラセレを作ってみる サムネイル編2

前回のつづき

Widgetブループリント

サムネイルの絵とアニメーションが用意できたのでいよいよブループリントを触っていきます。編集モードをDesigner から Graph に切り替えます。

まずは必要そうな変数を２つ用意します。

ひとつは自分自身の番号を保持しておくという役割。セレクトするキャラ８体。0～７のボタンの番号なので Integer型（整数型）です。

もう一つは演出用で、アニメーションの再生開始を遅らせるための時間を受け取る役割です。時間は小数点で扱うので、Float型（浮動小数型）にします。

変数は、エディタウィンドウ左の +Variable ボタンをクリックしていくつでも増やせます。作ったら名前（VariableName）をつけて型（VariableType）を変更します。

次に関数を用意します。

関数も変数のようにエディタウィンドウ左の +Function ボタンで増やせます。

クリックするとグラフが関数を編集する状態に切り替わります。

関数は作ったらまず名前を決めましょう。名前が役割を表します。今回作るこの関数はサムネイルとしてID番号と演出時間を受け取ってサムネイルの絵を切り替えるという仕事をします。なので、setupButton と名付けることにします。

名前は、リストに新しく増えた New Function 0 のところでファンクションキーの F2 を押すか、ダブルクリックするか、右クリックするかで変更できます。

変更したら次に引数（パラメータ）を受け取る準備をします。関数は必要な情報をもらって仕事をすることが多いです。グラフの真ん中に鎮座する紫にノードをフォーカスした状態で、Detailsタブにある、Inputsという項目の右端にある ＋ ボタンを３回クリックします。

変数を作ったときのように名前と型をセットします。

この名前はピンの名前になります。

引数のピンから値が渡されてくる想定なので、先に用意した変数にとっとと入れる想定にしてやります。Variablesのリストからグラフにドラッグ＆ドロップします。Get か Set か訊かれるので、ここは Set を選びます。（Altキーを押しながらドロップするとラクちん）

これをつなぐとこうなります。白いラインが処理の順番でそれ以外がデータ（値とか）の移動を表しています。

つぎに、残された引数のピン CharaIDをつなぐ先を召喚します。キャンバスに置いたImageパーツが、Variablesリストにいるはずなので、これをドロップします。今度は Get を選択しますす。（Ctrlキーを押しながらドロップするとラクちん）

置いてらノードの右についているピンからドラッグして、ｄｙｎａ と検索します。

Get Dynamic Material ノードを取り出したら、さらのその右にあるピンReturnValueから ドラッグして、ｓｃａ と検索します。

SetScalarParameterValueノードを取り出したら、さきほど設定した引数の CharIDと結んでやります。

SetScalarParameterValueノードで忘れてはいけない設定があります。ParameterNameです。これはマテリアルを作ったときに決めた名前になります。

ここを間違うとうまく働いてくれません。

これで、サムネイルの絵をセットアップする関数は完成です。

 この関数は親にあたるWidgetブループリントから呼び出されます。呼び出される際に引数に値が渡されてきます。

次に作ったアニメーションを再生するイベントを用意します。

編集ウィンドウのタブを、関数から EventGraph に戻します。

グラフの何もないところで右クリックして、AddCustomEventノードを取り出します。

適当なに名前を付けますが、このイベントが呼ばれると表示を開始するので、Ready と名付けます。この白いピンからドラッグして Set Timer by Event ノードを取り出します。

このノードの Timer ピンに、最初に作った変数 DelaySpawnTimeをGetでつなぎます。

Set Timer by Eventノードは、指定した時間が経ったら、イベントを実行するというタイマーの役割をします。なので、新しくカスタムイベントを追加してつなぎます。

 Add Custom Eventノードを取り出して、Go という名前にしました。ここでアニメーションを再生させます。Variables の中に Animationsという項目があるのでここから作っておいた登場アニメーションをグラフにドロップします。

Getでドロップしたら、PlayAnimation ノードを取り出してつなげば、このイベントは完成です。

 これで登場演出のイベントが用意できました。

次にサムネイルを選択肢のボタンとして機能させるためのイベントを用意します。また、カスタムイベントを新しくグラフに追加します。これはカーソルが乗ったときのフォーカスイベントになります。

上の Image_Focus というのは、フォーカスアニメーションを付けたImageパーツです。そのパーツに対して Visible（＝ 表示する）という指示をして、フォーカスのアニメーションを再生しています。

ここで表示しているということは、普段は表示されていないということにしたいので、Designer に戻って設定を非表示にしておく必要があります。フォーカス用のパーツを選択した状態で、Behavior > Visibility を探して、 Collapsed にします。

 再び編集モードを Graph に戻します。

最後にカーソルがいなくなってフォーカスが外れたアンフォーカスイベントを用意します。

 フォーカス用のImageパーツを非表示にして、ループアニメーションを止めます。

これで、最低限の機能を持ったサムネイルが完成しました。

作った機能をまとめると４つ。

1. キャラのID番号をもらって絵を切り替える（関数）
2. サムネイルが画面に登場するイベント
3. カーソルが乗ったときのフォーカスイベント
4. カーソルが離れたときのアンフォーカスイベント

実行されるとまず１が呼ばれ、続いて２が呼ばれます。あとは、３か４が適宜呼ばれます。ここでいう「呼ばれる」というのは、「働け」と指示されることでそのタイミングで処理が流れることになります。

こんな感じでUIの部品を作っていきます。

UMGでUIを作る場合、Designer で見た目のグラフィックを仕込んでおいて、Graph でイベント関連の処理を用意しておきます。これをなるべくシンプルな機能のみの部品（＝アセット）として作っておくことで、画面作りと調整の効率が向上します。

サムネイルが完成したので

次回は画面にサムネイルを並べていきます。

ではでは ステキなカスタムイベントライフを！

キャラセレを作ってみる サムネイル編

前回の続き

ちなみにサムネイルのスペルは thumbnail ですよ皆さん。

選択用サムネイルを作る

まずはサムネイルの準備をします。テクスチャにはキャラクターの顔が複数並べてあるので、このままでは使えません。そこで部分的に切り出すためのマテリアルを用意します。

まずはマテリアルを作る

コンテンツブラウザにあるテクスチャアセット（赤い下線）のアイコンの上で右クリックすると、

コンテキストメニューが現れて、中に Create Material という項目があるので選択します。

できたマテリアルアセットのアイコンに適当な名前をつけて編集開始です。

すると最初からテクスチャノードがつながった状態になっています。

この仕様が地味に便利だったりします。

後からテクスチャアセットをドロップしても構いません。

さっそくUMGで使うための変更をします。

右端の大きな茶色のノードをフォーカスした状態で、ウィンドウ左のDetailsタブから設定をUMG専用に変更します。

UMGでマテリアルを扱う場合は必ず User Interface に切り替える必要があります。

Blendモードは、アルファチャンネル（透過）を使う場合は Tanslucent を選びます。アルファチャンネルが要らない場合は、Opaque（オペイク、不透明）を選びます。

設定するとグラフが変化します。つながっていた線が切れているのでつなぎ直します。

つぎに、テクスチャを部分的に取り出すための TextureCoordinateノード を取り出します。グラフの何もないところで右クリックして 下図のように検索するか、

キーボードの ［U］ キーを押しながら左クリックでも取り出せます。

取り出せたら下図のようにつなぎます。

赤いTextureCoordnateノードをフォーカスした状態で、左のDetailsタブから値を入力します。

UTiling と VTiling の値をそれぞれ 0.25、0.5 と入力して書き換えます。

する下図のようにTextureSampleノードのサムネイルが変化します。

どうなっているかというと、TextureCoordinateノードはテクスチャのタイリングを制御するノードです。このノードが最初に持っている値は 1.0 。これはテクスチャをすべてそのまま使うという意味です。それをより小さい値にしたことで結果的に一部だけを切り出すカタチになりました。テクスチャというのはUとVという座標系で管理されています。図で見てみると以下のようになります。

というわけで

TextureCoordinateノードは、テクスチャの一部分をトリミングするのに使います。

（設定する値が ”Tiling”なので、タイリングするときにも使えます。）

さてさて、 左上のUVを切り出せたら、つぎにUVを移動できるようにします。

TextureCoordinateノードから出てきた値に足し算をしたいので、Addノードを間に入れます。（キーボードの Aキーを押しながらクリック）

空いている B の入力ピンにつなぐのは UとVの２つの値なのでAppendVectorノードをつなぎます。

エラーがでますがほっておいて、ScalarParmeterValueノードを２つ取り出してつなぎます。（キーボードの Sキーを押しながらクリック）

このスカラーパラメータバリューというノードに、0.25とか、0.5とかの値を入れるとUVが移動しているのが確認できます。

これで進めてもいいのですが、せっかくなんで楽をしたいと思います。

参考までに以前書いた記事を貼っておきます。

limesode.hatenablog.com

 できたのがコレ。

小数点の数値だけが書かれたノードは、Constant（定数）ノードです。キーボードの１を押しながらクリックすると取り出せます。固定の値を扱うときに利用します。

左端の Index と書かれたノードが、後から値を渡すための ScalarParameterValueノードです。これに値（0～7の整数）を入れてみてキャラがいい感じに切り替わったらマテリアルは完成です。左上の Applyボタン → Saveボタンと押して閉じます。

新しくWidgetブループリントを作る

 サムネイル用に新しくWidgetブループリントを作ります。作り方は背景と同じです。

キャンバスに置くImageパーツは サムネイルのサイズ 256ｘ256にします。

このImageパーツにさっき作ったマテリアルをセットします。

背景のテクスチャと同じ要領で、コンテンツブラウザで先にマテリアルを選んでおくと、矢印ボタンでクリックするだけでセットできてラクチンです。

アニメーションをつくる

サムネイルが登場と退場するとき、あとはフォーカスされている状態の３つのアニメーションを用意します。

UMGのエディタウィンドウ右下に、緑色の +Animation ボタンがあるのでクリックします。

クリックすると、すぐ下に New Aimation というのが現れるので、わかりやすい名前に変更します。この名前をフォーカスすると右側にタイムラインがアクティブになります。その状態でキャンバスに置いたImageパーツに動きを付けていきます。

今回は0.2秒で、回転しながら拡大するようにしてみました。

同じ要領で退場のアニメーションも作っておきます。

登場と退場ができたら、最後にフォーカスアニメーションです。登場と退場は無くても困らないですが、フォーカスしているかいないかは、UIにとってはとても重要な表現になります。マウスやタッチするタイプのUIではホバーアニメーションに相当します。

フォーカスのアニメーションは、サムネイルと同じ形で動かしたいので、サムネイルを切り出すために作ったマテリアルをDuplicate（複製）します。

マテリアルの複製を作ったらさっそく編集します。ほとんどいらないのでバッサリとノードを削除します。できたのがコレ。

TextureCoordinateの値はそのままです。上にあるのは Vector３ ノードです。

RGBのカラーを扱うときに便利なノードです。キーボードの ３を押しながらクリックすると取り出せます。これをUMGに戻ってセットします。

再びキャンバスに、Imageパーツを配置します。ZOrderの値はサムネイルよりも大きい数値にします。

ここに作ったフォーカス用のマテリアルをセットします。

この白い●をアニメーションさせます。カーソルが乗っている間ずっと点滅するので、アニメーションはループするように作ります。

アニメーションが３つできたらいよいよブループリントの編集です。

随分長くなったので、いったんここまでにします。

次回サムネイル編２でお会いしましょう！

ではでは

ステキなサムネイルライフを！

キャラセレを作ってみる 背景編

前回の続き

テクスチャのアセット化

テクスチャ素材の準備ができたところでUE4のアセットに変換します。方法は２つあって、作ったテクスチャを、コンテンツブラウザから右クリックしてインポートするか、フォルダからドラッグ＆ドロップすることでアンリアルのアセットに生まれ変わります。アセットになったらまず設定を変更します。できたアイコンをダブルクリックするとエディタが開きます。

テクスチャの設定で注目するのは下図の①～⑤。（UE4 Ver 4.15.2）

①・・・テクスチャの品質

今回UMGで作るので、ノイズやピクセルの劣化は見た目に悲しいことになります。ピクセルパーフェクトな見た目を目指すなら迷わず UserInterface2D を選択します。このフォーマットは非圧縮で色の再現度もバッチリ、テクスチャメモリを結構消費しますが必要経費ということで。容量を節約するなら Grayscale テクスチャもオススメです。

②・・・ミップマップの設定

２DでのUI表示は、カメラからの距離が固定なので、ミップマップは不要です。このチェックをオンにすると、ミップマップが自動で作成されてテクスチャ容量が増えるので、これも迷わず確実に絶対 NoMipmaps を選択します。ミップマップが必要なのは主に背景オブジェクトです。

③・・・一括変換のために

ここは特に重要ではないですが、テクスチャをグルーピングしておくことで、まとめてフォーマット変換や調整を掛けることが出来るようになります。まぁリストに UI というのがあるので UI テクスチャだよ。という自己主張に使う程度で問題ないかと。主にプログラマが利用すると思います。

④・・・sRGB か リニアか

Photoshopはデフォルトの設定ではsRGB表示になっているはずです。なので、Photoshopで調整したままの色味でUE4のテクスチャにしたければ、このチェックをONにしておきます。

sRGBはTVモニタと人間の目の特性に向けて最適化された色空間なので、リニアなグラデーション表現は考慮されていません。0～255までの階調を等間隔で扱うにはこのチェックをOFFにします。

⑤・・・タイリングするかしないか

Wrap（ラップ）は画像がタイリングされていて UV の範囲が 0～1 を越えても同じ絵が繰り返し現れます。

Clamp（クランプ）は、UVの範囲 0～1 の外には何も絵がない状態になります。

イメージしにくい場合は、Photoshopのフィルタに「スクロール」というのがあるので、触ってみると分りやすいと思います。

絵の用途に合わせて設定します。

UIで扱うテクスチャで重要な設定項目はこのくらいです。

UMGでテクスチャを配置

テクスチャのアセット化が終われば、まずはメインとなるWidgetブループリントを用意します。コンテンツブラウザで 右クリック > User Interface > Widget Blueprint

適当な名前を付けたらダブルクリックしてエディタを開きます。

編集モードを Designer に変えて、

左端のリストから Image を探してキャンバスにドロップします。

これが背景の素になります。以下設定。

まず適当に名前を付けてアンカーを選択。

アンカーは配置する際の基準となる場所の設定とサイズをどこかにフィットさせるかどうかの２種類の設定があります。背景は画面全部でスキマがいらないので、右下のアイコンを選びます。

で次の設定。

Offsetはすべて 0.0 にします。これで見た目に全画面に拡がります。

このOffsetは画面の端からどれだけスキマを空けるかという値になります。

背景は画面の一番奥に表示するので ZOrder は 0 にします。

数値が大きいほど手前になります。

設定項目 Appearance > Brush の Image のところに、テクスチャかマテリアルをセットできるので背景のテクスチャをセットすれば背景は完了です。

コンテンツブラウザで、セットしたいアセットをクリックしておいてから、虫眼鏡アイコンの左にある矢印アイコンをクリックするのがオススメです。プルダウンからアセット名を検索してもOKですが、アセットが増えてきたり、同じ名前のアセットが別の場所にいたりするので、ちょっぴり面倒な気がしています。

同じ要領で、画面見出し（画面タイトル）を配置します。

見出しは全画面ではないので、アンカーはデフォルトのままでもOK。

ZOrder は背景より大きい値にしないと手前に表示されないので、 1 をセット。

テクスチャのサイズが画面より少し大きい（2048ｘ256）ので、バウンディングボックスがはみ出ていますがここは気にしない。（昔からのクセで２のべき乗サイズで作ってしまうクセが抜けない・・・）

今回はこの辺までにします。画像を置くだけなら結構カンタンです。

次回は 選択用のキャラクターサムネイル を作っていきます。

ブループリントも触っていきますよ～。

ではではステキなUMGライフを！

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

UE4のUMGでUIライフを楽しんでおられる紳士淑女の皆様いかがお過ごしでしょうか。

久しぶりにガッツリとUI画面でも作ってみようかな~と、思い立って準備を進めてみたものの結構かかってしまった。ゲームにはつきもの、キャラクターセレクト画面を作ってみようと思います。

 で、なんとなくレイアウトしてみたのがコレ↓

自分のヘタなイラストを用意して並べると公開するまで何光年かかるかわからないので、いらすとや さんの素材使わせてもらいました。怒られたらゴメンナサイします。

動きはカーソルを動かすたびに画面左の大きいキャラ絵が、フォーカスしているキャラ絵に入れ替わります。同時に能力を比較するグラフを更新します。

今回は素材編ということで、素材を用意するとこまでを説明します。

少しづつ機能を追加しながら説明をしてゆこうと思うので続きが気になる方は、

ぜひ いいね ボタンをクリックしてください。（冗談です）

素材を準備

キャラセレは登場するキャラクターが多いほど準備が大変ですが、

まずは画面を構成するために用意する素材は以下の７種類。

1. 背景
2. 見出し（画面タイトル）
3. 選択用のキャラクターサムネイル
4. カーソル
5. フォーカスしている状態の大きいキャラクターイラスト
6. キャラクターの名前
7. キャラ性能グラフ（おまけ）

まずは絵素材を用意するところから始めます。

１． 背景

サイズは今回 1920ｘ1080 のフルHDで用意しました。

動きはなくてシンプルな１枚絵です。

２． 見出し（画面タイトル）

透過の状態で、テクスチャ化します。

透過（透明度情報）をアルファチャンネルとして扱えるフォーマットならOK。

Photoshop形式もOKですが、個人的にレイヤーを統合していないPhotoshopのラスタライズ画像は信用していないので、PNGとかTGA(Targa）をオススメします。アルファチャンネルを透過として扱わない場合があることを考えると、やっぱり汎用性が高くて可逆圧縮なTGAが最適かなと思う今日この頃です。

３．選択用のキャラクターサムネイル

キャラクターの部分をトリミングしてサムネイルにします。

キャラクター１体が  256ｘ256 です。

 

でアルファチャンネルを下図のようにしました。

レイヤー上でくり抜いてしまうと、後から調整が面倒になるのでこのような構成にしています。レイヤーマスクを使うのもありです。これができるからPhotoshopが手放せないんですよね。

アルファチャンネルの白い部分が、見た目のカタチになります。

４．カーソル

サムネイルの形に合わせてデザインします。

これも重ねて使うので透明部分があります。

５．フォーカスしている状態の大きいキャラクターイラスト

なるべく大きい絵でキャラクターを魅力的にみせたいものです。

これも透過で作成します。表示した際に少し浮き出た感じにしたいので、レイヤー効果の「ドロップシャドウ」を使っています。

この見た目でアルファチャンネルを作るときアナタならどうしますか？

スタイルをラスタライズすればドロップシャドウの分のピクセルが選択範囲として取れますが、アンドゥ―で戻すか、レイヤーを複製してからじゃないと元の状態を維持できないので面倒です。実はPhotoshopには隠しショートカットキーがいくつかあります。

そのなかでも便利なのが Ctrl + Alt + Shift を押しながら E キーです。

状態によっては新規レイヤーが必要ない場合もありますが、ここでショートカットキーの出番です。すると、表示されている状態を結合した状態で新規レイヤーにラスタライズしてくれます。

どれだけレイヤーが重なっていようが、レイヤー効果がかかっていようが、問答無用に表示状態が１枚のレイヤーにまとまるので、アルファチャンネルを抽出するのがものすごくラクちんになります。あとは、レイヤーのサムネイルを　Ctrl キーを押しながらクリックするだけで選択範囲が取れるので、そのままアルファチャンネルを作成できます。アルファチャンネルが取れて用が済んだらこのレイヤーは削除するのをお忘れなく。

アルファチャンネルが作れたら、背景を表示してテクスチャとして書き出します。

エルフアーチャーかわいいなあ。

６．キャラクターの名前

キャラクターの名前は別のテクスチャにまとめます。これは演出の都合もありますが、デザインの調整がラクなのと、あとから名前が変わったりするからです。最近は手軽にワールドワイド向けのゲームが販売できる時代なので、ローカライズの手間を考えると別にしておくと差し替えが簡単です。

これも透過で、作り方はキャラ絵と同じです。

７のキャラ性能グラフはちょっと特殊なので後日説明記事とともに載せます。

素材は以上です。

次回はWidgetを作成していきます。

では今回はここまで。

マクロライブラリを作る

久しぶりです、大丈夫まだ生きてます。

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

UIはユーザーが操作するからUIであるということで、キー操作を受け付ける動作が必須です。そのあたりの処理は、ブループリントマクロライブラリを作ることで面倒なキー入力周りの処理が一気にラクになります。プロジェクトに一つ置いておけば、どのブループリントからでも簡単に利用できます。

同じようなキー入力処理をやるためのしくみを、ちょうど一年前に書いていました。

limesode.hatenablog.com

この時は親クラスを先に作って、そこから子クラスを作る流れでした。

それなりに手数が必要になります。

今回はクラスとか気にせず気軽にキー入力周りを扱うためのマクロを作ります。

これは使いたいときにどのブループリントでも呼び出して使うことができます。

作ってみる

まずコンテンツブラウザで右クリックして、

Blueprints ＞ Blueprint Macro Library を選択します。

 ダイアログが出てくるので、

Object をフォーカスしてからOKボタンを押します。

 アイコンが出てきたら名前を付けてやります。この名前はただのアセット名なので後でなんのために作ったかわかるようになっていればなんでもOK。マクロライブラリ自体がいろんなブループリントから参照されるので、UI_Common とかでいいかなと思います。

名前を付けたらアイコンをダブルクリックして編集開始です。

 エディタが開くと下のような形になっているので、まずは右上のフォームからマクロの名前を入力します。

この名前がノードとして扱われることになります。右上の + ボタンでいくつでもマクロを追加できます。

今回、UI_InputCheckSimple という名前で進めます。

引数（パラメータ）をセット

レベルブループリント以外でInputノードが使えないので、キー入力を受け取るためには、Was Input Key Just Pressed ノードを使います。

これは get Player Controller ノードから値をもらわないと働いてくれないので、まずは Player Controller型 のマクロの引数（Inputパラメータ）を追加します。

 最後じゃなくてもいいので、名前は必ず変更するようにします。

どんどんつなぐ

 そこからドラッグして Was Input Key Just Pressed ノードを取り出します。

このノードのKeyの横にあるプルダウンから押したかどうかを検出する対象を選びます。で、ブール値（true か false）の出てくる赤いピンがあるので、そこからブランチノードをつなぎます。（ブランチノードはキーボードの［ B ］を押しながらクリックすると取り出すのがラクチンです）

実行ピンがまだつながっていないので、ブランチノードからドラッグして、Inputsノードの上でドロップします。ドロップ場所に気をつけて、いい感じにドロップするとうまくつながります。

後からのものは下に足されていくので、順番が気になる場合は変更します。Inputsノードを選択している状態で、Detailsタブの中にある項目から変更できます。

これを１セットとして、

ブランチノードの false から次の Was Input Key Just Pressed ノードへ、数珠繋ぎになるようにつないでいきます。

 一通りつないだら、true のピンを Outputsノードにつないでいきます。

さっきやったドラッグ＆ドロップが便利です。

なるべくわかりやすいピン名にしておきます。

でき上がりです。

上・下・左・右・決定 を検出できるようになります。

これをコンパイルしてエラーが無ければ保存して閉じます。

使い方

使いたいブループリントの Tick ノードにつないで使います。

同じプロジェクト内であればどこでも呼び出すことができます。

↓サンプル

マクロを作成する際にインスタンスカラーというのが設定できます。キー入力イベント関連なのでノードに赤色を付けてみました。

次回以降

このマクロを使って、キャラセレ画面を作ってみる記事を書こうと思います。

ではでは～

UE4のテキスト効果

相変わらず記事を書く時間が取れないまま４月ですよ。ニューカマー達が押し寄せてきてます。すぐそこに！

というわけで、ぷちネタを思いついたので、書いておきます。

もう誰かがやってそうですが・・・・

なんとUE４の最新バージョンで

Widgetのテキストブロックに、ソフトなドロップシャドウが！ さらにグロー処理も！

・・・

実はこれ、エイプリルフール向けのネタとして準備していたものです。

種明かしをすると、Ver 4.15から実装された、Background Blur パネル を使用しています。

シャドウとグロー用のテキストブロックを置きます。

そこに Background Blurパネルを重ねます。

仕上げにテキストブロックを重ねて完成です。

大したネタではないですね。すみません。

この方法はあくまでも背景がシンプルな単色だからできる方法です。

テクスチャで表現する方法だと、テキストの変更に合わせるのは大変です。

使いどころは限られますが、うまく使える場面はきっとあると思います。

今回は短いですがそろそろ寝ます。

ではでは

ステキなWidgetライフを！

はみ出た文字のサイズを調整

本記事は2017/3/21にアップした内容に、2018/8/6に加筆修正した内容になります。

久しぶりの更新。なかなか記事を書く時間がないので困ったものです。

NintendoSwitchにもUE4が対応するということで、どんなゲームUIが出てくるか楽しみです。

さてさて以前テキストに合わせてフキダシの大きさを変えるのを書きましたが、今回は逆に決められたサイズを越えたら無理やり収めるというのを書いてみようかと。

UMGのテキストブロックには、Size to Content という設定があって、これを有効にすると中身に合わせてサイズが可変するというしくみが用意されています。

まずはSize To Content にチェックを付けたテキストブロックを３つ並べてみます。

簡単かつ確実に中央揃えにするために、アンカーは、３つともCenter Top。

さらにAlignment の値も３つとも X を 0.5 にします。

あと、Position X も 0.0 にすると、特に計算しなくても中央揃えになってくれます。

まとめると、横方向に中央揃えにする場合、以下の３か所をセットすればOK。

この組み合わせで、確実に中央揃えにできます。

親のキャンバスパネルのサイズを変えても、きちんと追随します。

Alignment で指定した位置が、そのパーツの基準位置ということになります。

そして、Anchorsの基準位置から 「どれだけ離すか」というのが、Positionの値になるので、結果として、中央揃えになります。

配置ができたので、ブループリントから文字を流し込んでみます。

SetTextノードを使います。

単品だと↑のようなカタチになりますが、３つのTextBlockにまとめて流し込むには、まずTextBlockを配列型にします。MakeArrayノードから作る方法をご紹介します。

Add pin をクリックして [2] まで増やします。

そこへ TextBlockをつないでいきます。

TextBlockは IsVariable にチェックを付けると、変数として扱うことができます。

Getの形で接続。

最後に、Array ピンの上で右クリックして、Promote to Variable を選択すると、

TextBock型の配列が出来上がります。

この配列に対して ForEach Loop ノードを使えばすべてのTextBlockにアクセスできます。

適当な文字を仕込んでPlayしてみると・・・

３つとも一度に書き換わります。

では長さの違うテキストを表示してみます。

準備として、テキスト型の配列を用意します。

実際のゲームでは値を受け取って表示する流れになりますが、ここでは実験なので、このブループリント内で、用意します。

テキスト型の配列変数をあらかじめ作っておいて、Setの形で配置します。

そこへ、Make Array ノードをつないで、Add pinすると、いくつもテキストを入力することができます。

とりあえず大好きなゲームから拝借。

これを、先のForEachLoopで利用します。

再生してみます。

みごとに２つ目がサイズオーバーです。

これを、はみ出たやつだけ縮小するようにします。

はみ出た場合に縮小する関数はこんな感じ。textSizeAdjust と命名。

関数が受け取る値（Inputs）のピンは２つ、TextBlock型と、Float型です。

この関数を、ForEachLoop でループ処理している最後の部分につなぎます。

関数に渡している MaxWidth の 230 は、縮小するかしないかを判定するためのしきい値になります。

でPlayしてみると・・・

いい感じに収まってくれました。

フォントの形がおかしくなるので、あまりやらない方がいいのですが、

表示したいテキストのうち、ほんの少しくらいならこういった縮小処理は画面レイアウトを維持するためには積極的に使っていきたいものです。

ではでは今回はこの辺で

ステキなTextBlockライフを！

再編集にあたって

先日コメントを頂いて、改めて記事を見てみると余計な情報はあるわ、Alignmentの使い方分かってないわで、大変申し訳ない気持ちになった次第で、表題通りにバッサリと整理しました。

計算してセンタリングできるという方法を披露したかったのだと、当時に思いを馳せてみたのですが、「はみ出た文字サイズを調整」というタイトルと合ってない印象はどうしようもないので、内容の再編集に踏み切りました。