유데미 스타터스 유니티 개발자 취업 부트캠프 1기 - 14주차 학습 일지

스타터스에 들어와 공부한지도 벌써 14주가 지났다.

달력으로 보니 어느새 3개월이 훌쩍 넘어 베이직 코스도 반이 지났다.

 

베이직 코스의 절반이 지난 상황에서 면담도 진행했다.

지난 테스트와 추후의 교육 과정 그리고, 나에 대한 진단을 받았고, 부족한 점을 점검하는 계기가 되었다.

그리고, 무언가 잘하고 있다는 느낌에 가슴이 벅차오르기도 하였다.

 

이번 주 수업에서는 비주얼 스크립팅으로 개발하는 방법을 배웠다.

그리고, 강사님의 도움에 따라 새롭게 런게임을 개발하는 중에 있다.

 

---

 

Starters 14주차 -  '비주얼 스크립팅으로 런게임 개발하기'

 

비주얼 스크립팅 

비주얼 스크립팅. 기존에 유니티 볼트라고 불리던 패키지의 최신 버전(?)이다.

마치 도표로 코드를 짜는 스크립팅 방법인데, 아주 예전에 수업에서 접했던 스크래치 같은 느낌이 들었다.

 

비주얼 스크립팅의 가장 큰 장점은 내가 생각하기엔 간단한 기능에서 흐름을 한눈에 보기 편하다는 점이라고 본다.

실제로 간단히 코딩을 해도 오류가 나거나 오류가 나지는 않지만 제대로 작동하지 않는 경우가 있는데, 비주얼 스크립팅으로 제작을 하면, 테스트 플레이 시에 비주얼 스크립팅 창으로 어떤 변수, 함수가 어떤 방향으로 흘러가는지 바로바로 볼 수 있어 유용하다.

 

스크립트 그래프 (Script Graph)

 

한편, 스크립트 그래프가 아니라 스테이트 그래프를 사용하면, 애니메이션처럼 상태를 만들어 컨트롤할 수 있다.

애니메이션처럼 각 State를 만들고, 각 State마다 실행될 함수들을 만들어 놓으면, 해당 상태가 되었을 때에 그 코드가 작동하게 된다.

그리고, 애니메이션과 똑같이 트렌지션(transition)을 만들어 상태가 변하는 조건들을 화살표로 만들어서 어떤 상황에서 원하는 상태로 변화하게 만들면.. 코드로 enum의 값을 변화시켜 함수를 실행시키는 것보다 더 편하게 스크립팅이 가능하다.

 

스테이트 그래프 (State Graph)

스테이트 그래프에서 상태 변화 조건을 만드는 모습

 

새로운 기술은 항상 날 설레게 하는 법!

또 비주얼 스크립팅에 꽂혀서 새로운 프로젝트를 몽땅 그래프로 만들기 시작했다.

하지만, 여기서 이 비주얼 스크립팅의 단점이 보이기 시작했다.

 

너무 많은 기능들을 만들기 시작하면, 한눈에 흐름을 보기 좋다는 장점이 사라진다는 점이다.

아래 사진을 보면 이해가 쉬울 것이다.

 

비주얼스크립팅으로 개발하는 모습

 

이 그래프가 게임의 전부가 아니라 일부일 뿐인데 한 화면에 다 들어오지 않을 지경이니.. 오히려 개발에 속도가 줄기 시작했다.

 

결국에는 이런 단점이 너무 커서 앞으로는 간단한 기능을 미리 시연하는 때에 잠깐 사용하고, 크게 많이 사용하지 않을 예정이다. ㅠ

 

 

네비게이션

한편, 내비게이션 기능도 배웠다.

많이 사용하지는 않아서 짧게 기술하자면, 간단하게 ai의 경로를 설정하고, 조건에 맞춰서 속도와 지점을 따로 지정할 수도 있다.

앞으로 더 사용해볼 일이 있다면 그때에 더 자세히 기술하도록 하겠다.

 

Nav Meah agent

 

나만의 게임 만들기 - "윙또 클론 코딩 프로젝트 개요"

어릴 적, 아주 어릴 적에 초등학생 시절에 재미나게 했던 게임이 하나 있었다.

'캔디바'라는 게임 포탈에서 운영했던 '윙또'라는 게임인데, 이번에 강의에서 만드는 장르와 유사해서 이 게임을 기억과 남은 자료를 가지고 클론 코딩하기로 하였다.

 

'캔디바'에서 운영했던 게임 - 윙또 플레이 영상

 

개발 과정을 서술하기 앞서서 너무나 많은 기능을 넣어서 내가 하면서 새로 알거나 이건 진짜 잘 짰다는 코드들을 위주로 얘기하려 한다.

 

