[Unity][2D-Game] Suika-Game (1)

suhan0304·2023년 11월 14일

2d game Suika-Game Unity 게임개발

유니티 - Suika Game

목록 보기

1/8

preview Link : -
gitHub Link : https://github.com/suhan0304/Suika-Game

시작

Undead-Survivor의 개발을 완료 한 후 게임 개발을 하면서 배웠던 내용도 복습할 겸 물리적인 동작에 대해 더 잘 이해해보고 싶어 최근 유행하는 Suika-Game을 모작하는 것을 목적으로 하였다.

참고할 만한 영상이나 자료를 찾던 중 기존 Undead-Survivor의 강의 영상을 업로드한 "골드 메탈" 채널에서 2년전에 물리 퍼즐 게임을 만들었던 영상이 있어서 해당 영상을 참고해서 제작하여 최근 유행하는 Suika Game, 통칭 수박 게임과 비슷하게 만드는 것을 목적으로 하였다.

시작일 : 2023년 11월 14일 개발 시작

강의 영상(1) - 물리 퍼즐게임

개발

모바일 환경 설정

원래 강의 영상은 모바일 어플을 목적으로 두고 개발을 해서 모바일 환경 설정이 설명 부분이 들어가 있지만 나는 PC 게임을 목적으로 개발할 목적이라서 공부만하고 실제로는 모바일 환경 설정을 추가적으로 하지 않고 진행한다.

만약 모바일로 개발하고 싶다면 안드로이드 세팅을 먼저 확인하고 진행한다.
Edit > Preferences > External Tools의 Android 관련 툴 연결이 제대로 돼있는지 확인하자.

만약 노란색 느낌표가 뜬다면 에디터의 모듈에 Android Build Support가 설치 되어있는지 꼭 확인한 후에 진행한다.

이후에 안드로이드로 플램폼을 변경하고 개발을 진행한다.

File > Build Settings > Android > Switch Platform을 선택

에셋 불러오기

골드 메탈 홈페이지의 Unity Package를 다운받아서 Pojects 창에 드래그드랍해서 import 시켜줄 수 있다.

임포트가 정상적으로 진행됐다면 아래와 같이 여러 파일이 들어있는 폴더가 추가된다.

배경 만들기

메인 카메라의 배경을 흰색, Size를 9로 설정한다.
Order in Layer = -1로 설정한다.

이후에 Sprite 폴더의 Background를 하이어라키창으로 끌어와 배경을 설정한다

하이어라키에서 + > 2D Object > Sprites > Square
이후에 적절한 바닥 위치에 생성한다.

이름을 Bottom 설정
RigiyBody 2D 컴포넌트 추가
- 동적이지 않기 때문에 Body Type을 Static으로 설정
Box Collider 2D 컴포넌트 추가
사이즈를 적당히 바닥에 원하는 폭으로 조정

Bottom 오브젝트를 Ctrl+D로 2개 더 만들어서 양쪽에 Wall이라는 이름으로 벽을 만들어준 후크기와 위치를 적절히 배치한다.

Bottom과 Wall 2개의 크기 위치 조정이 끝났으면 PlayGround라는 이름으로 빈 객체를 하나 만들고 위치를 0, 0, 0으로 잡아준 다음에 Bottom과 Wall을 해당 오브젝트의 자식 오브젝트로 드래그드랍한다.

Circle 오브젝트를 하나 만들어서 Rigidbody 2D와 Circle Collider 2D를 만들면 공이 아래로 떨어지다가 바닥에 착지한다.
중력의 영향도 잘 받고 있고, 바닥과 물리적 작용도 잘 작동하는걸 확인할 수 있다.

기본 동글 로직

Circle의 Dongle로 바꾸고 Dongle 스크립트를 작성한다.

동글이 마우스 위치를 알고 있어야하기 때문에 mousePos를 선언한 후 Input.mousePosition을 이용하여 마우스 위치를 불러온다.

Input.mousePosition은 월드 좌표가 아니라 스크린 상의 좌표이다. 통상적인 게임 오브젝트는 월드 좌표계에서 돌아다니기 때문에 좌표를 바꿔주어야한다.

Camera.main.ScreenToWorldPoint(Input.mousePosition);

Camera.main.ScreenToWorldPoint : 스크린 좌표를 월드로 변환
Camera.main.WorldToScreenPoint : 월드 좌표를 스크린으로 변환

Dongle.cs

void Update()
{
    Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    transform.position = mousePos;
}

동글에 해당 스크립트를 컴포넌트로 추가한다.
스프라이트를 Dongle 0으로 설정 한다.
Circle Collider 2D 사이즈를 맞추기 위해 0.6으로 반지름을 설정한다
- 반지름을 찾기 힘들면 컴포넌트 오른쪽위 점 세개를 눌러서 reset을 하면 스프라이트 크기로 알아서 콜라이더가 초기화 된다.
마우스를 클릭하기 전에는 떨어지지 않도록 리지드바디 2D의 Simulated를 해제한다.

실행하면 동글이 보이지 않는데 일시정지하고 확인하면 z=-10으로 설정되어있다. 따라서 스크립트에 z축을 0으로 고정하도록 작성한다.

메인 카메라의 z축이 -10 이기 때문에 마우스의 위치 또한 z축이 -10으로 설정된다.

이때 높이도 8로 고정되도록 y축을 8로 고정한다. 그리고 부드럽게 마우스를 동글이 따라가돌고 Lerp를 사용한다. 수정된 Dongle 스크립트는 아래와 같다.

Dongle.cs

void Update()
{
    Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    mousePos.y = 8;
    mousePos.z = 0;
    transform.position = Vector3.Lerp(transform.position, mousePos,0.2f);
}

Vertor3.Lerp(vec1, vec2 ,t) : 현재위치 vec1으로 부터 목표위치 vec2 좌표로 t의 강도로 부드럽게 따라간다.

경계선 Line 스프라이트를 PlayGround 안에다 놓고 높이를 6, 색은 아무거나로 설정한다.

Box Collider 2D를 추가하고 IsTrigger을 체크한다.

마우스를 잘 따라오지만 정해진 벽 밖으로 나가버린다. 따라서 일정 범위 밖에서는 x축을 고정시키는 로직을 아래와 같이 작성해준다.

void Update()
{
    Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);

    //x축 경계설정
    float leftBorder = -4.6f + transform.localScale.x / 2f; //벽1의 x좌표는 -5이고 두께가 0.5이므로 벽의 오른쪽 끝을 넉넉하게 -4.6으로 설정, 동글의 반지름도 + 해준다.
    float rightBorder = 4.6f - transform.localScale.x / 2f; //벽2의 x좌표는 5이고 두께가 0.5이므로 벽의 왼쪽 끝을 넉넉하게 4.6으로 설정, 동글의 반지름도 - 해준다.

    if (mousePos.x < leftBorder)
    {
        mousePos.x = leftBorder;
    }
    else if(mousePos.x > rightBorder)
    {
        mousePos.x = rightBorder;
    }
    mousePos.y = 8;
    mousePos.z = 0;
    transform.position = Vector3.Lerp(transform.position, mousePos,0.2f);
}