ugai로 계량기를 만들었으면...

이 글은 CyberAgent 엔지니어 Advent Calendar 2014 13일째 투고다.
내가 지금 하고 있는 프로젝트 중, 여전히 베타 때의 Unity 4이다.6(UGUI) 기본
개발이 시작되었다.
각양각색의...여러가지 일이 있었지만 이번에는 계량기를 만들었다는 말을 하고 싶었다.
그럼 계량기를 만들 때 디자이너가 준 디자인이 이런 느낌이에요.

UGUI에 어떻게 설치되었는지 확인합니다.

fillSprite로 할게요.

UGUI는 NGGUI와 마찬가지로 fillSprite 기능이 있습니다.

위 그림에서 보듯이 스프릿의 ImageType을 Filled로 만들면 FillAmount만 조정하면 계량기를 간단하게 만들 수 있다.그냥

Fill Method를 Horizontal로 설정하면 90도가 끊어지기 때문에 이런 계량기는 사용하기 어렵다.

마스크로 하겠습니다.

UGUI에서 다음 그림과 같이 Mask 구성 요소가 부착된 Image의 아이에 Image를 배치합니다.
마스크 사용 가능.

그리고 마스크 임페이지를 좌우로 틀면 계량기를 나타낼 수 있다.
다만, 이Mask를 사용하면 DrawCall 3개가 소모됩니다.
안드로이드의 일부 터미널에Mask가 작동하지 않는 것이 있기 때문에 너무 많은 종류를 갖고 싶지 않다.
(↑ Mask 일은 Unity 4.6p1에서 처리했다고 한다!)

다각형으로 만들다

UGUI의 Graphic 구성 요소는 Outline 및 Shadow 구성 요소를 부착합니다.
테두리와 음영을 각각 그릴 수 있다.
이걸 보면 아무래도 버텍스를 만지작거려서 그래픽을 그릴 수 있을 것 같은 분위기가 든다.
↓ Shadow의 Super 클래스 VertexModifiers 출처
https://bitbucket.org/Unity-Technologies/ui/src/b914129e0b5bc9e9eb20af391ba99f659ec85a47/UnityEngine.UI/UI/Core/VertexModifiers/Shadow.cs?at=4.6
그래서 제가 해봤어요.
OpenGL 교과서에서 흔히 볼 수 있는 것들.

소스 여기 있어요.
VBOImage.cs

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

public class VBOImage : Image {

    protected override void OnFillVBO (List<UIVertex> vbo)
    {
        GenerateSprite (vbo, preserveAspect);
    }

    protected void GenerateSprite (List<UIVertex> vbo, bool unusedPreserveAspect)
    {
        UIVertex vert = UIVertex.simpleVert;
        vert.color = color;

        Vector4 dimension = new Vector4(0,0,100f,100f);
        float width = Mathf.Abs (dimension.x - dimension.z);
        float height = Mathf.Abs (dimension.y - dimension.w);

        var uv = Vector4.zero;

        // left bottom
        vert.position = new Vector3 (dimension.x, dimension.y);
        vert.uv0 = new Vector2 (uv.x, uv.y);
        vert.color = Color.red;
        vbo.Add (vert);

        // left top
        vert.position = new Vector3 (dimension.x + 100, dimension.w);
        vert.uv0 = new Vector2 (uv.x, uv.w);
        vert.color = Color.blue;
        vbo.Add (vert);

        // right top
        vert.position = new Vector3 (dimension.z - 0, dimension.w);
        vert.uv0 = new Vector2 (uv.z, uv.w);
        vert.color = Color.green;
        vbo.Add (vert);

        // right bottom
        vert.position = new Vector3 (dimension.z - 0, dimension.y);
        vert.uv0 = new Vector2 (uv.z, uv.y);
        vert.color = Color.white;
        vbo.Add (vert);
    }
}

이것 괜찮아요?
· 4점을 지정하여 평행사변형을 그리기
• 정점 좌표를 백분율에 따라 변경하여 길이 변경
상술한 두 가지를 설치하면 계량기가 완성된다.

(↑ 슈퍼 졸업생 W선생님이 몰래 설치해 주셨어요!)

총결산

지금까지 GUI로 만든 계량기였습니다.
유니티도 공식 버전 4.6을 발매하며 실용화에 들어갔다.
지금까지 NGUI를 사용하신 분도 처음이에요!이렇게 말씀하시는 분들도 연말연시에.
터치해보는 건 어때요?
그럼!