[Unity/2D] 캐릭터 방향 전환하기 - 플립(Flip)

시작 하기 전에 이전 포스터 내용 참고해주세요!

2024.03.28 - [Unity/2D] - [Unity/2D] 캐릭터 이동하기, 초당 프레임 설정

 

캐릭터 방향 전환 변수(direction) 설정

    float direction = 0.05f;
    void Update()
    {
        // 오른쪽 벽에 부딪혔을 때 왼쪽으로 방향 전환
        if(transform.position.x > 2.6f)
        {
            direction = -0.05f;
        }

        // 왼쪽 벽에 부딪혔을 때 오른쪽으로 방향 전환
        if (transform.position.x < -2.6f)
        {
            direction = 0.05f;
        }

        transform.position += Vector3.right * direction; // Vector3.right == new Vector3(1f, 0, 0);
        // 1 * 0.05, 0 * 0.05, 0 * 0.05 == 0.05, 0, 0
    }

 

이전 포스터에서 transform.position.x은 값을 불러오기만 가능하다고 했습니다.

transform.position.x 값을 불러왔을 때 2.6f(오른쪽 벽)보다 값이 크다면(벽을 넘어갔다면) 왼쪽으로 방향 전환을 하는 코드입니다.

반대로 -2.6f(왼쪽 벽)을 넘어가면 오른쪽으로 방향 전환을 합니다.

 

실행해보면 캐릭터가 벽에 부딪히면 방향 전환을 합니다.

하지만 전환할 때 몸이 반대로 뒤집히는 이미지도 바껴야겠죠?

 

 

방향 전환에 따른 이미지 플립(Flip)

이번엔 이미지 좌우 반전이 일어나게 해주려고 합니다.

인스펙터창에서 Sprite Renderer 안에 Flip이라는 것이 있는데요, x에 체크를 해주면

Flip 체크하지 않음

이랬던 모습이

Flip 'x'에 체크함

이렇게 바뀌는 것을 확인할 수 있습니다.

 

이걸 이용해서 스크립트를 작성해봅시다.

SpriteRenderer renderer;

 

우선은 위와 같이 SpriteRenderer 컴포넌트 정보를 담을 변수를 선언합니다.

renderer = GetComponent<SpriteRenderer>();

 

GetComponent를 이용해서 renderer라는 변수에 SpriteRenderer 컴포넌트에 대한 정보들이 담겨지도록 초기화합니다.

    SpriteRenderer renderer;

    // Start is called before the first frame update
    void Start()
    {
        Application.targetFrameRate = 60; // 어떤 기기든지 1초에 60번만 계산될 수 있게끔 설정
        renderer = GetComponent<SpriteRenderer>(); // renderer라는 변수에 SpriteRenderer 컴포넌트에 대한 정보들이 담겨짐
        // 주의! 이 스크립트가 붙여진 오브젝트에 같이 있는 컴포넌트만 GetComponent로 불러올 수 있음!
    }

 

주의할 점은 인스펙터창에 해당 스크립트와 같이 붙여진 컴포넌트만 GetComponent로 불러올 수 있습니다.

 

이제 SpriteRenderer 컴포넌트 안에 flip 값을 변경해봅시다.

    void Update()
    {
        // 오른쪽 벽에 부딪혔을 때 왼쪽으로 방향 전환
        if(transform.position.x > 2.6f)
        {
            renderer.flipX = true; // 체크되었을 때 왼쪽 방향으로 전환
            direction = -0.05f;
        }

        // 왼쪽 벽에 부딪혔을 때 오른쪽으로 방향 전환
        if (transform.position.x < -2.6f)
        {
            renderer.flipX = false; // 체크되지 않았을 때 오른쪽 방향으로 전환
            direction = 0.05f;
        }

        transform.position += Vector3.right * direction; // Vector3.right == new Vector3(1f, 0, 0);
        // 1 * 0.05, 0 * 0.05, 0 * 0.05 == 0.05, 0, 0
    }

 

renderer.flipX = true; 라는 의미는 flip의 x가 체크되었다는 의미입니다.

체크 되었을 때는 왼쪽으로 방향이 바뀌었죠?

Flip 'x'에 체크함

renderer.flipX = false; 반대로 false는 flip의 x가 체크되지 않았다는 의미입니다.

그렇다면 오른쪽 방향입니다.

Flip 체크하지 않음

 

이렇게 코드를 작성하고 실행시켜주면!

 

 

 

 

다음편

2024.03.28 - [Unity/2D] - [Unity/2D] 마우스 왼쪽 버튼이 눌러졌을 때 캐릭터 방향 전환하기 - Mouse Input

 

모바일 화면 크기 설정이 궁금하다면?

2024.03.28 - [Unity/기타] - [Unity] 모바일 크기 설정 / 디스플레이 설정