Unity タイルマップ関数のテストで用いるプレハブの作成

前々回UnityTilemap を編集して、影用タイルマップ作成する自作の関数について紹介しました。

今回はその自作関数をテストするため、その関数と同じ手順で Unity エディタの GUI を用いて答え合わせのタイルマップを作成する手順を紹介します。
Tile Palette ウィンドウで最初は非表示の垂直反転などのツールの表示方法や使い方黒色マテリアルの作成方法も紹介します。

※ Unity は 2021.3.14f1、Test Framework パッケージは Version 1.1.33、Visual Studio は Community 版 Version 17.2.5、 OS は Windows 10 です。

マテリアルの作成と変更

前回の図でも、影用タイルマップのタイルは黒色になっていました。
これは Inspector ウィンドウで影用タイルマップのマテリアルを、作成した黒色のマテリアルに差し替えたためです。

マテリアル作成するには、Project ウィンドウのフォルダで右クリックして、ポップアップメニュー[Create]→[Material] を選択します。
作成されたらリネームして Inspector ウィンドウで編集します。

Unity Project ウィンドウのフォルダの余白で右クリックしてメニューCreate→Material を選択して Material を作成します。

まずは、 Albedo の項目でを設定します。下図では灰色(A9A9A9)ですが、黒色(000000)にします。

Unity の Inspector ウィンドウで Material を編集します。Shaderは初期値のStandardで、Albedo の色を変更します。

Albedo の色が設定できたら、マテリアル名の下の Shader プルダウンリストSprites/Defaultシェーダを変更し、マテリアルを保存します。

Unty Inspector ウィンドウで Material の Albedo の色を変更したあと、シェーダーを Spreite Default に変更します。

作成した黒色のマテリアルは、影用タイルマップのゲームオブジェクトInspector ウィンドウで表示して、 Add Component ボタン近くにそのマテリアルドラッグ&ドロップして変更します。

Unity Inspector ウィンドウに影用のタイルマップの設定を表示した後、設定する影用のマテリアルを下側にドラッグ&ドロップで設定します。

これで影用タイルマップのタイルは黒色のシルエットのように表示されます。

テスト用のプレハブの作成

テストでは、前回説明した影用タイルマップを作る関数同じ手順を、Unity エディタGUI を用いて手動で行い作成したタイルマップ比較します。
テスト関数でこのタイルマップを利用するために、作成した後プレハブ化まで行います。

障害物だけのタイルマップの作成

影用タイルマップを作成する関数のテストのために、影の元となる壁を配置したタイルマップを作ります。

TilemapHierarchy ウィンドウ右クリックして、ポップアップメニュー[2D Object]→[Tilemap]→[Rectangular] で四角いマスのタイルマップを作成できます。

メニュー[Window]→[2D]→[Tile Palette]Tile Palette ウィンドウを開き、ブラシツールとタイルを選択して、Scene ウィンドウのタイルマップに壁を配置しましょう。

障害物に影をつけるためのタイルマップの作成

次に、答え合わせのための影用タイルマップを手動で作成します。
手順はテスト対象の影用タイルマップ作成関数の処理と同じです。

はじめに、ひとつ前の工程で作成した壁のタイルマップ WallsTilemap1 を複製します。
複製の方法は、Hierarchy ウィンドウ複製元のタイルマップのゲームオブジェクトを選択した後、 Ctrl + D またはメニュー[Edit]→[Duplicate] です。
複製されたゲームオブジェクト名は WallsShadowTilemap1 にリネームしました。

Unity Hierarchy ウィンドウで複製元のゲームオブジェクトを選択したあと Ctrl+D またはメニューEdit→Duplicate で複製を作成します。

前回紹介したように、影用タイルマップでは壁のタイルを垂直反転します。
スクリプトでは SetTransformMatrix で行列を指定して行いましたが、今回は Unity エディタGUI を用いて再現します。

反転(Flip)ツールの表示

