テラシュールブログ

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

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

f:id:tsubaki_t1:20180528232856j:plain

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

 

 

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

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

 

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

 

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

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

導入

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

Packagesのmanifest.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ボタンを押せば良いです。

 

感想

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

関連

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

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

tsubakit1.hateblo.jp

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

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

 

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

www.slideshare.net