Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。

手順4 ーTile Pallete と TileMap の作成ー
 6.Tile Pallete の作成
 7.TileMap の作成



 新しい学習内容は、以下の通りです。

 ・Tile Pallete を利用した Tilemap の作成方法
 ・Sorting Layer の設定



6.Tile Pallete の作成

1.設計


 TileMap(タイルマップ) とは Unity の機能の1つです。2Dゲームのシーンに Sprite 画像を元にしたタイルを作成し、そのタイルを等間隔に並べて設置することが出来ます。
また、コライダーを持たせることも出来るため、例えば、RPGの山や川といった侵入不可能な地形の設定をタイル自体に行うことが出来ます。

参考サイト
Unity公式マニュアル
タイルマップ
https://docs.unity3d.com/ja/2019.4/Manual/class-Ti...

 マニュアル以外にも、多くの有益な記事がありますのでそういったものを参考にするといいでしょう。



 TileMap を扱うためには、Tile Palette(タイル・パレット) というウインドウを開いて、その中に作成できる Pallete(パレット)に、Unity へインポートした画像ファイルを設定・登録します
このパレットには複数の画像を登録できます。パレットに画像ファイルを設定すると、それがタイルとして登録されます

 パレットという名称が表すように、ここに登録したタイルは絵の具のように1つずつ選択をして、 Scene ビューに自由に配置していくことが出来ます。

 パレットは複数作成することができますので、例えば、フィールド用の画像をあつめたパレット、街の画像をあつめたパレットというように
パレットを使用する用途ごとに種類分けをして作成をしておくと、画像ファイルの管理しやすく、パレット自体も使いやすくもなり便利です


2.Tile Palette ウインドウを表示する


 それでは最初に、パレットを作成するために必要な Tile Pallete ウインドウの表示を行います。
 
 Unity Editor の左上にあるメニューより、 Window => 2D => Tile Palette を順番に選択します。
Tile Pallete というウインドウが開きますので、任意の位置に設置してください。
Tab をドラッグアンドドロップすることで、他の Tab と同じ位置にも移動できます。


Tile Pallete ウインドウ





 そのまま独立したウインドウの状態にしておいてもよいですが、下記の画像のように Sceneビュー と上下に並べて配置すると、
Tile Pallete で選択したものをそのまま Scene ビューに設置できるようなレイアウトになるため、製作作業が楽になります
この辺りは実際に自分で作業を行いながら、一番やりやすい方法を見つけてください。


レイアウト参考図(Sceneビュー と別の部分に配置して、両方が Tab の切り替えなしで見れる状態にする)



3.新しい Palette を作成する


 Tile Pallete ウインドウ内の左上にある Create New Palette ボタンをクリックしてください。クリックするとポップアップが表示されます。
これが新しく作成するパレットの情報の設定部分になります。

 Name の部分にパレットの名前を登録します。製作する場面ごとにパレットを使い分けますので、フィールドをデザインする場合には、Field_0、や Field、
街内をデザインする場合には City_0、Town などの名称にしてください。その他の2か所の設定の変更は不要です
   
 Name 変更後に Create ボタンを押すと保存先を選択するウインドウが開きますので、任意の場所に保存します。
今回は Assetsの下に TileMaps/Fields というフォルダを作って保存しています。


保存先のフォルダ



 これで新しいパレットが作成されました。


新しく作成されたパレット(Create New Pallete の部分が、作成したパレット名になっている)



 パレットの中身は空っぽですので、次に画像を登録します。


4.作成したパレットに画像データを読み込み、タイルにする


 パレット内の Drag Tile, Sprite or Sprite Texture assets here. と書かれているところに、画像ファイルをドラッグアンドドロップをすることでタイルとして登録できます
このとき、分割していないファイルや、TextureType が Sprite に設定していない画像ファイルは登録できません。

 画像ファイルをドラッグアンドドロップすると、Generate New Tile という保存先を設定するウインドウが開きます
これは、画像ファイルをタイルとして登録しますので、その保存先を選択してください、という内容になります。
任意のフォルダに保存してください。今回は Assets/TileMap/Fields の中にすべて保存しています。

 覚えていただきたいことは、TileMap のパレット用に新しく1つのファイルが作成されており、
そのパレットに登録した画像ファイル1つにつき、タイル用のファイルが新しく作成されるという部分です。
画像ファイルをそのまま利用しているのではなく、画像ファイルを元にタイル用のファイルが作られています
そのため、タイルになっているものは、インスペクターの情報も画像ファイルとは異なっています。


タイル登録後のフォルダ画像(Field_0 がパレットのファイル、他はタイルとして登録されたファイル)



タイル用のファイルのインスペクター(拡張子は .asset になっています。元の画像ファイルは .png です)



 画像ファイルを自由に読み込ませてタイルとして登録してください。
