크래프톤 정글 TIL : 1027

lazyArtisan·2024년 10월 27일
TIL
0

정글 TIL

목록 보기
119/147

📝 배운 것들

🏷️ public vs [SerializeField]

public

  • 기능: public으로 선언된 변수는 외부 스크립트에서도 접근이 가능하며, Inspector 창에도 표시됩니다.
  • 사용 예:
    public int health = 100;  // 다른 스크립트에서 접근 가능하고, Inspector에 표시됨
  • 주의사항: public 변수를 남발하면, 다른 스크립트에서 직접 접근하여 수정할 위험이 있습니다. 보통은 정말로 외부 접근이 필요할 때만 사용합니다.

[SerializeField]

  • 기능: [SerializeField]로 선언된 변수는 private이지만 Inspector 창에 표시됩니다. 외부 스크립트에서는 접근할 수 없고, 해당 클래스 내부에서만 접근 가능합니다.
  • 사용 예:
    [SerializeField] private int health = 100;  // Inspector에는 표시되지만, 외부 스크립트에서는 접근 불가
  • 장점: 외부 스크립트에서 수정할 수 없으므로 캡슐화가 강화되며, Inspector를 통해 필요한 값은 유연하게 조정할 수 있습니다.

🏷️ private void Start() vs void Start()

Unity에서 Start() 메서드를 선언할 때, 접근 제한자(public, private)는 생략 가능하지만, 명시적으로 추가하는 것이 좋습니다.

private void Start()

  • 기능: Start() 메서드를 현재 클래스 내부에서만 사용한다는 것을 명확히 나타냅니다.
  • 장점: 캡슐화의 관점에서 코드의 가독성이 높아지고, 외부 접근이 불가능함을 명확히 알 수 있습니다.

void Start()

  • 기능: 기본적으로 접근 제한자가 지정되지 않으면, private로 간주되지만, 명시적이지 않아서 가독성이 떨어질 수 있습니다.


🎮 유니티 공부

프리팹 할당하면 프리팹 수정되는지 실험

저번에 이거 보고
아니 그러면 프리팹이 수정되는 건가?
저번에 뭔가 프리팹이 이상해졌던 것 같긴 한데
라고 궁금증이 들어서 실험 해봄

    public GameObject prefab;

    void Awake()
    {
        prefab.AddComponent<DummyScript>();
    }

화면에 있는 실린더를 프리팹화한 다음

다른 오브젝트에 달린 스크립트를 실행하여
프리팹에 더미 스크립트를 달아준다

그러면 게임 플레이가 끝나고 프리팹이 수정되어 있는가 안 되어있는가?
저번에 그럴리가 없다고 듣긴 했는데 과연?

결과는 충격적.
게임이 끝나도 프리팹에 추가했던 더미 스크립트가 남아있다.

tmp 선명하게 만들기

게임뷰에서 tmp 왤케 자글자글해보임

게임 뷰에서 TextMeshPro(TMP) 텍스트가 자글자글해 보이는 문제는 주로 텍스트 해상도 또는 안티앨리어싱 설정에 기인합니다. TextMeshPro는 텍스트를 렌더링할 때, 벡터 기반의 텍스처와 SDF(거리장 필드, Signed Distance Field)를 사용하기 때문에, 설정을 조금만 조정해도 텍스트가 더 선명하게 보일 수 있습니다.

1. TextMeshPro의 해상도 및 폰트 크기 조정

TMP에서는 폰트 해상도와 텍스트 크기에 따라 텍스트가 자글자글하게 보일 수 있습니다. 기본적으로 TMP는 폰트 자산의 해상도와 텍스트 사이즈를 잘 맞춰야 선명하게 표시됩니다.

  • Font Asset의 Sampling Point Size:

    1. TMP에서 사용하는 Font Asset을 선택합니다.
    2. Inspector 창에서 Sampling Point Size를 확인하고, 텍스트가 뭉개지거나 흐릿하게 보이면 이 값을 더 높게 설정합니다.
    3. 보통 텍스트 크기와 해상도를 맞추기 위해, 폰트 사이즈와 적절한 비율로 설정하는 것이 좋습니다. 예를 들어, 폰트 사이즈가 24라면 Sampling Point Size를 48 정도로 설정할 수 있습니다.

  • TextMeshPro 컴포넌트의 Font Size:

    • TMP Text 컴포넌트에서 Font Size를 적절히 설정합니다. 너무 큰 폰트 사이즈를 사용하면 SDF 샘플링이 왜곡되어 보일 수 있습니다.

