Unityに関連する記事です

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

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



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

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



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 を作成してきます。


参考完成図(Sceneビュー の白い枠がカメラの描画部分であり、それが Game ビューに表示されています)


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


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



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


ヒエラルキー画像



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

 順番に機能の説明を行い、その後、制作に入ります。



 Grid_DontMove_Base は最も背面になるタイルを配置します。
こちらには、川や海といったタイル、また、山などの進行できないタイプのタイルの背面用のタイルを配置しておきます。


Grid_DontMove_Base のタイル配置例



 これは、山などのタイルが真四角ではないため、山のタイルのみを配置すると、背面に透けてしまう部分が出来てしまうため、
それを防ぐための準備を行っています。


山のタイルのみを配置した場合(透明(黒い)部分が出来てしまう)



山のタイル + 背面のタイルを合わせて配置した場合(2つのタイルが重なることで、1つのタイルのように見える)




 2つ目は Grid_DontMove です。こちらには、Grid_DontMove_Base で配置したタイルの上に配置するためのものです。
先ほど紹介した山のタイルは、こちらに配置します。そうすることにより、Grid_DontMove_Base のタイルを重なって表示されるため、
山の背景が透明(黒)にならずに、山 + 背景の草地として1つのタイルのように見えるようになります。


Grid_DontMove_Base のタイル配置例




 3つ目は Grid_Move_Base です。

 これは移動可能なタイルを配置します。例えば、草地、砂地、石地、湿地、橋といった、1枚で配置できるタイルを敷き詰めるようにします。
ここは次の手順で制作する、キャラの移動可能な範囲です。つまり、このまま範囲内であれば、どこであってもキャラは移動していくできることになります。


Grid_Move_Base タイルの配置例




 なお、今回は作成していませんが、Grid_Move のタイルは草地などのみにしておくことにより、
4つ目の Grid を作成して、Grid_Move_Base のタイルを下地のように利用して、上面に別のタイルを重ねるように配置します。

 例えば、森・湿地・低い山といったタイルになります。
これらのタイルも、単体で利用すると、四角い画像ではないため、余っている部分が透明(黒)になってしまいます。
そのため、Grid_DontMove と Grid_DontMove_Base の関係性と同じように、相互に重ね合うように利用して運用していくことで、
1つのタイルのように振る舞うことが出来ます。









 続いて、複数のタイルマップを分けて、レイヤー構造を使って制作する利点について説明します。

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

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


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

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


参考完成図(すべての Grid / Tilemap を重ねたとき)


 
 まずは最初に、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、Chara、UI と3つを順番に登録して設定してください。
下にある設定項目ほど画面に描画される優先順位が高くなりますので、設定する順番には注意してください
順番が違うと優先順位が変わるため、正常に画面に表示されません。


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



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



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


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


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

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


ヒエラルキー画像



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


インスペクター画像



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


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


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

 ヒエラルキー上の MainMap ゲームオブジェクトを選択して右クリックをしてメニューを開き、
2D Object => Tilemap => Rectanguler を選択してください(Unity のバージョンによっては Tilemap までしか選択できない場合があります)。
MainMap ゲームオブジェクトの子オブジェクトとして Grid ゲームオブジェクト、その子オブジェクトとして Tilemap ゲームオブジェクトが作成されます。


ヒエラルキー画像


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


ヒエラルキー画像



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


インスペクター画像



インスペクター画像




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

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


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


タイル設置

 

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


タイル削除



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


 基本的にはこの2つのアイコンだけで操作できます。

 キャラの移動の制限をかけたい場所(移動できない)に、自由にタイルを設置してください。
タイルは川など、1種類で設定しておいて、あとで変更した方が作りやすいです。
Sceneビュー 内の白い枠がカメラの映す範囲になりますので Game ビューも一緒に見ながら、少なくともカメラの映る範囲を塗りつぶします。

 このゲームでは、大きな戦場(世界)を舞台に、キャラが遠方まで移動を行っていく戦略ゲームをモチーフにしています。
そのため、カメラの映す範囲内ですべてのゲーム画面が収まるようでは、大きな戦場を再現出来ません。
まずは、カメラのサイズの2〜3倍の大きさになるように、タイルマップの制作をしてみてください。

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


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


