Unityでアイソメトリックのマップを描写する方法を徹底解説です。
Unityに今までぜんぜん触ったことのない初心者の人向け。
できるだけ詳しく、分かりやすく説明していきます。
自分がやり方を忘れた時にもこの記事で思い出せるように…。
画像がなくて分かりづらい！ということがないように、unityの画面の画像をたっぷりのせながら解説していきます。
こんな人向けの記事！
- ドットでゲームを制作したい
- アイソメトリックのゲームを作りたい
- Unityのこと何もわからない
- １枚の画像の中に複数のタイルチップを詰め込みたい
今回使うunityのバージョンは2021.1.21f1です。
ドット絵のアイソメトリックのマップタイルの描き方の説明はこっちで説明しています。
【アイソメトリック】ドット絵マップタイルの描き方・作り方解説【Unity】
グリッドに合わせて描く方法なのでマウスだけでさくっとマップ素材が作れちゃいます。
マップ素材を自作したい！という方はどうぞ！
こんな内容だよ
下準備
まずは下準備。
ソフトを用意して、アイソメトリックのマップチップ（素材）を作ったりします。
使うソフト
- Unity（無料）
- Asprite または EDGE（どっちも有料）
Unityはいわずもがな、ゲームを制作するためのソフト。
今回は拡張機能なども使用せずにUnityの標準機能だけでアイソメトリックマップを作るので、完全に無料です。
「Asprite」「EDGE」は、ドットの素材を制作するためのお絵かきソフトです。
もっというと、ドット絵専用のお絵かきソフトなのです。
どちらも有料です。
どっちかを絶対使え！というわけではないので、お手持ちのお絵かきソフトでも大丈夫です。
ただ、SAIやクリップスタジオはドットのイラストに特化しているというわけではないので、もしドットでゲームを制作したい！というのであれば、ドット専用のお絵かきソフトを使えるようにしておくのはおすすめ。
何かと色々便利です。
素材をインポートする
タイルマップの素材を用意して、Unityにインポートするまでの説明です。
インポートというのは、今回の場合はマップ素材として画像を読み込ませる、ということ。
素材の用意
今回、使用するタイルマップ素材は、こちら。
私が描いたやつなので、画像を保存して好きに使っちゃってください。
自分で描いてもOK。
まずはこちら。
- 画像の大きさ：256×128
- 素材ブロックひとつ分の大きさ：32×32
まずはこれを使って、とりあえずUnityのタイルマップにこの素材を描写していくところから。
Unityに素材をインポートする
素材を用意できたら、Unityにドラッグ＆ドロップして素材をインポートします。
unityの「Assets」フォルダに入れちゃいましょう。
これで素材のインポートは完了です。
インポートができたら、今インポートした素材の画像の設定をしていきます。
素材の設定をする
今インポートした素材をクリックしてください。
すると、「インスペクター」というタブに「インポート設定」というのが表示されます。
この「インスペクター」タブの設定をいじっていきます。
設定値を、以下の画像のようにしてください。
枠で囲ってある部分だけをいじってます。囲ってないとこは初期設定のままです。
設定項目の解説
- スプライトモード：今回は１枚の画像の中に複数のタイルチップを描いていく予定なので「複数」に設定
- ユニット毎のピクセル数：「32」素材タイル一個のサイズ指定のようなもの。今回は「１枚の画像のなかにひとつ32ピクセルの素材が入ってるよ」ということをunityに教えてあげてます。
- フィルターモード：「ポイント（フィルターなし）」
- 圧縮：「なし」もしくは「高品質」に設定。今回は「なし」で。なし・高品質以外の設定にすると、ドット絵のフチがぼやぼやになって見栄えが悪くなります。
上記が設定できたら、「適用」ボタンを押して設定値を保存してください。
スプライトエディターで画像を切り分ける
今回は、１枚の画像の中に複数のタイルチップを詰め込んでいきたいので、素材の画像を切り分ける必要があります。
これは、「この画像の中に入ってるタイルチップは、これとこれとこれ！ここで区切って使うよ」unityに教えてあげる処理です。
インスペクタータブ内にある「Sprite Editor」をぽちっとおしてください。
Sprite Editorを押すと、「スプライトエディター」というタブ名のウィンドウが表示されます。（スプライトエディターの画像は後述）
インポートした素材の画像が表示されてるやつですね。
このスプライトエディターから、画像を切り分けていきます。
スプライトエディターの「スライス」というボタンを押して、画像のように設定してください。
設定項目の解説
- タイプ：「Grid By Cell Size」
- ピクセルサイズ：「X 32 Y 32」
上記のように設定したら、「スライス」ボタンを押して、設定を適用させます。
これで、画像の切り分けは完了です。
タイルチップの周りに白い枠が表示されていたらOK！
この白い枠は「これが素材タイルひとつぶん」であることを表示してくれています。
白い枠が表示されているのを確認したら、右上の「適用する」ボタンを押してください。
あとはバツボタンでウィンドウを閉じちゃって大丈夫です。
ちなみに、Assetsではこのように表示されてますが、実際に文字通りに画像が切り分けられたのではないです。
（Assets上に表示されている素材画像の三角形を押すと同じように表示されます）
あくまでも「いっこの区切りはここだよ」という設定をしただけ。
素材の画像自体の設定はここまで。
次からは、いよいよこの素材を「タイルチップ」として設定していくフェーズに入ります。
タイルパレットの作成
タイルパレットの作成をしていきます！
タイルパレットとは、簡単に言うと「マップチップの素材はこれ！とunityに教えてあげるもの」です。
あとでマップを描写するときは、このタイルパレットから描写したいタイルを選択して描いていくという使い方をします。
メニューから「ウィンドウ > 2D > タイルパレット」とクリックしていき、タイルパレットのウィンドウを開いてください。
タイルパレットのウィンドウを初めて表示する場合は、上の画像の場所ではなく、独立したひとつのウィンドウとして表示されます。
タイルパレットは、マップを描写していく上でめっちゃくちゃ使うことになります。
なので上の画像のように、どこか好きな場所に固定で表示させてしまうと便利です。
タイルパレットを表示できたら、「新しいパレットを作成」をクリックしてください。
クリックすると、設定項目がわちゃっと表示されるので、以下のように設定していきます。
- 名前：自分の好きな名前を入力。今回は「isome tile」にしました。
- グリッド：「アイソメトリック」
- セルサイズ：「手動」の「X1 Y0.5 Z1」
設定できたら、「作成」ボタンを押してください。
すると、どこに保存するかのウィンドウが開きます。
どこでもいいです。
今回は「iso_tilemap」というフォルダーを新規に作成して、その中に保存することにします。
フォルダーの名前は好きに決めてください。
「iso_tilemap」を選択して、「フォルダーの選択」を押せば、完了です。
これでタイルパレットの作成ができました。
これで「iso_tilemap」というフォルダーの中に「isome_tile」というタイルパレット（タイル素材）を入れられた、みたいなイメージです。
そして、「isome_tile」というタイルパレットの中に、タイルチップの素材画像を入れていきます。入れるというより、紐づける、といったほうが分かりやすいかも。
ちなみに、今作ったフォルダーは、「今後、新たにタイルチップ画像を追加した時に、タイルマップ設定はちくいちこのフォルダの中に保存していこう！」という趣旨のフォルダーです。
でもこれは、あくまでも私の中での位置づけなだけですので、ここはお好きに！
タイルパレットの作成はこれでできたので、次はタイルパレットに素材を紐づけしていきます。
タイルパレットに素材を紐づけ
紐づけは簡単です。
Assetsフォルダ内にある素材の画像を、タイルパレットにドラッグアンドドロップするだけ。
タイルパレットのタブに、先ほど作成した「isome_tile」が表示されていることを確認してください。
（上の画像で「確認！」と書いてある場所です）
ここにドラッグ＆ドロップすると、ウィンドウが開きます。
ここで、名前を変更することもできます。
が、今回は名前はいじらず、そのまま「保存」ボタンを押します。
保存ボタンを押すと、タイルパレットにはこんな風に表示されたかと思います。
これでタイルパレットの作成は完了！
タイルマップの作成
次は、タイルマップを作成していきます。
タイルパレットとタイプマップってなにがちがうの？を説明すると、
- タイルパレット：タイルの素材の定義
- タイルマップ：マップ画面の描写
って感じです。
別のゲーム制作ツールであるツクールのシリーズを触ったことのある人向けに説明すると、こんな感じの立ち位置になります。
ちなみに、Assetsフォルダー内にある、一番最初にunityにインポートした画像は、あくまでも「ただの画像」です。
この時点では、unity側はこれがタイルチップ素材なのか、キャラクター画像なのか、判別がついてません。
では、タイルマップを作成していきましょう。
「ヒエラルキー」ビューの上で左クリックしてください。
右クリックして表示された項目から、「2D オブジェクト > タイルマップ > アイソメトリック」を選択します。
ちなみに、ヒエラルキービュー内の左上にあるプラスマークからでも同じ動作ができます。
選択すると、ヒエラルキービュー内に「Grid」というオブジェクトと、「Tilemap」という子オブジェクトが新しく追加されます。
これで、タイルマップの作成は完了です。
タイルマップの設定
続いて、タイルマップの設定をしていきます。
ヒエラルキーにある「Tilemap」をクリックしてください。
すると、インスペクターに設定項目が表示されます。
ここから、タイルマップの設定をしていきますよ。
Tilemapコンポーネントの設定
まずはTilemapコンポーネントの設定から。
コンポーネントというのは、「それぞれ目的別にわけられた設定項目」みたいなものです。
コンポーネントごとに設定できるものが異なります。
なので、初期状態で設定項目がない場合は、「コンポーネントの追加」ボタンから設定したい内容のコンポーネントを追加して設定していくのです。
Tilemapコンポーネントの設定を、以下のようにしてください。
設定項目の解説
- タイルアンカー：「X0.5 Y0.5 0」シーンに表示されるグリッドと、マップチップの位置関係を設定します。詳しくは後述。
- 向き：「XY」マップチップが描画される方向を設定する項目。
タイルアンカーとは
タイルアンカー（Tile Anchor）とは、「シーン」のビューにタイルを描画する際の、グリッドとタイルの位置関係を設定する項目です。
アイソメトリックの場合、タイルアンカーには、大体この３つの値を設定します。
- X0 Y0：グリッドはタイルの下にくる
- X0.5 Y0.5：グリッドはタイルの中央にくる（デフォルトの設定）
- X1 Y1：グリッドはタイルの上にくる
この白いグリッド線は、シーンビューに持ってきたときに確認できます。
「マップの描写」の項目で説明します。
どんな感じかやってみたい場合は、あとでマップに描写できる段階のときに、この数値をいじってみてください。
X0 Y0に設定すると、タイルの上にグリッドが来ます。
X0.5 Y0.5に設定すると、グリッドはタイルのちょうど中間にくるようになります。
X1 Y1に設定すると、タイルの下にグリッドが来ます。
私はいつも１にしてます。
シーンでマップを描画する時に感覚的にわかりやすいので。
Tilemap Rendererコンポーネントの設定
続いて、Tilemap Rendererコンポーネントの設定をします。
設定項目の解説
- ソート順（Sort Order）：「右上（Top Right）」
ソート順（Sort Order）では、シーンビュー上でタイルを重ねて描いた時の、優先順位を設定します。
今回は「右上にあるタイルより、左下にあるタイルの方が手間に表示される」という設定です。
やらなければならない各種設定はここまで！
次は、マップチップを描写して、いよいよゲーム画面を作ります。
マップを描写してみよう
いよいよ、マップチップの描写のターンです。
実際のゲーム画面となる部分を描写しましょう！
ペンでお絵かきする感覚でマップを描写できます。
まずは、タイルパレットを開いてください。
タイルパレットが行方不明の場合は、上部メニューの「ウィンドウ > 2D > タイルパレット」から表示できます。
タイルパレットを開いたら、上に並んでいるアイコン群から「スポイトのようなアイコン」を選択。
次いで、緑の四角をクリックしたら準備OK。
「シーン」ビューにカーソルをもっていくと、緑の四角がカーソルについてまわるはずです。
シーンビューの上で、左クリックをすれば描写できます。
あとは好きに描写するだけ！
これでアイソメトリックのマップの完成です！やったー！
複数のタイルチップを描く方法や、段差やスロープの描き方などはこっちで説明しています。
【アイソメトリック】ドット絵マップタイルの描き方・作り方解説【Unity】 マップ素材を自作したいんじゃ！という方はどうぞ！
