【unity】ファミコン風ドットバイドット表示

C#の本をとりあえず読み終えたので、教本を参考にunityに触っていきます。


まずはサンプルファイルから画像を表示させましょうとのことなのですが「やっぱそこは折角だし自分のドット絵でしょ!」と思ったのでやってみることに。
png画像をフォルダにドラックアンドドロップし、更にそこからシーン画面にドロップするととりあえずキャラが映るとのこと。


本では1つのpngファイルに1キャラだけだったので「ん?これいちいちドット絵1つずつ保存しないといけないの!?だるー!」とか思って試行錯誤しましたが、結論から言うとそんな必要はなかったので割愛。

フォルダに取り込んだキャラドット絵をワクワクしながら、シーンビューにドロップ。

スクリーンショット (1)


…なんだこのモザイク!

凄く引いたカメラで撮った画像を無理やり拡大したような粗さ。うーん話にならん。


どうやらドット絵を取り込むには色々と設定を変えないといけないようです。
ということで色々とググって試行錯誤。本当に色々なサイトの方法を試してみましたが、結局公式のが一番間違いなかったですね。

2D Pixel Perfect:レトロな 8 ビットゲームの制作に向けた Unity プロジェクトのセットアップ方法 | Unity Blog
https://blog.unity.com/ja/technology/2d-pixel-perfect-how-to-set-up-your-unity-project-for-retro-8-bits-games
なんかたまにリンク切れになっているのですが、ググったらでます。
取り込むドット絵の圧縮(compression)をなくし(none)、フィルターもオフ(point)
pixel/unitはサイトによってマチマチでしたがとりあえず36に。


ただこれでもゲームビュー上だとモザイクのままだったので色々触ってみた結果、やはりカメラと解像度の設定がうまくいってない様子。

ということでまた暫くググってみましたが結局答えは先程の公式サイトにありました。
pixel perfect cameraというコンポーネントが良さそうなので早速導入。
カメラの解像度をファミコンの16:9版である398:224にしてゲームビュー上の解像度をフリーアスペクト(または16:9の解像度)にするとまぁまぁいい感じに。

※追記
ゲームビューサイズをpixel perfect cameraと同じ398:224にした方が綺麗に表示されそうです。フリーアスペクトだと小数点以下の僅かな移動時にドットが崩れます。この時同じことして失敗した気がするんだけどなあ…

スクリーンショット (2)

しかし完全なドットバイドットにはならないので色々弄ってみたところ
余白に黒枠をいれるCrop Frameをいれた状態で、Run in Edit Modeというボタンを押すと完全なドットバイドットのカメラ設定になることを発見。
しかしゲームをプレイしようとするとeditmodeが切れてしまうので余白の設定とカメラの設定を人力で入力することで、やっとこさキレイなドットバイドット表示ができました。

スクリーンショット (4)


いやー長かった。疲れました。ていうか参考になるようなサイト少なすぎなんですけど皆unityでFC風ゲーム作ってないんか…?


ということで無事ドット絵を表示することができたので、次はアニメーションをさせます。

この記事が気に入ったらサポートをしてみませんか?