コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】タイルマップの基本的な使い方

はじめに

f:id:baba_s:20180407180734p:plain

この記事では、Unity 2017.2 から使用できる
タイルマップの基本的な使い方を紹介していきます

目次

おすすめ記事

Unity の公式ブログでより詳細な使い方が説明されているので、
こちらの記事も参考にして頂ければと思います

検証環境

  • Unity 2017.4.0f1

Tile Palette の作成

f:id:baba_s:20180407171153p:plain

Unity メニューの「Window>Tile Palette」を選択します

f:id:baba_s:20180407171227p:plain

表示された「Tile Palette」ウィンドウの「Create New Palette」を選択します

f:id:baba_s:20180407171312p:plain

「Name」にパレット名を自由に入力し、「Create」ボタンを選択します
保存先の選択ダイアログが表示されたら、保存先のフォルダを選択します

f:id:baba_s:20180407171401p:plain

これで、「Tile Palette」の作成が完了しました

Tile Asset の作成

Texture の設定

 
ここでは、上記の無料アセットを使用して紹介させていただきます

f:id:baba_s:20180407171448p:plain

Project ビューでタイルとして使用するテクスチャを選択します

f:id:baba_s:20180407171612p:plain

Inspector で必要な項目を設定し、「Apply」ボタンを押します

  • 「Sprite Mode」を「Multiple」に変更します
  • 「Pixels Per Unit」にタイルの大きさを入力します
    (例えば、1 つのタイルのサイズが 32 x 32 の場合は「32」と入力します)
  • 「Filter Mode」を「Point (no filter)」に変更します

Sprite の作成

f:id:baba_s:20180407171715p:plain

タイルセットのテクスチャを選択した状態で、「Sprite Editor」ボタンを押して、

f:id:baba_s:20180407171729p:plain

タイルごとにスプライトを分割して「Apply」ボタンを押します

f:id:baba_s:20180407172306p:plain

これで、スプライトの作成が完了しました

Tile Asset の登録

f:id:baba_s:20180407171842p:plain

タイルセットのテクスチャを「Tile Palette」ウィンドウにドラッグします

「Tile Asset」の保存先の選択ダイアログが表示されたら、
保存先のフォルダを選択します

f:id:baba_s:20180407172215p:plain

これで、Tile Asset の作成が完了し、

f:id:baba_s:20180407172101p:plain

Tile Asset の登録も完了しました

TileMap を作成

f:id:baba_s:20180407172415p:plain

Hierarchy の「Create>2D Object>Tilemap」を選択します

f:id:baba_s:20180407172452p:plain

これで、TileMap の作成が完了しました

タイルを塗る

f:id:baba_s:20180407172621p:plain

「Tile Palette」ウィンドウでブラシを選択し、塗るタイルを選びます

f:id:baba_s:20180407172726g:plain

Scene ビューをクリック、ドラッグしてタイルを塗ります
このような感じで、タイルを塗ることができるようになりました

ツールの説明

  名前 内容 ショートカットキー
f:id:baba_s:20180407173106p:plain 選択 タイルを選択 S
f:id:baba_s:20180407173123p:plain 移動 選択したタイルを移動 M
f:id:baba_s:20180407173129p:plain ブラシ Palette で選択したタイルを塗る
Shift を長押しすると、タイルを削除
B
f:id:baba_s:20180407173136p:plain 矩形 Palette で選択したタイルを矩形で塗りつぶす
Shift を長押しすると、タイルを矩形で削除
U
f:id:baba_s:20180407173144p:plain スポイト タイルを取得 I
f:id:baba_s:20180407173157p:plain 削除 クリックしたタイルを消す D
f:id:baba_s:20180407173202p:plain 塗りつぶし Palette で選択したタイルで塗りつぶす G

タイルの回転

f:id:baba_s:20180407173638g:plain

タイルを塗る時に「{」もしくは「}」キーを押すと、タイルを回転できます

当たり判定の設定

f:id:baba_s:20180407173755p:plain

「Tilemap」に「Tilemap Collider 2D」をアタッチすると、

f:id:baba_s:20180407174044g:plain

タイルに当たり判定を付与することができます

当たり判定の形の変更

f:id:baba_s:20180407175027p:plain

Project ビューで TileAsset を選択して、Inspector で「Collider Type」を変更することで、 タイルの当たり判定の形を変更することができます

項目 内容
None 当たり判定無し
Sprite スプライトの形が当たり判定になる
Grid 矩形の当たり判定になる

Tile Pallette の編集

f:id:baba_s:20180407175551p:plain

Tile Pallette の「Edit」ボタンを押すことで、

f:id:baba_s:20180407175749g:plain

複数の TileMap の作成

複数の TIleMap を作成することで、背面と前面を分けてタイルを塗ることができます

f:id:baba_s:20180407181914p:plain

Hierarchy で「Grid」を右クリックして
「Create>2D Object>Tilemap」を選択することで、

f:id:baba_s:20180407181921p:plain

複数の TileMap をシーンに配置することができます

f:id:baba_s:20180407182724p:plain

Tile Palette の「Active Tilemap」で、タイルを塗る対象の Tilemap を変更できます

描画順の変更

f:id:baba_s:20180407175308p:plain

TileMap の「Sorting Layer」と「Order in Layer」で描画順を変更できます

参考資料

 
この記事の内容は、上記のスライドを参考にさせていただきました

関連記事