유니티 레이캐스트2D Raycast2D 총정리 / ScreenPointToRay / ScreenToWorldPoint

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

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

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

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

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

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

이번 포스팅은 저번 포스팅인

Raycast에 이어서 두번째 시간입니다.

오늘은 레이캐스트2D(Raycast2D)만 다루며,

ScreenPointToRay까지 알아보고 마무리하려합니다.

바로 시작합시다.

사실 레이캐스트(Raycast)와 레이캐스트2D(Raycast2D)의

다른 점이란,

월드 좌표계의 Z값을 사용하냐

사용하지 않느냐만이 다를 뿐,

구현하는 코드는 같습니다.

그래서 지난 시간에 포스팅했던

레이캐스트(Raycast)에 대한 내용과

분리하여 이해해주시지 마시고,

같은 내용이라고 생각하시면 좋겠습니다.

코드가 2D가 붙냐 안붙냐의 차이일 뿐 거의 똑같습니다.

레이캐스트2D(Raycast2D)도 레이캐스트처럼

레이(Ray)의 원점, 방향, 거리(길이), 충돌 순으로 이루어집니다.

우선, 지난 포스팅에서 언급했던 

ScreenPointToRay에 대해 먼저 짚고 넘어가봅시다.

바로 스크립트를 작성해보죠.

지난 포스팅 때 했던 프로젝트를 열어주세요.

하이어라키 창

우선 하이어라키 창에 있는 카메라에 스크립트를 달아줍시다.

ScreenPointToRay는 화면을 터치한 지점에 레이를 쏴주는 자산입니다.

그래서 우리는 카메라에 스크립트를 달고

카메라 스크립트에 ScreenPointToRay를 입력하려고 합니다.

카메라에 달 스크립트 네임은 원하시는 대로 설정하시고,

다 하셨다면, 스크립트를 열어줍시다.

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

Camera cam;

    private void Start()

    {

        cam = GetComponent<Camera>();

    }

Camera cam;

우선 카메라를 선언해주고,

cam = GetComponent<Camera>();

카메라에 달려있는 Camera 컴포넌트를 가져와줍니다.

이러한 이유는 카메라 컴포넌트의 자산인

ScreenPointToRay를 사용하려고 하기 때문입니다.

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

if (Input.GetMouseButtonDown(0))

        {

            Ray Ray = cam.ScreenPointToRay(Input.mousePosition);

            RaycastHit hit;

            if (Physics.Raycast(Ray, out hit))

            {

                //hit.transform.GetComponent<SpriteRenderer>().color = Color.red; // 젤랑이 색 변경

                hit.transform.GetComponent<MeshRenderer>().material.color = Color.red; // 큐브 색 변경

                // 여러분들 중 예제를 따라하시고 계시는 분은 큐브색 변경 코드를 사용하세요.

            }

            Debug.DrawRay(Ray.origin, Ray.direction * 50, Color.red, 0.3f);

        }

위 코드가 바로 ScreenPointToRay를 사용하는 방법입니다.

2D상에서는 해당 코드를 사용할 수 없기에

약간의 변형이 필요합니다.

2D의 ScreenPointToRay는 잠시만 기다려주세요.

지난 포스팅 때 레이캐스트(Raycast)의 설명을 어느정도 하였으니,

그 외 ScreenPointToRay의 간략한 코드 설명을 하자면,

 Ray Ray = cam.ScreenPointToRay(Input.mousePosition);

우선 Ray(진원)를 카메라의 터치스크린에 닿은 마우스의 위치로 잡아줍니다.

hit.transform.GetComponent<SpriteRenderer>().color = Color.red;

마우스를 터치한 위치에 젤랑이가 있다면,,

젤랑이의 색을 빨간색으로 바꿔줍니다.

코드를 입력했으니

마우스 터치만으로

젤랑이의 색이 바뀌는 지 봅시다.

지난 시간에 했던 분들은 큐브를

카메라의 임의의 위치에 배치시켜주세요.

젤랑이들을 임의의 위치에 세우고

