24-10-21

내일배움캠프 Node.js 사전캠프 13일차

1. ZEP에서 이루어진 팀단위 JavaScript 스터디

(1) 스터디 계획

스파르타코딩클럽 | 1시간 만에 상사특공대 게임 만들기

1시간 만에 상사특공대 게임 만들기 | 스파르타코딩클럽

 

팀원들과 HTML, CSS, JS를 이용해 <르탄이 달리기> 게임을 만들어봤던 것처럼, 이번에는 Unity를 이용하여 <상사특공대> 게임을 만들어보기로 결정을 내렸다. 물론 우리는 Node.js를 배우기 위해 이 캠프에 참여했지만, 궁극적으로 게임과 서버를 만들기 위해 배우는 입장이기에 다양한 언어를 폭넓게 접해본다면 더 도움이 되리라고 생각했다.

(2) 스터디 진행 과정

 

강의를 차례차례 들으며 유니티 사용법을 익혀보았고, 객체에 프로퍼티를 접목시키는 유니티의 기능들이 마치 객체지향의 코드를 시각화한 것 같다고 느꼈다. 또, 실시간으로 확인할 수 있기 때문에 자바스크립트로 코드를 짤 때보다 더 편리하기도 했다. 씬에 따라, 게임 오브젝트에 따라 그룹을 만들고 기능을 세분화시키는 방식은 내 스스로 코드를 짤 때에도 적용할 수 있을 것 같아서 많이 참고해 보려고 한다.

 

어쨌든 유니티에서 일반적으로 사용하는 언어는 내겐 생경한 C#이었기에, 차근차근 가이드라인을 따라가는 데 집중했다. 다만 게임을 실행하는 데 몇 가지 버그를 발견하게 되어 이를 해결한 방법을 공유하고자 한다.

 

TextTime과 ScoreTime 텍스트가 스크립트와 제대로 연결되지 않았던 현상

private void FindUIElements()
{
    scoreText = GameObject.Find("MainCanvas").transform.Find("ScoreBoard").Find("Score").GetComponent<Text>();
    timeText = GameObject.Find("MainCanvas").transform.Find("Time")?.GetComponent<Text>();

    if (scoreText == null)
        Debug.LogError("ScoreText not found in the scene!");
    if (timeText == null)
        Debug.LogError("TimeText not found in the scene!");

    UpdateScoreUI();
    UpdateTimeUI();
}

해당 버그가 일어났던 이유는 Text 오브젝트가 폴더 경로의 최상위에 위치하지 않았기 때문이다. 따라서 경로를 더 명확하게 지정하여 스크립트와 제대로 연결을 해주었다.

 

화면의 비율이 조정되었을 때 제대로 반영되지 않는 현상

Unity WebGL Player | sangsa

Unity WebGL Player | sangsa

해당 게임의 결과물을 웹상에서 팀원들과 공유하기 위해 WebGL로 빌드를 하였는데, 전체화면을 하고 다시 되돌렸을 때 화면의 비율이 원래대로 돌아오지 않는 현상이 발생했다. 이유를 찾아본 결과, 각 씬의 캔버스 렌더링이 오버레이 모드로 되어 있었던 게 원인이었다. 이를 카메라 모드로 변경하고 스케일을 스크린 사이즈를 기준으로 재설정하였다. 위와 같이 보편적인 화면 사이즈인 1920 X 1080을 채택하였다.

(3) 팀원들과 인사이트 공유하기

유니티에 적응하는 데에 시간이 소요될 것이라고 판단하여 오늘은 만들어진 게임을 다듬고 배포해보는 것으로 목표를 세웠다. 다행히 팀원 모두가 버그를 해결하고 배포하는 데에 성공했다! 이제 저번 주에 했던 것처럼 남은 일주일 동안 스크립트를 조금씩 수정해 가며 우리들만의 게임으로 재탄생시킬 계획이다. 또 팀 스터디를 진행하느라 잠시 보류해두고 있었던 SQL 또한 차근차근 진행할 예정이니 배웠던 내용을 다시 복숩하고 더욱 열심히 공부를 해두어야겠다.