Unity

2D Tilemap Extras を使用してアニメーションタイルを作成する

Siden oppdatert :
ページ作成日 :

現在表示しているページは選択中の表示言語には対応しておりません。

検証環境

Windows
  • Windows 11
Unity エディター
  • 2021.3.3f1
入力システムパッケージ
  • 1.3.0

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

この Tips の前提知識

マップ素材の借用について

以下のサイトからお借りしています。使用するのは上の１行分のみです。

アニメーションタイルについて

マップチップを採用しているゲームで遊んでいると、 その場で停止していても滝の流れが動いていたり火の揺らめきがあったりなどアニメーションされているマップチップをよく見かけると思います。 実装方法は違うことはありますがこれらは Unity ではアニメーションタイルによって実現されています。

マップチップにおけるアニメーションの多くは複数のマップチップを一定時間ごとに切り替えて動いているように見せています。 他にもピクセル単位で処理をさせてアニメーションしているものやテクスチャー座標を変化させてアニメーションするものもあります。 今回行うアニメーションはマップチップを切り替えることによって実現する方法になります。

アニメーションタイル用のマップチップの準備

今回は以下のようなマップチップを用意し、波の動きをマップチップの切り替えでアニメーションさせてみます。

アニメーションタイル用マップチップの分割

プロジェクトを作成したら先ほど作成したマップチップをプロジェクトに配置して分割しておきます。 この辺りの作業はタイルマップの時の説明と同じなので画像だけ載せておきます。

タイルパレットへの追加はまだしなくていいです。

Animated Tile の追加

プロジェクトから「作成 -> 2D -> タイル -> Animated Tile」を選択して追加します。

名前は何でも構いません。この名前を他で使用することはありません。

作成した Animated Tile を選択するとインスペクターの表示が切り替わります。 この矩形の枠内に分割したマップチップをドロップします。

個別にタイルをドロップしてもいいですが、分割元をドロップすれば分割したマップチップを一括で登録することが可能です。

マップチップを追加すると図のようになります。特になければ Animated Tile の作成はこれで終わりです。

タイルパレットへの追加

タイルパレットを作成します。タイルパレットタブが無い場合はメニューの「ウィンドウ -> 2D -> タイルパレット」から表示させてください。 パレットの名前はなんでもいいです。ゲームを作る際に複数のパレットが必要な場合はわかりやすいようにしておいてください。

タイルパレットの設定は Scenes フォルダ内に新たに SeaPalette フォルダを作成してその中に作成します。フォルダ名や場所は任意です。

タイルパレットを作成したらマップチップを追加します。通常のタイルマップでは分割したマップチップを配置していましたが今回は Animated Tile の方を配置します。

配置すると１チップのみ表示されていますが、アニメーションタイルの場合はこれだけでＯＫです。

マップチップ(アニメーションタイル)の配置

タイルマップの時と同様にヒエラルキーにタイルマップを追加します。

Tilemap を選択すればビューにグリッドが表示されます。

ではここにマップチップを配置してみます。パレットからアニメーションタイルを選択します。

ビューに配置します。見た目は普通のマップチップとなんら変わらないです。

実際に動かさないとアニメーションはされないので実行してみます。

実行してみると１秒ごとにマップチップが切り替えられてアニメーションされていることを確認できると思います。 このようにプログラムを作らなくても拡張機能のみでマップチップのアニメーションを実装できるのでお手軽です。

そのほかの設定

アニメーションスピードの変更

初期状態ではマップチップの切り替え間隔は１秒となっています。例えばこれを 0.5 秒ごとに変えたい場合は以下のようにします。

ヒエラルキーに追加した Tilemap を選択するとインスペクターの Tilemap コンポーネントに「アニメーション更新レート」というものがありここで変更することができます。

この数値は「１秒間に何回切り換えるか」の数値なので、0.5 秒で切り換えるなら１秒間に２回切り替えることになるので「2」を設定します。

実行してアニメーションの速さが変わるか確認してみてください。

マップチップごとのアニメーション時間をランダムにする

海辺や滝の流れなど隣接しているマップチップのアニメーション間隔は同じ方がいいですが、例えば火の揺らめぎなどオブジェクトごとにアニメーションの時間を変えたい場合があると思います。 その場合は時間をランダムにしたり開始位置を変えたりすることができます。

Animated Tile を選択してインスペクターの下の方を見るといくつか設定項目を確認することができます。

Minimum Speed や Maximum Speed は１秒間に切り替える枚数の上限と下限を指定することができます。 配置されたマップチップはこの間のいずれかのランダムな数値でアニメーションすることになるので、複数配置すればそれぞれ異なるスピードでアニメーションすることになります。

例えば Minimum を 1, Maximum を 2 にして実行すればそれぞれランダムスピードでアニメーションすることを確認できると思います。

ちなみに小数レベルでランダム決定されるので同じスピードになることはほとんどありません。

「Start Time」や「開始フレーム」はアニメーションの開始マップチップ位置を指定しますがあまり使うことはないと思います。 「コライダータイプ」は別な処理の話なので割愛します。

マップチップの種類ごとのアニメーション時間を設定する

例えば波の動きは１秒ごとに切り替えたいが、滝の流れは 0.5 秒ごとにしたい場合があると思います。 これは先ほどの説明の「Minimum Speed」「Maximum Speed」を設定すればよいです。 Minimum と Maximum を別な値にしてしまうとランダムになってしまうので、例えば切り替えスピード 0.5 秒にするなら Minimum と Maximum を 2 にすれば全て２倍速になってくれます。