마우스 클릭으로 Ray를 쏘아봤습니다.

젤랑이가 Ray에 닿으니 빨갛게 색이 변하는군요.

이렇게 레이캐스트의 ScreenPointToRay를 알아보았습니다.

이제부터는 본격적으로,

레이캐스트2D에 대해 알아봅시다.

레이캐스트 2D는 새로운 프로젝트를 열어서 할 예정이니,

2D 프로젝트를 만들어주세요.

먼저 레이캐스트 2D의 ScreenPointToRay부터 알아봅시다.

2D 프로젝트를 만드시고,

카메라에 스크립트를 달아주세요.

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

(스크립트 명은 여러분 마음대로.)

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

    float MaxDistance = 15f;

    Vector3 MousePosition;

    Camera Camera;

    private void Start()

    {

        Camera = GetComponent<Camera>();

    }

    void Update ()

    {

        if (Input.GetMouseButtonDown(0))

        {

            MousePosition = Input.mousePosition;

            MousePosition = Camera.ScreenToWorldPoint(MousePosition);

            

            RaycastHit2D hit = Physics2D.Raycast(MousePosition, transform.forward, MaxDistance);

            Debug.DrawRay(MousePosition, transform.forward * 10, Color.red, 0.3f);

            if (hit)

            {

                hit.transform.GetComponent<SpriteRenderer>().color = Color.red; // 젤랑이 색 변경

            }

        }

    }

2D 환경에서는 ScreenPointToRay를 그대로 사용할 수가 없기때문에

살짝의 변형을 주었습니다.

그래서 ScreenToWorldPoint를 사용해서 화면의 위치를 가져왔는데요.

우선,

지난 포스팅에 언급했지만,,

이 글이 처음이신 분도 있을테니

코드를 간략하게 짚고 넘어가겠습니다.

간략하게 짚고 넘어가니

자세한 내용을 알고 싶으신 분은

꼭 이전 글을 읽어주세요.

 float MaxDistance = 15f;

레이의 길이를 선언해줍니다. (일단 15)

Vector3 MousePosition;

마우스 포지션의 위치를 담을 벡터를 선언해줍니다.

Camera Camera;

카메라를 선언해주고,

 Camera = GetComponent<Camera>();

스타트문에서 카메라의 컴포넌트를 가져옵니다.

if (Input.GetMouseButtonDown(0))

업데이트 문이 마우스 왼쪽 클릭을 감지하면

MousePosition = Input.mousePosition;

아까 선언했던 MousePosition 벡터에

마우스 클릭 위치 값을 넣어주고,

MousePosition = Camera.ScreenToWorldPoint(MousePosition);

마우스 클릭 위치 값은 다시 월드 좌표의 위치 값으로 치환됩니다.

이렇게 해주는 이유는 2D 상에서는

Input.mousePosition의 위치 값이

2D 스프라이트의 위치를

정확히 잡을 수 없기 때문입니다.

다음으로

RaycastHit2D hit = Physics2D.Raycast(MousePosition, transform.forward, MaxDistance);

레이캐스트2D를 (마우스위치값에 앞 방향으로 지정한 거리만큼) 쏴줍니다.

Debug.DrawRay(MousePosition, transform.forward * 10, Color.red, 0.3f);

얘는 레이를 시각화하기 위하여 ray를 씬에 Draw 해 준 것이고요.

 if (hit)

콜라이더가 있는 물체가 맞았다면,

hit.transform.GetComponent<SpriteRenderer>().color = Color.red; // 젤랑이 색 변경

물체의 색을 변경해줍니다.

마우스로 물체의 색을 변하게 하는 코딩이 끝났습니다.

유니티로 돌아와서 확인해 봅시다.

여러분은 유니티로 돌아가서,

스프라이트 이미지 3개를 준비하시고

하이어라키창에 옮긴 후,

스프라이트에 콜라이더를 달아주세요.

콜라이더가 달려있지 않으면 Ray가 충돌감지를 할 수 없습니다.

준비가 되셨다면 유니티를 실행해봅시다.

