【unity】もうドット絵はぼやけない!インポートからインスペクターでの設定と、シーンへの配置までのお作法

パリッパリにエッジが立ったドット絵好きの皆様。

おはようございます。砂塒です。

今回のテーマは「unityでドット絵をボヤけさせずにインポートする方法」です。

unityは2D画像をピクセルベースで表示しているわけではないのと、ドット絵ゲームを作るために最適化はされていないので、ちょいとした設定が必要になってくる。

unityでドット絵を扱っていく際には、今日紹介する手順を踏むことになるので、ガッチリとマスターしてほしい。

だいじょうぶ。簡単だから!
ピクセルパーフェクトはまた別なんだよ・・・。

1.unityへのドット絵のインポート(取り込み)

まずは、untiyへのドット絵の取り込みから。この取り込み作業を通常「インポート」と呼ぶ。
※ちなみに、反対語は書き出し(エクスポート)。

インポート方法①

プロジェクトウインドウの任意のフォルダ内で、
[右クリック] > [新しいアセットをインポート]をクリック。

すると、ファイル選択のウインドウが別窓で開く。
そこからインポートしたいファイルを選択

最後にファイル選択ウインドウの右下のインポートボタンをクリックすれば、インポート完了となる。

※アセットとは:
日本語で「資産」という意味の英単語。
unityにおいては画像、音声、プログラムなど、ゲームを作る部品になる様々なファイルのことを指す。ざっくり素材と考えればOK。

インポート方法②

エクスプローラーからunityのプロジェクトウインドウへ、ファイルをドラッグ
これでもアセットをインポートできる。

この2通りの方法を抑えておけば素材のインポートに関してはもうプロを名乗ってよし。

2.画像の設定(ドット絵をパリパリにするためのお作法)

インポートが完了したら、次は画像の設定を行う。
設定はインスペクターウインドウから実行する。
untiyでドット絵(ピクセルアート)を美しく表示させるには、この設定が最重要項目。
もう、ここさえ押さえてたら、あとはオマケみたいなものである。

では設定を見ていこう。

黄色枠は状況に応じて変化する設定

赤枠はいかなる時も変化しない設定(ドット絵を表示させる場合)

である。

基本的に画像の通りに設定すれば問題ない。

ポイントは、
・フィルターモードをポイント(フィルターなし)
・圧縮をなし
に設定することである。
この設定をすることでドット絵のぼやけが解消される。

最後に設定している画像の縦横のサイズを確認しよう。

インスペクター下部の画像が表示されている部分に数字が確認できるはずである。

もし画像が表示されていない場合は、インスペクター底部の画像名が書かれた2本ラインをクリックしてみてほしい。
画像ウインドウが展開されるはずである。

この数字がインスペクターで編集している画像のサイズだ。
なお、最初の数字が横方向、後の数字が縦方向である。

例 24(横)X 24(縦)
横にドット24個分、縦にドット24個分のサイズの画像。

さて、インスペクターに最大サイズという項目があるが、これは、画像の横もしくは縦のサイズがいくつか?という設定である。
上記の例でいえば、サイズは24だ。

最大サイズに設定する値は、画像のサイズよりも大きい値にする

これがポイントである。

上の例で言うと、32以上の値を最大サイズに設定していればOK。(画像は24だが、32以下の指定サイズが存在しないため)

サイズが128や256の画像に、最大サイズ32や64を設定すると、画像がボケてしまう。
値の設定は

最大サイズ >= 画像サイズ(縦横で大きい方の値)

と覚えておこう。

ここまでの設定が終わったら、インスペクター内の適用するをクリックして設定を確定させる。

3.ドット絵をシーンにぶっこむ

さて、あとは簡単な作業。

設定が終わったドット絵をプロジェクトからシーン(もしくはヒエラルキー)にドラッグするだけである。

ちゃんとドット絵が表示されたかな?

※今回の設定は、ドット絵のボヤけを解消するのが目的。
すべてが同じサイズの正方形ドットが密集した、ピクセルパーフェクト表示には、また別の手順を踏む必要があるのだ!

4.複数の画像を一括で設定する

上記の手順を踏むと、ボヤけとは無縁のドット絵が表示できる。

しかし、使いたい画像の枚数が増えた場合、同じことを何度もやる必要があるのか?という疑問があるかもしれない。

結論から言うと、一括で設定できる。

設定したい画像を複数選択した状態で、上記の設定を行えばよいだけである。

5.更にものぐさなクリエイターへ贈る設定効率化機能

とは言っても、追加の画像があったら、やっぱり都度の設定が必要になる。独自設定のプリセット機能はないのか!とお嘆きのものぐさクリエイターの皆様。ご安心ください。ちゃんとあります。

プロジェクトから、基本的な設定が終わった画像を任意に選んで、インスペクターを見てほしい。

上部に米粒サイズのスライダーアイコンがあるのがわかるだろうか。

ここをポチると、プリセットを選択・保存するウインドウが出る。
次に、プリセット選択ウインドウの下部のSave Current to…ボタン(上画像の黄色枠)をクリックする。(これが現在選択されているインスペクターの設定をプリセットとして保存するためのボタンである。)

保存先を決めるウインドウが開くので、フォルダとプリセット名を自分で決めて、保存をクリックすると、独自の設定プリセットが保存される。

あとは、画像の設定時に米粒スライダーアイコンから、自分が作ったプリセットを選択すれば、一瞬で設定された状態となるので適用するを押すだけでOK
とても便利な機能である。

6.まとめ

以上がドット絵をunityにインポートする方法である。

誤解を恐れずに言うと、unityでゲームを作るのは、「こうやったら」「こうなる」をたくさん覚えていくことである。
頭と手を動かして、エディター操作を己の体にしみ込ませていくべし!

そして、この先には、ゲームウインドウにピクセルパーフェクトでドット絵を表示させる方法があるのだが。

それはまた別の話🎮

BOOTHでドット絵素材のお店やってまーす。

↓下のハートボタンは、サトヤのやる気スイッチに直結しています。
押すなよ~!絶対に押すなよ~!

・・・押してよぉぉぉぉ~!!!

コメントを残す