2. Anti-Aliasing 설정 확인

  • Quality Settings에서 Anti-Aliasing을 조정하면 TMP 텍스트가 더욱 부드럽고 선명해질 수 있습니다.
    1. Edit > Project Settings > Quality로 이동합니다.
    2. Anti Aliasing 옵션을 설정합니다. 2x, 4x 또는 8x를 적용하면 텍스트 경계가 더 부드러워집니다.
    3. URP(Universal Render Pipeline)를 사용하는 경우에는 Render Pipeline Asset에서 Anti-Aliasing 설정을 확인하고, MSAA(Multi-Sample Anti-Aliasing)를 활성화합니다.

3. TextMeshPro의 Extra Settings 조정

TextMeshPro 컴포넌트에는 텍스트 품질을 높이는 추가 설정들이 있습니다.

  • Extra Settings에서 Softness나 Outline 값을 조정하여 텍스트가 부드럽게 보이도록 할 수 있습니다.
  • Face Dilate 설정을 조정하여 텍스트의 두께를 미세하게 조절할 수 있습니다.

4. Canvas의 Render Mode 설정

Canvas의 Render Mode에 따라 텍스트가 다르게 보일 수 있습니다.

  • Screen Space - Overlay나 Screen Space - Camera 모드에서는 텍스트가 화면 해상도에 맞춰 표시됩니다. UI Scale Mode를 Scale With Screen Size로 설정하고 해상도를 적절히 설정합니다.
  • World Space에서는 캔버스 크기와 텍스트 크기를 맞춰주어야 선명하게 보입니다.

5. TextMeshPro 폰트 생성 시 해상도 조정

TMP에서 Font Asset Creator로 폰트를 생성할 때 해상도를 높게 설정할 수 있습니다.

  1. TMP의 Font Asset Creator에서 텍스트 해상도를 높여 폰트를 생성합니다.
  2. Atlas Resolution을 기본 1024x1024 이상으로 설정해주면, 큰 텍스트에서 깨짐 현상을 줄일 수 있습니다.

결국 다 안됐다.

아니 뭐 이렇게 뭐가 많아

올려주신 이미지는 TextMeshPro의 폰트 렌더링 모드(Rendering Mode) 옵션 목록입니다. 이 목록은 텍스트가 어떤 방식으로 렌더링될지 선택할 수 있는 다양한 옵션을 제공합니다. 각 모드는 텍스트의 선명도, 성능, 화면 표시 방식에 영향을 미칩니다. 여기에서 어떤 옵션을 선택하느냐에 따라 텍스트가 화면에 자글자글하거나 선명하게 보일 수 있습니다.

각 옵션을 간략히 설명해드리겠습니다.

1. SMOOTH_HINTED / SMOOTH

  • SMOOTH_HINTED: 텍스트의 모서리를 부드럽게 처리하면서 힌팅(hinting)을 적용해 작은 크기에서도 선명하게 보이게 합니다.
  • SMOOTH: 힌팅을 사용하지 않고 텍스트 모서리를 부드럽게 렌더링합니다. 큰 크기의 텍스트에서 잘 보일 수 있습니다.

2. COLOR_HINTED / COLOR

  • COLOR_HINTED: 색상 텍스처와 힌팅을 적용하여 컬러 폰트를 표현합니다. 힌팅 덕분에 작은 텍스트에서도 잘 보일 수 있습니다.
  • COLOR: 힌팅을 사용하지 않고 컬러 폰트를 표현합니다.

3. RASTER_HINTED / RASTER

  • RASTER_HINTED: 레스터 방식으로 폰트를 렌더링하면서 힌팅을 적용하여 작은 크기에서도 선명하게 보입니다.
  • RASTER: 힌팅 없이 레스터 방식으로 폰트를 렌더링합니다.

