UE4のフォントで足りない文字を補充する

文字が足りなくて困ったことはありませんか？私はあります。

アンリアルエンジンではフォントをアセット化して、適時ラスタライズして画面に表示してくれますが、グリフ（字形）がそのフォントに含まれていないと無いとブランク文字が表示されます。

ゲーム開発で必ずと言っていいほど見かける以下の記号。

　これらが入っていないフォントがまだ多くあります。特に作られた年度が古いフォントは入っていない率高いです。（ユーロの記号もそうですね）。権利表記で使われる記号なので、出さないわけにはいきませんし、（C）とか（R）のように括弧書きもOKなんですが、ちょっとカッコ悪いですよね。

　UE4ではフォントのグリフが足りない場合にサブフォントを登録して解決することができます。ところがフォントごとにデザインやパラメータが違うので、文字を並べたときに高さが揃わなかったりしてうまく並ばないことが多いのです。

　なので、たかが３文字程度作ってしまえ～、ということで今回フォントを作るところから書いていきます。といってもUE4に持っていく流れ程度ですけども。

 さて、フォント作成ツールを探してみて、なじみの武蔵システムさんのOTEdit を使おうと思ったのですが、気軽にオススメできる値段じゃないので、今回はFontForge というフリーのアウトラインフォント作成ツールを使ってみることにしました。

公式には日本語版が見当たらないので、日本語版のセットアップ方法についてはこちらの記事を参考にしました。

この夏はフリーソフトでフォント作成に挑戦してみよう:ちはやろぐ.aep - ブロマガ

基本的な使い方については、上の記事にだいたい載ってるので省略します。

起動して「新規」を選択すると下のようなウィンドウが開きます。これがメインのウィンドウです。

このウィンドウを閉じると終了してしまうのでご注意を。

四角の中にグレーのバッテンが書かれているのがグリフが無い状態。上の小さな文字がサンプルの文字です。（C）と（R）はすぐに見つけられるので、ダブルクリックしてグリフを作っていきます。↓グリフエディタはこんな感じ。

外側の輪っかはコピぺできるので、（R）の方は少しラクができました。

さて、ここまできて TM が作れないことが判明します。

デフォルトのエンコーディングが  ISO 8859-1 になっていて 255文字分しかエディットできないのです。そこでエンコーディングを変えます。

メニューから

エンコーディング ＞ エンコーディング変換  と進むとリストが出てくるので、

ISO 10646-1 を選択します。

これで、メインのウィンドウから U+2122 のところまでスクロールすることができるようになります。

とりあえず３つ作ることができたので、フォント情報を設定します。

メニューから、 エレメント ＞ フォント情報 を選択します。

設定用のウィンドウに、フォント名や著作者情報を入力していきます。

AddSymbと名付けてみたけど、なんか関数名みたいｗ

ちなみに文字ごとの幅を設定するのは、メニューから メトリック を選択すると設定可能です。

いったん作業データを保存します。拡張子が sfd になります。

次回に引き続き編集する際はこの SFD形式のファイルを開けば継続できます。

で、いざフォント書き出しです。

ファイル ＞ フォントを出力 を選択するとウィンドウがポップアップします。

OpenTypeを選択して、生成ボタンをクリックします。

下のようなダイアログがポップアップしますが、気にせず生成ボタンをクリックします。

うまく書き出せたらフォント完成です。

このフォントをUE4に持っていきます。

フォントのインポート方法は公式サイトが丁寧で詳しいので、今回は説明は省きます。

Unreal Engine | フォントのインポート

 まずメインのフォントをアセットにします。

まずサブフォント無しの状態。

 UMGのキャンバスにTextBlockを置いてみます。

表示内容は以下。ちょっと文字が小さくに見にくいですが

でキャンバスはというと

結果はこうなりました。

見事にグリフが足りてないですね。

そこで、サブフォントにFontForgeで作ったフォントをセットします。

まずサブフォントを追加するボタンをクリックしてから、Add Character  Rangeボタンと、Add Font ボタンをクリックして、Unicodeを入力します。

ハイフンのあるところにUncode（ユニコード）を２か所に同じ値を入力します。

Range（レンジ）＝範囲 なので、「ここから～ここまで」という指定ができるのですが、今回３文字しか作ってないのと、途中のグリフがないので、３文字分を単品で追加します。

Uniodeを入力する際は、U+00a9 という表記を16進数表記に直して入力します。

といっても、すでに 0x0000 となっているので、ｘの右側 4桁を書き替えるだけです。

一応文字コード番号の調べ方は、Windowsだと、文字コード表を使うと確認できます。

サブフォントがセットできたら、保存してUMGのキャンバスを確認してみると、

おお、いい感じになりました。

ここで、高さがおかしかったらFontForgeで調整すれば、どんなフォントが来てもバッチリです。

