[Unity/2D/플랫폼 게임] 플레이어 좌우 조작(좌우 반전)

kim_sang_ june·2023년 2월 13일
1

2D 플랫포머 게임 좌우이동 구현

본 게시물은 "레트로의 유니티 게임 프로그래밍 게임 에센스(개정판)" 실습 과정 예시를 변형한 프로젝트입니다.

SpriteRenderer.flipX

2D 플랫포머 게임에서 플레이어의 좌우이동을 구현하는데 중요한 변수이다.

기본 오브젝트의 default Component(클래스)인 Sprite Renderer가 있다.
오브젝트의 그래픽 외형을 그려주는 Component이다.

Sprite Renderer가 가지고 있는 여러 변수들이 있는데 그중 Flip 변수가 오브젝트의 외형을 대칭시키는 기능을 한다.
(Flip 같은 요소를 "변수"라는 명칭을 쓰는지는 잘 모르겠다)

Flip에는 하위 요소(체크 박스)가 두 개 더 있는데 위 사진에서 보다시피 XY이다.
말 그대로 오브젝트(외형)를 X축을 기준으로 뒤집을(대칭시킬) 것이냐, Y축을 기준으로 뒤집을 것인지를 결정한다.

우리는 플랫포머 게임에서 "좌우이동"을 구현 할 것이기 때문에 좌우대칭, "X축 대칭"을 선택하면 된다.


보시다시피 체크를 하면 플레이어 캐릭터가 뒤집어진다.

.FlipX

그러나 이런 식으로 체크를 하면 게임 초기 세팅에서 캐릭터의 방향이 바뀐 것일 뿐이다.

우리는 방향키에 따라 캐릭터의 방향을 바꿔서, 플레이어의 좌우이동을 구현해야한다.

이때는 스크립트에서 SpriteRenderer를 불러와서 변수 flipX에 접근하면 된다.


using UnityEngine;

// PlayerController는 플레이어 캐릭터로서 Player 게임 오브젝트를 제어한다.
public class PlayerController : MonoBehaviour {
  
    private SpriteRenderer playerSpriteRenderer;
    
   private void Start() {
        playerSpriteRenderer = GetComponent<SpriteRenderer>();
   }


   private void Update() {
       
        if (Input.GetKey(KeyCode.RightArrow))
        {
        
            playerSpriteRenderer.flipX = false;
            
        }
        else if (Input.GetKey(KeyCode.LeftArrow))
        {
        
            playerSpriteRenderer.flipX = true; 
            
        }

   }

이번 주제인 sprite 반전을 코드에서 보기위해 관련 코드만 가져왔다.
좌우이동을 구현하려면 좌우 이동도 구현해야하지만 관련 부분은 "플레이어 이동"에서 다루려고 한다.
(좌우 이동만 구현하면 캐릭터의 좌우(2D에서는 앞뒤)가 바뀌지 않고 플레이어가 이동한다.
위 코드처럼 대칭만 구현한다면 방향키에 따라 캐릭터의 앞뒤만 바뀐다.
실제 "이동"과 "외형의 변화"는 별개이다.)

위에서 보다시피 Sprite Renderer 컴포넌트를 담을 변수 playerSpriteRenderer를 선언한다.
(타입은 SpriteRenderer이다.)

private SpriteRenderer playerSpriteRenderer;

그리고 Start함수에서 GetComponent<>()를 이용해 현 오브젝트의 Sprite Renderer을 할당해준다.

 playerSpriteRenderer = GetComponent<SpriteRenderer>();

이제 Update()함수로 넘어와 사용자 조작에 따른 좌우 외형변화를 구현할 차례이다.
여러 방법이 있겠지만 간단하게 IntPut.GetKey()를 이용해 좌우 화살표 키(~~Arrow)를 입력 받았다.

이때 playerSpriteRenderer.flipX에 접근해 해당값을 false, true로 바꾸면 된다.

playerSpriteRenderer.flipX = false;

false라면 맨 위 예시에서 X체크박스가 체크되지 않았을때 처럼, true라면 X체크박스가 체크 되었을 때처럼 작동하게 된다.

이제 게임을 테스트해보면, 플레이어 캐릭터가 좌우 화살표입력에 따라 바라보는 방법이 바뀌는 것을 확인 할 수 있을 것이다.

이상 플랫포머 게임에서 캐릭터를 좌우 대칭하는 방법이다.

Sprite를 따로 만들지 않아도 된다.

좌우가 반전된 그림이 필요하다고 해서 그림판이다 포토샵에 들어가 좌우 대칭 버튼을 누르고 다시 저장해 새로 애니메이션을 만들 필요 없다는 이야기이다.
Unity에서는 Sprite Renderer에서 좌우대칭을 지원하고 있으니 flipX 만 잘 기억하고 있으면 훨씬 빠르고 적은 용량으로 구현할 수 있다.

이동과 표현은 별개이다

위에서도 살짝 언급했듯이 캐릭터가 좌우로 "이동 하는 것" 과 좌우로 이동하는 것 처럼 보이는 것는 것은 별개이다.
"이동" 은 RigidBody Component에 접근해 실제 오브젝트의 위치나 운동 상태를 바꾸는 것이고, "보이는 것" 은 Sprite Renderer Component에 접근해 좌우를 반전시켜 그 방향으로 향하는 모습으로 만들어 주어야한다.

사실 이 작업(좌우반전)은 게임 플레이자체에는 아무 영향을 미치치 않는다.
그저 사용자가 보이는게 달라질 뿐이다.
모든 물리 작용들은 그대로이기 때문에 점프나 이동속도 등은 바뀌는게 없다.

하지만 누가 앞쪽 밖에 볼 줄 모르고, 뒤로 갈때는 뒷걸음질 치는(앞으로 달리는 속도로) 플랫포머 게임을 하고 싶을까(그런걸 컨셉으로 만든 게임이 아니고서야)

실제로 이렇게 만들고 나면 캐릭터의 이동이 훨씬 자연스럽고 시중의 게임처럼 느껴짐을 단번에 알 수 있다.(당연하겠지만)

Animator가 아니라 Sprite Renderer

사실 "외형" 을 바꾸는 것이기 때문에 Animator을 조정하는게 아닐까 생각이 들 수도 있지만 그게 아니라 Sprite Renderer에서 외형 대칭기능을 제공한다는 것도 알아둘만한 점인 것 같다.
(Animator에 비슷한 기능이 있는지는 아직 나도 모르겠다.)

+filp...

나만 헷갈리는 지는 모르겠는데 자꾸 flip을 filp이라고 쓰게된다...
이걸로 에러도 몇번 냈고, 이 글을 쓰면서도 오타를 냈다.
조심하시길 바란다.


본 글은 Unity를 배우는 입장에서 첫 예제를 따라하며 느낀 것을 적는 게시물이기 때문에 혹시 오류가 있거나 자잘한 용어문제, 더 나은 해결책이 있다면 언제든지 댓글로 지적해주시면 감사하겠습니다.

[출처]레트로 유니티 게임 프로그래밍 에센스(개정판) 교제 예제
(flip에 대한 내용은 교재에 나오지 않는 걸로 압니다)

0개의 댓글