Software Engineer English & Software Engineering Blog - Sean

텍스트 길이에 맞게 사이즈가 자동으로 조절되는 UI 이미지를 만들어 보자.

대화 상자 이미지를 임포트한다.

대화상자 이미지 인스펙터 창에서 아래와 같이 변경하고 Apply를 클릭한다.

• Sprite Mode - Single
• Mesh Type - Full Rect
• Filter Mode - Point (no filter)
• Compression - None

Text 오브젝트는 아래와 같이 설정한다.

• Font Asset - 필요하다면 Window - TextMeshPro - Font Asset Creator에서 폰트를 생성해 지정한다.
• Alignment - Center, Middle 설정

Image 오브젝트는 아래와 같이 설정한다.

• Source Image - 위에서 설정한 대화 상자 이미지를 지정한다.
• Image Type - Sliced

Vertical Layout Group 컴포넌트 추가

• Padding - 이미지와 텍스트에 맞게 적당히 설정한다.
• Child Alignment - Middle Center
• Control Child Size - Width, Height 체크 (Height는 꼭 하지 않아도 된다)

Content Size Fitter 추가

• Horizontal Fit - Preferred Size

2D Sprite에 Text를 추가해 보자.

하지만 텍스트 길이에 따라 항상 이미지 크기를 조절해야 한다.

Content Size Fitter 컴포넌트와 간단한 스크립트를 사용하면 자동으로 텍스트 길이에 맞는 이미지를 표시할 수 있다.

실습을 위해 위 이미지를 임포트한다.

2D Sprite Renderer에는 위 이미지 파일을 지정하고 자식(텍스트) 오브젝트에는 Content Size Fitter 컴포넌트를 추가하고 아래와 같이 설정한다.

Content Size Fitter - Horizontal Fit - Preferred Size로 변경한다.

이제 Rect Transform - Width 필드가 비활성화 되어 수정할 수 없게 된다.

using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class word : MonoBehaviour
{
    void Start()
    {
        RectTransform crt = GetComponentInChildren<RectTransform>();
        crt.gameObject.GetComponent<TextMeshPro>().text = "Very very long long text";
        // 미리 자식 오브젝트 Rect Transform을 가져오고, TextMeshPro - text 변경

        LayoutRebuilder.ForceRebuildLayoutImmediate(crt);
        // Forces an immediate rebuild of the layout element and child layout elements
        // affected by the calculations.
        // 위에서 TexhMeshPro - text 값이 변경되고 Content Size Fitter에 의해
        // Rect Transform - Width(sizeDelta.x) 값이 변경 되지만 바로 되지는 않는다.
        // 아래 코드에서 값을 가져오기 전에 업데이트 한다.

        Debug.Log(crt);
        Debug.Log(crt.sizeDelta.x);

        SpriteRenderer sr = GetComponent<SpriteRenderer>();
        sr.size = new Vector2(crt.sizeDelta.x + 0.7f, sr.size.y);
        // 폰트, 폰트 사이즈, 이미지에 따라 다르겠지만 이 예제의 경우
        // Rect Transform - Width(sizeDelta.x) 값에 0.7f를 더하면 적당하다.
    }

    void Update()
    {        
    }
}

Sprite Renderer가 있는 부모 오브젝트(Square)에 위 스크립트를 추가한다.

게임을 실행하면 텍스트가 바뀌고 그에 맞게 이미지의 길이도 자동으로 변경된다.

유니티 2D Sprite 및 Tile Palette의 각 tile마다 물리적 충돌과 그림자 적용을 위한 Physics Shape을 설정할 수 있다.

스프라이트를 임포트하면 Inspector - Sprite Mode - Generate Physics Shape 설정을 체크해서 Physics Shape 설정을 하지 않은 스프라이트에 대해 기본 Physics Shape을 생성하게 할 수 있다. 하지만 이 설정은 shape이 임의로 정해진다.

만약 위 과정을 진행 하고나서 나중에 Sprite의 Physics Shape을 바꾸면 이미 만들어져 있는 Tilemap에서는 바뀐 Physics Shape이 바로 적용되지 않는다. 이때는 Tilemap Collider 2D를 Reset한다. (그러면 Composite Operation을 다시 Merge로 바꿔줘야 한다)

Godot Sprite에는 Colorkey를 설정하는 옵션이 없다.PNG 이미지는 알파 채널을 통해 투명 배경을 설정할 수 있어 상관 없지만 JPG, BMP같은 이미지 파일은 투명 배경이 없어 곤란하다. 하지만 셰이더를 이용해 같은 효과를 만들 수 있다.

위와 같은 코드를 작성한다.

ChromaKey: R:54 G:61 B:82 A:255 (Godot 이미지의 배경색)

Diffuse: 텍스쳐 이미지와 동일하게 지정

※ Diffuse에 이미지 지정시 Texture 파라미터의 filter를 선택할 수 없어 이미지가 흐리게 보일 수 있다. 필요하다면 셰이더 코드에서 Diffuse 선언을 아래와 같이 수정한다.

uniform sampler2D Diffuse : filter_nearest;

vec4 타입의 ChromaKey와 COLOR 데이터 타입의 비교에서 약간의 오차가 발생하는거 같다.

if()을 위와 같이 수정한다.

※ 참고

이렇게 하나의 스프라이트에 셰이더를 적용하면 같은 씬의 다른 스프라이트에도 모두 같은 방식으로 셰이더를 적용해야 아래와 같은 에러가 생기지 않는 경우가 발생할 수 있다.

E 0:00:01:0199   swap_buffers: Vulkan: Cannot submit graphics queue. Error code: VK_ERROR_DEVICE_LOST
  <C++ Error>    Condition "err" is true. Returning: ERR_CANT_CREATE
  <C++ Source>   drivers/vulkan/vulkan_context.cpp:2536 @ swap_buffers()

E 0:00:01:0208   prepare_buffers: Vulkan: Did not create swapchain successfully. Error code: VK_NOT_READY
  <C++ Error>    Condition "err != VK_SUCCESS" is true. Breaking.
  <C++ Source>   drivers/vulkan/vulkan_context.cpp:2459 @ prepare_buffers()

AnimatedSprite나 AnimationPlayer를 사용하지 않고 Sprite만으로도 간단한 애니메이션을 만들 수 있다.

위와 같은 코드를 작성한다.

엔터키를 누르면 점프, ESC키를 누르면 전체 애니메이션이 플레이 된다. 애니메이션이 플레이 되는 동안 키를 여러번 동시에 누르면 애니메이션이 겹친다.

SDL에 2D 카메라를 만들어 보자.

코드를 입력하고 빌드한다.

※ 참고

Pixel perfect camera in SDL2

충돌 감지 영역을 원으로 지정하고 스프라이트 충돌을 확인해 보자.

좀 더 확실한 확인을 위해 공룡과 버블의 충돌 감지 circle의 radius를 20으로 바꾸고 다시 실행해 보자.

OpenGL 화면에 Pygame 이미지(스프라이트)를 렌더링 해 보자.