일단, 완성작이 아니라 데모 버전으로 현재까지 구현한 기능은 다음과 같다.

참고로 모든 스프라이트는 기존 게임의 영상이나 사진 등을 보고 직접 따라서 그려서 만들었다.

 

• 로그인, 회원 가입 : Playfab을 이용하여 서버에 프로필 데이터 저장, 로그인
• 싱글 플레이 : 캐릭터 이동 (PC - 좌클릭으로 y축 이동, 모바일 - 화면 왼편 터치로 이동), 아이템 (주먹밥 - HP 회복, 날개 - 이동 속도 증가, 다이아몬드 - 스킬 단계 상승), 스킬 사용 (PC - 우클릭으로 스킬 사용, 모바일 - 화면 오른편 터치로 사용) : 대쉬 스킬만 구현 (짧은 거리를 대미지를 받지 않고, 빠르게 대쉬)

 

나만의 게임 만들기 - "로그인, 회원 가입" 

회원 가입과 로그인은 조금 욕심을 낸 기능들이다.

특히 이후에 기록을 리더보드에 저장, 출력하는 것과도 연관이 되는데, 결국에는 이 데이터들을 저장하고, 가져올 서버가 필요했다.

 

하지만, 백엔드에 대해 생소한 나에게 있어 서버를 새로 직접 만들고 관리하는 것은 어려운 얘기였고, json, sql, php 등등 시도하다가 구글에 Playfab이라는 서비스를 알게 되었다.

해당 서비스는 서버를 대여해주고, 게임 서버에 필요한 여러 기능들을 제공해주는 서비스로 유니티에서도 SDK를 이용해 연동이 쉬워 로그인, 레더 보드 기능에 이를 이용하게 되었다.

 

플레이 팹을 이용해 서버에 회원 가입 정보를 저장하고, 다시 데이터를 가져와 로그인을 하는 코드는 다음과 같다.

 

using PlayFab;
using PlayFab.ClientModels;

// 로그인 버튼 클릭 시에 실행되는 함수
public void LoginBtn()
{
    // 서버에 전달할 로그인 request 생성
    var request = new LoginWithEmailAddressRequest { Email = EmailInput.text, Password = PasswordInput.text };
    // 서버에 로그인 request 전달 : 성공 시 OnLoginSuccess 함수 실행, 실패 시 경고 팝업에 메세지 출력
    PlayFabClientAPI.LoginWithEmailAddress(request, OnLoginSuccess, (error) =>
    {
        waringText.transform.parent.gameObject.SetActive(true);
        waringText.text = "Check your email or password";
        Invoke("WaringOff", 2f);
    });
}

// 로그인 성공 시에 실행되는 함수
void OnLoginSuccess(LoginResult result)
{
    print("로그인 성공");
    GameManager.instance.email = EmailInput.text;
    GameManager.instance.myID = result.PlayFabId;
    GetPlayerProfile(result.PlayFabId);

    pressText.SetActive(true);
    GameObject.Find("LoginBtn").SetActive(false);
    GameObject.Find("RegisBtn").SetActive(false);
    GameObject.Find("Email").SetActive(false);
    GameObject.Find("PS").SetActive(false);
}

// 회원 가입 버튼 클릭 시에 실행되는 함수
public void RegisterBtn()
{
    // 회원 가입 request 생성
    var request = new RegisterPlayFabUserRequest { Email = EmailInput.text, Password = PasswordInput.text, Username = UsernameInput.text, DisplayName = UsernameInput.text };
    // 회원 가입 request를 서버에 전달
    PlayFabClientAPI.RegisterPlayFabUser(request, (result) => print("회원가입 성공"), (error) =>
    {
        waringText.transform.parent.gameObject.SetActive(true);
        waringText.text = "Check email format / password (up to 6 words) / nickname (up to 2 words)";
        Invoke("WaringOff", 2f);
    });
}

 

로그인 씬

 

나만의 게임 만들기 - "캐릭터 이동 - 모바일" 

PC의 경우에는 간단하게 Input.GetMouseButton(0 or 1)으로 간단하게 움직임과 스킬을 사용할 수 있도록 했지만, 모바일의 경우에는 우클릭이라는 개념이 없어서 고민을 많이 하였다.

결과적으로는 화면 좌측, 우측을 나누고, 터치하면 움직임, 스킬 사용을 각각 따로 실행하도록 하였다.

 

