유니티 카메라 흔들기 / Camera Shake 구현의 모든 것

해당 티스토리 페이지는 필자가 유니티 C# 개발을 하면서 학습한 내용들을 기록하고 공유하는 페이지입니다 !

- 틀린 부분이 있거나, 수정된 부분이 있다면 댓글로 알려주세요 !

- 해당 내용을 공유 or 퍼가도 좋으나, 출처를 꼭 명시해주세요 !

- 해당 글의 모든 저작권은 Chameleon Studio에 있습니다.

- 방문해주셔서 감사합니다 ^^

유니티 카메라 흔들기

안녕하세요 ㅎㅎ 카멜레온입니다.

오늘은 카메라 흔들기(Camera Shake) 기법을 구현해보도록 하겠습니다.

게임을 제작하다보면,,

카메라를 흔드는 효과를 주고 싶을 때가 있습니다.. ㅎㅎ

뭐,, 예를 들자면,

게임에서 폭탄 또는 수류탄이 터졌을 때 카메라를 흔들수도 있겠고,

내가 적에게 피격을 받았을 때 카메라를 흔든다던지,

아니면 블록을 깰 때, 같은 색 버튼을 눌러야하는데

다른 색 버튼을 눌러서 패널티를 받을 때

카메라를 흔든다던지 등의 경우가 있겠습니다 !

마지막의 경우는 모바일 게임 <크러쉬팡>에서 그렇게 하죠 ㅎㅎㅎ

이렇게 다양하게 활용할 수 있는

카메라 흔들기 기법에 대한 구현방법을 알아봅시다.

<크러쉬팡>의 프로젝트

우선 프로젝트를 열어봅시다.

저는 이전에 Chameleon Studio가 제작했던,

<크러쉬팡>의 프로젝트를 열었습니다.

그리고 스크립트를 만들어주세요.

저는 스크립트 명을 CameraShake라고 하고 스크립트를 만들었습니다 !

스크립트가 만들어졌다면,, 스크립트를 열어봅시다.

이미지가 안보이시는 분들은 아래 코드 보기를 누르고 코드를 확인해주세요.

 // 카메라 흔들기

    public float ShakeAmount;

    //public Canvas canvas;

    float ShakeTime;

    Vector3 initialPosition;

    public void VibrateForTime(float time)

    {

        ShakeTime = time;

        //canvas.renderMode = RenderMode.ScreenSpaceCamera;

        //canvas.renderMode = RenderMode.WorldSpace;

    }

    private void Start()

    {

        initialPosition = new Vector3(0f, 0f, -5f);

    }

    private void Update()

    {

        if (ShakeTime > 0)

        {

            transform.position = Random.insideUnitSphere * ShakeAmount + initialPosition;

            ShakeTime -= Time.deltaTime;

        }

        else

        {

            ShakeTime = 0.0f;

            transform.position = initialPosition;

            //canvas.renderMode = RenderMode.ScreenSpaceCamera;

        }

    }

스크립트 안에 위의 코드를 넣어주세요.

해당 코드는 카메라를 흔드는 내용의 코드입니다.

간단히 코드 설명을 해보자면,

우선,

//로 지워놨던 것부터 말해봅시다.

//로 지워진 Canvas에 관한 내용은,

캔버스에 카메라가 달려있고,

렌더모드가 Screen Space - Camera일 때,

사용하는 카메라 흔들기 기법입니다.

캔버스가 카메라에 달려있고, 렌더 모드가

Screen Space - Camera인데

World Space 모드로 카메라를 흔들고 싶다하시는 분들은

해당 //를 지우시고, 캔버스를 선언된 칸에 넣고 사용하시면 됩니다.

해당 부분의 코드 설명입니다.

 // 카메라 흔들기

    public float ShakeAmount; => 1번

    //public Canvas canvas;

    float ShakeTime;              => 2번

    Vector3 initialPosition;       => 3번

1번.

ShakeAmount 변수를 선언하였습니다.

카메라가 흔들리는 '총량(힘)'을 설정할 수 있습니다.

숫자가 높을수록 카메라가 쎄게 흔들립니다.

2번.

ShakeTime 변수를 선언하였습니다.

카메라가 흔들리는 '시간'을 설정할 수 있습니다.

3번.

카메라의 흔들리는 위치(진원)입니다.

대부분의 경우,

카메라 자기 자신의 위치를 설정합니다.

카메라의 위치가 진원지가 되는 것이죠.

이제 스크립트를 저장하고 유니티로 돌아와주세요.

스크립트를 카메라에 연결한 후,

1번의 총량을 먼저 설정하고 나머지 코드 설명을 하겠습니다.

메인 카메라 오브젝트의 인스펙터창

유니티로 돌아오셨으면,

흔들고 싶은 카메라에 해당 스크립트를 넣어줍니다.

그 다음 Shake Amount를 설정해주세요.

저는 너무 크게 흔들리면,

유저가 불편해 할 수도 있기에,,

미세한 떨림만 주었습니다.

다시 나머지 코드 설명하겠습니다.

