Unityに関連する記事です

2D Tilemap Extras


 2D Tilemap Extras はタイルマップの拡張機能です。タイルマップのアニメーションなどの機能が利用できるようになります。
Unity 公式の Github よりダウンロードか、Github から直接インポートすることで、Unity に拡張機能を追加できます。


手順


 下記の Github のリポジトリから Package をダウンロードするか、Unity の Packages フォルダ内にある manifest.json ファイルを編集して追加します。
ただし、 Package の場合にはエラーが発生するため、manifest.json でのインポートをお勧めします。


<Github にある 2D Tilemap Extras のリポジトリ(参考用)>
https://github.com/Unity-Technologies/2d-extras/tr...



 公式サイトの説明では master ブランチからの Package のインポートを推奨されていますが、そちらを利用すると Unity インポート時にエラーが発生します
 

エラーメッセージ
ReordableList does not contain

 そのため、ここでは manifest.json に追記する方法でインポートしています。
その場合、現在利用している Unity のバージョンのブランチを選択してインポートするように変更します


<manifest.json に追加する>
 "com.unity.2d.tilemap.extras": "https://github.com/Unity-Technologies/2d-extras.git#[利用している Unity のバージョン]"


 例えば、Unity のバージョンが 2020.3 なら、下記のように最後の部分を変えて manifest.json に記載します。


<manifest.json に追加する(最後の部分のバージョン指定を変えること)>
 "com.unity.2d.tilemap.extras": "https://github.com/Unity-Technologies/2d-extras.git#2020.3"


 manifest.json への記載場所の行はいずれでも問題ありません。

 下記の例では、一番下に追加しています。その場合、前の行の最後に半角カンマを記述し、処理が続くことを認識させます。
またスペースを空ける場合には半角スペースを利用します。(全角スペースの場合にはエラーになります)
記載されている内容も各プロジェクトにより異なりますので、記載する場所のみ参考にしてください


<manifest.json 記載例>
{
  "dependencies": {
    "com.unity.2d.pixel-perfect": "5.0.1",
    "com.unity.2d.sprite": "1.0.0",
    "com.unity.2d.tilemap": "1.0.0",
    "com.unity.ads": "3.7.5",
    "com.unity.analytics": "3.6.12",
    "com.unity.collab-proxy": "1.15.16",

     (中略)

    "com.unity.modules.video": "1.0.0",
    "com.unity.modules.vr": "1.0.0",
    "com.unity.modules.wind": "1.0.0",
    "com.unity.modules.xr": "1.0.0",  //  ← ここの行の終わりにカンマを追加し、次の行があることを認識させます。
    "com.unity.2d.tilemap.extras": "https://github.com/Unity-Technologies/2d-extras.git#2020.3"   // ← 最後の行の終わりにはカンマは不要です。
  }
}


<エラーへの対応方法が書いてあるサイト(海外のサイトです)>
https://community.gamedev.tv/t/solution-github-ins...


タイルアニメーションの利用方法

タイル用のマップチップ画像をインポートする


 任意のマップチップ画像をインポートしてください。
1つの画像内に複数のマップチップ画像がまとめられている場合には、画像をスライスしないと利用できませんので、
画像のファイルを選択し、インスペクター内の設定を行います。

 Texture Type を Sprite(2D and UI)、Sprite Mode を Multiple、Pixels Per Unit を 32 に設定してから、右下の Apply ボタンを押して保存し、
その後、SpriteEditor ボタンを押して、画像を適宜なサイズに Slice を行ってください。

 
<複数枚のマップチップ画像がまとめられている場合の設定>




 SpriteEditor の左上にある Slice ボタンを押し、Grid By Cell Count を選択します。
縦と横の画像の枚数をそれぞれ Column & Row の部分に設定してから、ウインドウ内にある Slice を押します。


<Slice の設定例(画像の枚数により変更してください)>



 問題なければ右上の Apply ボタンを押してセーブします。
もしも分割枚数が上手くいかない場合には、再度、Column & Row にて設定を変えてから、Slice をおこなってください。