Tile Palette ウィンドウのツール群には反転 (Flip) が最初は表示されていませんが、設定で表示できます。
メニュー[Edit]→[Preferences]Preferences ウィンドウを開き、ツリーリスト [2D]→[Tile Palaette] を選択し、 Tile Palette の設定ページを開きます。

設定ページの下側にある、Default Tile Palette Tools 項目で右側の非表示のツールのリストから FlipYTool選択して、 + ボタンを押すと表示するツールのリストに移動します。

Unity Tile Palette Tools に非表示のFlipツールなどを追加します。

設定が済んだら下側の Save ボタンで保存します。
Tile Palette ウィンドウのツール群にすぐに反映されます。

Unity Tile Palette に非表示だったツールが表示されました。

反転 (Flip) ツールの使い方

反転ツールは少し使い方に癖があります。
ブラシツールのようにシーン上でタイルのあるマスを選択しても反転しません。

下図のように、Tile Palette ウィンドウブラシツール選択し、塗るタイルを選択し、その後、垂直反転 (FlipY) ツール押すことで、塗るタイルが垂直反転されるようになります。
この状態で Scene ウィンドウのタイルマップに塗ることで垂直反転したタイルがマスに設置されます。

Unity Tile Palette の反転ツールは、ブラシでタイルを選択後に反転を押すと反転したタイルで塗ることができます。
Unity Tile Palette ウィンドウの反転ツールは、ブラシでタイルを選択後に、押すとそのタイルが反転して配置されます。

タイルマップのオフセットと拡大率の変更

タイルを垂直反転した後は、オフセットと拡大率を変更します。
Tile Palette ウィンドウ選択ツール選択した後、Scene ウィンドウ変更したい影用タイルのあるマス選択すると Inspector ウィンドウでそのマスオフセットや拡大率を編集できます。
※マウスをホールド&ドラッグすることで矩形選択して複数のマスを同時に編集できます。

Unity Tile Palette ウィンドウで選択ツールを選び、タイルマップのマスを Scene ウィンドウで選択すると、Inspector ウィンドウにその設定が表示されます。

オフセットは前回説明した補正値の計算式

補正値 = (変形前のスプライトの縦幅 – pivot.y) * scale.y

を用います。
今回は、変形前のスプライトの縦幅は 1.0unit、 pivot(基準点) の y は 0.5 unit、拡大率 scale.y は 0.5 なので

今回の補正値 = (1.0 – 0.5) * 0.5 = 0.25 です。
通常 (sprite.size = 1.0, pivot.y = 1.0, scale.y = 1.0) の移動量 1.0 から 0.25 を引き、 0.75 下に移動するとちょうど壁の下のマスの上辺とくっついて表示されます。

Unity Tile の表示設定で Offset.Y を設定した後、垂直反転しない場合は Scale.X を -1 から 1 に変えると戻ります。

さきほどの補正値計算と同じ値、 Scale.y = 0.5, Offset.y = -0.75変更しました。

作成したタイルマップのプレハブ化

これで、影用タイルマップ作成関数の処理前のタイルマップ (WallsTilemap1) と処理後の解答タイルマップ (WallsShadowTilemap1) が用意できました。

Unity Tilemap で影用タイルマップ作成関数の処理前と処理後のタイルマップを手動で作成しました。

テストで用いる 2 つのタイルマップを上位の Grid ゲームオブジェクトごとプレハブ化します。
Hierarchy ウィンドウの TestGrid3 を Project ウィンドウResources 以下の任意のフォルダドラッグ&ドロップし、 Resources.Load 関数で読み込めるプレハブ作成します。

Unity Hierarchy ウィンドウのゲームオブジェクトを Project ウィンドウのフォルダにドラッグ&ドロップしプレハブ化します。

今回はここまで

テストに用いるタイルマップUnity エディタ作成しました。
垂直反転など最初非表示ツールを表示し使ったり、タイルの表示オフセットや拡大率の変更も行いました。
作成したタイルマップはテスト関数で利用できるようにプレハブ化しました。

次回は、作成したタイルマップのプレハブを、テスト関数でインスタンス化し比較する手順をコードを含めて紹介します。

参照サイト 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をコピーしました