妹でもわかるUnrealEngine4

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

今日も失敗するHTML5化

「フォントの問題が解決したし、水のマテリアルも代替品を作れそうだから、妹のゲームまたHTML5対応にしようとしてたんだけど、なんかエラーが出て起動しない……」

妹「あれ? 字はちっちゃくなるけど、一応動いてたよね?」

「そのはずだったんだけど、何かの拍子に上手くいかなくなったらしい」

f:id:una_unagi:20170214001409p:plain

「エラーメッセージが一瞬で消えちゃうんだけど、Pauseボタンを押すとこんなメッセージが出てきちゃう。Windows用のパッケージ化は成功するから、データがおかしいわけではないんだろうけど、何かまずい設定が入れちゃったかも。一回古いデータとか、古いバーションのUE4を入れてやり直した方がいいかも」

妹「HTML5大変だなあ……」

「大変なんだけど遊ぶまでの手間が少なくて、あと広告をのっけやすいというメリットがある。Windowsアプリで広告を載せるのは色々とむずかしいから」

UMGウィジェットの表示がHTML5だと変わってしまう件(4) TTFフォントをOTF形式に変換してからアセット化

「とりあえずOTF形式のフォントを使えば大丈夫、ということが昨日わかったわけだけど、TTFしかないフォントもたくさんある。妹が使ってたやつもそう」

妹「別のフォント探さないと駄目かな」

「探してもいいんだけど、TTFからOTFに変換するという方法もある」

ja.fonts2u.com

「方法は色々あるけど、例えばこのサイトとか。ブラウザ上で変換処理が出来る。日本語だから、TTFフォントのファイルさえあれば、使い方はそんなにむずかしくない。それで出来上がったOTFファイルをフォントアセットにして使うと……」

f:id:una_unagi:20170212232628p:plain

HTML5でもちゃんと表示できた」

妹「おー、すごい。すごいっていうか、普通っていうか」

「ということだから、別にTTFフォントしかなくても大丈夫」

f:id:una_unagi:20170212233112p:plain

「ただフォントを変換しても完璧に同じになるとは限らなくて、よもぎフォントのTTF版とOTF版を並べた画像があるんだけど、これを見ると字形は同じだけど、間隔が微妙に違う。これが変換誤差なのか意図したものかわからないけど、完全には一致してない。それでも最初のみたいにめちゃくちゃちっちゃくなったりはしないと思う」

UMGウィジェットの表示がHTML5だと変わってしまう件(3) フォントがOTF形式なら正しく表示された

f:id:una_unagi:20170212001127p:plain

「バグ報告をしようと思って、最小限のデータだけの確認用プロジェクトを作ってたんだけど、そうすると何故か普通に表示できちゃったんだよ。どうやらフォントがデフォルトのRobotoのままだったからみたいで、昨日のプロジェクトもRobotoにすると問題なくなった」

妹「えー、これってフォントが悪かったの? でもわたしが使ってたやつも、サンプルのプロジェクトからコピーしたアセットだから、ちゃんとしたやつだと思うんだけど」

「フォントが悪いというか、相性が悪いやつがあるというか。で、ちょっと気になったのがフォントのファイル形式。文字にもJPEGPNGみたいな、データ形式の違いがある。UE4で読み込めるのはTTFとOTFで、どっちもよくある形式なんだけどこの違いかもしれないと」

www.asterism-m.com

「それで同じフォントがTTFとOTFと両方配布されてる、よもぎフォントというもので確認をしてみた。これはゲームの中で文字利用が出来て、使用の表示や報告なども不要なありがたいフォント。これで2種類のフォントでHTML5パッケージ化すれば、違いがでるんじゃないかと」

TTF版
f:id:una_unagi:20170212002020p:plain

OTF版
f:id:una_unagi:20170212002033p:plain

妹「あ、違う!」

「ロゴはどっちもRobotoのままなんだけど、ボタンのフォントは変えてある。これを見た感じだとTTF版はおかしいけど、OTF版は正常になってる。同じ人が作った同じフォントなのに、形式の違いで問題が起きてるということは、これが原因という可能性が高い」

妹「じゃあ私が使ってたフォントはそのTTFとかいうやつだったのかな」

「多分そう」

www.dafont.com

「使われてるのはこのフォントなんだけど、ダウンロード出来るのはTTF版だけだから。サンプルのプロジェクト作る時に、このTTFを読み込んで、フォントアセットを作ったんだと思う」