テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】Unite tokyo 2018の講演動画とスライドが公開

f:id:tsubaki_t1:20180531221217j:plain

Unite tokyo 2018のセッション動画が公開されました。

 

 

セッション動画が公開

タイトル通りで、イベントの講演動画が公開になったみたいです。
セッションのタイムテーブルからYoutubeSlideshareのページへジャンプ出来ます

events.unity3d.jp

f:id:tsubaki_t1:20180531221449j:plain

 

残念ながら、事前に非公開となっていた動画は公開されません。
またセッションによってはスライドがUnity製だったり全編動画だったりで資料が無い物もあります。それらは動画の中で確認するのが良さそうです。

f:id:tsubaki_t1:20180531221727j:plain

 

すごく個人的な感想を言わせてもらえば、英語圏のスライドはライブデモに重きをおいている印象があるので、スライドで満足せず動画を見たほうが良いです。

 

個人的お薦め

Addressableを始めとした新しいワークフローについてです。

www.youtube.comShaderGraphの使い方入門です。

www.youtube.com説明不要

www.youtube.com

関連

Unite Europeの動画一覧。どちらかと言えばキャラクターを推す日本と比較してVR/ARやテクノロジー、ワークフロー周りの話が多いです

tsubakit1.hateblo.jp

【Unity】UnityでOSにインストールされてるフォントを使いたい

f:id:tsubaki_t1:20180530215432j:plain

今回は「OSにインストールされたフォント」をUnityで使用する方法についてです。

 

 

フォントはゲームの第二の顔

フォントは実は結構重要な要素の一つで、AppStoreやGooglePlayで売上ランキングに乗るようなアプリは結構ゲームにマッチしたフォントを使用していることが多かったりします。

また視認性なども大きく異なり、文章が読みやすいフォントや、視認しやすいフォント、ゲームの味として採用されるフォントなど、フォントは結構重要な要素の一つです。

 

f:id:tsubaki_t1:20180530220054j:plain

で、Unityエディターを長年見続けてフォントに見慣れてくると、見慣れたフォントが出てくるだけでウンザリする事があります。Unityは基本的にArialでArialに無いフォントは特定のフォントにフォールバックするので、フォントを変更していないとだいたい同じフォントが使われてしまう訳です。

 

f:id:tsubaki_t1:20180530220841j:plain

f:id:tsubaki_t1:20180530221823j:plain

【Unity道場 2017】伝える!伝わる!フォント表現入門より

 

なるほど!さっそくフォントを変更しよう!!となる訳ですが、ここには一つ注意すべき点があります。ほとんどのフォントにはライセンスが付いてくるという事です。
自分の知る範囲では商業用は兎も角、無料で配布してるOR仕様が可能なフォントは利用する事は出来ますがアプリに同梱する事を禁止してる事が多いです。そういったフォントは基本的に使用できません。

また漢字の収録数も問題になります。幾つかの常用漢字は含まれますが「全て漢字」のとなると含まれていない物が多いです。
フォントに含まれていない漢字は自動的にフォールバックしてシステムフォントが使われてしまうので、途中まで独特なフォントが唐突にゴシックになるなんてことも起こりえます。

f:id:tsubaki_t1:20180530223504j:plain

 

そうだ、全部システムフォントを使おう

良いフォントを使用したいがフォントを同梱するのはアレ…という場合の力技対策で、システムフォントを使用するというアイディアがあります。
つまり、フォントを含められないならOSにプリインストールされてるフォントを使用して文字を表現するというものです。OSのフォントは漢字も揃っている事が多いですし、同梱してないので再配布の問題もありません。
まぁOSに含まれていない事もあるんですが…

 

で、通常はUnity指定のフォントにフォールバックされてしまうのですが、フォールバック先を強引にこちらで指定する方法についてです。

 

手順

まず適当なフォントを用意します。
StandardAssetsのUtilityに何気に幾つかフォントがあるので、ソレでも良いです。

f:id:tsubaki_t1:20180530230622j:plain

次にフォントの中身に何も含めないようにします。

Incl.Font Dataのチェックを外すと「フォントはゲームをプレイする端末にインストールされているものを使う」判断になり、フォントファイルの中身が空になります。
これで元々のフォントが何であれ使用することが出来ます。

f:id:tsubaki_t1:20180530230830j:plain

あとはFont Namesに使用したいフォントを登録します。
複数のフォントを登録する(例えば基本的にRobotoを使用するが一部でSunsのフォントを使用する)といった場合には、カンマで区切ります。なおフォント名は英語で入力します。

下の図ではInpactフォントを使用していますが、Inpactは日本語に対応していないので日本語をMSP明朝にフォールバックしています。

f:id:tsubaki_t1:20180530231800p:plain

