画像の準備(インポート設定とSprite Editorでの処理)
素材の用意
マップとして使用したい画像を用意します。
画像ファイルの設定
- 使用する画像をプロジェクトにインポートしたら、インスペクター上でSpriteModeを「Multiple」に変更。
- 設定したら「Apply」ボタンを押して設定を適用させる。
SpriteEditor上の設定
手順1
先ほどのインスペクターの画面から「Sprite Editor」をクリックしてSprite Editorを開きます。手順2
SpriteEditor上で、「Slice」をクリックしたら「Type」を「Grid By Cell Count」に変更します。「Type」による分割方法の違いは下の表に示します。| Automatic | 画像から判断して自動で分割をします |
| Grid By Cell Size | 分割後の1枚ごとの画像のサイズをピクセル単位で指定します |
| Grid By Cell Count | 縦と横にそれぞれ何分割するか設定して分割 |
手順3
「Column & Row」の「C」と「R」をそれぞれ2にして、「Slice」をクリックします。設定が完了したら、SpriteEditorの右上にある「Apply」ボタンを押して設定を適用。
確認
正しく処理されていればインポートした画像がアセット内でこのように表示されます。
タイルパレットの作成
手順1(「Tile Palette」ウィンドウを開く)
「window」⇒「2D」⇒「Tile Palette」で「Tile Palette」ウィンドウを開きます。手順2(Paletteの作成)
- 「create new Palette」を押したら適当に名前を設定して「create」を押します。
- 保存するフォルダを選択する画面が出てくるので適当に設定をします(今回は「Assets/Tile」に保存)。
手順3(Paletteに画像を追加)
- 「画像の準備」で設定した画像をドラッグ&ドロップで先ほどの「TilePalette」のウィンドウに追加します。
- 再び保存するフォルダを選択する画面が出てくるので適当に設定をします(今回は「Assets/Tile」に保存)。
確認
完了するとAssets/Tile内がこのようになります。
Tilemapの作成
「2D Object」⇒「Tilemap」⇒「Rectangular」で現在開いているシーンに「Grid」を追加します。
ここがマップを描画するキャンパスとなります。
描画などの操作
Tilemapを作成したら次のような処理で様々な設定をすることができます。
関連記事(処理の自動化)
タイルパレットの作成をエディタ拡張により自動化できるようにしました。
詳細はこちらの記事を参考にしてください。
kiironomidori.hatenablog.com