유니티를 실행하여 젤랑이가 있는 위치를 눌러보니

터치된 위치에서 Ray가 발사되어

젤랑이의 색이 변하고 있습니다.

씬 창을 확인해서 레이가 나오는 걸 확인해볼까요?

씬 창에서 2D 체크를 해제하고

옆으로 바라보니

레이가 쏘아지는 것이 확인됩니다.

이전에 했던 레이캐스트의 ScreenPointToRay와

차이점을 발견하셨나요?

차이점은 카메라의 설정 차이입니다.

카메라의 Perspective   카메라의 Orthographic

왼쪽의 Orthographic 모드는

유니티 2D에서 주로 사용하는 모드입니다.

Z 값이 주는 원근감을 없애고

모두 동일선 상에 있는 것처럼 보이게 해줍니다.

오른쪽의 Perspective는 원근감을 주는 모드입니다.

이해를 돕기 위해 그림을 그려왔습니다.

못 그렸어도 이해해주세요 ㅎㅎ..

            Perspective 요약도  Orthographic 요약도

그림을 보니 이해가 좀 더 쉬우신가요?

원근감이 있는 Perspective는 Z값이 뒤로 갈수록

젤랑이들이 작아지고 있지만,

원근감이 없는 Orthographic 모드는

Z값이 뒤로가더라도

젤랑이들이 작아지지 않고

화면에 원래의 크기대로 보여집니다.

지금까지 올린 영상 중

1번과 3번 영상의 씬을 보시면 같이 보시면

Ray의 방향이

유니티 3D의 Perspective 모드에서는

사선으로 나아가고 있는데,

Orthographic  모드에선 직선으로

나아가고 있는 것을 확인할 수 있을겁니다.

게임 컨셉에 맞는 카메라를 정하고

카메라의 모드를 정한다면,

나중에 어떻게 Ray를 활용할 지

감을 잡는데 좋겠죠.

이제 화면 터치로 Ray를 쏴봤으니

젤랑이에서 레이가 발사되게 해봅시다.

우선 맨 왼쪽에 있는 젤랑이(오브젝트)에게

스크립트를 하나 만들어서 넣어주시고

스크립트를 열어주세요.

(이름은 마음대로)

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

float MaxDistance = 15f;

    void Ray()

    {

        RaycastHit2D hit = Physics2D.Raycast(transform.position, transform.right, MaxDistance);

        hit.transform.GetComponent<SpriteRenderer>().color = Color.red; // 젤랑이 색 변경

    }

스크립트가 열렸으면 해당 코드를 넣어줍니다.

float MaxDistance = 15f;

레이(Ray) 길이 = 15

void Ray()

레이 매서드 생성

RaycastHit2D hit = Physics2D.Raycast(transform.position, transform.right, MaxDistance);

레이캐스트2D(젤랑이 위치에서, 젤랑이의 오른쪽 방향, 레이 길이 15)

hit.transform.GetComponent<SpriteRenderer>().color = Color.red;

젤랑이(물체)가 맞으면 맞은 애 빨간색으로 변하게 해라.

Ray라는 이름의 매서드를 하나 선언했으니,

얘를 어디서 쓸 지 정해줘야겠죠?

아래를 봅시다.

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

void Update()

    {

        if (Input.GetKeyDown(KeyCode.Space))

        {

            Debug.DrawRay(transform.position, transform.right * MaxDistance, Color.blue, 0.3f);

            Ray();

        }

    }

업데이트 문에서

 if (Input.GetKeyDown(KeyCode.Space))

스페이스바 키를 누르면

Ray();

레이 매서드가 실행되도록 합시다.

이제 세팅이 됐으니

유니티로 돌아가서

확인해봅시다.

맨 왼쪽 젤랑이 콜라이더 끄기

확인하기 전에 맨 왼쪽 젤랑이의

콜라이더를 체크 해제해줍시다.

자기 자신의 위치에서 레이가 나오기 때문에

체크 해제를 하지 않으면

