[Unity] 클리커게임을 위한 클릭이벤트(Clicker)(터치이벤트)

클리커게임에서 가장 기본적인 부분인 클릭을 하는 이벤트를 만들겁니다.

먼저 화면에서 지정된 부분만 클릭을 하면 Count가 올라가게 만들고

지정된 부분을 4군데로 만들어서 각각 Count를 다르게 올리는 것 까지 만들겠습니다.

가장 먼저 Scene을 저장해주고

Hierachy에서 우클릭>UI>Canvas를 눌러서 만들어줍니다.

Canvas의 이름을 MainUI로 바꿔줍니다.

그리고 MainUI에서 우클릭>UI>Text를 눌러서 만들어줍니다.

클릭할때마다 증가시킨 숫자를 보여주기위한 Text박스입니다.

그리고 Asset에서 우클릭>Script>C#을 눌러서 스크립트를 만들어줍니다.

이름은 MainManager로 하겠습니다. 마음대로 하셔도 됩니다.

이제 터치를 하게될 위치를 지정해주기 위해서 

일단 Hierachy에서 우클릭>2D>Sprite를 눌러서 생성해줍니다.

그리고 이 Sprite의 이름은 per1으로 하겠습니다.(1씩 증가시키기위한 부분이라서 이렇게 지었습니다.)

(그리고 충돌되는 이벤트 RaycastHIT를 위해서 per1을 누르고 

우측 Inspecter에서 Add component를 눌러스 boxcollider2d를 추가해줍니다.)

--이것은 크기와 위치를 지정한 후에 합니다.

이제 Hierachy에서 우클릭해서 Create Empty를 눌러서 이름을 MainManager로 하고

Asset에 있는 MainManager스크립트를 Hierachy에 있는 MainManager로 끌어다가 놓아줍니다.

(저는 스크립트를 미리 짜놓아서 Inspecter에 저렇게 나온겁니다.)

그리고 이제 per1의 sprite를 보이게 하기위해서 표시된 곳을 눌러서 원하는 이미지로 바꿉니다.

(일단은 어디인지 대충 위치를 알기위해서 이렇게하고 실행할때는 투명하게 해서 안보이게 만들겁니다.)

per1의 우측 inspecter에 position을 (0,0,0)으로 바꾸고

Scale을 (50,50,1)정도로 바꾸면 저정도의 크기로 나옵니다.

원하시는 만큼으로 조절하시면 됩니다.

그리고 Boxcollider2d를 지금 추가해야 지금의 크기만큼 자동으로 잡힙니다.

(그리고 충돌되는 이벤트 RaycastHIT를 위해서 per1을 누르고 

우측 Inspecter에서 Add component를 눌러스 boxcollider2d를 추가해줍니다.)

그리고 이곳에서 터치가 되는 위치는 Game창이 아닌 

Scene창에서 파란점으로 이러진 직사각형만큼의 크기입니다.

--boxcollider2d의 size를 조절해서 내부의 도형 크기만큼으로 지정도 가능합니다.

이제 Asset에 MainManager 스크립트를 더블클릭해서 스크립트를 짤겁니다.

먼저 지정할 위치를 위해서 위처럼 만듭니다.

뒤에서 4군데를 지정할것을 미리 만들었습니다.

일단 여기서는 per1만 사용합니다.

그리고 count를 보여줄 Text박스를 지정하기위해서 Text도 public으로 만들어주시고

count는 실행때마다 초기화가 아니라 저장을 하갰습니다.

그래서 static으로 만들어줍니다.

public BoxCollider2D per1;
public BoxCollider2D per2;
public BoxCollider2D per3;
public BoxCollider2D per4;
public Text CountTXT;
static int count;

그다음 저장된 값을 불러오거나 초기에는 default값으로 해주기 위해서

Start에 이렇게 써줍니다.

void Start () {
count = PlayerPrefs.GetInt("COUNT",0);

이제 클리커게임에 기본적인 부분인 클릭되는 것에대한 이벤트를 만들겠습니다.

먼저 Vector2로 현재 마우스의 위치를 가져오는 것을 만들겠습니다.

그다음 RaycastHIT2D를 하나 만들어서 현재 마우스의 위치에서 Vector2.zero의 방향으로 쏴주는 것으로 만들겠습니다.

Ray에 관한 것은 추후에 따로 다루겠습니다.

 Vector2 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
RaycastHit2D rayhit = Physics2D.Raycast(mousePos, Vector2.zero);

여기까지 하셨으면 거의 다 했습니다.

먼저 조건문으로 if (rayhit.collider != null){}을 만들어 줍니다.

이부분은 rayhit가 collider와의 충돌이 발생하는지 유무를 확인합니다.

null이 아니라면 이 조건문을 실행합니다.

그다음 안쪽에 조건문을 추가해줍니다.

먼저의 조건이 일어난 위치가 per1의 위에서 일어나고 마우스버튼이 눌렸을때에 이조건문을 실행하는 것으로 해줍니다.

그리고 실행할때마다 count를 올려주고

Debug.log로 제대로 실행되는지 콘솔로 확인하기 위해서 써줘도 좋습니다.

혹시모를 사태를 대비해서 써두는겁니다.

if (rayhit.collider != null){

      if (rayhit.collider == per1 && Input.GetMouseButtonDown(0))
      {
        count = count + 1;
        Debug.Log("Player Click1");
       }
  }

이제 유니티로 돌아갑니다.

Hierachy에 MainManager를 눌러서 우측 Inspecter에 Per1과 Count TXT에 Hierachy에 있는 per1과 Count를 드래그엔드롭으로 각각 넣어줍니다.

그리고 실행해줍니다.

제대로 하셨다면 클릭할대마다 값이 올라갑니다.

 이제 값을 저장하기 위해서

스크립트에 한 줄만 추가해줍니다.

PlayerPrefs.SetInt("COUNT", count);를

위에 추가해도 되고 다른위치에 둬도 됩니다.

하지만 조건문 실행할때만 저장하는게 좋겠죠.

이제 누르는 위치를 투명으로 해주겠습니다.

애초에 이미지를 투명한것으로 안쓰냐 하는 것은

이렇게 개발을 할때는 어느위치인지 바로 보이게 하기위해서 이렇게 합니다.

실제로 불이익이 되는 부분은 없으니 이렇게 하면 더 좋아보이네요.

public SpriteRenderer per1SPR;

이것을 먼저 위에서 생성해서 per1의 spriterenderer를 가져올 것을 생성합니다.

게임이 시작될때 투명하게 만들 것이므로 start에

Color color = per1SPR.color;

 color.a = 0f;

per1SPR.color = color;

이것을 써줍니다.

그리고 Hierachy에 있는 MainManager의 inspecter에 Per1 SPR에 

Hierachy의 Per1을 드래그엔드롭해줍니다.

그리고 실행을 해보면 클릭은 제대로 작동하고 이미지는 안 보이게 됩니다.

이제 영역을 나누어서 해보겠습니다.

=========== 작성중=============