4. SDF (Signed Distance Field) 관련 옵션

  • SDF: 기본적인 SDF(Signed Distance Field) 방식으로 텍스트를 렌더링합니다. 크기에 따라 텍스트가 선명하게 보이도록 조정할 수 있습니다.
  • SDF8, SDF16, SDF32: SDF의 해상도에 따라 8비트, 16비트, 32비트로 더 높은 해상도를 사용할 수 있습니다. 숫자가 높을수록 텍스트가 더 선명하게 보이지만, 더 많은 메모리를 사용합니다.
  • SDFAA_HINTED / SDFAA: SDF 렌더링에 안티앨리어싱(AA)을 적용하여 텍스트 가장자리가 부드럽게 보입니다. SDFAA_HINTED는 힌팅이 포함되어 작은 텍스트에 유리하며, SDFAA는 힌팅 없이 부드러운 렌더링을 제공합니다.

일반적인 권장 사항

  • 작은 폰트에서는 SMOOTH_HINTED나 SDFAA_HINTED를 사용하면 텍스트가 더 선명하게 보일 수 있습니다.
  • 중간에서 큰 폰트에서는 SDF, SDFAA 등을 사용하여 더 부드러운 가장자리를 얻을 수 있습니다.
  • 컬러 폰트가 필요할 때는 COLOR_HINTED 또는 COLOR를 사용하세요.

이 중에서 SDFAA 또는 SDFAA_HINTED가 일반적으로 텍스트의 가장자리 선명도를 높여주기 때문에 자글자글한 문제를 해결하는 데 도움이 될 수 있습니다.

힌팅이 뭔데

힌팅(Hinting)은 텍스트를 화면에 렌더링할 때 작은 크기의 글자도 선명하게 보이도록 하는 기술입니다. 폰트를 저해상도에서 표시할 때, 폰트의 각 글자 모양을 픽셀 그리드에 맞추는 방식으로 왜곡 없이 선명하게 렌더링할 수 있게 도와줍니다. 특히 작은 크기의 텍스트나 낮은 해상도에서 글자 모양이 흐려지지 않게 해줍니다.

힌팅의 동작 방식

  • 힌팅은 글자의 주요 획을 픽셀 그리드에 맞춰 조정하여 텍스트를 선명하게 만듭니다.
  • 폰트 힌팅은 글자 모양의 특정 부분을 강조하여 각 글자가 흐릿하게 보이지 않도록 도와줍니다.
  • 예를 들어, 텍스트에서 가로와 세로 선이 픽셀 경계에 맞게 조정되어, 각 글자의 윤곽이 명확하게 보이도록 합니다.

힌팅의 장단점

  • 장점:
    • 작은 글자에서도 가독성을 유지할 수 있습니다.
    • 저해상도 화면에서 텍스트가 흐릿해지지 않고 선명하게 보입니다.
  • 단점:
    • 힌팅을 적용하면 원래 폰트 모양이 왜곡될 수 있습니다. 특히 글자의 곡선 부분이 매끄럽지 않고 각지게 보일 수 있습니다.
    • 고해상도나 큰 글자에서는 힌팅이 불필요하거나 오히려 글자 모양을 손상시킬 수 있습니다.

보니까 글자만 blurry한게 아니라 일반 texture들도 blurry했었다

해상도를 Full HD로 바꾸고 1.5x로 돼있던 Scale을 1x로 바꿨더니
자글자글거리는 현상 해결

https://stackoverflow.com/questions/71350497/unity-blurry-text

스택 오버플로우는 신이다

UI 간단 예제 (책)

using UnityEngine;
using TMPro;
public class GameDirector : MonoBehaviour
{
    [SerializeField] GameObject character;
    [SerializeField] GameObject distance;

    void Update()
    {
        float transformX = character.transform.position.x;
        this.distance.GetComponent<TextMeshProUGUI>().text = "Distance: " + transformX.ToString("F2");
    }
}

책 보고 간단한 예제 따라해봄

tmp 강의

https://www.youtube.com/watch?app=desktop&v=y8-GWxmosxo

static 폰트는 텍스처를 미리 렌더링 해놓고
dynamic 폰트는 글자 쓸 때마다 텍스처 렌더링 중국어나 한국어 같이 글자 많은 언어에 유리

import한 한국어, 일본어 폰트에 우클릭하고 Create-TextMeshPro-Font Asset을 만든다
이름 뒤에 Fallback이라고 붙인 다음 영어 폰트 애셋의 Fallback Font Assets를 추가하면 됨

Inspector에 있는 B 버튼 눌러서 Bold체 쓰는 것도 잘못된 방식
Bold체 폰트를 가져다 쓰는 것도 잘못된 방식

