서리 개인 개발 블로그

멀티플레이 로비관련 작업을 하던 중, UI요소 사이에 파티클을 넣어보았다.

작업을 어느정도 마친 뒤, 마지막으로 batch 확인을 했는데 파티클을 겨우 10개 사용했는데 다른 UI와 섞여 batch 수치가 SetPassCall과 함께 폭발하고 있었다.

일단 파티클을 사용한 UI 요소의 구성은 다음과 같다.

Room(Empty object)의 자식으로 파티클, 스프라이트, 텍스트로 들어가있다.

위의 게임오브젝트가 10개로 불어난다면 다음과 같은 현상이 일어난다.

이걸 10개만 불려도 각각 SetPassCall과 Batch가 18로 불어난다.

UGUI 구조상 Canvas안에서는 계층에 따라 레이어 순서가 정해지니, Render queue나 파티클의 Order in layer를 건드려도 아무 개선이 되지 않는다.

결국 구조를 바꾸는 수 밖에 없었다.

위와 같이 파티클들을 전부 빼서 따로 모아두게되면 막무가내로 했던 구성보다 Batch 수치가 6배 차이가 난다.

이걸로 해결! 이면 좋겠지만, UI를 저거 10개만 쓰고 마무리할것도 아니고 다른 UI요소도 고려해야한다.

일단 전제 조건은 다른 UI요소들의 이미지들이 같은 아틀라스에 패킹되어있는것으로 한다.

같은 아틀라스에 패킹되어 있는 이미지를 가진 UI요소들은 어디가 어디위에 겹치던 Batch가 1일것이다.

문제는 파티클이다. Paticles 게임오브젝트 위의 계층에 다른 UI요소가 들어가있으면, 즉 파티클을 다른 UI요소들 사이에 샌드위치로 끼워버리는 순간 문제는 발생한다.

위와 같은 상황에서 Frame Debugger를 돌려보면 (새로만든 UI요소) - (Paticles) - (Rooms) 순으로 그려지는것이다!!

그렇기 때문에 Particles 게임오브젝트의 배치는 계층 위쪽에 배치하려면 Particles 위의 계층에 아무것도 없어야하고, 그렇지 않으면 제일 밑으로 내려야한다!

필자의 경우엔 Paticles 위쪽 계층에 UI요소가 많이 있어서 최하단으로 배치했다.

최하단으로 옮기게 되면 Batch 문제에 탈줄은 했지만, UGUI 계층 문제로 파티클이 파란색 박스를 덮게된다.

이건 우리가 원하는 바가 아니므로, 장치를 하나더 추가한다.

Canvas에는 Sort Order를 지정할 수 있다. 이것을 사용해서 해결해보자.

부모 Canvas에는 Sort Order를 1로, Particles에는 Canvas를 추가해서 Sort Order를 0으로 사용해주면 된다. (Sort Order 수치는 부모 Canvas가 Paticles Canvas보다 높으면 아무거나 상관없다.)

이렇게 세팅을 해주면 다른 UI요소를 신경 쓸 필요도 없고, 파티클이 파란 박스를 덮지 않고, 처음에 파티클만 빼서 배치했던 경우와 똑같은 수치의 Batch와 SetPassCall을 확인할 수 있다!!

추가로 Canvas를 이용해서 SortOrder를 설정 해주게되면 UI 계층 순서는 신경 쓰지 않아도 된다.

마지막으로, 이런 세팅은 위와 같은 경우에만 의미가 있는 세팅이기 때문에 UI요소 한두개에 이펙트 터뜨리는거에 위와 같은 세팅을 해버리면.. 배보다 배꼽이 더 커지는 현상이 발생하므로 잘 선택하여 사용하자.

• 기본 슬롯 단축키

(왼쪽부터)

1. Select : S or Ctrl or Ctrl + Drag

2. Move : M

3. Brush : B

4. Fill box : U

5. Picker : I

6. Eraser : D or Shift or Shift + Drag

7. Fill : G

• 기타 단축키

(블럭 선택 후)

1. 시계방향 회전 : ]

