２Ｄトップビューシューティング 手順４
最終更新：
orika_ex_miyako 2023年09月07日(木) 13:55:29履歴
Unity の用意しているタイルマップの機能を利用してゲーム画面(ステージ)の制作を行います。
マニュアル以外にも、多くの有益な記事がありますのでそういったものを参考にするといいでしょう。
タイルマップを扱うためにはタイルを作成し、利用できる状態にする必要がありますので、
この手順では Tile Pallet とタイルの作成方法を学習します。
以下の内容で順番に実装を進めていきます。
手順４ ーTile Pallete の作成ー
新しい学習内容は、以下の通りです。
６．Tile Pallete の作成
１．設計
TileMap(タイルマップ) とは Unity の機能の１つです。２Ｄゲームのシーンに Sprite 画像を元にしたタイルを作成し、そのタイルを等間隔に並べて設置することが出来ます。
また、コライダーを持たせることも出来るため、例えば、ＲＰＧの山や川といった侵入不可能な地形の設定をタイル自体に行うことが出来ます。
TileMap を扱うためには、Tile Palette(タイル・パレット) というウインドウを開いて、その中に作成できる Pallete(パレット)に、Unity へインポートした画像ファイルを設定・登録します。
このパレットには複数の画像を登録できます。パレットに画像ファイルを設定すると、それがタイルとして登録されます。
パレットという名称が表すように、ここに登録したタイルは絵の具のように１つずつ選択をして、 Scene ビューに自由に配置していくことが出来ます。
パレットは複数作成することができますので、例えば、フィールド用の画像をあつめたパレット、街の画像をあつめたパレットというように
パレットを使用する用途ごとに種類分けをして作成をしておくと、画像ファイルの管理しやすく、パレット自体も使いやすくもなり便利です。
２．Tile Palette ウインドウを表示する
それでは最初に、パレットを作成するために必要な Tile Pallete ウインドウの表示を行います。
Unity Editor の左上にあるメニューより、 Window => 2D => Tile Palette を順番に選択します。
Tile Pallete というウインドウが開きますので、任意の位置に設置してください。Unity のバージョンにより、若干レイアウトが異なります。
Tab をドラッグアンドドロップすることで、他の Tab と同じ位置にも移動できます。
Tile Pallete ウインドウ� �Unity のバージョンにより、若干レイアウトが異なりますが、同じ内容です
Tile Pallete ウインドウ�◆�Unity のバージョンにより、若干レイアウトが異なりますが、同じ内容です
そのまま独立したウインドウの状態にしておいてもよいですが、下記の画像のように Sceneビュー と上下に並べて配置すると、
Tile Pallete で選択したものをそのまま Scene ビューに設置できるようなレイアウトになるため、製作作業が楽になります。
この辺りは実際に自分で作業を行いながら、一番やりやすい方法を見つけてください。
レイアウト参考図(Sceneビュー と別の部分に配置して、両方が Tab の切り替えなしで見れる状態にする)
３．新しい Palette を作成する
Tile Pallete ウインドウ内の左上にある Create New Palette ボタンをクリックしてください。クリックするとポップアップが表示されます。
このポップアップの内容が、新しく作成するパレットの情報の設定部分になります。
Name の部分にパレットの名前を登録します。製作する場面ごとにパレットを使い分けますので、フィールドをデザインする場合には、Field_0、や Field、
街内をデザインする場合には City_0、Town などの名称にしてください。その他の設定変更は不要です。
Name 変更後に Create ボタンを押すと保存先を選択するウインドウが開きますので、任意の場所に保存します。
今回は Assetsの下に Tiles というフォルダを作って保存しています。
保存先のフォルダ
これで新しいパレットが作成されました。
新しく作成されたパレット(Create New Pallete の部分が、作成したパレット名になっている)
パレットの中身は空っぽですので、次に画像を登録します。
４．作成したパレットに画像データを読み込み、タイルにする
パレット内の Drag Tile, Sprite or Sprite Texture assets here. と書かれているところに、画像ファイルをドラッグアンドドロップをすることでタイルとして登録できます。
このとき、分割していないファイルや、TextureType が Sprite に設定していない画像ファイルは登録できません。
画像については、前回の手順で作成した自分でインポートした画像を利用します。
画像ファイルを TilePalette ビューにドラッグアンドドロップすると、Generate New Tile という保存先を設定するウインドウが開きます。
これは、画像ファイルをタイルとして登録しますので、その保存先を選択してください、という内容になります。
ファイル名はそのままで構いませんので、任意のフォルダに保存してください。今回は Assets/Tiles の中にすべて保存しています。
必要に応じて、さらにフォルダを小分けにすると管理しやすいでしょう。
画像ファイルはまとめてドラッグアンドドロップすることも出来ます。
参考手順動画
動画ファイルへのリンク
覚えていただきたいことは、TileMap のパレット用に新しく１つのファイルが作成されており、
そのパレットに登録した画像ファイル１つにつき、タイル用のファイルが新しく作成されるという部分です。
画像ファイルをそのまま利用しているのではなく、画像ファイルを元にタイル用のファイルが作られています。
そのため、タイルになっているものは、インスペクターの情報も画像ファイルとは異なっています。
タイル登録後のフォルダ画像(Field_0 がパレットのファイル、他はタイルとして登録されたファイル)
タイル用のファイルのインスペクター(拡張子は .asset になっています。元の画像ファイルは .png です)
画像ファイルを自由に読み込ませてタイルとして登録してください。タイルのみをタイルマップとしてゲーム画面に配置することが出来ます。
下記の画像では地形ごとに分けていますが、空いている場所であればどの部分に登録しても問題ありません。
自分の使いやすい位置に登録してください。また、登録したタイルはドラッグアンドドロップで移動できます。
パレットに複数の画像をタイルとして登録後
以上で TileMap の作成に利用するパレットは完成です。次はこのパレットに登録したタイルを Scene ビュー内に並べていく手順を行います。
以上でこの手順は終了です。
次は 手順５ −TileMap の作成− です。
Unity 公式マニュアル
タイルマップ
https://docs.unity3d.com/ja/current/Manual/class-T...
マニュアル以外にも、多くの有益な記事がありますのでそういったものを参考にするといいでしょう。
タイルマップを扱うためにはタイルを作成し、利用できる状態にする必要がありますので、
この手順では Tile Pallet とタイルの作成方法を学習します。
以下の内容で順番に実装を進めていきます。
手順４ ーTile Pallete の作成ー
６．Tile Pallete の作成
新しい学習内容は、以下の通りです。
・Tile Pallete の作成方法
６．Tile Pallete の作成 
１．設計
TileMap(タイルマップ) とは Unity の機能の１つです。２Ｄゲームのシーンに Sprite 画像を元にしたタイルを作成し、そのタイルを等間隔に並べて設置することが出来ます。
また、コライダーを持たせることも出来るため、例えば、ＲＰＧの山や川といった侵入不可能な地形の設定をタイル自体に行うことが出来ます。
TileMap を扱うためには、Tile Palette(タイル・パレット) というウインドウを開いて、その中に作成できる Pallete(パレット)に、Unity へインポートした画像ファイルを設定・登録します。
このパレットには複数の画像を登録できます。パレットに画像ファイルを設定すると、それがタイルとして登録されます。
パレットという名称が表すように、ここに登録したタイルは絵の具のように１つずつ選択をして、 Scene ビューに自由に配置していくことが出来ます。
パレットは複数作成することができますので、例えば、フィールド用の画像をあつめたパレット、街の画像をあつめたパレットというように
パレットを使用する用途ごとに種類分けをして作成をしておくと、画像ファイルの管理しやすく、パレット自体も使いやすくもなり便利です。
２．Tile Palette ウインドウを表示する
それでは最初に、パレットを作成するために必要な Tile Pallete ウインドウの表示を行います。
Unity Editor の左上にあるメニューより、 Window => 2D => Tile Palette を順番に選択します。
Tile Pallete というウインドウが開きますので、任意の位置に設置してください。Unity のバージョンにより、若干レイアウトが異なります。
Tab をドラッグアンドドロップすることで、他の Tab と同じ位置にも移動できます。
Tile Pallete ウインドウ� �Unity のバージョンにより、若干レイアウトが異なりますが、同じ内容です
Tile Pallete ウインドウ�◆�Unity のバージョンにより、若干レイアウトが異なりますが、同じ内容です
そのまま独立したウインドウの状態にしておいてもよいですが、下記の画像のように Sceneビュー と上下に並べて配置すると、
Tile Pallete で選択したものをそのまま Scene ビューに設置できるようなレイアウトになるため、製作作業が楽になります。
この辺りは実際に自分で作業を行いながら、一番やりやすい方法を見つけてください。
レイアウト参考図(Sceneビュー と別の部分に配置して、両方が Tab の切り替えなしで見れる状態にする)
３．新しい Palette を作成する
Tile Pallete ウインドウ内の左上にある Create New Palette ボタンをクリックしてください。クリックするとポップアップが表示されます。
このポップアップの内容が、新しく作成するパレットの情報の設定部分になります。
Name の部分にパレットの名前を登録します。製作する場面ごとにパレットを使い分けますので、フィールドをデザインする場合には、Field_0、や Field、
街内をデザインする場合には City_0、Town などの名称にしてください。その他の設定変更は不要です。
Name 変更後に Create ボタンを押すと保存先を選択するウインドウが開きますので、任意の場所に保存します。
今回は Assetsの下に Tiles というフォルダを作って保存しています。
保存先のフォルダ
これで新しいパレットが作成されました。
新しく作成されたパレット(Create New Pallete の部分が、作成したパレット名になっている)
パレットの中身は空っぽですので、次に画像を登録します。
４．作成したパレットに画像データを読み込み、タイルにする
パレット内の Drag Tile, Sprite or Sprite Texture assets here. と書かれているところに、画像ファイルをドラッグアンドドロップをすることでタイルとして登録できます。
このとき、分割していないファイルや、TextureType が Sprite に設定していない画像ファイルは登録できません。
画像については、前回の手順で作成した自分でインポートした画像を利用します。
画像ファイルを TilePalette ビューにドラッグアンドドロップすると、Generate New Tile という保存先を設定するウインドウが開きます。
これは、画像ファイルをタイルとして登録しますので、その保存先を選択してください、という内容になります。
ファイル名はそのままで構いませんので、任意のフォルダに保存してください。今回は Assets/Tiles の中にすべて保存しています。
必要に応じて、さらにフォルダを小分けにすると管理しやすいでしょう。
画像ファイルはまとめてドラッグアンドドロップすることも出来ます。
参考手順動画
動画ファイルへのリンク
覚えていただきたいことは、TileMap のパレット用に新しく１つのファイルが作成されており、
そのパレットに登録した画像ファイル１つにつき、タイル用のファイルが新しく作成されるという部分です。
画像ファイルをそのまま利用しているのではなく、画像ファイルを元にタイル用のファイルが作られています。
そのため、タイルになっているものは、インスペクターの情報も画像ファイルとは異なっています。
タイル登録後のフォルダ画像(Field_0 がパレットのファイル、他はタイルとして登録されたファイル)
タイル用のファイルのインスペクター(拡張子は .asset になっています。元の画像ファイルは .png です)
画像ファイルを自由に読み込ませてタイルとして登録してください。タイルのみをタイルマップとしてゲーム画面に配置することが出来ます。
下記の画像では地形ごとに分けていますが、空いている場所であればどの部分に登録しても問題ありません。
自分の使いやすい位置に登録してください。また、登録したタイルはドラッグアンドドロップで移動できます。
パレットに複数の画像をタイルとして登録後
以上で TileMap の作成に利用するパレットは完成です。次はこのパレットに登録したタイルを Scene ビュー内に並べていく手順を行います。
以上でこの手順は終了です。
次は 手順５ −TileMap の作成− です。
コメントをかく