フォント名が分からない場合は、下のが参考になるかもしれません。また、Font.GetOSInstalledFontNamesでインストールされてるフォント一覧を確認出来ます。

dekasu.net

フォールバックのやりすぎにご注意

FontNamesに任意のフォントを登録することで、フォールバック(代替で表示)する事ができるようになる訳ですが、一つ注意すべき点があります。

FontNamesに登録したフォントは全てのフォントがメモリに自動的にロードされてしまうので、ココに大きなフォントを沢山指定するとメモリを大きく消費するかもしれません。

もし中国語や日本語、韓国語の全てのフォントを一つのフォントで賄おうとする場合には注意が必要そうです。

 

CreateDynamicFontFromOSFontは使わないの?

今回は割とトリッキーなアプローチを紹介しましたが、似たような機能でCreateDynamicFontFromOSFontという「OSにインストール済のフォントを元にFontを作成する」という正にソレなAPIがあります。

実際コレを使用すればMS PMinchoのフォントをロードして使用するという事も可能です。ただコレはフロートしては面倒な所があって、

  1. フォントを管理する制御システムを用意して、そこにフォントを集約しないとメモリ消費と描画負荷がどんどん上がる
  2. UIにフォントを登録する仕組みが別途必要になる
  3. ゲームを再生しないと動作が確認出来ない

という点があります。

 

フォント管理システムですが、これはフォントが「1フォントにつき1枚のテクスチャ」になる事が問題となります。
例えば2つのフォントがあったとして、片方が「ABC」もう片方が「BCD」と表示した時、2つは「BC」という共通した文字列を持っているのにも関わらずデータを共有せず異なる文字列として扱ってしまっています。
これはフォントのリビルドを回避するのに使えるアプローチですが、特に気にせずガンガンFontを生成すると、色々とメモリがマッハになります。

f:id:tsubaki_t1:20180530233105j:plain

なお、個人的には、この手のアセットが関わるリソースマネージャー系はScriptableObjectに格納するのが良いと思います。参照した地点でデータがロードできて、アンロードもソコまで複雑化しない。

 

WebGLは?

この記事を書いたキッカケですが、Unity WebGLではシステムフォント系の機能が全く使えないので、こういったフォールバックの仕組みは使えません。
Webフォント系も使えないっぽいので、基本的にコンテンツに同梱して使用する必要があります。

関連

文字を表示しようと思ったらTextMeshProも良いかもしれません。BMPフォントなどが代表されるように、印刷したら大丈夫になるフォントは結構あります。

tsubakit1.hateblo.jp文字は大事だと説明してくれる資料

tsubakit1.hateblo.jp文字表示機能についてです

tsubakit1.hateblo.jp

【Unity】ドット絵でゲームを作る時に使いたい、ピクセルパーフェクトなスプライト表現するPixelPerfectCamera

f:id:tsubaki_t1:20180528232856j:plain

今回は先程公開された、ピクセルパーフェクトなスプライト表現をするために(想定)ピクセルに合わせてスプライトやカメラの位置を調整してくれる機能PixelPerfectCameraについてです。
現在はPackageManagerのstagingで提供されています。

 

 

想定解像度に合わせて表現してくれるカメラ

Unityは基本的にカメラからスプライトを撮影する方式をとっているので、スプライトのピクセルを余り重視していませんでした。そのため、ドット絵を表現する場合にはピクセルサイズがゴチャゴチャだったり、1ドット単位で移動するといった表現をするためには一工夫が必要でした。

 

で、今回こういったドットバイドットの表現をコンポーネント一つ足すだけで解決してくれる機能が追加されたみたいです。現状はStagingにありますが、多分そのうち普通にPackageから追加できるようになります。

 

想定する画面の解像度と、PixelPerUnitを指定することで、想定解像度と一致する形でスプライトが表現できるようになります。

 なお、Unity 2018.2から使用できます

導入

導入手順はこんな感じです。

Packagesmanifest.jsonを下のように書き換えます。

{
"dependencies": {
"com.unity.2d.pixel-perfect": "1.0.0-preview"
},
}

これでPixelPerfectCameraが導入されるので、あとはシーン内のMainCameraオブジェクトにPixelPerfectCameraコンポーネントを追加します。

f:id:tsubaki_t1:20180529000417j:plain

 

次にテクスチャとカメラの設定をします。

TextureのPixelPerUnitとPixelPerfectCameraのPixelPerUnitを同じ値にします。これは「1mを何ドットとするか」という情報で、例えば40とすれば40ピクセルがゲーム内での1mになります。
この大きさはゲーム内の物理演算や挙動に大きく関わるので、適当に100とかせずちゃんと決めとくと良いです。決してScaleを使用してはいけません