Regular, Bold, Italic 3가지 폰트 애셋을 static 또는 dynamic으로 준비한다
Regular의 Font Weights에 각각 폰트 애셋 끼워넣어주면 됨 그 다음에 B 눌러야 진짜 볼드체 처리

폰트에 효과 주는 건 Material 수정하면 되는데
다음에도 또 쓰려면 Material 우클릭하고 Create Material Preset

이미지를 글씨로 쓰려면 이미지 파일에 우클릭하고 Create - TextMeshPro - Sprite Asset
폰트 적용한 tmp 오브젝트에서 extra settings - sprite asset에 만들었던 스프라이트 애셋 연결해주고
<sprite=0> 이렇게 해주면 스프라이트 애셋의 1번째 이미지 사용됨
스프라이트 애셋에 가서 각 이미지 클릭하면 순서 변경도 가능 오프셋(중심) 조절하려면 Edit glyph - BX, BY 조절

근데 sprite sheet의 무슨 이미지가 어떤 인덱스였는지 구분 못하니까 Create - TextMeshPro - Style Sheet
Name은 E, opening tag는 <sprite=0> 박아놓고 역시 tmp 오브젝트에 만들었던 스타일 시트 연결해주면
이제는 텍스트 작성할 때 <style=E> 하면 된다.

edit - project settings - textmesh pro - settings - 맨 밑에 korean language options 체크하면
한글 단어 단위로 줄바꿈 해줌

UI 튜토 (유튜브)

https://www.youtube.com/watch?v=IuuKUaZQiSU

이거 보면서 따라함

왜 오브젝트 만들면 겁나 작고 UI는 겁나 큰가? : 유니티는 원래 그럼
짜증나면 gizmo 가서 canvas 꺼버려라

panel은 웹에서의 container라고 보면 됨

패널 생성하자마자 캔버스 꽉 채우는 이유는 stretch 돼있기 때문

살짝 둥근 이유는 Source Image가 기본적으로 Background로 설정돼있기 때문

rect transform에서 left right top bottm 조절하면 마진 줄 수 있다.
파란 점 잡고 끌어도 자동으로 변경됨. 쓰진 않음.

파란 화살표 상하좌우 있는 그림 (위 그림) 클릭하면 앵커 프리셋들이 있다
수동으로 앵커 설정하는 일 없으니 이게 뭐하는 건지 잘 알아두쇼

좌측 상단 정렬하는 설정

hierarchy에서의 순서에 따라 보여지는 순서도 결정됨 (피그마랑 비슷한데 아래에 있어야 위에 보이는듯)

아니 이 사람 이거 만들다가 설명 빼먹어서 panel이 갑자기 없어졌다가
아무렇지도 않게 뿅 하고 Image라는 이름으로 추가해버리고선 아오
알아서 panel 만들어서 스프라이트 넣고 크기도 조절했다

텍스처 흰색으로 만들어야 여러 색깔로 만들 수 있다
검은색으로 만들면 색 변경 불가
다른 색으로 만들어놓으면 색조만 변경할 수 있음

sprite editor에서 border 조절해서 9-slice
안 한거랑 비교하는데 달라지는게 없음

image type을 sliced로 해야 9-slice가 적용된다

pixels per unit multiplier 수정하면 둥글둥글해짐

Main Panel에 투명도 조절하고 자식으로
Wood 만든 후에
복사해서 Outline은 source image로 테두리만 있는 스프라이트 주면 됨

tmp에서 alignment 조절 가능

글자 박스 크기 꽉차게 조절

패널 만들고 Image component 날린 다음에
오프셋 조절해주고 Button container로 명명

hierarchy 보면 점점 어지러워지기 시작하니까 이름 패널로 대충 하지 말고 똑바로 지으쇼

Create - UI - TextMeshPro Button

버튼 좌우로 꽉차게 만들려고 이렇게 설정함

여기서 버튼 더 추가하려면 빡세겠지?
그래서 Button Container에
Vertical Layout Group이라는 걸 추가할거임 (수평 버전도 있긴 함)

그거 추가하면 이렇게 된다

Child Alignment를 Middle Center로 바꾸고
Child Force Expand를 다 꺼주고
각 버튼 가서 width -로 돼있는거 다시 넓혀주면 됨