private void FixedUpdate()
{
    // 모바일일 경우에 터치 시에 검사가 이루어짐
    if (Application.platform == RuntimePlatform.Android)
    {
        // 터치들을 받아서 리스트로 저장하고, 스크린 가로를 기준으로 좌측, 우측 중에 어디에 클릭이 되었는지 검사
        Touch[] tposes = Input.touches;
        foreach (Touch touch in tposes)
        {
            // 좌측에 터치를 받았다면, 무조건 LTouchCount를 1로 설정
            if (touch.position.x <= Screen.width / 2)
            {
                LTouchCount = 1;
            }
            // 우측에 터치를 받았다면, isTouch를 true로 하고, 스킬을 실행 (한 번만 실행하기 위해)
            else if (touch.position.x > Screen.width / 2 && !isRTouch)
            {
                SkillOn();
                isRTouch = true;
            }
        }
        // LTouchCount가 0이 아니라면, isLTouch를 true로 설정하고, 비주얼 스크립팅에서 움직임 실행
        if (LTouchCount != 0)
            isLTouch = true;
        else
            isLTouch = false;
        // LTouchCount, isRTouch 변수 초기화
        LTouchCount = 0;
        isRTouch = false;
    }
    // PC에서는 우클릭 시에 스킬 함수 실행
    else
    {
        if (Input.GetMouseButton(1))
        {
            SkillOn();
        }
    }
}

 

나만의 게임 만들기 - "랜덤 하게 생성되는 지형과 장애물, 아이템"

플레이에 가장 핵심이 되는 기능이 이 부분이었다.

이 기능은 수업에서 플레이어의 위치에 따라서 지형을 자동 생성하도록 만들었던 비주얼 스크립팅 그래프를 더 작성해서 완성했다.

 

일단, 프리팹을 통해 지형을 하나씩 만들었다.

프리팹에는 보일 지형들과 start, end point 그리고, 장애물, 아이템이 등장할 point들이 들어있다.

 

start, end point는 노란 색으로, 장애물 위치들은 빨간 색으로 표시되어 있다.

 

기본적으로 수업에서 지형지물이 캐릭터의 위치와 이전 endPoint의 위치의 X좌표 거리(Vector3.distance)가 일정 이상이면 이전 endPoint를 기준으로 일정 거리 옆에 생성하도록 만들었었다.

 

거기에 난 추가로 생성할 지형지물의 높이를 랜덤으로 설정하였다.

다만, 갑자기 확 올라오거나 확 내려가지 않게 그리고, 화면 밖으로 넘어가지 않도록 최소 높이, 최대 높이를 설정한 뒤에 랜덤 값을 받았다.

아래는 그런 과정으로 y값을 설정하는 그래프이다.

 

지형의 높낮이를 결정하는 그래프

 

장애물과 아이템은 같은 원리로 생성되므로 장애물 생성 원리만 설명하려고 한다.

지형 생성과 크게 다르지는 않은데, 플레이어와 거리가 일정 이하이고, random.range이 0 이상일 경우(생성 확률) 생성하도록 하였다.

다만, 프리팹에 있는 장애물 위치들 중에 랜덤으로 정해진 하나의 position에 또다시 3 ~ 6 사이즈의 크기로 생성하는 과정을 더했다.

 

생성 확률에 따라 생성되고, 랜덤한 위치에 생성되는 장애물

 

나만의 게임 만들기 - "데모 플레이 영상"

이 외에도 여러 가지 기능들을 구현하였고, 애를 썼다.

그중에는 시간이 많이 걸리고, 아직 버그가 고쳐지지 않은 부분도 있지만, 결과적으로 현재까지는 플레이가 무리 없이 되고 있다.

특히 PC(win, mac), 모바일(android) 모두 빌드도 하여 실제 교육 과정에 있는 분들에게 플레이를 부탁하고, 기록들도 저장할 수 있었다.

 

이후에도 이 게임은 (가능하면, 멀티 플레이까지) 계속 업데이트를 해서 완성하고자 한다.

그리고, 매주 그 소식을 간단하게나마 블로그에도 작성할 예정이다.

깃허브 링크는 아직 완성되지 않아서 이후에 완성 혹은 완성에 가까워졌을 때에 올리도록 하겠다.

 

아래는 해당 게임의 데모 플레이 영상이고, 오늘도 긴 글 읽어준 모든 분들에게 감사를 표하고 싶다. ㅎㅎ

 

윙또 프로젝트 데모 플레이 영상

 

 

 

유데미 코리아 바로가기 : 

Udemy Korea - 실용적인 온라인 강의, 글로벌 전문가에게 배워보세요. | Udemy Korea

 

💡 본 포스팅은 유데미-웅진씽크빅 취업 부트캠프 유니티 1기 과정 후기로 작성되었습니다.