この記事について
過去に出したゲーム 角兎図書館について、ドット絵がぼやけていて気になるというマシュマロを頂きました。
ぼやけているとご指摘のあったグラフィックですが、実は作者のやかろさんが意図したグラフィックなのです。
今回の記事はこちらで紹介されているペーパー２Dテクスチャ設定の適応が内部ではどんなことをやっているのか詳しく解説していきます。
この機能を使うもよし、一部の機能だけ使うもよし、皆さんがUnrealEngineで２Dドット絵のゲームを作る際に理想の画作りをする参考になれば幸いです。
アンリアルエンジンでドット絵がぼやける？
ぼやけるとはどういう状態なのか、実物を見てみましょう。
左が元の画像 右がゲームで登場したドット絵です。
並べてみるとたしかにゲームで登場したキヤラはぼやけているように見えますね。
UnrealEngineにインポートした画像は、まず、テクスチャ形式のアセットになります。
そしてデフォルトだと自動的に３Dゲーム向けにいい感じの設定が適応された状態になります。（こちらの記事ではこの３D向けの設定について詳しく言及しません）
これにより、ドット絵で書かれたグラフィックは元の画像のようにくっきりとしたドットで描かれなくなります。
ぼやけを無くす方法
冒頭で紹介されていた「Paper2Dテクスチャ設定を適用（Apply Paper2D Texture Settings）」でくっきりしたドット絵にさせることができます。
こちらの機能は2Dドット絵向き設定を一括で適用してくれます。これを適用するとくっきりとしたドット絵で表示されます。
Paper2Dテクスチャ設定を適用（Apply Paper2D Texture Settings）では何をやっているのか
「Paper2Dテクスチャ設定を適用（Apply Paper2D Texture Settings）」が自動設定してくれる内容は以下の２つです。
- Texture Group → 2D Pixels（unfiltered）
- 圧縮設定（Compression Settings） → UserInterface 2D（RGBA）
これらはProject設定（Project Settings）の中で設定したものが使われます。デフォルトのパラメータは
- Texture Group = 2D Pixels（unfiltered）
- 圧縮設定（Compression Settings） ＝ UserInterface 2D（RGBA）
となっており、ドット絵そのままの見た目にしたい場合はこのままの設定で問題ありません。
TextureのFilter設定
見た目に関して、もう一つ注目しなければならないパラメータがTextureのFilter設定です。
このパラメーターがドット絵のぼやけに非常に大きく絡んできます。それぞれ比較してみるとこのような感じになります。
それぞれの処理内容について詳しくは言及しませんが、このフィルタ設定によって輪郭のジャギ感などが補間されて輪郭が滑らかに描画されるようになります。
Filter設定はデフォルトだと「Default（from Texture Group）」が設定されています。
選べるパラメーターは
- Nearest
- Bi-linear
- Tri-linear
- Default(from Texture Group)
の４つです。
Default(from Texture Group)は書いてあるとおり、Texture Groupの設定によって使用するFilterが変わる設定です。Texture Groupは上で設定したものなので、「Paper2Dテクスチャ設定を適用（Apply Paper2D Texture Settings）」によって変更された2D Pixels（unfiltered）のパラメータを拾ってきます。
このTextureGroupの中身は、エンジンコードの「BaseDeviceProfiles.ini」にあるようです。
+TextureLODGroups=(Group=TEXTUREGROUP_Pixels2D,MinLODSize=1,MaxLODSize=16384,LODBias=0,MinMagFilter=point,MipFilter=point,MipGenSettings=TMGS_SimpleAverage)
Pixels2DはpointのFilter設定がされており、これはFilterの設定でNearestを選択した場合と同じ見た目になります。
余談 角兎図書館のはなし
作者のやかろさんがとてつもなく感覚派の人間なので、感覚で一番良いと思った画になるようこれらのTexture設定をいじります。
たとえばこのシーン、左二人はNearest、右の子はTri-linearだったりします。
ドットドットしすぎた絵はあまり好きではないそうで、あえてぼかしだったりグラデーションを入れる目的で各パラメータを設定するそうです。
ドット絵の見た目に関するパラメータはこの記事ではすべてご紹介できませんでしたが、他にもマテリアル、ポストプロセス、ライティングなどで調整しています。
見た目に関してご要望やバグっぽい等あれば、やかろさんへ問い合わせてみると答えが返ってくるかもしれません。
コメント