[멋쟁이사자처럼부트캠프] 유니티 게임 개발 5기(11일차) - if문 및 Marterial 실습

✅ 오늘의 학습 목표
1. C# 기초 학습(7) - if문 실습
2. Marterial 실습
3. 고양이 무한 맵 응용

 

1. C# 기초 학습(7)

1. if문 실습 - 고양이 무한 맵

🥕  예행 작업
1. Scene 생성 (cat)
2. Script 생성 (Transform_LoopMap)

 

1.1. Asset 다운로드 및 Import

Pet Cats Pixel Art Pack | 2D 캐릭터 | Unity Asset Store

 

[Import한 Package가 보이지 않을 때]

프로젝트 메뉴 - 우측 상단에서 필터 걸어서 확인할 수 있음

 

1.2. cat 오브젝트

 

고양이 idle 오브젝트를 삽입하면 크기가 굉장히 작음

이때, 스케일 값을 올리는 게 아니라 픽셀 값을 조정해주어야 함 (보통 이렇게 작업한다고 하심)

 

Asset 폴더에 있는 idle 파일을 클릭하고 인스펙터 창에서 Pixels Per Unit 값을 수정해 주면 된다.

주의할 점은 아래 해상도가 딱 떨어지도록 유닛을 맞춰주어야 한다. (안그러면 실선 생김)

 

❓ 와이?

transform.position 값을 가져올 때 정확히 정수 값을 가져오는 게 아니라 소수값을 가져오기 때문에 매번 값이 달라짐

= 그래서 실선이 생김 = 머테리얼로 해결하거나 해상도를 맞춰야 함

 

1.3. 배경 및 바닥 오브젝트

(배경과 바닥 이미지는 Flappy 패키지를 이용함)

위치 및 사이즈는 알잘딱!

 

내 화면에 맞게 사이즈를 잘 조절해 줬는데 아래와 같은 경고창이 나타남 (위 이미지에도 있음)

 

Tight Mesh는 내용 있는 픽셀만 감싸는 다각형 → 타일 경계가 어긋나거나 깨짐 현상 발생하니 Full Rect 쓰라고 저런 경고창이 나타나는 거임!

그래서 우리는 Mesh Type을 Full Rect로 변경해 주었음.

 

1.4. 메인 카메라 세팅

2D니까 Orthographic,

픽셀 퍼펙트 카메라는 왜 했는지 기억 안남 

마지막엔 왜인지 size 5.4 / per unit 100으로 함..

 

 

1.5. 코드 구현

우리는 if문을 사용해서 배경, 바닥 이미지가 다시 제자리로 돌아오게끔 구현해 줄 거임

using UnityEngine;
using static UnityEngine.RuleTile.TilingRuleOutput;

public class Transform_LoopMap : MonoBehaviour
{
    public float moveSpeed = 3f;

    // 바닥은 유니터 인스펙터에서 위치 수정해줘야 함
    public Vector3 returnPos = new Vector3(30f, 1.5f, 0f);

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

    void Update()
    {
        // 배경이 왼쪽으로 이동하는 기능
        // deltaTime 값은 컴퓨터 성능에 따라 값이 다르기 때문에 fixedDeltaTime을 사용
        transform.position += Vector3.left * moveSpeed * Time.fixedDeltaTime;

        Debug.Log(Time.fixedDeltaTime);

        // 이미지의 x축 값이 -30을 넘는 순간
        if (transform.position.x <= -30f)
        {
            // x값을 30으로 초기화
            transform.position = returnPos;
        }
    }
}

 

▶ deltaTime과 fixedDeltaTime의 차이

 

deltaTime 값을 로그로 가져오면

값을 가져올 때마다 큰 차이가 나는 것을 볼 수 있다.

→ 그래서 이미지의 움직임이 일정하지 않고 불규칙하다는 것을 알 수 있음

=> 그러면 if문으로 이미지를 다시 가져올 때 원래 옆에 있던 이미지와 딱 안 붙어서 실선이 보일 수 있음

 

그래서 FixedDeltaTime 메소드를 이용해서 값이 일정할 수 있도록 수정해줌!

 

▶ if문 조건걸 때 참고할 사항

 

가로 간격을 30으로 해놓았기 때문에, 이미지의 x축 값이 -30을 넘는 순간, x값을 30으로 초기화해서 이미지를 다시 가져오도록 설정했음

 

2. Material

머테리얼은 게임 오브젝트가 입는 옷이다.

이 머테리얼을 적용하는 방법, 특징에 대해 알아보자.

🥕 예행 작업
1. Scene 생성 (Material)
2. Script 생성 (StudyMaterial)

1. Lit과 Unlit의 차이

머테리얼 → 인스펙터창 - Shader

• lit은 빛에 의한 영향을 받는 일반적인 쉐이더
• unlit은 빛의 영향을 받지 않음

 

1.1. Surface

 

알파값을 조절할 경우 Surface Type을 투명값으로 설정해주어야 함

오른쪽 GIF에서 오른쪽 상단 빨간 상자를 유의해서 보면, Surface Type에 따라 투명도가 조절됨

 