간격 조절하고 싶으면 vertical layout group에서 spacing 조절

테두리도 추가하시는데 이것까지는 귀찮아서 안 따라함

옆에 설정 버튼 만들기 위해 Settings container 만들고
Create - UI - Inut field
mask component 추가하고 show mask graphic 끔 (mask 하위 영역만 보여주는 거라고 함)

프리팹까지 만들어보고 끝

canvas render mode - world space

unity canvas render mode에서 world space에 대해 설명해줘

World Space는 Unity의 Canvas Render Mode 중 하나로, UI 요소가 일반적인 2D 화면상의 UI가 아니라 3D 공간 내에서 오브젝트처럼 배치되도록 설정하는 모드입니다. 이를 통해 UI 요소가 3D 오브젝트와 함께 상호작용하거나 3D 환경 내에서 자연스럽게 보일 수 있습니다.

World Space Canvas의 특징

  1. 3D 오브젝트처럼 동작

    • Screen Space 모드에서는 UI가 화면의 해상도와 위치에 따라 고정되지만, World Space 모드에서는 UI가 3D 공간 내에서 오브젝트처럼 위치, 크기, 회전을 가질 수 있습니다.
    • Transform을 사용해 위치와 크기를 조정할 수 있으며, 카메라 각도에 따라 UI가 다르게 보이는 효과를 만들 수 있습니다.

  2. 3D 오브젝트와의 상호작용

    • World Space Canvas는 3D 오브젝트와 함께 배치할 수 있으므로, 3D 게임 오브젝트 위에 UI 요소를 올려놓거나, 3D 오브젝트 근처에 HUD(Head-Up Display) 스타일의 UI를 배치할 때 유용합니다.
    • 예를 들어, 캐릭터나 오브젝트 위에 체력 바를 표시하거나, 월드 내 특정 지점에 퀘스트 마커를 추가할 때 사용됩니다.

  3. 크기와 위치의 조정이 필요

    • World Space Canvas는 3D 공간에 맞춰 크기를 조정해야 하므로, Rect Transform의 Scale을 조정하거나 RectTransform의 Width와 Height를 수동으로 설정해야 할 수 있습니다.
    • UI 요소가 너무 크게 보이거나 멀리 떨어진 경우, 캔버스 크기와 스케일을 조정하여 원하는 위치와 크기로 맞춰야 합니다.

  4. 카메라와의 거리 영향

    • World Space Canvas는 3D 오브젝트처럼 카메라와의 거리에 따라 크기와 가시성이 달라집니다.
    • 카메라가 가까우면 UI가 크게 보이고, 멀어지면 작게 보입니다. 따라서, UI가 항상 같은 크기로 보이도록 하려면 스크립트를 통해 카메라와의 거리에 맞춰 스케일을 동적으로 조정해야 합니다.

  5. Raycast 및 상호작용

    • World Space Canvas는 Raycast에 반응하여, 3D 공간 내의 상호작용이 가능합니다. 예를 들어, 레이캐스트나 마우스 클릭을 통해 World Space에 있는 버튼을 클릭할 수 있습니다.
    • 이를 위해서는 Event System이 활성화되어 있어야 하고, UI 요소에 Collider가 추가되어 있어야 합니다.

World Space Canvas 설정 방법

  1. Canvas의 Render Mode를 World Space로 설정합니다.
  2. Rect Transform을 조정하여 캔버스의 위치, 크기, 회전을 원하는 대로 설정합니다.
  3. 필요한 경우, Canvas Scaler를 통해 UI 크기를 제어합니다. World Space에서는 Constant Pixel Size 모드를 사용하여 픽셀 크기를 고정하거나 Constant Physical Size를 설정할 수 있습니다.

World Space Canvas 사용 예시

  • 3D 환경에 떠 있는 UI 요소: 게임 내 특정 오브젝트에 체력 바를 배치하거나, 적의 위치를 표시하는 마커를 추가할 때 유용합니다.
  • VR 및 AR 환경: World Space Canvas는 VR/AR 환경에서 UI를 3D 오브젝트처럼 표시하고 상호작용하게 할 때 자주 사용됩니다.
  • 3D HUD: 2D 화면에 고정된 HUD 대신, 게임 내에서 플레이어 주변에 3D HUD처럼 표시되는 UI를 만들 때 World Space Canvas가 사용됩니다.

