【初心者向け】Unityでドット絵をキレイに表示する

今回はドット絵のゲームを作ろうとしている方に向けて、Unityでぼやけたドット絵をキレイに表示する方法を解説します。
とても簡単な設定のみではっきりくっきりドット絵を表示させることができます。
ドット絵のレトロなゲームを作りたい方向けの投稿になるのかな?と思います。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう!

人気のUnity講座はこちら

Udemy講座

ゲーム画面の設定

今回使うUnityのバージョンは2021.2.1fです。

空の新規2Dプロジェクトを作成しましょう。
UnityHubから新規作成をクリックし、テンプレートは2D。
プロジェクト名と保存先を設定し作成します。
プロジェクトが起動したらまずゲーム画面を設定しましょう。

縦のゲームを想定して今回ゲーム画面は1080×1920に変更していきます。
Unityエディターのゲームビューを選択し、その中のAspectボタンをクリックします。
ゲームビュー1
デフォルトではFree Aspectになっていると思うので一番下の+をクリックします。
新たに画面のサイズを設定できる小窓が表示されますので、その中のWidth(横幅) & Height(高さ)という項目にそれぞれ1080、1920と入力しOKを押します。
新しいAspectを追加する
これで画面は縦長になったと思います。

プレイヤーのドット絵を準備

ではドット絵のプレイヤーの画像を入れていきましょう。
今回は16×16の飛行機みたいなドット絵を自作しました。

ProjectウィンドウのAssetsフォルダの下にSpritesというフォルダーを作成し、その中にプレイヤーの画像をドラッグアンドドロップします。
このような状態になります。
Assetsフォルダにプレイヤーのドット絵追加

この状態でHierarchyにPlayerをドラッグすると豆粒のように表示されます。
ドット絵をゲーム上に配置

あまりにも小さいですね。これを解消していきます。

Spritesフォルダーに入っているPlayerを選択すると色々な情報がInspectorに表示されます。
今回は赤枠で囲った箇所を修正していきます。
ドット絵のInspector画面

それぞれの意味を簡単に説明していきます。

Pixels Per Unit

直訳すると「1ユニットあたりのピクセル数」です。
これは選択した画像を1ユニットに対し何ピクセルの割合で表示します、というものです。
と言われてもピンと来ない人も多いと思いますので、簡単な具体例を出して説明してみます。

まず1ユニットと言うのはシーンビューの1マスのことです。
Unityの1Unitの説明

Playerをこの1ユニットに収まるようにしてみたいと思います。
Playerは16*16のドット絵ですので、この値を16にするとちょうど1ユニット(1マス)にピッタリの大きさになります。
100だと小さい
1UnitとPixels Per Unitの関係
デフォルトが100です。
1ユニットあたり100ピクセルの割合で表示するわけですから、当然画像は小さく表示されます。

16でピッタリ
1Unitサイズにドット絵を調整
16にすればちょうど1ユニットと同じ大きさで表示されます。

乱暴な説明をするとこの値を小さくすればゲーム上の画像は大きくなる。
逆に大きくすればゲーム上の画像は小さくなるという感じです。

Filter Mode

このままだと画像はぼやけて見えてみます。
せっかくのドット絵なのでくっきり見せたいですよね。
そこでFilter Modeを変更します。
Point (no filter)を選択しましょう。

補足ですがそれぞれのモードの説明は以下の通りです。
Point (no filter) → 画像のピクセルをブロック状に表示します。
Bilinear → 平均化してなめらかに表示します。
Trilinear → Bilinearと似ていますが、ミップマップレベルでブレンドして表示します。

ドット絵の場合はPointを選択しておきましょう。
Filter ModeをPointに変更

Compression

これは画像の圧縮するタイプを選択します。
ドット絵の場合はNoneを選択して圧縮しないようにするときれいに表示されます。

他にも設定項目はありますが、詳しく知りたい方は公式のURLを貼っておきますので、参考にしてください。

ドット絵がキレイに表示されました。
今回の内容はGitHubに置いておきます。
よろしければ参考にしてみてください。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい?」
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう!

Udemy

Udemy
特徴:教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円~で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴:現役エンジニア伴走型レッスン
レッスン方法:チャット(週2回)/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター(相談者)が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴:ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問(24時間)
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴:動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

最後までご覧頂いてありがとうございました。

セール中!
ノンフィールドRPG

基礎からリリースまで!

オリジナルRPGを作ってストアに公開しよう!