Unity 2.5D Tilemap Depth

https://gfycat.com/LegitimateOldAnemoneshrimp

Hello, Gahwon here. Here’s another Unity tutorial!

Have you ever tried to make a 2.5D world, only to realize that your trees are rendering behind the player all the time? Well, fear not!

Although many sources exist on creating this feature using sprites, this tutorial instead uses the new Unity Tilemap to apply depth.

For those who want the whole source code, here it is.

https://github.com/creativitRy/TilemapHeightTest

Feel free to use this anywhere (probably not the sprites since I drew them and I’m not an artist).

Here’s a TL;DR version of the system: Each tile contains a height property. This height is compared with the player’s height every frame to see if the tile should overlap or not. Overlapping tiles are moved to a new Tilemap layer that is always rendered in front of the player. This layer is cleared at the start of every frame.

Unity Dropdown Slider

https://gfycat.com/PlumpDeadHairstreak

Hello, Gahwon here. Let’s start off this blog with a tutorial!

For one of my Unity projects, I was prompted to make a slider that expands from and retracts into a button. Here’s how I made it.

Here’s how each of them looks in the hierarchy. As a basic overview, the Mask hides anything outside its region. Meanwhile, the RockSlider moves anything within DropDown up or down when the Button is pressed.

Let’s get started. Create a canvas an put a Panel inside. This will be the parent object for all other components.
Create a new panel and put a mask component. Now, create another panel as a child object. This will be the dropdown that is shown. Make the mask a child of the parent panel.
Put a button as a child object. This button will be in charge of opening and closing the dropdown.
Let’s write code to toggle the visibility of the dropdown object.

public class DropdownSlider : MonoBehavior
{
	public RectTransform Dropdown;

	private bool _opened;

	public bool Opened
	{
		get { return _opened; }
		set
		{
			_opened = value;

			Dropdown.gameObject.SetActive(value);
		}
	}

	public void OnClick()
	{
		Opened = !Opened;
	}
}

You can put this DropdownSlider component within the parent panel and select the dropdown object for the Dropdown field. On the button, add a new function for the On Click () event. Select the parent, and select DropdownSlider.OnClick().

If you run the game now, you can toggle the visibility of the dropdown. But we want it to be more gradual. So lets update our code. Add these lines to DropdownSlider.

// what percentage of the dropdown is visible
private float _percentage;

// how the dropdown animation will play
public AnimationCurve Animation = AnimationCurve.EaseInOut(0, 0, 1, 1);

// length of the total dropdown animation (from completely retracted to fully expanded)
public float AnimationDuration = 1f;

// y position of the dropdown when either fully retracted or expanded
public float RetractedY = 0f;
public float ExpandedY = 100f;

private void Update()
{
	// all animation finished playing
	if (_percentage = 1 && Opened)
		return;

	// update how much is visible
	_percentage += (Opened ? 1 : -1) * Time.unscaledDeltaTime / AnimationDuration;

	if (_percentage = 1)
	{
		_percentage = 1;
	}

	PositionSlider(_percentage);
}

private void PositionSlider(float percentage)
{
	// move the dropdown itself
	var pos = Dropdown.anchoredPosition;
	pos.y = Mathf.Lerp(RetractedY, ExpandedY, Animation.Evaluate(percentage));
	Dropdown.anchoredPosition = pos;
}

Change the setter for the Opened property.

public bool Opened
{
	get { return _opened; }
	set
	{
		_opened = value;

		if (value)
		{
			Dropdown.gameObject.SetActive(true);
		}
	}
}

Now the dropdown should be fully functional.

If you want to change whether the dropdown starts retracted or expanded, use this code:

[SerializeField]
[Tooltip("Whether to start retracted (false) or expanded (true)")]
private bool _opened;

private void Start()
{
	if (!Opened)
	{
		UpdateDropdownVisibility(false);
		PositionSlider(0f);
	}
	else
	{
		UpdateDropdownVisibility(true);
		PositionSlider(1f);
		_percentage = 1f;
	}
}

Here’s the final code:

public class DropdownSlider : MonoBehavior
{
	public RectTransform Dropdown;

	private bool _opened;

	public bool Opened
	{
		get { return _opened; }
		set
		{
			_opened = value;

			if (value)
			{
				Dropdown.gameObject.SetActive(true);
			}
		}
	}

	// what percentage of the dropdown is visible
	private float _percentage;

	// how the dropdown animation will play
	public AnimationCurve Animation = AnimationCurve.EaseInOut(0, 0, 1, 1);

	// length of the total dropdown animation (from completely retracted to fully expanded)
	public float AnimationDuration = 1f;

	// y position of the dropdown when either fully retracted or expanded
	public float RetractedY = 0f;
	public float ExpandedY = 100f;

	private void Start()
	{
		if (!Opened)
		{
			Dropdown.gameObject.SetActive(false);
			PositionSlider(0f);
		}
		else
		{
			Dropdown.gameObject.SetActive(true);
			PositionSlider(1f);
			_percentage = 1f;
		}
	}

	private void Update()
	{
		// all animation finished playing
		if (_percentage = 1 && Opened)
			return;

		// update how much is visible
		_percentage += (Opened ? 1 : -1) * Time.unscaledDeltaTime / AnimationDuration;

		if (_percentage = 1)
		{
			_percentage = 1;
		}

		PositionSlider(_percentage);
	}

	private void PositionSlider(float percentage)
	{
		// move the dropdown itself
		var pos = Dropdown.anchoredPosition;
		pos.y = Mathf.Lerp(RetractedY, ExpandedY, Animation.Evaluate(percentage));
		Dropdown.anchoredPosition = pos;
	}

	public void OnClicked()
	{
		Opened = !Opened;
	}
}

Thanks for reading! Please let me know if any of this was helpful or if I made any mistakes. Also let me know if you would like more images/gifs.