World Space Canvas는 3D 공간에 자연스럽게 UI를 배치하고 싶을 때 유용하며, 특히 게임 환경에 맞춘 HUD, VR/AR 애플리케이션 등에 적합합니다.

canvas에 있는 canvas scaler - UI scale mode에서 scale with screen size를 설명해줘

Canvas Scaler의 UI Scale Mode 옵션에서 Scale With Screen Size는 화면 해상도에 맞춰 UI 요소의 크기를 자동으로 조정하는 설정입니다. 이 설정을 사용하면, 화면 크기나 해상도가 달라져도 UI 요소가 일정한 비율로 유지되어 다양한 화면 크기에서 일관된 UI 경험을 제공할 수 있습니다.

1. Reference Resolution

  • 기준 해상도를 설정하는 옵션입니다. 예를 들어, 1920x1080이나 1280x720과 같은 해상도를 기준으로 설정할 수 있습니다.
  • 설정된 Reference Resolution에 맞춰, 다른 해상도에서도 UI 요소가 상대적인 크기를 유지하도록 자동으로 스케일링됩니다.
  • 예를 들어, Reference Resolution이 1920x1080으로 설정된 경우, 이 해상도를 기준으로 하여 작은 화면에서는 UI가 더 작게, 큰 화면에서는 더 크게 조정됩니다.

2. Screen Match Mode

  • 화면 비율이 기준 해상도와 다를 때 UI를 어떻게 조정할지 결정하는 모드입니다. 다음 세 가지 모드가 있습니다:
  • Match Width or Height:
    • 화면 너비 또는 높이를 기준으로 스케일을 조정합니다.
    • Match 슬라이더(0에서 1 사이)를 통해, 너비와 높이 중 어느 쪽을 기준으로 할지를 설정할 수 있습니다.
    • 예를 들어, Match 값을 0.5로 설정하면 너비와 높이를 균등하게 조정하고, 0으로 설정하면 너비만을 기준으로, 1로 설정하면 높이만을 기준으로 스케일링됩니다.
  • Expand:
    • UI가 기준 해상도보다 작은 화면에서도 기준 해상도에 맞추기 위해 UI 요소를 확대합니다.
    • 결과적으로 일부 UI 요소가 화면 밖으로 나갈 수 있지만, UI의 비율은 유지됩니다.
  • Shrink:
    • UI가 기준 해상도보다 큰 화면에서도 기준 해상도에 맞추기 위해 UI 요소를 축소합니다.
    • 큰 화면에서 UI 요소가 축소되기 때문에 UI가 더 작은 공간에 표시될 수 있습니다.

3. Match 슬라이더

  • Match Width or Height 모드를 사용할 때, 화면의 너비와 높이 중 어느 쪽에 맞춰 스케일링할지를 결정하는 슬라이더입니다.
  • 값이 0이면 너비에 맞춰 UI가 조정되고, 값이 1이면 높이에 맞춰 조정됩니다. 0.5로 설정하면 너비와 높이의 중간값으로 UI 스케일이 결정됩니다.
  • 이 설정을 통해 화면 비율이 다를 때 UI가 의도한 대로 조정될 수 있도록 조정할 수 있습니다.

Scale With Screen Size의 장점

  • 해상도에 따른 일관된 UI: 화면 해상도나 크기가 달라져도 UI 요소들이 비슷한 크기와 위치를 유지하게 되어 일관된 UI 경험을 제공합니다.
  • 반응형 디자인: 다양한 해상도에서 UI가 조정되므로, 모바일 기기와 PC, 콘솔 등 다양한 화면 크기를 지원하는 반응형 UI 디자인에 유리합니다.

예시

  • 예를 들어, Reference Resolution을 1920x1080으로 설정하고 Screen Match Mode를 Match Width or Height로 설정하여 Match 값을 0.5로 두면, 화면의 해상도가 1280x720이든 2560x1440이든 상관없이 UI 요소가 화면 크기에 맞춰 적절히 조정됩니다.
  • 만약 세로 해상도가 중요한 모바일 게임이라면 Match 값을 1로 설정하여 높이에 맞춰 스케일링되게 할 수 있습니다. 반대로 가로 해상도가 중요한 PC 게임이라면 Match 값을 0으로 설정하여 너비에 맞춰 스케일링되도록 할 수 있습니다.

