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

前回の続き

テクスチャのアセット化

テクスチャ素材の準備ができたところで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の使い方分かってないわで、大変申し訳ない気持ちになった次第で、表題通りにバッサリと整理しました。

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

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

前回の続きでスクロールバーを付けてみます。

limesode.hatenablog.com

 以外にサクッとできました。まずはUMGのパーツを追加するところから。

スクロールバー全体の大きさを決めるキャンバスパネルを親にして、スクロールバーの下敷きとバー本体を表すImageパーツを子供にします。ちょっとだけラクをしたいのでバーの長さは、テキストブロックの表示サイズと同じにしています。

スクロールバーの長さを計算して変更する関数を追加します。

このセットアップ関数は、テキストブロックの中身を変更する関数の中に置きます。

スクロールバーを動かすためのマクロを用意。

これをテキストボックスのスクロール部分にくっつけます。

テキストボックスを動かす計算をしたあと、その値を拝借するカタチです。

以上で完成です。

不思議の国のアリス（英語）の冒頭を使って試してみました。

やっぱりスクロールバーはいいですね。あとどのくらいっていうのが判るのは大事です。

UMGにはとても便利な 『スクロールボックス』 が既に用意されているので、わざわざ苦労して作ることもないのですが・・・ こういった基本的なUIを自分の手で一回は作っておくのもいいと思います。試行錯誤してみて初めて仕組みの深いところが分かったり、当たり前のように毎日使ってるGUIの奥深さに気付くこともあるかと。

ではでは今回はこの辺で

ステキなスクロールライフを！

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

　テキストブロックで、長文を表示しようとしたときに、たいていAuto Wrap Text（＝自動改行）にすると思います。

文字量が多いとサイズが大きくて表示しきれないので、スクロールさせるのが我々UI業界では当たり前の仕組みです。

UMG パーツ

 まずはイイ感じの大きさのキャンバスパネルを置いて、その子供にテキストブロックとイメージを配置します。キャンバスは表示範囲を限定するためのものです。子供たちにとってこのキャンバスパネルが実際に表示される大きさになるので、アンカーの設定を右下のやつに設定します。

スロットの設定は以下のようにすると、親のキャンバスパネルにピッタリフィットするように可変します。

 Offset ～ は余白が欲しい時に設定します。

Event Construct

事前に取得できて後から再利用できる値は、なるべく変数化しておきます。

 ここでは、見える範囲と一度にスクロールする量を求めて変数にしています。

 テキストブロックの中身を変える

 UMGのテキストブロックには、内容を変更する方法が３つ（他にもあるかも）用意されています。

１．テキスト型の変数に直接バインドしてしまう方法（Flashみたいな）

　　その変数の内容を書き換えるだけで反映されます

２．関数にバインド（紐づけ）して、その関数の戻り値を使う方法

　　その関数にパラメータ（引数）を渡していろいろ加工することができる

３．バインドせずに setText ノードを使う

　　エンジンが値を見張ることがないので処理の負担が軽い

頻繁に値が変わる場合は、１か２が向いていますが、今回作ろうと思っているのは内容がほとんど書き換わらないので、３にします。

↓テキストをもらって書き換える関数です。

 ForceLayoutPrepassノードと getDesireSizeノードのコンビネーションで新しいテキストブロックのサイズを取得します。右端の関数は、親のキャンバスパネルのサイズと比較してスクロールするかどうかをチェックする関数です。キャンバスパネルに収まらなかった場合のみスクロールできるようにしたいので比較してフラグを立てます。

ついでにスクロールの限界位置を計算して変数に入れておきます。

フラグが立ったら

 フラグといってもブーリアン型の変数です。それをEventTick に Branchノードでつないでやります。スクロールが必要ない場合は処理を省けます。

スクロールが必要な場合は、キー入力を受けてスクロール処理をします。

入力チェックのマクロはこんな感じ。

Was Input Key Just Pressed ノードは、EventTickのように細かく処理が流れてくるところにつないで使います。Get Player Controller ノードがないと使えないので注意。

ゲームパッドとキーボードのカーソルキーを両方扱えるようにしたいので、OR（論理和）ノードで判定してます。

関数は出口が一つだけど、マクロだと分岐できるのでこういった場合とても便利です。

スクロールするために用意した関数は３つ。スクロール量を計算する関数２つと、実際に動かすための関数になります。

最終的に、青いノード（Vector2D）に移動後の値（目的地）が入るようにします。

キー入力のたびに上の関数が呼ばれ目的地が瞬時にセットされます。で、常時処理されるのがこの関数↓

目的地から現在地の差分に0.1を掛けて現在地に加算したものを新しいポジションとしてセットします。これで常に目的地に向かって移動し続けます。0.1は速度の調整用として掛けています。

完成

 試しに、シャーロックホームズの冒険（英語）から”ボヘミアの醜聞” の冒頭を流してみました。いい感じにスクロールできます。フォントは Canterburyという書体です。

 無事ちゃんと動いていますが、まだ先があるのかわからないので、UIとしてはまだ完全ではないです。スクロールバーか、▼表示か、好みが分かれるところです。あと、上下の端に辿り着いたときに、ループさせるか否かも悩ましいところです。ということで今回はこの辺にしておきます。

ではでは

ステキなスクロールライフを

【おまけ】小数点でハマった

最初１行ずつスクロールしていたのですが、行数が多くなると誤差が出てきたり、端までいったときの判定が難しかったりで、結局 固定のスクロール量にしました。それほど悪くないと思います。同じ値を足し引きしてるはずなのに、数値が 0.0000008 みたいなことになるので、＜ ＞を使った判定が思うようにいかず頭をかかえることに・・・

【補足】うまくgetDesireSizeで取得できない場合

　まだ原因がよくわかっていないのですが、UMGの編集を開始してからしばらくはタイミングによってはまったくサイズが取得できなかったり、改行する前のサイズが取れてしまうようです（私の環境のせい？）。

　そこで確実に改行後のテキストブロックのサイズが取れる仕組みを見つけようといろいろ接続を試してみました。EventTickにつないでチェックすると間違いなく取れます。

 DoOnceノードを使って処理をしたりしなかったりをスイッチングします。

 （このあたりいじってたら、いつのまにか、なくても取得できるようになってました・・・）