2. 반시계 방향 회전 : [

3. 좌우 반전 : Shift + [

4. 상하 반전 : Shift + ]

• 유니티 버전 2019.3.1f1(LTS)
• 사용 패드 MOGA XP5-X+ (Xbox)
• 문제가 있으면 기타 주의사항을 봐주세요.

• Buttons

• Joystick, D-PAD

 - Precision stick과 D-PAD는 ProjectSettings - InputManager에서 설정을 한뒤 사용한다.

 - 받아와야하는 Axis와 설정은 다음과 같다.

 - D-PAD

 - Left precision stick

 - Right precision stick

• 기타 주의사항

※ Precision stick의 값을 받아왔을 때, 값이 0이 아닌 소수점의 Positive값이 받아와지는 현상이 있었다.

 - InputManager에서 해당 Axis 옵션의 Dead값을 늘려주면 된다. (필자의 패드 기준으로 0.01로 설정해서 해결)

※※ 해당 글은 꾸준히 업데이트 하는 글입니다.

※※ 참조에 사용한 유니티 dll은 2020.3 LTS 버전 이상입니다.

• 프로젝트

1. 프로젝트 생성 시, 템플릿은 클래스 라이브러리로 생성.

 - 일반 클래스 라이브러리가 아닌 클래스 라이브러리(.Net Framework)를 선택해야 한다.

• 참조

1. UnityEngine.dll은 UnityEngine.CoreModule.dll로 참조한다.

 - UnityEngine.dll은 일부 클래스의 멤버에서 에러를 띄운다.

2. 유니티 dll의 경로는 유니티 설치 경로\유니티 버전\Editor\Data\Managed에 대부분 위치한다.

 - 잘 못찾겠으면 위 경로까지만 들어가서 원하는 dll 파일을 검색해서 찾도록 하자.

어느날 지인에게 메쉬를 생성하는법을 알려달라고 연락이 왔다.

해본적은 없지만(메쉬 개념도 없었다...) 재미있을거같아서 한번 시도해보았다.

1. 메쉬 생성(vertices, uv) : vertices만 알면 되는거같아서 uv 설정은 하지 않음.

2. Raycast를 이용해서 vertices 값이 유동적으로 바뀔수 있어야한다.

3. Circle 형태여야 함.

연락받았을 당시, 어몽어스에서 그림자가 표현되는 것을 상상했다.

그래서 코드를 2D로 만들었다가, 나중에 3D로 만들어야 된다고 뒤늦게 들어서.. 안타깝게도 코드가 2D와 3D가 섞인 코드가 됐다.

※※ 메쉬에 대한 개념은 구글링하면 바로나오니 패스한다.

• 코드

using UnityEngine;
using UnityEngine.Rendering;

public class MeshCreater : MonoBehaviour
{
    public Material meshMaterial;

    private Mesh mesh;
    private MeshFilter meshFilter;
    private MeshRenderer meshRender;

    private void Start()
    {
        GameObject meshGameObject = new GameObject("Mesh", typeof(MeshFilter), typeof(MeshRenderer));
        meshFilter = meshGameObject.GetComponent<MeshFilter>();
        meshRender = meshGameObject.GetComponent<MeshRenderer>();

        meshRender.material = meshMaterial;

        mesh = new Mesh();
        meshFilter.mesh = mesh;
    }

    private void Update()
    {
        CalculateMesh();
    }

    //Calculate vertex vector(circle)
    private Vector3 ConvertAngleToVector(float _angle)
    {
        var rad = _angle * Mathf.Deg2Rad;
        return new Vector3(Mathf.Cos(rad), Mathf.Sin(rad));
    }

    //*** Mesh vertices point : local position of gameObject
    //recalculate vertices for vertices of mesh
    private void CalculateMesh()
    {
        float targetAngle = 360f;
        int rayCount = 360;
        float angleIncrease = targetAngle / rayCount;
        float angle = 0f;
        float dist = 2f;
        
        //Arr Length : ray counts + cneter point
        Vector3[] vertices = new Vector3[rayCount + 1];
        //Triangles : Multiple of 3
        int[] triangles = new int[rayCount * 3];

        //Center point is always Vector3.zero
        Vector3 centerPoint = Vector3.zero;
        //Set the center point to vertices[0] (triangle index 0)
        vertices[0] = centerPoint;

        int vertexIndex = 1;
        int triangleIndex = 0;
        for (int i = 0; i < vertices.Length; i++)
        {
            if (vertexIndex < vertices.Length)
            {
                Vector3 vertex = ConvertAngleToVector(angle);
                RaycastHit hit;

                //Get vertex points
                if (Physics.Raycast(meshRender.transform.position, vertex, out hit, dist))
                {
                    //Recalculate mesh point(local position)
                    //Set the local position(vertices), after Subtract the meshRender position from hit point.
                    vertices[vertexIndex] = hit.point - meshRender.transform.position;
                }
                else
                {
                    vertices[vertexIndex] = vertex * dist;
                }
            }

            //Set triangles
            if (vertexIndex > 1)
            {
                triangles[triangleIndex] = 0;
                triangles[triangleIndex + 1] = vertexIndex - 1;
                triangles[triangleIndex + 2] = vertexIndex < vertices.Length ? vertexIndex : 1;

                triangleIndex += 3;
            }

            vertexIndex++;
            angle -= angleIncrease;
        }

        //Apply mesh info
        mesh.vertices = vertices;
        mesh.triangles = triangles;
    }
}

※※ ConvertAngleToVector(float)는 삼각비를 이용해서 각도로 좌표를 구하는 함수다. (Raycast 함수의 direction 값이라 거리값은 필요가 없음.)

※※ 위 함수가 이해가 안간다면 다음글 참고

링크 : [유니티] 삼각비를 이용해 각도로 좌표구하기

• 결과 보기

일단 개념을 잡는 쪽에 맞춰둔 코드라, 활용이나 최적화 작업은 목적에 따라 바뀔것 같다.

추가로 빛으로 활용하기 위한 참고 사이트 링크도 올려둠.