1.2. Render Face

머테리얼이 어느 방향의 면(앞면/뒷면)을 그릴지 결정하는 옵션

어떻게 설정하느냐에 따라 카메라가 해당 오브젝트 안에 들어가도 색이 보이고, 안보일 수 있음

 

2. 머테리얼 적용

2.1. 패키지 다운로드 및 Import

 

2.2. Ground라는 머테리얼 생성

 

2.3. 생성한 머테리얼에 텍스쳐 삽입 및 적용

 

2.4. Normal Map 적용

노멀맵은 표면의 입체감을 만들어주는 텍스처이다.

보통 Z축(파란색) 성분이 강하게 설정되어 있다.

 

2.5. Height Map 적용

Height는 빛의 음영을 표현한 것으로 오브젝트의 깊이감을 좀 더 생동감 있게 표현해 준다.

 

2.6. Occlusion Map

= AmbientOcclusion

= AO라고 줄여 말하기도 한다.

= 주변 환경에 의해서 생기는 음영을 표현한 것

 

 

AO를 적용하면, 그림자 진 부분이 좀 더 어두워진 것을 알 수 있다.

 

2.7. Tiling

패턴 크기 및 반복 밀도를 조정하는 기능

 

배경이나 바닥 머티리얼은 타일링을 통해 일정한 패턴을 반복하여 표현하는 경우가 많다. 하지만 좁은 공간에서 동일한 패턴이 과도하게 반복되면 현실감이 떨어질 수 있으므로 타일링 값을 조절하여 반복의 밀도나 크기를 조정해 준다.

 

3. 머테리얼 실습

3.1. 스크립트를 통해서 머테리얼 값 바꾸기

using UnityEngine;

public class StudyMaterial : MonoBehaviour
{
    public Material mat;

    void Start()
    {
        // Material을 바꾸는 방식이 아님!! XXX
        //this.GetComponent<Material>() = mat;

        // 1. MeshRenderer에 접근해서 머테리얼을 바꾸는 방식
        //this.GetComponent<MeshRenderer>().material = mat;
        //this.GetComponent<MeshRenderer>().sharedMaterial = mat;

        // 2. 머테리얼 자체를 바꾸지 않고 머테리얼 데이터를 바꾸는 방식
        //this.GetComponent<MeshRenderer>().material.color = Color.green; // 적용한 머테리얼의 색상을 바꿔버림
        //this.GetComponent<MeshRenderer>().sharedMaterial.color = Color.green; // 쉐어한거 다 바꿔버림

        // 3. 색상을 직접 넣기 (color는 4개의 값이 들어감)
        //this.GetComponent<MeshRenderer>().material.color = new Color(200f, 137f, 70f, 255f); // 이러면 후광이 있기 때문에 rgb 값인 255로 나눠줘야함!
        this.GetComponent<MeshRenderer>().material.color = new Color(130f / 255f, 20f / 255f, 70f / 255f, 1);
    }
}

 

 

3.2. 색상 코드를 통해서 머테리얼 값 바꾸기 (협업)

 

using UnityEngine;

public class StudyMaterial : MonoBehaviour
{
    public Material mat;

    public string hexCode;

    void Start()
    {
        Material mat = this.GetComponent<MeshRenderer>().material;
        Color outputColor;

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

 

인스펙터에서 원하는 색상 코드를 입력해 준 후 실행하면 잘 바뀌는 것을 확인할 수 있다!

 

 

3. 고양이 무한 맵 응용

1. Offset 값 변경

🥕 예행 작업
1. 기존 오브젝트 모두 비활성화
2. Quad 2개 생성 (배경용, 바닥용)
3. Script 생성 (Material_LoopMap)

 

1.1. 머테리얼 생성 및 적용

 

머테리얼 배경용, 바닥용 2개를 만들고 쉐이더를 Unlit - Texture로 변경해줌

그런 다음 각각 Quad에 해당 머테리얼을 적용시킴

 

1.2. 코드

using UnityEngine;

public class Material_LoopMap : MonoBehaviour
{
    // private여서 인스펙터에서 못 넣음
    private Renderer renderer;

    public float offsetSpeed = 0.1f;

    void Start()
    {
        renderer = GetComponent<Renderer>();
    }

    void Update()
    {
        // 2D여서 Vector2로 (타입에 맞게 설정하면 됨!)
        Vector2 offset = Vector2.right * offsetSpeed * Time.deltaTime;

        // Texture의 Offset을 적용하겠다.
        // MainTex는 쉐이더 변수명
        renderer.material.SetTextureOffset("_MainTex", renderer.material.mainTextureOffset + offset);
    }
}

 

Offset값을 변경하여 if문 없이 배경과 바닥이 자연스럽게 이동됨.

머테리얼을 적용했기 때문에 가능한 코드임!

 

2. 고양이 애니메이션

2.1. 적용법

 

2.2. 결과

 

 

 

---

 

 

오늘은 수업 중간에 조퇴를 하는 바람에..

이해 없이 넘어간 부분이 많다. 그 부분은 빨간 음영 쳐놨음..

다음 회고 시간에 수정해놔야겠돰!