やりたいこと
以下のようにデコボコしたマップを作成したいと思ったので
そのやり方を以下に記載していきます!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_14h40_00.png)
タイルマップについて大体知ってるよって方は
最初のプロジェクトの設定と最後の本題だけ見てもらえれば
分かるかと思います!
ではいきましょー!
プロジェクトの設定
Isometric Tilemap Z as Yを使うためには
事前準備としてプロジェクト設定をちょっと変えてあげる
必要があります。
以下の通りに設定を変更しましょう!
Edit → Project Setting をクリックします
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-13_10h03_33.png)
Graphics → Camera Settingsを表示します
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-13_10h06_59-1024x764.png)
Transparency Sort ModeをCustom Axisへ変更します
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-19_11h14_49.png)
次にTransparency Sort Axisの値を以下に変更します!
(x , y , z) = (0 , 1 , -0.26)
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-19_11h17_58.png)
これでプロジェクトの設定自体は完了です!
なぜこんな設定をしなきゃいけないかは公式の説明がありますので
以下にリンクを載せておきます!
が、正直公式の説明を見ても私はよく理解できなかったので 汗
一旦置いといて「おまじない」として覚えておいた方がいいかもですね(笑)
![](https://walkable-2020.com/index/wp-content/uploads/cocoon-resources/blog-card-cache/4177469954c660defb1457f4f582d325.png)
Tilemapの素材をUnityに取り込む!
続いて素材をUnityに取り込みます
今回は以下の画像を取り込みました!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/ground1.png)
やり方は簡単!
Unityプロジェクト上にドラッグ&ドロップするだけです
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-20_10h03_21-1024x632.png)
Unityに取り込めた後は
この画像は64pxで描かれているため
Unity上のPixels Per Unitも64に設定します!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-20_10h06_15.png)
そもそもPixels Per Unitってなんやねんって思った方は
以下記事を参照していただければと思います!
TilePaletteの作成
では続いてTilePaletteを作成しましょう
TilePaletteは絵具を乗せるパレットのようなイメージです。
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/kasturi-roy-KnYzFpz6wes-unsplash.jpg)
絵具の代わりにTileがのります
まずはTilePaletteのWindowを開きましょう!
(初期状態ではTilePalette Windowは開いていません)
Window→2D→Tile PaletteをクリックでTilePaletteのWindowが開きます!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-20_15h08_34.png)
↓Tile PaletteのWindowが開きました!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-20_15h11_16.png)
この状態ではまだTilePaletteは作成されていません。
TilePaletteは何個も作成することができます
例えば石っぽいタイル、草のタイル、人工物のタイルなど種類毎に
タイルをまとめておきたい場合、パレット自体を分けると分かりやすいですよね。
ということでまずは
Create New Palette
をクリックして新しいパレットを作成しましょう!
すると色々入力を促されるのでNameとGridを変更してパレットを作成します!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-20_15h20_03.png)
正常に作成できるとCreate New Paletteのプルダウンが
作成したNameに変更されます↓
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-20_15h25_46.png)
TilePaletteにTileを置く
TilePaletteの作成ができたので
パレットにタイルを置きましょう。
これは何をしているかというと
パレットに使いたい絵具を出していっているようなイメージです。
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/andres-perez-se0GXEsgtPk-unsplash-576x1024.jpg)
やることは簡単で
タイル用のスプライトをTilePaletteにドラッグ&ドロップすればOKです!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-21_17h54_44-1024x573.png)
するとタイルオブジェクトの保存先を聞かれるので
任意の場所を指定しましょう!
これでタイルがTilePalette上に置くことができました!
同時にタイルオブジェクトも作成されました!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-21_17h56_49.png)
任意設定:タイルのアンカーを変更する
Tile Palette上のTileをよく見ると
下のマスとマスの中心にタイルが表示されています。
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_10h20_52.png)
これを普通と思う方もいるかと思うのですが私はちょっと違和感を覚えます。
これを直すにはTile Paletteのアンカーを変更してあげる必要があります。
さきほど作成したProjectウィンドウ上のTile Paletteをダブルクリックします
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_10h24_15.png)
するとHierarchyウィンドウにTile Paletteが表示されます。
子オブジェクトとして存在しているLayer1をクリックしましょう!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_10h25_32-1024x489.png)
するとInspectorウィンドウにLayer1の設定が表示されます。
この中でTilemapのTile Anchorを確認してみてください。
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_10h27_29-1.png)
Tile Anchorが (X , Y) = (0.5 , 0.5)となっていますね
これは下のマスの端から (X , Y) = (0.5 , 0.5)となる場所からTileが配置される
という意味になります、文字だと分かりにくいので
以下の画像を参照ください!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_10h31_04.png)
私はTileとマスががっちり一致したほうが分かりやすいので
Tile Anchorを (x , y) = (0 , 0)に変更しました!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_10h35_26.png)
Tilemapオブジェクトを作成する
では続いてTilemapオブジェクトを作成しましょう!
Hierarchyウィンドウ上で
右クリック→2D Object→Tilemap→Isometric Z as Y
をクリックしてTilemapを生成します!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_11h23_29.png)
Tilemapを生成するとSceneウィンドウ上がマス目になりました!
Tilemapを選択するとSceneウィンドウがマス目になります!
↓
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_11h31_52-1024x388.png)
ちなみにTilemapのIspectorウィンドウ上でも
Tile Anchorが存在していて
私はここも(x , y) = (0 , 0)に変更しています!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_11h36_56.png)
最後にTilemapのTilemap Rendererにある
ModeをChunk→Individual
に変更しましょう。
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_11h57_02.png)
なぜこうするかはUnityの公式の説明を参照ください!
![](https://walkable-2020.com/index/wp-content/uploads/cocoon-resources/blog-card-cache/3f391caa6ddbaf8c2fb1cd3719758b5a.png)
簡単にいうとChunkの方が処理が軽く、Individualの方が処理が重くなるということかと
思います!…違ってたらすいません!
ここまででやっと前提作業が完了しました!
本題:段差をつけたマップを作成する
まずは何も設定を変更せず単純にTileを生成してみましょう。
単純にTileを生成するにはTile Palette上のTileを選択し
Tilemap上をクリックするだけです!簡単!
↓
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/test.gif)
段差をつけるには?
では続いて段差をつけてみましょう!
まずTile Paletteの隠れている設定部分を表示してあげます
これ意外と分かりにくいので以下を参照に表示してください!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/test-1.gif)
この設定項目に
Lock Z Positionのチェックがあるので
これを外します!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/2022-07-22_11h49_19.png)
するとZ Positionが活性化され値を入力できるようになりますので
値を入力してTileをTilemapに生成してみましょう!
値に対応した段差が出来ることが分かるかと思います!
![](https://walkable-2020.com/index/wp-content/uploads/2022/07/test-2.gif)
Z Positionを変更することで
色々な段差のマップが作れますね!!
今回はこれで終了!!