Grid_DontMove_Base のタイル配置例



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


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


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

 ヒエラルキー上の MainMap ゲームオブジェクトを選択して右クリックをしてメニューを開き、
2D Object => Tilemap => Rectanguler を選択してください(Unity のバージョンによっては Tilemap までしか選択できない場合があります)。
MainMap ゲームオブジェクトの子オブジェクトとして Grid ゲームオブジェクト、その子オブジェクトとして Tilemap ゲームオブジェクトが作成されます。

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


ヒエラルキー画像



インスペクター画像



 Tilemap ゲームオブジェクトを選択して、Tilemap Renderer コンポーネント内にある
Additional Settings の Order in Layer の値を 1 に設定してください。

 同じ Sorting Layer である場合、数字の大きい方が前面に表示されるため、
この設定を行うことにより、同じ Default の Sorting Layer の設定になっている Grid_DontMove_Base ゲームオブジェクトで作成したタイル群よりも前面に、
こちらのタイル群が表示されるようになります。


インスペクター画像



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

 こちらでは、移動できないタイルの装飾を行います。
先ほど作成した Grid_DontMove_Base ゲームオブジェクトのタイル上に重ねて表示したいタイルを同じ位置に配置していってください。
山のタイルを設置するのであれば、Grid_DontMove_Base ゲームオブジェクトのタイルマップの上に置くようにしてください。

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


参考画像



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


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


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

 ヒエラルキー上の MainMap ゲームオブジェクトを選択して右クリックをしてメニューを開き、
2D Object => Tilemap => Rectanguler を選択してください(Unity のバージョンによっては Tilemap までしか選択できない場合があります)。
MainMap ゲームオブジェクトの子オブジェクトとして Grid ゲームオブジェクト、その子オブジェクトとして Tilemap ゲームオブジェクトが作成されます。

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


ヒエラルキー画像



インスペクター画像



 Tilemap ゲームオブジェクトを選択して、Tilemap Renderer コンポーネント内にある
Additional Settings の Sorting Layer の値を Walk に設定してください。

 これで他の2つの Grid よりも前面にタイルが表示されるようになります。


インスペクター画像



 タイルの設置方法は先ほどと同じです。
ヒエラルキーで Grid_Move_Base ゲームオブジェクト内の Tilemap ゲームオブジェクトを選択することを忘れないでください。

 移動用のタイル上を選択して配置していってください。最初は草地など、1種類で制作しておくといいでしょう。
また、橋なども配置してもよいですが、街などの建物のタイルは配置しないようにしてください。あくまでも移動できる地形のタイルのみ配置します。
建物などは別の手順で作業を行います。


 ポイントは、今回の Walk に設定したタイルのみ「キャラは移動できる」という点です。
よって、他の2つの Grid のタイルがない部分に配置を行っていくようになります。(残っている部分にタイルを配置していく)

 ゲーム性としては、Walk 部分が多く見えているほどキャラの移動できる範囲が多くなりますので、難易度は優しくなります。
そのため、出来上がりをみてから、移動できる範囲の調整を行うといいでしょう。
ただし、こちらも作りこむ必要はありません。あとで変更・追加可能です。


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


Grid_Move_Base タイルの配置例



参考完成図(Sceneビュー の白い枠がカメラの描画部分であり、それが Game ビューに表示されています)



 以上でタイルマップは完成です。最後にカメラの調整を行います。


7.カメラの設定を変更する


 MainCamera ゲームオブジェクトの Camera コンポーネントをインスペクターで確認します。
Size という項目があり、初期値が 5 になっています。タイルマップの1マスの大きさは、この Size によって決定されています。
現在のままでもよいですが、画面全体を俯瞰的視点(トップビュー視点)でみることを考えると、タイルは少し小さめにしておいた方がより多く画面内に表示されます。

 こちらの Size の値を 6 に変更してください。画面のタイルの1マスが小さくなります。


Size 5 の場合



Size 6 の場合



 こちらの Size を基準とし、ゲーム画面で実際にゲームを制作していきながら、適切なサイズをみつけていくようにします。

 以上でカメラの設定は完了です。1マス辺りのタイルの大きさを変更する場合にはこちらの項目と、
タイルの画像の Pixel Per Unit の値を変更することで調整できますので、自分で設定を変更しながら丁度良い画面を模索してみてください。



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

 次は 手順5 −操作用の味方キャラの作成− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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