Animated Tile ファイルを作成する


 Unity Editor の右上にあるメニュー内の Assets → Create を選択するか、Project ビュー内の任意のフォルダ内で右クリックをしてメニューを開き、Create を選択します。

 その後の処理は同じで、Create → 2D → Tilemap → AnimatedTile を選択します。


<Unity Editor の右上にあるメニュー内の Assets → Create を選択した場合>



<Project ビュー内の任意のフォルダ内で右クリックをしてメニューを開き、Create を選択した場合>


 どちらの場合でも、New Animated Tile ファイルが作成されます。
これがアニメーションするタイルになります。アニメーションの内容に沿って、任意の名前に変更してください。

 ファイルを選択するとインスペクターの表示内容が更新され、画像の登録や、設定が行えるようになります。


<Animated Tile のインスペクター画像>



Animated Tile にアニメーションさせたい複数の画像を登録する


 Animated Tile では、アニメーションは複数枚の画像から作成されます。
登録した画像をパラパラ漫画のように自動的に切り替えることでアニメーションを再現します。

 まずは最初に、Animated Tile ファイルを選択し、右クリックしてメニューを開いて、一番下にある Properties を選択します。
Animated Tile ファイルのインスペクターが別ウインドウで開きます。

 先ほどの手順で登録した画像から、アニメーションさせたい画像を複数枚選択します。
そちらの画像群を Animated Tile ファイルの Drag Sprite or Sprite Texture asstes to start creating an Animated Tile. と書いてある場所にドラッグしてドロップします。
選択していた画像がタイルとして Animated Tile に登録されます。


<手順動画 ーアニメーションさせたい画像をまとめて Animated Tile の指定された場所にドラッグアンドドロップするー>
動画ファイルへのリンク


<複数枚の画像をタイルとして登録した後の Animated Tile のインスペクター画像>




Tile Pallet に Animated Tile を登録する


 他のタイルと同様に Animated Tile ファイルも、Tile Pallet に登録することで利用可能になります。

 Tile Pallet ビューを開いて、Animated Tile ファイルをドラッグアンドドロップして登録します。
通常のタイルの作成手順と異なる点は、Animated Tile ファイル自体がすでにタイルのファイルであるため、
このドラッグアンドドロップの作業をおこなっても、タイルの保存のウインドウが開かない点です。
(通常は、画像を TilePallet に登録して、それがタイルのファイルとして作成される。)

 
<手順動画 ーTilePallet に Animated Tile ファイルをドラッグアンドドロップして登録するー>
動画ファイルへのリンク


<TilePallet 画像>



Scene ビュー に Animated Tile を配置する


 Animated Tile の配置方法は、通常のタイルと同じです。
Tile Pallet 内で配置したい Animated Tile を選択してから、Scene ビュー内の任意の位置でマウスの左クリックをすれば配置されます。
通常のタイルと併用して配置可能です。


<手順動画 ーTilePallet で Scene ビューに配置したい Animated Tile を選択して Scene ビューの任意の位置でマウスの左クリックをして配置するー>
動画ファイルへのリンク


ゲームを実行して動作を確認する


 Animated Tile のアニメーションはゲームを実行しないと動作しません。
Unity のセーブを行ってから、ゲームを実行し、Animated Tile がアニメーションするか確認します。


<確認動画>
動画ファイルへのリンク


 以上で完成です。
以降の手順は追加オプションの設定です。


Animated Tile の設定を行う


 通常の設定のままでも問題ありませんが、同じ Animated Tile でもアニメーションのパターンを変えたいケースがあると思います。
その場合には、設定を変更したい Animated Tile ファイルを選択して、インスペクターから設定を行います。


<Animated Tile ファイルのインスペクター画像>



 Maximum Speed の部分を 1 から変更すると、ランダムなアニメーションのパターンが設定できます。
Minimum Speed は 1 のままで問題ありません。

 また他のタイルと同じように、コライダーの設定も可能です。


ゲームを実行して動作を確認する


 設定を変更したら、再度ゲームを実行して、アニメーションのパターンが変わるかを確認します。


<確認動画>
動画ファイルへのリンク


自由に作成してみる


 以上の手順でアニメーションするタイルの完成です。
他にも自由に作成してみてください。


<確認動画>
動画ファイルへのリンク

 

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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