あまり見かけないですが、SM (ServiceMark）U+2120 というのも場合によったら必要になるかもしれません。

意外と手軽にグリフを補充できました。割と需要がありそうなので、このまま開発のたびにマイフォントとして育てていければいいなと思ってます。

おまけ

Photoshopをお使いのUIデザイナーの皆様にはぜひともご確認いただきたい設定があります。

環境設定（Ctrl+K）の「テキスト」という設定項目についてです。

ここに、「見つからない字形の保護を有効にする」という項目があるのですが、デフォルトで チェックが付いているので、チェックを外しておくことを強くお勧めします。

これは表示しようとしたグリフを持たないフォントでも、代替フォントで表示して文字化けや、文字の欠けを防ぐ仕様です。ゲーム開発では、フォントの利用についていろいろ権利関係が厳しいので、チェックを付けない方が安全なのです。SonyさんやNintendoさんのハード向けのタイトルにうっかり Arial や MSゴシック が混入してたことが発覚したら・・・。チェックを外しておくことでグリフの有無を確認できるので、ローカライズ作業などでもメリットはあります。

ではでは

今回はこの辺で

ステキなフォントライフを！

UMGで ルビを振ってみる

UMGでルビを振ってみようと思って試してみました。

途中諦めようかと思ったけど、なんとか形にすることができたので、メモっておきます。

今回日本語フォントとして、たぬき油性マジックという書体を使ってます。

仕組みとしては、まずルビ付きの文字をまず括弧的なもので分けたテキストを用意。

ここは人力。

それを分解してテキストブロックにしてUMGで表示します。

そのあと、ルビを置く場所を計算しながら置いていきます。

例えば、

といった具合です。

で、UMGでTextBlockを並べるのですが、入れ物として２種類のパネルを使います。

CanvasPanel の方はルビ専用で、自由な場所に置くためです。一方の HorizontalBox は楽して左詰めするためです。

Size To Contentのチェックを付けていると、上図のようにバウンディングボックス（緑の枠）が小さくなりますが、ルビと本文の距離はここで調節します。

ブループリントからいじるので、 Is Variable のチェックを付けておきます。

キャンバスは以上です。

まず文字列を解析する関数を用意します。

この関数には、String型の入力ピンを一つと、本文とルビを配列で返すピンを追加します。

Local変数も追加します。下図は、関数のピン設定とローカル変数。

そして今回のキモとなる文字列分割ノード。

まず 区切り文字＝デリミタに設定した半角の { で配列に分解します。

{ から始まる文章が来るかもしれないので、 Cull Empty Srings のチェックは外しておきます。

このノードを通った分割後の文字列はこんな状態。デリミタは消滅します。

ブランチノードで、デリミタが存在するか確認して分岐します。配列の数を調べれば分割されたかどうか判明します。

デリミタが無い＝ルビが無い 場合、ルビに関する処理はしないので以下のようにします。

分割があった場合は、 ｝ が含まれるので、今度は Splitノードを使ってルビを分離します。

わりとややこしい流れになったので、文字列が処理されていくイメージを図で説明するとこんな感じになります。

Index に +1 して set Array Elem しているのは、 Insert ノードを使った直後はこうなっているからです。

まだForEachLoopの Index は 1 のままなので、+1 しているという訳です。

で、最終的に２つの配列が整います。

関数は以上です。

EventGraphに戻って、変数を一通り準備します。

一番下の Stringは、Expose on Spawn にチェックを付けておきます。

書体設定用の変数は、Slate Font Infoという変数タイプです。

一度コンパイルしてやるとDefaultValueからフォントやサイズが設定できるようになります。

フォントの設定は、後からノードでも指定できるんですが、あらかじめ書体やサイズなんかが決まっていて途中で変更することが無い場合は、こうして変数の初期値として持たせておくとノードをつなぐときスッキリできるのでおススメです。

変数が用意できたら、文字を並べていくところを作っていきます。

 用意しておいた関数から出てきた配列型の文字列を、準備した配列変数に保存します。

それを基にForEachLoopで順番に処理します。

上の方にあるConstruct Text というノードはそのまま探しても出てきません。

探すときはコレ。

たいていのものはこのノードで実体化できるので、大変便利です。

Outerのところは、パネルの子供にすることが決まっているので、親になるHorizontalBoxをつないでいます。特に親がいない場合はSelfノードで大丈夫みたいです。

Classは、TextBlock をセットします。するとReturn Valueピンからは UMGの生TexBlockが生成されてくるので、いろいろ設定をしてやります。

これでルビを除いた本文だけが並べられて表示できるようになります。

ループ処理が終わったら、 Force Layout Prepass ノードを入れます。

これは、TextBockの表示サイズを正確に取得するためです。

サイズが固定されてなくて、Size to Content にチェックがついているようなTextBlockやCanvasなどのWidgetパーツは、WidgetがレンダリングされるタイミングとWidgetブループリントが処理されるタイミングがかみ合わないことがあって、サイズ取得できないことが多いです。

Widgetブループリントが、描画担当にテキストを渡して

Wブ「このテキスト表示してよ」

描画担当「分かった～」

Wブ「で、サイズは？」

描画担当「これくらい？」

Wブ「ほんとに？  ちょちょ も１回 Pre-passで確認してよ」

 ってことだろうと勝手に想像してます。

つぎにルビの表示処理です。

そのまえに、本文のTextBlockのサイズをチェックして加算するマクロを用意します。

単純にTextBlockの幅を自身に加算してRubyPosition変数を更新していきますが、ルビで必要なのは、ルビを振る対象のTextBlockの幅を1/2したサイズだけが必要です。OffsetCenter変数にはそのまま入れるので常に上書きすることになります。

グラフに戻って続きを作ります。

今度は、ルビ用の配列変数をForEachLoopで処理していきます。

マクロで、本文のTextBlockの幅を調べて加算しつつ、ルビがあるかどうかをチェックします。

ルビ用の配列に空（Null）を入れていたのはこのためです。ルビがあろうとなかろうと本文は並べられます。どのTextBlockがルビ振り対象だったかを覚えておくためには単にに別の配列を用意して同じ順番にルビを入れておけばいいよね？っていう発想です。

常に座標だけは計算しておきたいので、マクロをブランチノードの前に置いています。

ルビが見つかったら、本文と同じ要領でTextBlockを生成して、フォントの設定をします。

文字のレイアウト設定なんかもあるのでちょっと大きくなってます。

最後のSet Positionノードで、ルビの位置がセットされます。

仕上げに、EventTickに、あのForceLayoutPrepassノードをつないでおきます。

ちょっとしつこい感じですが、いろいろ試してみてTickでもやった方がいい結果になったのでつなぐことにしました。毎フレーム処理されるのは負荷が高いので、本文の表示が終わったタイミングで処理が走り始めるようにしています。

なぜか、ルビの表示処理が終わって、isActive を false にすると、ルビの位置がずれるのです。ずっとTickが走り続けるのが気になるのですが、今のところ他の解決策が思いついていないので、情報をお持ちの方はネットに公開していただけると助かります。

これでルビ付きテキスト表示のWidgetは完成です。

複数行を処理してルビ付きテキスト表示するためのWidgetを用意します。

キャンバスの適当な位置に VerticalBoxパネルを配置します。

Size To Content と Is Variable にチェックを付けています。

配列変数を一つだけ用意します。受け取った文字列を配列にして保持するためのものです。

String型なのにTextという名前を付けるのためらったのですが、大本の「文章」が渡されてくることを考えて、あえてTextArrayとしました。アイコンの色と形で分かるのがビジュアルスクリプトの素晴らしいとこだと思うので、混乱は無い、と信じたい・・・

で、受け取ったテキストは以下のような状態で受け取ります。

改行位置は赤い矢印 ↓ の箇所。

うしろの方のしずかな空で、いきなり音がしましたので↓
シグナレスは{急|いそ}いでそっちをふり{向|む}きました。↓
ずうっと{積|つ}まれた黒い{枕木|まくらぎ}の向こうに、あの{立派|りっぱ}な{本線|ほんせん}のシグナル{柱|ばしら}が、↓
今はるかの南から、かがやく白けむりをあげてやって来る{列車|れっしゃ}を{迎|むか}えるために、↓
その上の{硬|かた}い{腕|うで}を下げたところでした。↓

宮沢賢治の「シグナルとシグナレス」より。

青空文庫からコピペさせていただきました。

この改行を分解して配列にします。

その関数が以下。再び Parse into Arrayノードの出番です。

最後のSet Padding　は、行間の調整用です。

下は Construct Object from Class ノードです。作っておいたルビ付きテキストWidgetをセットします。アセットも生成できるので、Create Widget とほぼ同じ。

以上でWidgetは完成です。

テスト表示用にレベルブループリントを編集します。

表示してみると、冒頭のキャプチャになりました。

いろいろ試してみました。

フォントにいいのが無かったので、まったく迫力出ないですね。

再び青空文庫より。

夢野久作の「ドグラ・マグラ」より。

もうノベルゲームが完成した感があります。

なんとかルビが付くようにできました。

もっといい方法があるぜよ、という方がおられればぜひご教授いただければ嬉しいです。

ではでは 今回はこの辺で

ステキなルビ振りライフを！

［３D］シンプルなリストメニュー作ってみる

前回のタブっぽい何かに、リストメニューっぽい何かを追加してみます。

背景のマテリアルにPARAGONのアセット使わせていただきました。

その前に前回のマテリアルで、大事な設定を見つけました。

UI 表示では フォグの影響を受ける必要はないので、Apply Fogging のチェックを外してみました。

すると、Intructions（命令）の数が減ったのです！

頂点シェーダの処理が約1/2、TextureSamplersの数も1/4になったので、これは効果アリですね。次回から確実に外していこう。

では、リストメニュー用のスタティックメッシュを用意します。

Blenderで↓のようなメッシュを作りました。

下にある黒っぽいのはドロップシャドウ用のメッシュです。２面のポリゴンで１つのオブジェクトになっていて、こうことができるのがスプライトにない強みですね。作るときは１枚だけ作って複製し、ずらして統合します。影のカラーを付けたいので頂点カラーを付けています。

ちなみに作業用のテクスチャは以下。等間隔に並べます。

この色分けはUV範囲を分かりやすくするためにレイヤーで色を載せています。この色分けに沿ってUVの頂点をきっちり当てます。

エンジンにインポートする際は、グレースケールにして、TGA形式にします。

メッシュはFBXでエクスポートします。流れは前回の記事と同じですが、頂点カラーを有効にする必要があります。まずは Import Settings でやる場合は、以下の場所にあります。

インポートした後に有効にすることもできます。その場合は StaticMeshエディターの右のDetailsタブの中にあります。

変更したら、Assetメニューから Remport（再読み込み）すれば反映されます。

テクスチャインポートしたら、マテリアルを作成します。

頂点カラーを使うには 専用のノードが用意されています。そのまま Emissive Color に渡してもいいのですが、ブループリントから色味をいじりたいので、MultiplyノードでVectorParameterノードを掛けています。

リストの文字は、UVの位置をずらしてバリエーションを出します。

今回移動するのは縦方向、Vの値だけが変化すればいいので、Uの値はそのままにします。

ちなみに Append は合成、Add は加算です。

A と B を Append すると、 （A, B） になって

A と B を Add すると、 A + B になります。

白いラインが全部一緒なので、慣れないと分かりにくいのですが、上の場合、

TexCoordから出てるのが、(U, V) の Flort2 または Vector2 とよばれる型。

左端の２つのノードは 単品のFloat型で、これを Append でくっつけて、

(0, OffsetV) にして、Add ノードで、（U, V） に加算しています。なので、

(0, 0.5) + (0, 0.25) だと (0, 0.75) になるのです。この単品の float が何本になってるかをノードの前後で把握することのが、マテリアル攻略の助けになります。

ちなみに下の例では、エラーにはなりませんが・・・

(0, 0) に対して 単品の float を足すので、OffsetV = 0.25 だとしたら、

(0.25, 0.25) になります。これではUVが斜めに移動することになります。

マテリアルができたので、次にマテリアルインスタンスを作ります。

 マテリアルのアセットアイコンの上で右クリックしてコンテキストメニューから選択します。一番上にあります。

マテリアルインスタンスにすると、仕込んでおいたパラメータのみ触ることができるようになります。（チェックボックスにチェックを付ける必要があります）

文字を変更するのはUV値のVの方なので、パラメータ ”OffsetV” の値を変更します。

今回は48px ÷ 512px ＝ 0.09375 が間隔なので、パラメータは以下のようになります。

テクスチャに並べておいたテキスト分のマテリアルインスタンスを用意します。

いまのところコンテンツブラウザは以下のような状態。

 等間隔に並んでいるので計算させた方がよさそうに見えますが、ゲーム開発においてメニュー項目なんてのは変更されるのが常です。さらにイベント用ROMなど特殊な状況のパッケージを作る際にも意図的に変更することがあります。このようなアセット構造にしておくことで、プログラマーとデザイナーとで分業しやすい状態にできるのでオススメです。

ブループリントアクターを用意します。

StaticMesh とChildActor をAdd Componentボタンから追加します。

追加しただけだと空っぽなので、Static Meshには さきほどインポートしたMeshアセットと対になるマテリアルインスタンスをセットします。

最後の Child Actorコンポーネント には、前回の記事で作ったブループリントをセットします。

Child Actorコンポーネントは、そのままだと中身にアクセスできないのでConstruction Script 内でキャストして変数化しておきます。

（なんかちょっと不思議な感じ、間違ってるのかな・・・）

続きを組む前に、関数を２つ用意。

 見た目をデフォルトにする関数と、

見た目をフォーカス状態にする関数。

ConstructionScript 内で表示位置と状態のセッティングは済ませておきたいので、

StaticMeshComponentを配列変数にして、そこから ForEachLoop でいろいろセット。

ループ処理の前後どちらでも問題ないと思うけど（上図では後）、配列に仕込んだ数を変数に持たせておきます。

準備ができてきたので、前回作ったタブっぽいウィンドウのブループリントを再び編集します。

イベントディスパッチャーを追加します。

作ったイベントディスパッチャーは、アニメーションの終了を通知するためのもので、TimeLineノードのCompleteピンにつなぎます。

 これでこのブループリントは編集終了。

次はこのイベントディスパッチャーをバインドしてやります。

再び今回のBP。

 これで、ウィンドウの出現アニメーションが終わるのを待つことができます。

出現が完了したら、カスタムイベントで受け取って、リストメニューを表示する、という流れです。ここでリストのフォーカス位置を管理するための変数 int型 をひとつ用意しています。上図の FocusIndex。

右下の部分は、このあと何度か登場するので、関数にしてしまいます。

まとめて選択しておいて、右クリック ＞ Collapse to Function を選びます。

できた関数ノードを編集して、Pure型にしてみます。

ノードが変化します。

 今フォーカスされてるやつをGetするだけの関数だけど、こうしておくことで、ノードもスッキリして、名前で何をしてくれるかわかるし、関数の中にチェックの仕組みも入れやすくなります。

例えば下の例は StaticMeshComponentの配列から正しく取り出せるかチェックする場合。

で、リストのフォーカスをくるくると切り替える仕組みをカスタムイベントで組みます。

 このイベントの Inputs（引数）は int型で、+1 か -1 を受け取ります。

 ブループリントはこれで一応完成です。

さっそくレベルブループリントからテストしてみます。

左の Set View Target with Blend ノードは、任意のカメラに切り替えるときに使います。Spawn Actor from Class ノードを使ってActorブループリントをシーンに呼び出します。

キー入力でテストしてみたので、Inputノードは カーソルキーの ↑（Up）↓（Down）です。

再生してみると、

GIFが重くて上げられなかったので２つに分けました。

 うまく動いてくれました。

PostProcess の影響を受けるので、カラーのコントロールが難しいですが、UMGと大して変わらない印象です。UVアニメーションで凝ったことができるのと、アルファの透明部分をカットして描画負荷を軽くしたり、UVがレクト（長方形）じゃなくてもいので、テクスチャを節約できたり、頂点カラーが使えたりと、メッシュでUIパーツを作成できると、いろんな表現ができるのでとても楽しいです。

個人的に、お手軽さではUMGの方に軍配が上がりますけどね。

ではでは今回はこの辺で

ステキな［３D］UIライフを！

［３D］頂点移動でタブウィンドウ的な何かをつくる

　先日4/21のアンリアルフェスに参加してきました。あっという間の8時間で、アンリアルエンジンに関わってる人たちのお話をもっともっと聞いていたい、そんなイベントでした。残念ながら懇親会のチケットは速攻でSOLD OUT。横浜のフェスも行きたいけど遠いな～。

　で、今回は３Dメッシュでウィンドウっぽいものを作ってみます。

たまにはポリゴン使ってUI作ってみようかな～などと、思ってみたりしちゃったのでやってみました。まず用意するのはテクスチャとポリゴンメッシュ。メッシュはBlenderを使用しました。

まずテクスチャ。

サイズは 256ｘ128 今回アルファチャンネル無しのグレースケールテクスチャです。

VRAMの使用量を抑えて非圧縮にできるのでオススメです。

これに、UV範囲が分かるように色付けしてBlenderに持っていきます。

平面を扱うので、Blenderの場合、作業する際にテンキーの［7］、［5］を押して、トップビューの平行投影にすると、 ペラポリゴンがきちんと平面で編集できます。出来上がりは↓のようになります。

一応手順を簡単にメモっておきますね。

Planeメッシュを作成して、ざっくりと上図のように分割します。「ループカットとスライド」を使ってテキトーに割っていきます。

このオブジェクトにマテリアルとテクスチャを追加します。そして「編集モード」に切り替えて「UV展開」したら、UVの頂点をテクスチャの色分けに合わせて移動させます。このときUVの頂点は「ピクセルに吸着」にチェックを付けておきます。

UVの編集が終わったら、メッシュの頂点を整えます。ざっくりとピクセル基準でOK。モデルのサイズは後からスケールで調整できます。

色分けのピクセルに合わせるように頂点座標を編集しますが、「単位」の設定を確認します。

プロジェクトによって、またカメラとの合わせ方によって変わるので、あくまでも参考程度にお願いします。

この設定の場合、１ピクセルを１ｍとして作っていきます。

 ここで、欲しいウィンドウの横幅になるよう左右を引き延ばしておきます。

モデルができたら、FBX形式 で エクスポートします。

 エクスポート設定は以下。

ちょっと小さくて分かりにくいですが、上 は 『 －Yが上 』を選びます。

この設定はBlenderを終了しても覚えておいてくれないので、+ ボタンをクリックしてプリセットにしておくのをオススメします。

名前をつけて書き出したら、UE4のコンテンツブラウザにドラッグ＆ドロップします。

このときちょっとだけ待ってあげてください。おそらく中身を解析してます。

インポート設定のウィンドウがポップアップするので、確認しながら調整します。

基本的にデフォルト設定のままで大丈夫ですが、無用なデータが作られるのは避けたいので、チェックした方がいい個所を記しておきます。

FBXに関して詳しいことは公式サイトをぜひ

Unreal Engine | FBX コンテンツ パイプライン

これで無事インポートできたら、テクスチャもインポートします。

インポートしたテクスチャからマテリアルを作成（Create Material）します。

テクスチャはグレースケールで作っています。

あと、もう一枚テクスチャを追加します。

UV座標をすこしカバーするように、赤と青で塗りつぶします。

※分かりやすいようにオレンジのラインを重ねています。

赤は（255,0,0）青は（0,0,255）にします。

255 を使わないと計算のときに 1.0 にならないのでご注意を。

この単純な色ベタのテクスチャを 32bpp のフルサイズ で作るのはテクスチャメモリがもったいないので、解像度を下げます。この時、ニアレストネイバー を選択するとピクセルがボケません。できるだけ 1/2、1/4単位で縮小します。赤と青のピクセルも基本的に奇数は使わない方が無難です。これはテクスチャを作る場合は偶数を基本にした方がいいです。あくまでも面積的な話です。で実際に使ったのがこれ。

64ｘ32です。

これをマテリアルに追加するのですが、テクスチャのフィルタ設定を変更します。

２枚のテクスチャ設定を並べてみます。

これをマテリアルで組んでいきます。

 マテリアルは、光源計算しないのと、半透明なので、

全体図はこんな感じ。

キーになるのは LocalPosition ノード。

ここから頂点座標を取り出したものに、マスクテクスチャを使って値を作り、X軸とZ軸にそれぞれ足し算してやります。

緑のScalarParameterノードは、ブループリントからいじるためです。

頂点をいじった状態を本来のオブジェクト位置に引き戻したいので 絶対ワールド位置 ノードを使います。この Absolute World Positionノード、 Absolute で検索しても出てこなくて、普通に World Position で並んでて取り出すとこのカタチになる。

ネットの参考画像と合わなくてくじけそうになった。

マテリアルができたら、スタティックメッシュのアセットを開いてセットします。

Actor型のブループリントを用意します。

さっそく編集していきます。

まず、左上の緑のボタンから Static Mesh を追加します。

追加したStaticMeshコンポーネントは、名前を変更できます。

追加できたら、右のDetailsタブから、作ったスタティックメッシュをセットします。

続いて、EventGraphを編集します。

その前にConstruction Scriptで透明度のセットをしておきます。

出現時は透明なんですが、最初の配置調整が大変なので、ここで強制的に 1.0 にします。マテリアルにセットしたパラメータ ”Opacity” に値を渡します。最後に準備ができたら 0.0 に戻します。

次に

EventGraphにカスタムノードを置いてつないでいきます。

タイムラインノードの中身はこんな感じです。Float型が２つ。

ウィンドウの高さ ＝ Height は、固定の値にするのではなく、0.0 ~ 1.0 のアニメーションにします。こうしておくと、いろんな値を掛け算するだけで自由なサイズのアニメーションが作れます。

出現アニメーションができたのでテストしてみます。

スポーンされた想定で、EventBeginPlayノードから、上のカスタムイベントを呼び出すことにします。

コンパイルして保存したら、シーンに適当に配置します。

再生しすると、

いい感じになりました。

UMGを使わずに、Scal9Grid ぽいことができました。

なんかVR空間のUIで使えそうな予感。いかがでしょうか。

別のアングルから見ると３D空間に浮いているのが分かります。

テクスチャで頂点にマスクをすることで、動かしたい頂点を選び分けることができました。

今回は以上です。UMG推しではありますが、３D の UI制作についても記事を書いていけたらと思ってます。

ではでは

ステキな３Dウィンドウライフを！

UMGのテキストブロックで遊ぶ

とあるRPGの曲を作業用に聞きながらYoutubeの動画をチラ見してたら、テキストの表現方法がたくさんあったことに感動したのを思い出しました。で、ふと試してみようと思たったのが今回のネタです。過去記事で似たようなことをやってるのでその応用ってことになるのかな。

limesode.hatenablog.com

基本的に同じような作りです。ちょっと味付けが違う程度なので、細かい解説は省きます。

今回やろうとしている機能は２つ。

• １文字ずつタイプライター風に表示
• 文字を震わせる

１文字ずつ出すだけだったら、テキストブロックひとつあればいいのですが、バラバラにする必要があって、さらに改行もするのでちょっと面倒なプロセスが入ります。

大雑把ですが、

1. 改行付きの文字列（String型）を受け取る。
2. 改行文字（エンジン内ではShift+Enter）で区切って文字列の配列を生成。
3. その配列を行毎のHorizontalBoxに格納。
4. 文字をぶるぶるさせる
5. 一文字ずつAlphaを1.0にする

というフローでやってみます。

まず吹き出しテクスチャ。前回の記事に倣ってグレースケールで作りました。

インポート設定で、フィルターを ニアレストにしておきます。

拡大縮小の際のフィルタリングでドットをそのままにする設定です。

UMGのキャンバスに表示のON/OFFをラクするためにキャンバスパネルを置いて、中に

フキダシ画像と、文字を流し込むためのHorizontalBoxを並べます。

 ４行分に対応。

一応 HorizontalBoxは　Size to Content のチェックを入れてあります。

このHorizontalBoxを４つに分けたことで、文字列を「行」ごとに分割することになった

 最大の理由です。ローカライズを考えるならもうちょっと対策した方がいい気もしますが、あとから改行位置を調整するのを前提とした作りにしています。

Hiearchyはこんな感じ。

Widgetブループリントを編集していきます。

HorizontalBoxはすでにキャンバスに置いてあるので、扱いやすくするために、Event Pre Constrct で配列化しておきます。

 ブーリアン型の変数は、いきなりブルブルしないようにするためのフラグです。今はまだ false 。

まず関数を３つ。

ひとつ目

文字列を分解して、新しく１文字づつのテキストブロックを生成する関数。

２つ目

指定した文字列（Delimiter）が文中に見つかると、それを配列にバラして格納します。

 Parse Into Array はとても便利なノードです。

 デリミタで使用した文字は消滅します。何が便利かって個別の値（この場合は文字列）を１文で扱うことができるという点です。本当は改行文字のようなOSやプラットフォーム依存の文字は避けるのが基本ですが、今回はお遊びということで。

３つ目

外部から文字列を受け取って表示する関数。上の２つの関数を組み込みます。

 For Each Loop の処理が終わったら、表示開始になりますが、ひとまずイベントグラフに戻ります。

Event Tick でぶるぶるする処理を用意します。

Event Tick は、この Widgetが ViewportにAddされた瞬間から動き出します。

 ランダムに ポジションを動かしますが、今回は微妙な値が連続しないようにInt型の乱数にfloat型の値を掛けています。

ここでフラグを見ています。文字の数が確定してないうちから処理するのは無駄なので、フラグが True になるまで処理しないようにブロックしています。

タイプライター風の動きをするのが、このカスタムイベント。

ポイントなのがこの部分↓

過去記事 『キーリピート機能をつくってみる』でも書いています。

だいたい用意ができたので、仕上げに３つ目の関数を編集します。

For Each Loop ノードの、Complete ピンの続きです。

まず表示を Visible にして、フラグを True にしたら、タイマーノードです。

フキダシが表示されたら、人は目で追います。そのタイミングで文字を表示するのは視線誘導の効果が台無しなので、少し待ってあげるためのものです。Function Name のところに、タイピング処理用のカスタムイベントの名前をセットします。

これで、できあがりです。

確認

あとは適当にレベルブループリントから呼び出して確認します。

こうなります。

そう、とあるRPGというのは、UNDERTALE です。

その登場キャラの一人、フラウィのセリフです。

もう一つキャプリました。

多分、まったく効果はない気がしますが一応ネタバレ対策で英語版にしてみました。

アイツの笑い声がよみがえります。

だいぶ遅れて遊んだのですが、ほんといいゲームですね。

読み物としてテキスト表現にこれほど凝った見せ方をしたゲームいままであっただろうか、というところも感動しました。UI表示を考えるとき、システム的に汎用性を意識するものですが、そんなのお構いなし、って感じです。まだ遊んだことのない方、ぜひ一度ご賞味ください。クレジット画面も凄まじい作りこみです。

今回も目コピーネタでしたが、楽しいのでまたやろうと思います。

ではでは

ステキなテキストブロック ライフを！

グレースケールテクスチャ 続き

Photoshopでいい感じのグレースケールテクスチャが作れたので、さっそくエンジンで検証します。もちろんUE4です。テクスチャだけの話だったらUnityでも使える内容ですが、ここからはアンリアルエンジンです。

テクスチャは２種類用意しました。

RGB24bpp の変換前のものと、 グレースケールに変換済みの２つです。どちらも同じ見た目ですが、ファイルサイズが違います。

このテクスチャをインポートします。

どちらも同じ設定にします。このタイミングでGrayscaleを選択します。

Compression Settings を Grayscaleに変えて、sRGB のチェックを外すと、晴れてリニアなグレースケールテクスチャとしてアセット化されます。

インポート後のDetailsタブを比べてみると・・・

どちらも Resource Size は 8KbっておいおいPhotoshopでグレースケールにする意味なかったじゃん。なんか悔しいので、Contentフォルダの .uasset も一応チェック。

24bppの方は 3907Bytes 、 グレースケールの方は、 3745Bytes。うん、

ほんのちょっぴり差があった。ファイル名は2文字しか違わないので、何かしらおまけがくっついてるみたい。エンジンに取り込まれた後なら違いなんてなくて当たり前か。

さて次の検証。マテリアルの LinearGradientノードと勝負です。

頑張って作ったテクスチャに何らかの変換がかかったりしてると悲しいので、計算で出力されるリニアなグラデーションと比べることで確認します。

「リニアな」というのは、0.0～1.0（0～255）までを何の補正もせず素直に使用している状態です。上の LinearGradientノードは値が偏らず均質なグラデーションになるうえ、テクスチャのような解像度というシガラミが無いのでゲージを作ったり背景などに大活躍です。

２つのテクスチャと、LinearGradientノードの合わせて３つで、マテリアルを作って、UMGで表示させてみました。

なんだか明るいですが・・・３つとも同じように見えます。念のために適当な場所をサンプルとして差がないか確認します。

残念ながら 0（黒）に近い部分で差異が出ています。画面キャプチャなので、エンジンの出力時に何らかの補正が入っているかもしれません。・・・というか全部にガンマ補正が入っているようです。中央が128じゃない時点で気づいてもおかしくないのですが、LinearGradientとの勝負でそこをスルーしてました。

sRGB空間な見た目なので、ノードで調整してみます。

結果はずいぶんリニアっぽくなりました。

ということで、何もせずそのままリニアなテクスチャを持ってきても、画面に表示されれば、sRGBになっているということが判明しました。

　今回リニアワークフローの検証をしたかったわけではないので、これ以上の深追いはやめておきます。そう、テクスチャの節約です。高解像度時代への橋頭保としてグレースケールテクスチャの扱い方を検証していたのでした。

　ちょっとサンプルを作ってみました。

用意したテクスチャはこれ。

サイズは 1024ｘ512pxです。圧がすごい・・・

次に用意したのは、

サイズは 8ｘ256px。

これをインポートして、マテリアルを作成します。

シンプルにマスクテクスチャとしての利用です。

表示してみます。

ドーーーー～ン！という重低音が聞こえてきそうです。CMみたい。

サイズ比較用に、解像度は同じ1024ｘ512で RGBA8888 の 32bppのテクスチャを作ってみました。さっそく比較します。まずはG8から。

そしてRGBA32bpp

実に４倍の容量になります。圧縮すれば小さくなりますが、こういった文字やUI表示は劣化したテクスチャは悪目立ちします。凝った見た目は 32bppじゃないと無理ですが、クリアなエッジを保ちつつ、容量節約できた分バリエーションを持たせることができるグレースケール、どちらを採用するかはその都度相談しながら決めればいいかと思います。

大事なこと書くの忘れてました。UMGでは、直接グレースケールテクスチャを貼ることはできません。できなくはないですが見た目に赤くなります。しかも透過しない。

これはチャンネルが 一つしかないためで、RGBAの４チャンネルのうち R

チャンネルのみに、グレースケールの値が適用されるからです。

普通にUMGで着色したい場合はこのようなマテリアルを用意します。

これをImageパーツに適用すれば Color And Opacity で色が付けやすくなります。

ちょっと手数が増えますが、テクスチャの容量が稼げるのが素晴らしいです。

マテリアルをちょこっと改造してインスタンス化できるようにしてみました。

テクスチャサンプルパラメータノードに差し替えます。このノードに名前を付けて、テクスチャフォーマットをLinearGrayscaleに変えます。そして安全な状態にするために、

16ｘ16程度の ■ ダミーテクスチャを作ってセットしておきます。

このマテリアルからマテリアルインスタンスを作成します。マテリアルアイコンの上で右クリックして一番上にあるのを選択すると作ることができます。

マテリアルインスタンスの中でテクスチャをセットする項目があるのでそこに用意したグレースケールテクスチャを登録します。

あとはUMGで Image にセットするだけ。

基本はマスク的な使い方が一番向いてるのですが、ちょっと変わった使い方をしてみます。

Photoshopで雲模様フィルタを使うと簡単にシームレスなテクスチャが作れます。

これを、Pannerでスクロールさせ、TexCoordに足してやると、

 ゆらゆらと陽炎のように歪みます。水の中の表現としてもありです。

 おなじ雲模様テクスチャに対してValueStepを使って掛けてみると、

 ブループリントからScalaParameterノード ”Value” の値を 0.0～1.0 に変化させます。

出現や消滅の演出に使えそうです。

といった感じで、まだまだ探せばネタはありそうですが、今回この辺にしておきます。

グレースケールテクスチャを使うと、テクスチャ容量を稼いでリッチな見た目を作るのができて楽しいです。

ではでは

豊かなグレースケールライフを！

グレースケールテクスチャ

ふと気になって、グレースケールについて調べることにしました。

UI表示のためのテクスチャは、アルファチャンネルを使った半透明で「抜き」を扱うことがほとんどなので、Photoshopで作ることが多いと思います。

で、ちょっと解像度の話

　最近のモニタ解像度は1080pがまだ強い印象ですが、PS4Proのせいで4K対応も考えなくてはなりません。解像度が低いうちは１文字が 8x8（実際は7x7） で下のような大きさでしたが、（っていつの話やねん！）

↑この 320ｘ240（4:3）をTV画面サイズとしたときに、単純に 1440ｘ1080（4:3）に拡大して、だいたい同じようなバランスの大きさにしてみたら、１文字につき 約34pxは必要になります。

下図は、いったん1440ｘ1080を横に拡張して 1920ｘ1080（16:9）にしたものを上の画像に合わせて縮小したものです。

拡大前と後を比較用に近づけて並べてみました。

↑の画像のように拡大してボケボケだとかっこ悪いので、鮮明なテクスチャを用意したいものです。そのためにはテクスチャ解像度を上げることになるのですが、当然グラフィック用のメモリを圧迫します。UIのために容量を存分に分け与えてくれるなんてことは滅多に無いので、テクスチャの節約について考えなくてはなりません。解像度を確保するのに結構やりくりが必要です。

　そこで登場するのがグレースケールテクスチャ。単純なマテリアルだけで着色できるし、最近はシェーダーで加工するのが手軽になったので 結構活躍できます。何よりもファイルサイズが1/4で済むということは、RGBA32bitの絵のサイズと比べて4倍のサイズの大きさのテクスチャが作れるということです。

で、Photoshopの話

Photoshopでこのグレースケールテクスチャを作る方法は、大きく２つ。

• 先にグレースケールで作業を開始する
• 後からグレースケールに変換する

 実際に作業してみると問題が見えてきました。

気にしなければどうということはないですが、品質的に解像度の大きなモニタだと粗さが際立ちます。

先にグレースケールのドキュメントとして作業を始める場合の問題点は、ブラシカラーが K値（CMYKのK）で扱うので0～255階調ではなく、0～100の”％” というところ。

小数点が使えないので、階調の少ない環境で作業することになります。あくまでもこれはブラシや塗りつぶしで細かく選択できないだけで、ぼかしフィルタやトーンカーブではしっかりと256階調が使われます。ゲージとかのリニアなテクスチャを作るにはちょっと工夫が必要です。あと個人的に気になるのは、作業効率という点でカラーが使えないので、UVのアタリ取りとして色分けできないところです。

後からグレースケールにした場合は要注意です。

Photoshopの初期設定だと、以下のようになります。

まず RGBで 256階調のリニアグレー

これをグレースケールにモードチェンジするとこうなります。

ピクセルを2倍に拡大していますが、ちょっと分かりにくいですね。

さらに部分拡大（1600％）にすると見えてきます。

モニタによっては見えにくいですが、ディザ処理がされています。これはテクスチャの扱いによっては（雲とか煙みたいな繊細な半透明を扱うときとか）ノイズになります。

これを回避するには、カラー設定を変更します。

編集 ＞ カラー設定

変換オプションの「ディザの使用...」のチェックを外します。

チェックを外してからグレースケールにすると、ディザはなくなりましたが、

キレイに並んでいたはずの段階がなんか怪しいことになります。

拡大してみるとなんだか不規則に並んでいます。よく調べてみるといくつもの段階が省略されているのが分かります。

なぜこんなややこしいことをしているのか分かりませんが、Photoshopなりの愛か何かなんでしょう。いろいろ補正が入ってしまうのは仕方ないですが、なんだかやるせない感じに包まれつつカラー設定をいじっていたら、いい感じにできるやつを見つけました。

編集 ＞ カラー設定

の 作業用スペースにある「グレー」を  sGray に変更します。

この設定を変えてから、グレースケールにモードチェンジすると、損失のない素直なグレースケールに変換できました。

これなら、256階調のグレーでペイントできて、作業途中でカラーも扱えるのでいい感じです。

あとはこれを書き出せばテクスチャとしてエンジンで利用できます。

 テクスチャフォーマットはTarga形式。拡張子TGAで書き出します。このフォーマットは可逆圧縮で劣化しないし、結構いくつものビットフォーマットに対応してるので大変使い勝手がいいです。PhotoshopでTarga書き出しを行うと、普通だとポップアップが出て面倒です。

しかもこのポップアップ直前の書き出し時の選択肢を覚えているので、切り替えが必要な時に一瞬戸惑うので嫌いです。アルファチャンネルの有無で見てくれればいいのに・・・

このポップアップがグレースケールで書き出す際は出ないので、ちょっとだけ幸せな気持ちになります。

書き出したファイルサイズを見てみるとちゃんと差があることが分かります。

 例えばこんな画像。サイズは 256ｘ256px

これを↓のようなチャンネル構成にしておいて

それぞれのBPP（bits/pixel =１ピクセル当たりのビット数）で書き出してみました。

グレースケールを１とすると、だいたい３倍、４倍になってるのが分かります。

で、整理すると

グレースケールでのペイントや塗りつぶしは100段階の中からしか選べない。（256階調を使えないという意味ではない）

RGBモードのドキュメントで作業してからグレースケールに変換した際に、Photoshopの初期設定だと問題があったので、設定を変えないと、きちんとリニアなグレーにならない。

ということで今回はこの辺で。

 解決策が見つかったので、次回はエンジンに持っていって検証します。

ではでは

ステキなグレースケールライフを！

で、先日の話

ようやく勇気を出して、Twitterのアカウントを作りました。

このブログにあるコメントしづらかったり、何かネタを提供してくださる場合などお気軽にご利用くださいませませ。お手柔らかに宜しくお願いします。