panel color 최대한 하얗게 했는데 왤케 회색으로 보이냐 강의 영상에서 본거랑 색감이 너무 다른데?

-> 1. 때문이었다.

Unity에서 Panel의 색상을 완전히 하얗게 설정했는데 회색으로 보이는 문제는 여러 가지 원인으로 인해 발생할 수 있습니다. 다음은 이 문제의 가능성 있는 원인들과 해결 방법입니다.

1. 캔버스 및 Panel 투명도 설정 확인

  • Panel의 색상이 완전히 하얗게 표시되지 않는 것은 투명도(Alpha 값)가 낮게 설정되어 있어서일 수 있습니다.
  • Inspector 창에서 Panel의 Color 설정을 확인하고, Alpha 값이 255로 설정되어 있는지 확인하세요.
    • 색상 설정 창에서 A 슬라이더를 오른쪽 끝까지 이동하여 불투명하게 설정하면 더 하얗게 표시될 수 있습니다.

2. Lighting(조명) 설정 확인

  • Unity의 Lighting 설정에 따라 UI 요소의 색감이 다르게 보일 수 있습니다. 만약 Scene의 조명 설정이 어둡다면 Panel이 회색이나 더 어두운 색으로 보일 수 있습니다.
    • Window > Rendering > Lighting 메뉴로 이동하여 Environment Lighting 또는 Ambient Color를 조정하거나, Panel이 있는 씬에 추가적인 Light를 배치해보세요.
    • 특히, Scene View에서 하얗게 보여도 Game View에서 다르게 보일 수 있으므로 Game View에서 최종 색상을 확인하는 것이 좋습니다.

3. Canvas Render Mode 확인

  • Canvas Render Mode가 World Space로 설정되어 있다면, Panel이 씬의 조명 영향을 받을 수 있습니다. 이 경우, Screen Space - Overlay나 Screen Space - Camera로 설정하면 조명의 영향을 받지 않아 순수한 색상이 표현됩니다.
    • Canvas를 선택하고 Inspector에서 Render Mode를 Screen Space - Overlay로 설정해보세요.

4. Post-Processing 효과 확인

  • Post-Processing 효과가 활성화되어 있다면, 콘트라스트, 밝기, 색조 등의 효과가 Panel의 색상에 영향을 줄 수 있습니다.
    • Post-Processing Volume에서 Color Grading 또는 Exposure와 같은 설정을 확인해보고, 조정해 보세요.
    • 특히, Tone Mapping이 활성화되어 있다면 색상이 어둡거나 회색으로 보일 수 있습니다.

5. 패널의 배경 이미지 확인

  • Panel에 Image 컴포넌트가 추가되어 있다면, 텍스처의 기본 색상이나 알파 값에 따라 색상이 다르게 보일 수 있습니다.
    • Source Image가 None으로 설정되어 있지 않다면, 기본 색상이 텍스처에 의해 영향을 받을 수 있습니다. Source Image를 None으로 설정하여 배경이 완전히 하얗게 보이도록 할 수 있습니다.

6. Quality Settings 확인

  • Unity의 Quality Settings에 따라 Anti-Aliasing이나 Color Space 설정이 색상 표현에 영향을 줄 수 있습니다.
    • Edit > Project Settings > Quality로 이동하여 Anti-Aliasing과 Color Space를 확인해보세요.
    • Color Space가 Gamma로 설정되어 있는지 확인합니다. Linear로 설정되어 있으면 어두운 색조가 추가될 수 있습니다.

9-slice 기법

이거 border 조절 왜 하는거임

Sprite Editor의 Border 설정은 9-Slice 스프라이트를 만들기 위해 사용하는 것입니다. 9-Slice 기법은 스프라이트를 9개의 구역으로 나누어 크기를 조절할 때 가운데 부분만 늘어나도록 만들어, 테두리나 모서리 부분은 왜곡되지 않고 고유의 모양을 유지할 수 있게 해줍니다. 이 기능은 주로 UI 요소(예: 버튼, 패널)에서 사용됩니다.