下記の画像では地形ごとに分けていますが、空いている場所であればどの部分に登録しても問題ありません。
自分の使いやすい位置に登録してください。また、登録したタイルはドラッグアンドドロップで移動できます。


パレットに画像を登録後



パレットに画像を登録後



 以上で TileMap の作成に利用するパレットは完成です。次はこのパレットに登録したタイルを Scene ビュー内に並べていく手順を行います。


7.TileMap の作成

1.設計


 TileMap に利用できるタイルをパレットに登録しましたので、こちらを活用して、TileMap を作成してきます。


参考完成図


 
 今回は作成しませんが、六角形のタイルや、クォータービューのような奥行きのあるタイルも作成できます。
下記のサイトが非常に参考になりますので、目を通しておいてください。


参考サイト
れー@DKRevel 様 ゲームの作り方
Unity Tilemapの使い方
https://dkrevel.com/tilemap/



 TileMap ですが、1つのTileMap にすべてのタイルを配置する方法もありますが、
今回はレイヤー構造を使って、複数の TileMap をつくり、それを重ねて1つのゲーム画面として構成を行います。


ヒエラルキー画像



 ヒエラルキー画像を見ていただくとわかるように、3つの Grid というゲームオブジェクトがあり、
これらが TileMap を構成しています。

 Grid_Base は最も背面になるタイルです。これは下地となる範囲を設定しますので、画面一杯に敷き詰めるようにします。
例えば、草地、砂地、石地などです。ここはキャラの移動できる範囲です。


Grid_Base




 続いて、Grid_Walk では、下地の上面に描画し、キャラの移動できるタイルを重ねるように配置します。
例えば、森・湿地・低い山といったタイルになります。ここも同じく、キャラの移動できる範囲になります。


Grid‗Walk




 最後の Grid‗Collider はその通り、コライダーを設定して、キャラが侵入できないようにしたいタイルを設置します。
例えば、川、海、高い山などです。ここにはコライダーを設定するので、キャラは侵入できないようになります。
また、Grid_Base の周囲を四方ぐるっと囲むように配置することで、キャラの移動できる範囲を制限できます。


Grid_Collider




 このレイヤー構造による利点は、タイルの設置と管理のしやすさ、そしてコライダーの設定です。

 TileMap には機能として、タイルの種類ごとにコライダーを設定できます。
例えば高い山のタイルにコライダーを設定すれば、Sceneビュー に配置される高い山のタイルは自動的にすべてコライダーを設定された状態になりますので、
高い山のタイル1つ1つに個別でコライダーの設定を行う必要がありません。


 作成後、これらを重ねるにあたり、Sorting Layer の機能を利用することで、画面に描画する優先順位を任意に変更できます
これは通常の Layer とは別の機能です。

 そのため、Base => Walk => Collider という優先順位にした Sorting Layer を設定すると、完成図のように1つのゲーム画面として構築することが出来ます。


参考完成図


 
 まずは最初に、Sorting Layer を作成し、それから順番に1つずつ TileMap を作成していきます。


2.TileMap 用の Sorting Layer を作成する


 登録の手順は2つあります。どちらでも構いません。

 どのゲームオブジェクトでも構いませんのでヒエラルキーより選択して、インスペクターの上部にある Layer をクリックしてください。
プルダウンメニューが開きますので、一番下にある Add Layers … を選択してください。

 あるいは Unity Editor の左上にあるメニューより、 Edit => Project Settings にて Project Settings ウインドウを開いて、
左側のメニューより Tag & Layers を選択してください。



 Tag & Layers の項目内の上から2番目に Sorting Layers があります。
一番下の Layers ではありませんので間違えないようにしてください。

 下記の画像のように、Walk、Collider、Chara と3つを順番に登録して設定してください。
下にある設定項目ほど画面に描画される優先順位が高くなりますので、設定する順番には注意してください
順番が違うと優先順位が変わるため、正常に画面に表示されません。


インスペクターより変更している場合



Project Settings より変更している場合



 以上で Sorting Layer の設定は完了です。


3.MainMap ゲームオブジェクトを作成する


 複数の TileMap を作成しますので、それを管理するためのフォルダ役のゲームオブジェクトを作成します。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。
新しいゲームオブジェクトが1つ作成されますので、名前を MainMap に変更してください。


ヒエラルキー画像



 もしも Transform コンポーネントの Position が (0, 0, 0) ではない場合には、(0, 0, 0) に設定しておいてください。


インスペクター画像



 以上でこのゲームオブジェクトは完成です。


4.Grid_Base ゲームオブジェクトを作成する


 MainMap ゲームオブジェクトの子オブジェクトとして、順番に TileMap を作成していきます。

 ヒエラルキー上の MainMap ゲームオブジェクトを選択して右クリックをしてメニューを開き、