해당 부분의 코드 설명입니다.

private void Start()

    {

        initialPosition = new Vector3(0f, 0f, -5f);

    }

게임이 시작하면, 카메라가 흔들릴 위치를 잡아줍니다.

저는 카메라 자기 자신의 위치에서 흔들리게 할 것이기 때문에,

카메라의 Position인 0,0,-5의 위치로 잡아주었습니다.

여러분들은 여러분들의 카메라 위치를 확인하시고,

위치 값을 넣어주세요.

바로 위 사진인 카메라의 Inspector창 사진에서 보시면,

Transform 컴포넌트의 Position에서 카메라의 위치를 확인할 수 있습니다.

제 카메라의 경우, 0, 0, -5로 설정되어 있습니다.

해당 부분의 코드 설명입니다.

private void Update()

    {

        if (ShakeTime > 0)

        {

            transform.position = Random.insideUnitSphere * ShakeAmount + initialPosition;

            ShakeTime -= Time.deltaTime;

        }

        else

        {

            ShakeTime = 0.0f;

            transform.position = initialPosition;

            //canvas.renderMode = RenderMode.ScreenSpaceCamera;

        }

이제 Update문에서 카메라의 흔들림이 있었다를 감지합니다.

ShakeTime의 흔들림 시간이 요청되면,

카메라의 움직임이,

랜덤으로 카메라의 움직임 총량(힘)만큼 카메라의 위치에서 흔들리게 됩니다.

그렇다면, 카메라의 움직이는 시간 설정은 어디서 어떻게 할까요?

    public void VibrateForTime(float time)

    {

        ShakeTime = time;

        //canvas.renderMode = RenderMode.ScreenSpaceCamera;

        //canvas.renderMode = RenderMode.WorldSpace;

    }

이 부분의 코드를 통해 카메라의 흔드는 시간을 설정합니다.

<크러쉬팡>의 경우 블록과 다른 색의 버튼을 눌렀을 때,

카메라가 흔들립니다.

버튼을 잘못눌렀을 때,

해당 매서드를 넣고 괄호 안에 시간을 설정해주면,

설정한 시간만큼 카메라가 흔들립니다.

해당 매서드가 들어간

아래의 사진과 내용을 봅시다.

이미지가 안보이시는 분들은 아래 코드 보기를 누르고 코드를 확인해주세요.

CameraShake Camera;

    private void Start()

    {

        Camera = GameObject.FindWithTag("MainCamera").GetComponent<CameraShake>();

    }

<크러쉬팡>에선 버튼을 잘못누르면 카메라가 흔들리기 때문에,

버튼 스크립트에서 public void VibrateForTime(float time) 이 실행됩니다.

VibrateForTime() 매서드가 실행되기 위해서는,

카메라가 가지고 있는 CameraShake의 스크립트에 접속해줘야합니다.

해당 사진의 코드가 Camera가 가지고 있는 CameraShake에 접속하는 코드입니다.

저는 카메라에 태그를 달아서 붙혀줬는데, 카메라에 태그를 달지 않으신 분은 오류가 납니다.

태그를 만드는 법을 모르시는 분들은

태그를 다는 법에 대한 내용은 >여기<를 눌러주세요.

태그 명은 MainCamera 입니다.

이미지가 안보이시는 분들은 아래 코드 보기를 누르고 코드를 확인해주세요.

Camera.VibrateForTime(0.05f);

이렇게 해서 카메라가 0.05초만 흔들리게끔

카메라 흔들림 시간 설정도 끝마쳤습니다.

고생하셨습니다.

해당 코드는 저 같은 경우

버튼 스크립트에서

if(버튼과 블록의 색이 일치하지 않으면,)

{Camera.VibrateForTime(0.05f);}

0.05초 동안 카메라가 흔들린다.

라고 설정한 예시입니다.

자 그렇다면, 이제 카메라가 잘 흔들리는지

유니티로 돌아와서 ▶을 눌러 확인해봅시다.

드디어 !

카메라가 미세한 떨림으로 흔들리고 있습니다.

떨림이 약하신 분들은 총량(힘)을 바꿔보시고,

떨리는 시간이 짧다고 느끼는 분들은

Camera.VibrateForTime(0.05f)

을 0.05초에서 더 늘려보세요.

여기까지 유니티 카메라 흔들기 / Camera Shake에 대해 알아보았습니다.

이상으로 포스팅을 마치며,

궁금한 사항은 댓글을 달아주세요.

또, 카멜레온이 다뤘으면 좋겠다하는 포스팅 내용을 달아주시면, 해당 내용에 관한 포스팅도 해보도록 하겠습니다.

감사합니다 !

Chameleon Studio가 만든 게임하러가기

<젤랑점핑>

안드로이드- market://details?id=com.Cameleon.TangTangBall

IOS- itms-apps://itunes.apple.com/app/id1429522379

<크러쉬팡>

안드로이드- market://details?id=com.Chameleon.CrushPang 

IOS- itms-apps://itunes.apple.com/app/id1450109331