2014年6月14日土曜日

[Unreal Engine 4] TextRenderComponentで徐々に文字を表示するBlueprint

まず,UE4のTextRenderComponentで日本語を表示するまで,の手順でTextRenderComponentで日本語表示ができる状態になっているとします.

コンテンツブラウザで,Blueprintを追加します.


クラスはアクタを選択します.


追加したBlueprintには,BP_ScriptRenderという名前をつけました.



追加したBlueprintをダブルクリックし,コンポーネントの追加からTextRenderを選びます.


TextRenderの名前をTargetにし,フォントの設定で作成した日本語用のフォントとマテリアルを使うように変更します.日本語が出ることを確認するため,Textを日本語のメッセージに変えておきましょう.


保存してから,通常の画面に戻り,Blueprintをドラッグアンドドロップし,配置しましょう.
裏面からは見えなかったりするので,画面に映る状態に調整しましょう.


調整が終わったら,Blueprintに戻り,イベントグラフの編集に移ります.
まずは,float型の変数を追加し,Counterという名前にします.


Begin Playイベントを追加し,ゲーム起動時に色々初期化するようにします.
まず,マイブループリントからTargetを選び,ドラッグアンドドロップでイベントグラフに配置します.


ピンから線を引っ張って話すと,コンポーネントの追加ができるので,Set Textを入力して検索し,追加しましょう.


デフォルトでは空文字列を設定するようになっているので,Begin PlayイベントをSet TextにつないでやればOKです.同時に,Counterにも0をセットするように追加しておきましょう.次の図のようになります.


次に,Tickイベントを使って,Counterを更新するようにします.TickイベントからDelta secondsを取得し,Counterの値に追加し,それをCounterにセットする,という流れです.


次に,表示する文字列を入れておくための変数を追加します.変数の種類はTextにします.


Get Substringというコンポーネントを使うと,文字列の一部を取り出すことができるので,これを使ってテキストの開始からCounter番目の文字までを取り出します.Source StringにScriptをつなぎます.(Textからstringに変換するコンポーネントが自動的に追加されます).更に,Length(取り出す文字列の長さ)にCounterをつなぎます.(floatからintegerに変換するコンポーネントが自動的に追加されます).Start indexは,文字列をどこから取り出すか(0が最初の文字),なので0にしておきます.できたものが次の図のようになります.


最後に,Counterの更新からTickイベントを受け取って,TargetのSet Textコンポーネントに取り出した文字列を設定するようにします.


これで,再生すると1秒に1文字ずつ表示されます.

2014年6月10日火曜日

UE4のTextRenderComponentで日本語を表示するまで

どうにかTextRenderComponentで日本語が表示できたので,メモ.

まず,日本語を含むフォントテクスチャを作る.これについては,こちらを参照.
次に,フォント表示用のマテリアルを作成する.コンテンツブラウザの新規からマテリアルを選択する.


マテリアルには,とりあえずMSGothicMaterialと名前をつけた.このマテリアルをダブルクリックし,マテリアルエディタを開く.


最初からある最終結果を表すノードを選び,左下のプロパティからBlend modeの設定をMaskedに変更する.


次に,右クリックメニューからFont Samplerを追加する.


Font Samplerの一番下の丸(アルファ成分?)をオパシティマスクにつなぎ,マテリアルを保存する.


最後に,適当なところにTextRenderComponentのアクタを配置したら,右側のプロパティから表示したい文章をTextに設定し,マテリアルとフォントに作成したフォントとマテリアルを設定すれば,日本語が表示される.

ただ,日本語のように漢字も含めると文字数が多い場合、テクスチャが複数枚になるのだけれど、まだそこの扱い方が分かっていない.
さっさと日本語出せるようにして,アドベンチャーゲームのように1文字ずつ表示されるような機能作ってみたい.

2014年6月7日土曜日

Unreal Engine 4で日本語フォントを作る方法

まず,コンテンツブラウザで「新規」,「マテリアル & テクスチャ」、「Font」の順に選び,
フォントを追加します.

日本語で使えるフォントを選びます.ここでは,とりあえずMSゴシックを選んでみました.

コンテンツブラウザにできた新しいフォントをダブルクリックし,フォントエディタ(正式名称が見つけられませんでした.)を開きます.

右側にあるプロパティから,「Import Options」の中の「Unicode Range」に「3040-309F,30A0-30FF,4E00-9FFF」を入力します.
それぞれ,平仮名、片仮名,漢字に対応しています.そして,アセットメニューから「再インポート」を選びます.

これで,日本語を含むフォントができます.

ただ,日本語フォントを作っても,TextRenderComponentには日本語表示が崩れるというバグがあるようです.
(AnswerHubへ)

プレビューではちゃんと日本語が表示できるので,TextRenderComponent以外に何かしらフォントを表示する方法では表示できるかも?

その後の経緯が見つけられないのと,4.2でも表示がおかしくなることから,まだ直っていないのかも.

TypeScriptのリファレンス指定ではまる

川俣さんのTypeScript入門(Amazon)を買って,
TypeScriptを使ってみた.

まず,jQueryを使うための型定義を取得する部分で躓く.Visual StudioのNuGetを使えばよいらしいが,
nodeとCLIで実行している場合の方法が分からなかった.調べてみると,tsdというツールを使うのが楽そう.

npm install -g tsd

で,TypeScriptのコードを書いている場所でtsdを使ってjQueryの型定義ファイルをインストールする.

tsd query jquery -a install

すると,typingsというフォルダができて,その中のjqueryというフォルダの中にjquery.d.tsというファイルができる.

これを,TypeScriptのファイルで参照するように設定するのだが,最初に書き方を間違えた.

// 間違い
// 

コメントと勘違いしてしまったが,"/"は3つでなくてはいけないらしい.
気になって4つの場合も試してみたが,きっちり3つでなくてはいけない.

// まだ間違い
/// 

これで通ると思いきや,まだ駄目らしい.まさかと思いpathの前後の空白を削ってみると,うまく通った.
つまり,次が正解になる.

// 正解
/// 

代入演算子の前後には空白をつける癖が問題になるとは思いませんでした.

まとめ

TypeScriptで型定義を参照する場合
  • 行頭の"/" はきっちり3つ
  • pathの直後の=の前後に空白を入れてはいけない