오른쪽 젤랑이(물체)가 바뀌지 않고

자기 자신부터 바뀌어 버립니다.

자기 자신에게도 콜라이더가 필요한

게임을 구현하시는 분들은

레이가 나오는 위치를 조금 변경하면 됩니다.

하지만, 이번엔 레이캐스트의 구조를 설명하고 있으니,,

콜라이더를 끄는 방법으로 갑시다.

콜라이더 체크 해제 후 실행을 눌러봅시다.

바로 오른쪽에 있는 젤랑이의 색이 변했습니다.

하지만 그 옆에 있는 젤랑이는

아무리 스페이스 바를 눌러도

색이 변하지 않습니다.

레이는 제일 처음의 충돌만 감지하기 때문입니다.

하지만,

지난 포스팅에서도 언급했다시피,

레이가 나아가는 방향과 길이에 닿는

모든 물체에게 접근하는 방법은 존재합니다.

한 번 볼까요?

스크립트를 수정해봅시다.

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

void RayAll()

    {

        RaycastHit2D[] hits = Physics2D.RaycastAll(transform.position, transform.right, MaxDistance);

        for(int i = 0; i < hits.Length; i++)

        {

            RaycastHit2D hit = hits[i];

            SpriteRenderer ChangeColor = hit.transform.GetComponent<SpriteRenderer>();

            if (ChangeColor)

            {

                hit.transform.GetComponent<SpriteRenderer>().color = Color.red; // 젤랑이 색 변경

            }

        }

    }

우선 RayAll 매서드를 만들어봅시다.

간략 코드 설명을 하자면,

RaycastHit2D[] hits = Physics2D.RaycastAll(transform.position, transform.right, MaxDistance);

레이가 나아가는 방향과 길이에 닿는 모든 물체의 정보를

hits 배열에 저장합니다.

for 문을 돌려서

닿은 물체들의 SpriteRenderer 컴포넌트에 접근하고

색을 변경해주는 것이죠.

이렇게 하면 레이와 닿은 모든 젤랑이들의

색이 빨갛게 변할 것입니다.

보다 자세한 설명은 저번 포스팅을 확인해주시고.

for문이 생소하신 분들은

>여기<에서 자세히 알아보세요.

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

if (Input.GetKeyDown(KeyCode.A))

        {

            Debug.DrawRay(transform.position, transform.right * MaxDistance, Color.blue, 0.3f);

            RayAll();

        }

다음으로 RayAll 매서드를 만들었으니 넣어줘야겠지요.

이번엔 키보드 A를 누르면

RayAll 매서드가 발동되게 해봅시다.

코드를 입력하고

유니티로 돌아와 확인해봅시다.

확인해보니,

이번엔 젤랑이 옆에 있는 모든 친구들의

색이 변했습니다.

이렇게 유니티 레이캐스트2D에 대한 정리가 끝났습니다.

레이캐스트의 기능 중 

LayerMask도 있지만 언급하지 않은 이유는

지난 포스팅에서 언급한 내용과 거의 일치하기 때문입니다.

LayerMask에 대한 내용은 이전 포스팅에서 확인해주시면 되겠습니다.

이제 레이캐스트의 마지막 정리인

Raycast 심화응용하기가

마지막으로 남았는데요.

이건 좀 더 심화과정이기에

나중에 따로 포스팅하도록 하겠습니다.

미리 잠깐 말씀드리자면,

Ray는 콜라이더가 Trigger 설정된

물체는 감지하지 못합니다.

하지만 예외적 감지를 할 수 있는 기능이 있는데요.

이것에 대한 포스팅은 추후에 해보도록하겠습니다.

유니티 코딩 카테고리를 확인해주세요.

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

잘 읽으셨다면 댓글을 달아주세요.

댓글은 저에게 다음 포스팅을 위한 힘이 됩니다 ㅠ ㅠ

또, 카멜레온이 다뤘으면 좋겠다하는 포스팅 내용을 달아주시면,

해당 내용에 관한 포스팅도 해보도록 하겠습니다.

감사합니다 !

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