Border 조절의 목적

  1. 스프라이트의 왜곡 방지:

    • 스프라이트의 크기를 변경할 때, 가운데 영역만 늘어나도록 지정하여 테두리와 모서리 부분이 왜곡되지 않게 만듭니다.
    • 예를 들어, 원형 테두리가 있는 사각형 버튼을 크게 할 때, 테두리가 왜곡되는 것을 방지하고, 가운데만 늘어나게 설정할 수 있습니다.

  2. UI 요소의 크기 유연성 제공:

    • UI 디자인에서 버튼이나 패널 같은 요소의 크기를 화면 크기에 따라 유연하게 조정할 때 유용합니다.
    • Border를 설정하면 크기가 달라져도 테두리의 두께가 일정하게 유지됩니다. 이로 인해 여러 해상도에서도 일관된 UI 디자인을 유지할 수 있습니다.

  3. 리소스 최적화:

    • 같은 스프라이트를 다양한 크기로 사용해야 할 때, Border 설정을 통해 여러 크기의 스프라이트를 만들 필요 없이 하나의 스프라이트로 다양한 크기를 표현할 수 있습니다.
    • 이 방법은 메모리 절약과 작업 효율성을 높이는 데 도움이 됩니다.

Border 조절하는 방법

  1. Sprite Editor에서 스프라이트를 선택한 후, Border 설정에서 각 테두리의 크기를 지정합니다.
  2. Border 값을 조정하면, 초록색 선이 나타나며 9-Slice 영역을 지정할 수 있습니다.
    • 예를 들어, 위, 아래, 왼쪽, 오른쪽 각 128px씩 Border를 설정하면, 그 테두리 영역은 크기를 늘려도 변형되지 않고 고유의 형태를 유지합니다.
  3. Apply 버튼을 눌러 설정을 저장한 후, 스프라이트를 UI 요소로 사용할 때 이 9-Slice 설정이 적용됩니다.

요약

  • Border 설정을 통해 스프라이트의 테두리 부분이 늘어나지 않고 가운데만 늘어나도록 설정할 수 있습니다.
  • 주로 UI 요소의 크기 조절 시 유연성을 제공하고, 해상도 변화에 유연한 디자인을 위해 사용됩니다.
  • Border 설정을 통해 UI 요소의 일관된 모양과 품질을 유지할 수 있습니다.

https://docs.unity3d.com/kr/2020.3/Manual/9SliceSprites.html

이거 보니까 바로 이해가 갔다

border는 가운데를 조절하는 parameter



👾 나만무

아이디어 제안

  • 정적으로 NPC들한테 말도 걸고 다닐 수 있는 기능 추가는 어떤지 (어떻게 써먹을진 아직 모르겠)
  • 괴물은 못 죽이고 과학자들은 괴물한테 들키지 않으면서 미션을 전부 클리어하는 걸로 목표를 바꾸면 어떤지 (죽고 죽이는 역할이 바뀌면 공포심 자극 불가, 긴장감으로 치환됨)
  • 공포로 밀고 나간다면 사운드, 모델링, 맵 제작의 완성도를 더 높여야 할듯. UI, 게임 로직 같은 것들 보단 연출이 훨씬 중요해지는 것 같음.
  • 맵은 아예 처음부터 새로 만드는게 나을 수도 (지금은 너무 어디가 어딘지 모르겠음)
  • 밤이 되면 모든 사람의 화면에 괴물 변신하는 컷신 보여주면 어떨지
  • 플레이어들 제외한 과학자들은 밤이 되면 주저앉아 떨고 있다
  • 플레이어들 제외한 과학자들은 괴물을 돕고 있다는 설정?
  • 서로간의 콜라이더 없애고 이동시켜보는 것도 테스트해봐야 할듯. 현재는 NPC들이 너무 많아서 이동에 불편.
  • 굳이 템포 빠르게 가져가지 말고 5분 간 낮과 밤 사이클을 한 번씩만 하는 건 어떤지? 낮에 과학자 팀이 준비한 걸로 (무기, 함정 등) 밤에 괴물에게 대항한다던지. 낮도 밤도 괴물이 과학자들 죽일 수 있는데 밤에는 과학자들이 필요 없어져서 전부 죽여도 된다는 설정? 무지성 pvp 푹찍푹찍이 아니라 좀 더 rpg의 퀘스트같은 느낌을 가미해도 괜찮지 않을까.
profile
lazyArtisan
이전 포스트

크래프톤 정글 TIL : 1026

다음 포스트

크래프톤 정글 TIL : 1028

0개의 댓글