Unity 2020.2.1f1 Personal(2021年3月)
前回の続きです！
今回は2DタイルマップにSprite Maskを使って、隠し通路的な演出を実装していきます。
通路に近づいた時にキャラクターの周りが丸く透けて通路が分かる仕組みです。
赤枠の範囲を隠し通路にする
※上の画像を参考に、隠し通路を事前に作成しておきましょう。
通路を隠す用のTilemapを作成
前回作成したフィールド用のTilemapの他に、もう２つTilemapを作成します。
３つのTilemapの名前を以下のように変更してください。
①Field：キャラクターが歩くフィールド
②Ceiling：天井。行き止まりを表す。
③SecretCeiling隠し通路を隠す天井。見た目は②と全く同じ。
３つのTilemapを作成し名前を変更
なぜTilemapの名前を変えたかというと、管理しやすくすることもそうですが、
Tilemapはオブジェクトの名前によって編集対象を切り替えるためです。
TIle Paletteを開くとActive Tilemapという項目があります。
こちらをクリックすると、先ほど名前を変更したTilemapが並んでいます。
こちらで選択したTIlemapをSceneビュー上で編集することができます。
隠し通路用のTilemap(SecretCeiling)編集
まずは隠し通路用のTilemapを編集します。
天井用の画像はこちらをご使用下さい。
ceiling.png
TilePaletteのActive TilemapからSecretCeilingを選択し、隠し通路部分を塗っていきます。
隠し通路を塗る。
続いてSecretCeilingオブジェクトについているTilemap Rendererを設定していきます。
編集箇所は2箇所します。
1箇所目はMask Interactionです。Maskのついたオブジェクトとの関係を設定します。
Visible Inside Mask：Maskのついたオブジェクトの内側を表示する（つまりMaskのついたオブジェクトの外側のTIleを非表示）
VIsible Outside Mask：Maskのついたオブジェクトの外側を表示する（つまりMaskのついたオブジェクトの内側のTileを非表示）
今回はMaskの内側のTileを非表示にしてキャラクターを表示させたいので、
VIsible Outside Maskを選択します。
2箇所目はOrder In Layerで、0から2に変更し、通路よりも上に表示されるようにします。
通常天井のTilemap(Ceiling)編集
続いてTilemap「Ceiling」を編集していきます。
隠し通路とフィールド以外の部分を適当に塗っていきます。
CeilingオブジェクトのOrder In Layerも0から2に変更しておきます。
Ceilingオブジェクトについては以上で設定完了です。
キャラクターを作成
最後にキャラクターを作成します。
slime.png
スライムのスプライトを用意したので、
Pixel Per Unitを64、FilterModeをPoint(no filter)に設定し、
Hierarchyへドラッグ&ドロップして配置します。
Slimeはフィールドと天井の間に表示したいので、
Sprite RendererコンポーネントのOrder In Layerを1に設定しておきます。
続いてHierarchy上のSlimeを選択した状態で右クリックし、
2D Object > Sprite Maskを選択します。
Slimeの子オブジェクトにSprite Maskが作成されます。
デフォルトだとSprite Maskのサイズが小さいので、
Sprite MaskのScaleをX:3, Y:3に変更します。
Secret CeilingオブジェクトのMask InteractionをVIsible Outside Maskに変更し、
キャラクターの子オブジェクトにSprite Maskを設定できたので、
これで隠し通路の実装が完了しました。
結果
それでは結果を確認してみましょう。
キャラクターを動かす実装は次回以降に回します。
ここではSlimeのPositionを直接変更して確認します。
隠し通路ではない場合、近づいても表示は変わらない。
隠し通路に近づくと円形で表示される。
隠し通路を進む。
今回は以上になります。
ありがとうございました〜。