멋쟁이사자처럼부트캠프 유니티 게임 개발 5기 11일차 - 2D, 머테리얼, 무한 루프맵

2025. 5. 28. 01:56·강의/멋쟁이 사자처럼 유니티 부트캠프

이론

레이어 마스크

카메라

Camera - Rendering - Culling Mask에서 렌더링할 레이어 설정 가능

비트 플래그

bool을 여러개 쓰는 것이 아닌, 비트 플래그 값으로 Layers의 활성 상태를 설정할 수 있음

shift 연산자

>> 오른쪽 이동 / << 왼쪽으로 이동

int num = 1; // 0001
num = num << 2; // 0010 -> 4
int layerMask = 1 << 8;
# OR 연산
int layer (1<<6) | (1<<8);

머테리얼 (Material)

게임 오브젝트가 입는 옷

Shader : 렌더링하는 방법

  • Lit : URP 프로젝트에서 기본으로 사용되는 Shader
  • Standard : Built-in 방식의 구버전 기본 Shader

Shader에 따라 그려지는 모습이 다르다.

  • Lit : 빛에 의한 영향을 받는 일반적인 셰이더
  • Unlit : 빛의 의해서 영향을 안 받는 셰이더

Surface Type : Opaque 투명 / Transparent 불투명 (Base Map의 A값 조절로 투명도 조절 가능)

Render Face : 양면 중 어디 부분을 렌더링할지 결정

Metaillic Map - Roughness(거칠기) 넣기 → 정반사 난반사 조절

Smoothness가 최대면 매끈 → 정반사

Normal Map - NormalGL 넣기

유니티 - 오픈gl, 언리얼 - DirectX

Height Map - Displacement 넣기 : 빛의 음영을 표현

Occlusion Map - AmbientOcclusion(AO) 넣기 : 환경차폐 (가려진 부분은 어두워지고, 튀어나온 부분은 밝아짐)

Script로 Material 조작

Material에 접근

public Material mat;

void Start()
{
    // this.GetComponent<Material>() = mat; // Material을 바꾸는 방식 X
    this.GetComponent<MeshRenderer>().material = mat; // MeshRender에 접근해서 바꾸는 방식
}

Material 데이터 수정

// 수정된 임시 인스턴스를 생성해서 변경
this.GetComponent<MeshRenderer>().material.color = Color.black;

// Material 원본 자체를 수정
this.GetComponent<MeshRenderer>().sharedMaterial.color = Color.black;

Materials : 머테리얼이 여러개 들어가는 경우의 배열

new Color로 만들 경우, RGBA값을 각각 0~1 사이 숫자로 넣어야함

new Color(130f/255f, 20f/255f, 70f/255f, 1);

hex Code 사용

Color ouputColor;
if (ColorUtility.TryParseHtmlString(hexCode, out ouputColor))
{
    mat.color = ouputColor;
}

 

고양이 플랫폼 게임 실습

2D Sprites 사용

사이즈 조절

Spirte Mode - Pixels Per Unit 조절 후 Apply

타일링

Sprite Renderer - Draw Mode - Tiled 설정 후 Size 변경

Mesh Type - Full Rect로 바꾸면 해결 가능

무한 루프 맵

1. 트랜스폼 사용

  1. 배경 이미지를 2개 이어붙여서 왼쪽으로 이동시킨다.
  2. 하나의 이미지가 화면 밖으로 벗어나면, 화면 오른쪽으로 이동시킨다.
	
public float moveSpeed = 3f;
public float height = 1.5f;
public Vector3 returnPos;

void Start()
{
    // 배경 이미지 길이가 30이기 때문에 x = 30f
    returnPos = new Vector3(30f, height, 0f);
}

void Update()
{
    // 배경을 왼쪽으로 이동
    transform.position += Vector3.left * (moveSpeed * Time.deltaTime);

    if (transform.position.x <= -30)
    {
        transform.position = returnPos;
    }
}

두 이미지 사이 실선 이슈 해결

deltatime는 매번 미묘하게 값이 다르기 때문에 position값이 불균형하게 이동하게 된다.

따라서 속도가 빠를 경우 이어붙인 이미지 사이에 틈이 생기게 된다.

transform.position += Vector3.left * (moveSpeed * Time.fixedDeltaTime);

Time.fixedDeltaTime을 사용하면 일정한 값이 유지되기 때문에 해결 가능하다.

한계점

트랜스폼 사용의 경우 픽셀 사이즈, 유닛값 등 상세하게 신경 쓸 것이 많음

2. 머테리얼 이용

Material Base Map에 이미지 적용 후, Shader를 Unlit - Texture로 변경

Wrap Mode - Repeat

private MeshRenderer renderer;
public float offsetSpeed = 0.1f;
void Start()
{
    renderer = GetComponent<MeshRenderer>();
}

void Update()
{
    Vector2 offset = Vector2.right * (offsetSpeed * Time.deltaTime); // 변경된 offset값
    renderer.material.SetTextureOffset("_MainTex", renderer.material.mainTextureOffset + offset); // texture의 Offset을 적용
}

“_MainTex”는 Base Map을 의미

애니메이션

Sprites 이미지를 한번에 Scene에 가져가면 Animation 파일로 저장 가능

'강의/멋쟁이 사자처럼 유니티 부트캠프' 카테고리의 다른 글
  • 멋쟁이사자처럼부트캠프 유니티 게임 개발 5기 13일차 - 핀볼 실습, 애니메이션
  • 멋쟁이사자처럼부트캠프 유니티 게임 개발 5기 12일차 - 콜라이더, 점프, 파이프 생성
  • 멋쟁이사자처럼부트캠프 유니티 게임 개발 5기 10일차 - 룰렛, transform, mesh, callback
  • 멋쟁이사자처럼부트캠프 유니티 게임 개발 5기 9일차 - LookAt, Rotate
로또
로또
게임 개발자 연습생의 발전 일지
  • 로또
    게임 개발 발전소
    로또
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 개발
        • 코딩테스트
        • JAVA
        • DB
        • Unity
      • 강의 N
        • 패스트캠퍼스 0원 챌린지
        • 멋쟁이 사자처럼 유니티 부트캠프 N
      • 게임
        • 리뷰
  • 블로그 메뉴

    • 홈
    • 방명록
    • 글쓰기
  • 링크

    • GitHub
  • 공지사항

  • 인기 글

  • 태그

    백준
    환급챌린지
    C#
    Java
    한번에끝내는프론트엔드개발초격차패키지Online
    게임개발
    2839
    코딩테스트
    BFS
    트리
    C4D
    완전탐색
    패스트캠퍼스
    패캠인강후기
    직장인자기계발
    3D웹인터랙티브
    멋쟁이사자처럼후기
    분리집합
    dfs
    그래프
    패스트캠퍼스후기
    Unity
    자료구조
    백트래킹
    직장인인강
    오공완
    패캠챌린지
    그리디
    수강료0원챌린지
    그리디알고리즘
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
로또
멋쟁이사자처럼부트캠프 유니티 게임 개발 5기 11일차 - 2D, 머테리얼, 무한 루프맵
상단으로

티스토리툴바