f:id:tsubaki_t1:20180529000557j:plain

ピクセルパーフェクトな形で動かしたい場合には、Filterも重要な要素の一つです。TextureのFilterModeをPoint(No filter)に設定して、フィルターを外しておきます。
またCompression(圧縮)もNoneに指定したほうが良いです。複数のピクセルをまとめて圧縮されるので、ドット絵系と圧縮は相性が悪いです。ドット絵は解像度が小さめなので、圧縮しなくても何とかなります。

f:id:tsubaki_t1:20180529000942j:plain

最後に画面の想定解像度を設定します。
設定項目はReference Resolutionです。

これはピクセルが何個詰め込めるかという話で、例えば320x320の画面には32x32のスプライトを100個突っ込めます。

この解像度を設定すると、画面に緑色の点線(1)と枠線(2)が表示されます。
点線がPixelPerfectで見た時の解像度で、枠線が実際のゲーム画面の大きさです。

f:id:tsubaki_t1:20180529001649j:plain

ゲームを再生すればカメラの大きさが変化しますが、エディターで即座に確認したければRunInEditModeボタンを押せば良いです。

 

想定解像度に合わせて解像度を変更するUpscale Render Texture

PixelPerfectCameraはSpriteRendererの座標を良い感じに調整する機能ですが、これだと大量のスプライトを表現したときのフィルレートスプライトを斜めにしたときにキレイな絵が出るといった問題が出ます。

 

これを回避する場合には、Upscale Render Textureのチェックを入れておきます。
チェックを入れるとカメラの画面は解像度を下げた状態で描画されるようになり、上記のような問題は出なくなります。
影響範囲はPixelPerfectCameraをセットしたカメラのみなので、UIは影響しない点も面白いです。

f:id:tsubaki_t1:20180531122816j:plain

解像度を下げる(指定解像度に合わせてズームする)という機能ではSetResolutionが思いつきますが、PixelPerfectCameraのこの機能がバッファを縮小して描画するので、SetResolutionは使用するメリットは無さそうです。

f:id:tsubaki_t1:20180531123238j:plain

 

感想

割と面倒だったピクセル単位の移動ですが、これで簡単にできそうです。

関連

マニュアル(英語、ただし絵が多い)

github.com1mを1ピクセルとすればピクセルパーフェクトを表現できるだろ!という暴論的なアイディア。どちらにしろ物理演算や微調整な移動をドット絵でやるとろくな事にならないので、これはこれで良いと個人的に思ってる。

tsubakit1.hateblo.jp

この手のドット絵はフォーマット通りにスプライトを作るので、下の手法が使いやすい

tsubakit1.hateblo.jp

 

PixelPerfectCameraに関する疑問質問お問い合わせはコチラ

https://forum.unity.com/threads/pixel-perfect-preview-package.533433/

 

コチラのスライドでもチラっとPixelPerfectCameraを紹介しました

www.slideshare.net

【Unity】Unityでベクターグラフィック(SVG)を利用する

https://github.com/Unity-Technologies/vector-graphics-samples/blob/master/Documentation/vectorgraphics.md

f:id:tsubaki_t1:20180522235702g:plain

UnityのPackageManagerにSVGを利用するライブラリが追加されました。
Unity 2018.1でプレビュー版を使用することが出来ます。

 

 

どんな事が出来るの?

機能については下の動画を見てもらう方良さそうです。
結構色々なことが出来るみたいです

www.youtube.com

使い方

PackagesのManifest.jsonの中身に以下の行を追加します。

そうするとステージングのPackageManagerにアクセス出来るので、あとはVectorGraphicsをImportするだけです。

Package ManagerからVector Graphicをインポートするだけです

 

f:id:tsubaki_t1:20180523000237j:plain

 

パッケージのインポート後は、SVG形式のファイルをSpriteとして使用することが出来るようになります。

f:id:tsubaki_t1:20180523000844j:plain

 

ShaderはUnlit/Vectorという新しいシェーダーを使用して表現しているので、シェーダーを差し替える場合には注意が必要そうです。

またTessellation SettingsのTargetResolutionを高く設定することで、ズームしたときにより滑らかに見えます。
SVGなのでズームしてもボケませんが、低解像度向けは少しカクカクします。逆に高解像度向けは非常にハイポリで表現されます)

f:id:tsubaki_t1:20180523001300j:plain


なおUIには現在使えないみたいです。

関連

現状プレビュー機能でちょくちょく変化してます。要望とかはフォーラムで出すと良さそうです。

https://forum.unity.com/threads/vector-graphics-preview-package.529845/

 

マニュアルです

https://github.com/Unity-Technologies/vector-graphics-samples/blob/master/Documentation/vectorgraphics.md

 

チラっと紹介しました

www.slideshare.net