Jump to content
Sign in to follow this  
ZeddOTak

Naïca: Advices about layers and how to order them correctly

Recommended Posts

*Re-upload from July 2018

Balayne, Lead Developer: This article is a good technique for crossing management elements and their display.
Nevertheless, since the 2018.2 version of Unity, it is now possible to do it thanks to a new function: 2D Sprite Renderer "Sort by Pivot Point" (https://blogs.unity3d.com/2018/07/10/2018-2-is-now-available/).
So it's now very easy to do that with the pivot point whereas before we were blocked from the center of the sprite.

 

Building a 2D isometric game can put you in front of some issues you can’t figure right away. You will lose a lot of time and effort on this and it will bore you to death but today we want to help you with one of the issue we experienced: the Order in Layer.

Fellow developers, you may one day face this simple but yet annoying issue: how to order correctly your layers on your game engine (characters, creatures, environment) so that you can see them the way they are supposed to be?

Example: front, in between, back, in between, front.

Naïca Online - Layers order Denelite

First in a 2D game, layers work according to the Order in Layer: you can set it in every game engine or graphic library. By doing so, it will allow your engine to create a list of visual items to display in the order you want to.

In this case we are using Unity as game engine for Naïca and we will describe you the procedure to resolve this issue (this can be used on other game engines).

Order in Layer

Unity doesn’t have a system to handle automatically the Order in Layer, so you are the only one able to do it. Basically, Unity allows you to manage the Order in Layer “through the layers” (yes you will hear “layer” a lot of times):

Naïca Online - Order in layers Unity

It allows you to sort out more easily your different layers, but first you have to organize them in 3 differents type:

  • lower layer: the one that will always be beneath the player (ground, grass, stones)

  • middle layer: here is the player and every elements that he may cross (other players, creatures, trees)

  • upper layer: everything coming above the characters (bridge, clouds, roof)

The lower and upper layers are easy to use because in most of the cases you won’t have to display more than two or three elements at the same place: you will have to change their Order in Layer directly in Unity by changing the values on ‘sorting layer’.

Naïca Online - Order in layers Unity 2

On the middle layer you will have static elements (trees, rocks, buildings) and others in movement (players, creatures): so in this group of layers you will have to change dynamically the values of Order in Layer on the elements in movement.

Naïca Online - Layers Denelite Environment

You have to apply a very simple rule: the more your element is located toward the bottom (ordinate axis: Y), the more its Order in Layer will be high. For a character, the best way is to use its position at its feet and not at its center.

Elements in movement

Here is a simple script used by a lot of developers on Unity (you will only have to add your elements in movement) :

public class AdjustSpriteOrderByYPos : MonoBehaviour
{
    public SpriteRenderer m_SpriteRenderer;

    int sortingOrder
    {
        get
        {
            int pos = Mathf.RoundToInt(transform.position.y);
            return (pos * -1);
        }
    }

    private void Start()
    {
        if (m_SpriteRenderer == null)
        {
            m_SpriteRenderer = GetComponent<SpriteRenderer>();
        }
    }

    void Update()
    {
        if (m_SpriteRenderer != null)
            m_SpriteRenderer.sortingOrder = sortingOrder;
    }
}

You may encounter an issue if you need high precision and your game use decimal value for the positions. In this case do not hesitate to multiply this value by 10 or 100 in order to as precise as possible for your positions.

Static elements

For the static elements that will cross the characters you only need to copy the Y position from the base of your element (just like the feet for the players) and paste this value into Order in Layer.

The problem we had with this system on Naïca is the amount of work you need to achieve: if you have a large world with a lot of forests and villages for example, you will change the Y position manually for every element and you may do several mistakes after doing 50, 100, 200 elements.

One of the solution is to apply the same technique used for the elements in movement by putting the right value at Order in Layer in ‘Start’ instead of ‘Update’ (as explained in the code before). But, this solution may not be the best one because you will end up with a total mess if you are working on a map.

Naïca Online - trees with no order in layers

Instead, you can use a script editor to automatically change the value of your element allowing Unity to directly change the Order in Layer without your intervention.

Naïca Online - Layers Unity GIF

[CustomEditor(typeof(NaicaDepthOnStaticObject))]
public class NaicaDepthSpriteRendererEditor : Editor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        NaicaDepthOnStaticObject l_NaicaDepthStaticObject = target as NaicaDepthOnStaticObject;

        SpriteRenderer l_Renderer = l_NaicaDepthStaticObject.gameObject.GetComponent<SpriteRenderer>();
        if (l_Renderer == null)
            return;

        Transform l_Position = l_NaicaDepthStaticObject.gameObject.GetComponent<Transform>();
        if (l_Position == null)
          return;

     	float l_OrderInLayer = l_Position.position.y;

     	Transform l_Offset = l_NaicaDepthStaticObject.m_Offset;
     	if (l_Offset != null)
          l_OrderInLayer = l_Offset.position.y;

     	l_Renderer.sortingOrder = Mathf.RoundToInt(l_OrderInLayer) * -1;
     	EditorUtility.SetDirty(l_Renderer);
    }
}

Then add an Anchor to precisely put the ‘base’ of your element on the screen because even if we can use the feet of a character as base it’s not feasible for a rock or a tree with giant roots.

Naïca Online - Tree's anchor

Naïca Online - Tree's anchor 2

Do not forget to add the multiplicative factor (x10, x100) just like the elements in movement and all is done!

See you on Naïca!

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

Hi @Krikium ! 
Thanks for reading this post, this article does not reflect the work done on Naïca but introduces an example of how to solve a problem.
Which as mentioned above is no longer relevant in the new versions of unity 😅.

Regards

  • Laughs 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×