【Unity】2Dタイルマップ⑨ Isometricなマップで建物の上を通る・下をくぐる【前編】 - Unity(C#)初心者・入門者向けチュートリアルひよこのたまご

Unity 2020.2.1f1 Personal(2021年3月)

前回の続きです！
今回は2DタイルマップでIsometricなマップを作成し建物の上を通ったり下をくぐったりします。
1階を歩いている時に2階のColliderに衝突してしまうのを回避していきます。

この記事はUnity 公式のIsometric 2DTilemapプロジェクトを一部参考にしています。

f:id:hiyotama:20210318213156p:plain

blogs.unity3d.com

Transparency Sort Modeの編集

まずはTilemapのIsometric Z as Yを使用する際の設定をしていきます。
UnityメニューからEdit > Project Settingsを開き、Graphics > Camera Settingsにある
Transparency Sort ModeをCustom Axisに、
Transparency Sort AxisをX:0 Y:1 Z: -0.49に変更します。

f:id:hiyotama:20210318213826p:plain

続いて上記の設定をEditorモードで常に有効にするScriptを作成します。

using UnityEngine;
#if UNITY_EDITOR
using UnityEditor;
#endif    

[ExecuteInEditMode]
public class AxisDistanceSortCameraHelper : MonoBehaviour
{
    void Start()
    {
        var camera = GetComponent<Camera>();
        camera.transparencySortMode = TransparencySortMode.CustomAxis;
        camera.transparencySortAxis = new Vector3(0.0f, 1.0f, -0.49f);

#if UNITY_EDITOR
        foreach (SceneView sv in SceneView.sceneViews)
        {
            sv.camera.transparencySortMode = TransparencySortMode.CustomAxis;
            sv.camera.transparencySortAxis = new Vector3(0.0F, 1.0F, -0.49F);
        }
#endif
    }
}

AxisDistanceSortCameraHelper.cs

AxisDistanceSortCameraHelper.csの解説は過去記事をご参照ください。

hiyotama.hatenablog.com

AxisDistanceSortCameraHelper.csを作成したらMain Cameraに取り付けます。

f:id:hiyotama:20210318214424p:plain

Playerの作成

続いてPlayerを作成していきます。
こちらの過去記事とほとんど同じ作り方ですがIsometric用に少し修正しています。

hiyotama.hatenablog.com

まずはこちらのSpriteからPlayerオブジェクトを作成します。

f:id:hiyotama:20210318225040p:plain
slime.png

Playerオブジェクトに「Player」という名前のタグをつけ、
CircleCollder2DコンポーネントとRigidbody2Dコンポーネントを以下の設定で取り付けます。

f:id:hiyotama:20210318225618p:plain

続いて下のScriptを作成してPlayerオブジェクトに取り付けます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour
{
    private readonly float speed = 0.03f;

    public void MoveUp()
    {
        transform.position = new Vector3(transform.position.x + speed, transform.position.y + (speed / 2f), transform.position.z);
    }


    public void MoveDown()
    {
        transform.position = new Vector3(transform.position.x - speed, transform.position.y - (speed / 2f), transform.position.z);
    }


    public void MoveLeft()
    {
        transform.position = new Vector3(transform.position.x - speed, transform.position.y + (speed / 2f), transform.position.z);
    }


    public void MoveRight()
    {
        transform.position = new Vector3(transform.position.x + speed, transform.position.y - (speed / 2f), transform.position.z);
    }

Player.cs

続いてPlayerController.csを作成します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour
{
    [SerializeField] Player _player;
    [SerializeField] Transform _camera;


    void Update()
    {
        if (Input.GetKey(KeyCode.A)) _player.MoveLeft();
        else if (Input.GetKey(KeyCode.W)) _player.MoveUp();
        else if (Input.GetKey(KeyCode.D)) _player.MoveRight();
        else if (Input.GetKey(KeyCode.S)) _player.MoveDown();
    }


    private void LateUpdate()
    {
        if (!_camera) return;

        if (_camera.position.x != _player.transform.position.x
            || _camera.position.x != _player.transform.position.y)
        {
            _camera.position = new Vector3(_player.transform.position.x, _player.transform.position.y, -10f);
        }
    }
}

PlayerController.cs

Controllerオブジェクトを作成してPlayerController.csを取り付けます。
またInspectorから_playerにPlayerオブジェクト、_cameraにMain Cameraオブジェクトを指定します。

f:id:hiyotama:20210318230252p:plain

以上でPlayerの作成は完了です。

TilePaletteの作成(IsometricPalette)

続いてTilePaletteを作成していきます。
基本的なTilePalette作成についてはこちらの過去記事をご参照下さい。

hiyotama.hatenablog.com

まずはIsometricPaletteというパレットを作成します。

f:id:hiyotama:20210318215118p:plain
IsometricPalette作成

続いてIsometricPaletteにTileを登録していきます。
下の3つのSpriteを使っていきます。

f:id:hiyotama:20210318215309p:plain
field_block.png

f:id:hiyotama:20210318215314p:plain
stone_block.png

f:id:hiyotama:20210318215319p:plain
stone_stair.png

SpriteをUnityに読み込みましたら各SpriteのInspectorにて、
Pixels per Unitを32、Filter ModeをPoint(no filter)に設定します。
またPivotをCustom、X:0.5 Y:0.25に設定します。
Pivotの位置などについてはこちらの過去記事をご参照ください。

hiyotama.hatenablog.com

f:id:hiyotama:20210318215801p:plain
各Spriteの設定