Unity 2D Tilemap Extras の Animated Tile

以前に Unity のアセット 2D Tilemap Extras に含まれているタイルマップ作成をサポートする 「Weighted Random Tile 」「Rule Tile」を紹介しました。

Unity Weighted Random Tile を作成して使った様子

Unity Weighted Random Tile を作成して使った様子

Unity Rule TIle のルール例を満たすタイルマップ上の配置例

Unity Rule TIle のルール例を満たすタイルマップ上の配置例

今回は同じく 2D Tilemap Extras に含まれている Scriptable TileAnimated Tile」を紹介します。
※ Unity は 2021.3.14f1、 2D Tilemap Extras は 2.2.2 です。

Animated Tile とは

公式サイトの冒頭の説明を引用します。

An Animated Tile runs through and displays a list of Sprites in sequence to create a frame-by-frame animation.

Google 翻訳

アニメーション タイルが実行され、スプライトのリストが順番に表示され、フレームごとのアニメーションが作成されます。

https://docs.unity3d.com/Packages/com.unity.2d.tilemap.extras@2.2/manual/AnimatedTile.html より

アニメーションのフレーム順にスプライトを表示するタイルのようです。

Rule TileOutputAnimation にした場合も似たようなタイルの挙動をします。
しかし、開始時間(開始時間に対応するフレームから開始)を指定する Start Time や開始フレームを指定する Start Frame など Rule Tile (Animation) にはなかったプロパティもあります。

Animated Tile の作り方

Project ウィンドウのフォルダの余白部分で右クリックをしてポップアップメニュー[Create]→[2D]→[Tiles]→[Animated Tile] を選択します。
新規の Animated Tile アセットがそのフォルダ内に作成されるので、適当にリネームしましょう。

Unity 2D Tilemap Extras の Animated Tile アセットの新規作成手順

Unity 2D Tilemap Extras の Animated Tile アセットの新規作成手順

Animated Tile アセット新規作成直後に Inspector ウィンドウを見るとアニメーションに用いる Sprite 画像は 0 個です。

Sprite を設定する枠を作るためにアニメーションに用いる Sprite の個数を (1) の Number of Animated Sprites に設定するか (3) の + ボタンを押して一つずつ増やします。
初回の設定のみ (2) の枠に Sprite をドラッグ&ドロップすることでも設定できます。

Unity 2D Tilemap Extras の Animated Tile を新規作成した直後の Inspector ウィンドウ

Unity 2D Tilemap Extras の Animated Tile を新規作成した直後の Inspector ウィンドウ

Sprite を設定する枠を増やしたら、枠内の右側にある Sprite を割り当てる枠Project ウィンドウから Sprite をドラッグ&ドロップして Sprite を上から表示順に設定します。
Sprite を割り当てる枠の右下の Select ボタンを押して Seclet Sprite ウィンドウを表示し、一覧から選択することもできます。

Unity 2D Tilemap Extras の Animated Tile に Sprite を設定する手順

Unity 2D Tilemap Extras の Animated Tile に Sprite を設定する手順

他の設定も行い、保存します。

Minimum Speed / Maximum Speed

最小/最大の再生スピードです。配置されたタイルごとに、この範囲でランダムな再生スピードが設定され、それぞれの再生スピードでアニメーションされます。

Start Time

指定された時間に対応するフレームからアニメーションを開始します。
Start Frame が 0 以外の場合 Start Frame が優先されます。

Start Frame

指定されたフレームからアニメーションを開始します。

Collider Type

衝突を検知するコライダーの設定です。

  • None
    コライダーを設定しません。
  • Sprite
    絵柄にあわせた形のコライダーを設定します。
  • Grid
    マスの形のコライダーを設定します。

新規パレットに登録して塗る

Tile Palette ウィンドウが表示されていない場合は、メニュー[Window]→[2D]→[Tile Palette] を選択します。

Unity TilePalette ウィンドウの出し方

Unity TilePalette ウィンドウの出し方

Tile Palette ウィンドウ左上のパレットを選択するプルダウンリストを開き Create New Palette を選択します。

Unity Tile Palette ウィンドウの左上のパレットを選択するプルダウンリストを開き Create New Palette を選択します。

Unity Tile Palette ウィンドウの左上のパレットを選択するプルダウンリストを開き Create New Palette を選択します。

Create New Palette ウィンドウパレットの名前、マスの形などを設定し Create ボタンを押します。

Unity Create New Palette ウィンドウでパレットの名前、マスの形などを設定し Create ボタンを押します。

Unity Create New Palette ウィンドウでパレットの名前、マスの形などを設定し Create ボタンを押します。

パレットを保存するフォルダを選択すると、新規パレットが指定された名前でそのフォルダに保存されます。

先ほど作成した Animated Tile アセットProject ウィンドウから Tile Palette ウィンドウの配置したいマスの部分にドラッグ&ドロップ登録します。

Unity 2D Tilemap Extras の作成した Animated Tile アセットを Tile Palette に登録します。

Unity 2D Tilemap Extras の作成した Animated Tile アセットを Tile Palette に登録します。

Tile Palette ウィンドウの Active Tilemap や Hierarchy ウィンドウで塗る対象の Tilemap ゲームオブジェクト選択し、 パレットから登録した Animated Tile選択します。
ブラシツールを選択していることを確認してください。
Scene ウィンドウのマス目にあわせて左クリックなどをすると選択しているタイルで塗ることができます。

Unity タイルマップに塗る手順

Unity タイルマップに塗る手順

Tilemap ゲームオブジェクトがない場合Hierarchy ウィンドウのツリーの余白で右クリックし、ポップアップメニュー[2D Object]→[Tilemap]→[Rectangular(マスの形が正方形の場合)]を選択すると Tilemap ゲームオブジェクトが Grid ゲームオブジェクトの直下に作成されます。

Unity 新規のシーンでタイルマップを作る手順

Unity 新規のシーンでタイルマップを作る手順

Animated Tile のテストプレイ

今回は次のような設定の Animated Tileタイルマップに配置しました。

Unity 2D Tilemap Extras の Animated Tile アセットの設定の例

Unity 2D Tilemap Extras の Animated Tile アセットの設定の例

Unity エディタ再生ボタンテストプレイします。
※再生ボタンの前に一時停止ボタンを押してから再生ボタンを押すと最初停止した状態から始められます。

それぞれ 1 ~ 3 のランダムな再生スピードで、最初は Start Frame の設定にあわせて 3 フレーム目からアニメーションしました。

Unity 2D Tilemap Extras の Animated Tile を配置してテストプレイした例

Unity 2D Tilemap Extras の Animated Tile を配置してテストプレイした例

Unity Aimated Tile StartFrame にあわせて 3 番目の画像からアニメーションが開始しました。

Unity Aimated Tile StartFrame にあわせて 3 番目の画像からアニメーションが開始しました。

まとめ

今回は 2D Tilemap Extras の Animated Tile新規作成設定テストプレイで動作を確認しました。

参照サイト Thank You!

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました