본고는 샘자프Advent Calendar 2019 #1 12/22의 문장이다.

입문

게임의 UI 이미지가 여러 장 겹쳐서 동작이 무거워지는 현상이 발생하기 쉽다.
그런 UI를 줄인 오버다운입니다.

예제 사용자 인터페이스

이런 UI가 있다고 가정해 보세요.
(억지로 겹치는 느낌)

올리다

이 UI의 길이를 보시면...

색깔이 밝아지는 곳은 여러 장이 겹치는 곳이다.
Unity의 SceneView에서 왼쪽 위 모서리의 드롭다운 목록에서 Overdraw를 선택하면 뷰가 표시됩니다.

드로잉 범위

기울어진 사각 이미지는 색깔이 있는 부분뿐만 아니라 전체도 묘사했다.
투명해서 안 보여요.

투명하게 보이지 않는 부분까지 그려서 아쉽다.

투명한 부분을 그리지 않는 방법

사실 쉽게 할 수 있다.
이미지 및 이미지 관리자만 설정하면 됩니다.
이미지 관리자는 MeshType을 Tight로 설정하기만 하면 됩니다!

이미지 검사기는 UseSpriteMesh만 검사하면 됩니다!

이렇게 되면 묘사되지 않은 부분의 초라함은 사라진다!

효과

문제는 이 일을 하는 것이 얼마나 효과가 있는가 하는 것이다.
이 정도면 과체중으로 뽑으면 달라질 게 없으니까 다시 한 번 반복하고 싶어요.

Sprite 메쉬 체크를 사용하지 않음

적당한 삼각형 이미지를 만들어 화면에 3000장을 표시했다.
나도 FPS를 보여 보았는데, 대략 30fps 정도였다.

Sprite 메쉬 체크가 있습니다.

대략 50fps입니다.
※ Android 단말기(갤럭시S9)가 사용되었는지 확인합니다.

예제 코드

Test.cs

public class Test : MonoBehaviour
{
    [SerializeField] RectTransform rectTransform = null;
    [SerializeField] GameObject goImage = null;
    [SerializeField] Text txtFps = null;
    int frames;
    float prevTime;

    // Start is called before the first frame update
    void Start()
    {
        float width = rectTransform.rect.width;
        float height = rectTransform.rect.height;
        for( int i = 0; i < 3000; i++ )
        {
            GameObject go = Instantiate( goImage, rectTransform );
            go.SetActive( true );
            go.transform.localPosition = new Vector2(
                Random.Range( -width * 0.5f, width * 0.5f ),
                Random.Range( -height * 0.5f, height * 0.5f )
            );
        }
        frames = 0;
        prevTime = Time.realtimeSinceStartup;
    }

    // Update is called once per frame
    void Update()
    {
        ++frames;
        float time = Time.realtimeSinceStartup - prevTime;
        if( time >= 0.5f )
        {
            txtFps.text = string.Format( "FPS:{0:f1}", frames / time );
            frames = 0;
            prevTime = Time.realtimeSinceStartup;
        }
    }
}

구조적 해설

보통 묘사를 해설하면 사각형으로 그려지지만 어떻게 색깔이 있는 부분만 그려지지.
그렇다고 설명할 것도 없고 그림을 격자로 잘라낸다.
하면, 만약, 만약...

UseSpriteMesh에서 3000장의 이미지를 선택하지 않고 묘사하는 사람은 Verts에 비해 12.0k(1만2천 정점)
UseSpriteMesh를 검사한 사람은 117.0k(11만7천 정점)입니다.

총결산

꼭대기 포인트가 증가해도 초당김 감소 동작이 가벼워진다!
그럼 내일은 @kotaroy 씨의 보도입니다.
기대해주세요!