캐릭터 선택 UI

7.10

일단 러프를 해보자. 처음엔 플레이어블 8명이지만, 나중에 사천왕 포함해서 12명으로 확장될 것이다. 하지만 1회 클리어까진 8명까지만 보여줄 예정이므로 이에 맞춰서 디자인을 한다.

그런데… 음.. 넣을 게 뭐 별 게 없다…. 느무 심심한 느낌인데..뭘 넣지

디자인하다보니 모노톤이 더 좋아보인다. 역시 디자인에 대해 뭘 모르면 흑백쓰라는 선인의 말을 되새겨야 할 때.

캐릭터 선택창은 이 쯤에서 마무리. 그 다음 절차는 싸울 배경을 소개하고, 화면 전환한 후에 캐릭터들이 등장하고…같은 과정을 거칠 예정이다.

7.11

언리얼은 뷰포트 스샷 기능이 제공된다. 언리얼은 이미 실시간 렌더링을 영화에 사용할만큼 뷰포트 렌더링이 뛰어나기 때문이리라. 하지만 유니티는 이게 없다. 배경을 찍어야 되는데, 뷰포트 렌더링이 없다… 난감한걸.

혹시 내가 못찾는 것은 아닐까? 싶어서 챗GPT에게 물어보니 렌더타깃을 이용해 찍으라는 조언을 해준다. 물론 코드와 함께 친절한 사용설명서까지 덧붙여줬다.

using UnityEngine;
using UnityEditor;
using System.IO;

public class ViewportScreenshot : MonoBehaviour
{
    public Camera cameraToUse; // 스크린샷을 찍을 카메라
    public int resWidth = 3840; // 원하는 해상도 너비
    public int resHeight = 2160; // 원하는 해상도 높이

    [MenuItem("Tools/Take Screenshot")]
    public static void TakeScreenshot()
    {
        ViewportScreenshot instance = new GameObject("ViewportScreenshot").AddComponent<ViewportScreenshot>();
        instance.CaptureScreenshot();
        DestroyImmediate(instance.gameObject);
    }

    public void CaptureScreenshot()
    {
        if (cameraToUse == null)
        {
            cameraToUse = Camera.main; // 기본 카메라 설정
        }

        RenderTexture rt = new RenderTexture(resWidth, resHeight, 24);
        cameraToUse.targetTexture = rt;
        Texture2D screenShot = new Texture2D(resWidth, resHeight, TextureFormat.RGB24, false);
        cameraToUse.Render();
        RenderTexture.active = rt;
        screenShot.ReadPixels(new Rect(0, 0, resWidth, resHeight), 0, 0);
        cameraToUse.targetTexture = null;
        RenderTexture.active = null; // 메모리 해제
        Destroy(rt);

        byte[] bytes = screenShot.EncodeToPNG();
        string filename = ScreenShotName(resWidth, resHeight);
        
        // 디렉토리 생성
        string directoryPath = Path.GetDirectoryName(filename);
        if (!Directory.Exists(directoryPath))
        {
            Directory.CreateDirectory(directoryPath);
        }

        File.WriteAllBytes(filename, bytes);
        Debug.Log($"Screenshot saved to: {filename}");

        // 에디터 씬에서 이미지 확인
        AssetDatabase.Refresh();
    }

    public static string ScreenShotName(int width, int height)
    {
        return string.Format("{0}/Screenshots/screen_{1}x{2}_{3}.png",
                             Application.dataPath,
                             width, height,
                             System.DateTime.Now.ToString("yyyy-MM-dd_HH-mm-ss"));
    }
}

이걸 그대로 유니티에 넣고 작동시키니… 와. 정말 된다.

전이라면 이걸 손으로 찍어서 이어붙이고 난리도 아녔을텐데…와. 고마워라.

캐릭터를 고르면 이렇게 배경이 나오고 화면을 왼쪽에서 오른쪽으로 쓸고 간다.

구상은 끝났고, 할 일이 남았다. 포트레이트 애니메이션을 만들어 보자.

이걸 제작하고 있노라니 의문이 들었다. 이게 게임에 잘 맞을까?…

더미 작업 없이 바로 실제 리소스 제작을 들어가는 것이 장님 코끼리 만지는 기분이다. 그럼 구현이 먼저다. 구현부터 하자.

새로운 씬을 세팅 중.

뒤로 흐르는 배경과 커서는 별도의 셰이더가 필요하다. 틀은 잡았고, 이제 코드를 짜보자.

DoTween은 UI프로그램을 할 때 가장 먼저 친해져야 할 애드온이다. 코드기반은 무료고 비쥬얼 스크립팅은 유료인 듯?

https://dotween.demigiant.com/

일단 UI트랜스폼은 RectTransform을 사용한다. 이것이 익숙치가 않다. 배워보자.

7.12

UI의 트랜스폼은 RectTransform을 사용하나, 해상도가 고정되어 있기 때문에 그냥 position을 직접사용하는 게 편하다. 음… 이래도 되겠지? 빌드해보자.

잘된다. 연출은 됐다. 이제 커서를 움직이는 처리를 해야 한다.

빌드하면서 알게 된 사실인데, 스크린샷을 찍는 툴이 빌드에서 에러가 났다. 이는 Editor에서만 사용하는 기능인데 빌드에 포함시켜 에러가 나는 모양이다.

이렇게 하면 된다. 챗GPT가 없었다면 난 아직도 사경을 헤메고 있었겠지! 오류가 두렵지 않다.

캐릭터 커서 이동의 처리

캐릭터 선택의 처리. 동시 선택작업이 꽤 번거로웠다.

7.13

배경 설명에 글씨가 타이핑쳐지는 효과를 내고 싶었는데 DoTween무료버전에선 TMPro를 지원하지 않는다고 한다. 몇 푼되지도 않는 어셋이 개발을 방해해선 안된다.당장 구입하자.

화면 한 켠이 점점 복잡해진다.

캐릭터 선택 UI”의 2개의 생각

댓글 남기기