2D Object => Tilemap を選択してください。MainMap ゲームオブジェクトの子オブジェクトとして
Grid ゲームオブジェクト、その子オブジェクトとして Tilemap ゲームオブジェクトが作成されます。


ヒエラルキー画像


 Grid ゲームオブジェクトの名前を Grid_Base に変更してください。


ヒエラルキー画像



 それ以外の変更は不要です。


インスペクター画像



インスペクター画像




 それでは、タイルを配置していきます。

 Grid_Base ゲームオブジェクトの子オブジェクトである Tilemap ゲームオブジェクトを選択した状態にしてください。
このときに選択されている Timemap 内にタイルが設置されるようになります。(Sceneビュー がマス目状になります)


 パレット内にある Paint with active brush のアイコン(左から3番目)を押してください。
このボタンが選択されていると、タイルを1つ選んで、Sceneビュー内に選択しているタイルを設置できます。
1クリックで設置、ドラッグしている間はつなげて設置できます。

タイル設置

 

 Erase with active brush のアイコン(右から2番目)を押すことで、消しゴム機能に切り替わります。
これも1クリックで1つのタイルを削除、ドラッグしている間はまとめて削除できます。


タイル削除



手順動画
動画ファイルへのリンク


 基本的にはこの2つのアイコンだけで操作できます。自由にタイルを設置して塗りつぶしてください。
Sceneビュー 内の白い枠がカメラの映す範囲になりますので、キャラが移動することを考えて、このカメラの映す範囲より大きく塗りつぶしておくようにしてください

 他のボタンについても操作しながら覚えていくことができますので、色々と試してみてください。
回転させたり、まとめて移動させたりと、操作になれてくると色々なことが出来るようになります。


参考サイト
Unity公式マニュアル
Tile Pallete
https://docs.unity3d.com/ja/2018.4/Manual/Tilemap-...
コガネブログ 様
【Unity】タイルマップの基本的な使い方
https://baba-s.hatenablog.com/entry/2018/04/08/130...


Scene ビュー画像(参考)



 ある程度になったら完成にしてください。あとで追加も可能です。


5.Grid_Walk ゲームオブジェクトを作成する


 Grid_Base ゲームオブジェクトとおなじように MainMap ゲームオブジェクトの子オブジェクトとして TileMap を作成します。

 ヒエラルキー上の MainMap ゲームオブジェクトを選択して右クリックをしてメニューを開き、
2D Object => Tilemap を選択してください。MainMap ゲームオブジェクトの子オブジェクトとして
Grid ゲームオブジェクト、その子オブジェクトとして Tilemap ゲームオブジェクトが作成されます。

 名前を Grid_Walk に変更してください。


ヒエラルキー画像



インスペクター画像



 Tilemap ゲームオブジェクトを選択して、Tilemap Renderer コンポーネント内にある
Additional Settings の Sorting Layer を Walk に設定してください。
この設定を行うことにより、Grid_Base ゲームオブジェクトで作成したタイル群よりも前面に、
こちらのタイル群が表示されるようになります。


インスペクター画像



 タイルの設置方法は先ほどと同じです。
ヒエラルキーで Grid_Walk ゲームオブジェクト内の Tilemap ゲームオブジェクトを選択することを忘れないでください。
間違えて Grid_Base ゲームオブジェクト内の Tilemap だと、そちらが上書きされて消えてしまいます。

 Base のタイル上に重ねて表示したいタイルを選択して配置していってください。

 Sorting Layer の設定がされていれば、ちゃんと描画の優先順位が高くなり、重なって表示されます。


Scene ビュー画像(参考)



 こちらも作りこむ必要はありません。あとで変更・追加可能です。


6.Grid_Collision ゲームオブジェクトを作成する


 Grid_Base ゲームオブジェクトとおなじように MainMap ゲームオブジェクトの子オブジェクトとして TileMap を作成します。

 ヒエラルキー上の MainMap ゲームオブジェクトを選択して右クリックをしてメニューを開き、
2D Object => Tilemap を選択してください。MainMap ゲームオブジェクトの子オブジェクトとして
Grid ゲームオブジェクト、その子オブジェクトとして Tilemap ゲームオブジェクトが作成されます。

 名前を Grid_Collision に変更してください。


ヒエラルキー画像



インスペクター画像



 Tilemap ゲームオブジェクトを選択して、Tilemap Renderer コンポーネント内にある
Additional Settings の Sorting Layer を Collision に設定してください。
この設定を行うことにより、Grid_Base ゲームオブジェクトで作成したタイル群よりも前面に、
こちらのタイル群が表示されるようになります。


インスペクター画像



Scene ビュー画像



 こちらも同様に、ある程度で構いません。

 以上で Tilemap の完成です。



 以上でこの手順は終了です。

 次は 手順5 −プレイヤーキャラの作成− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます