(단순 기록용으로 자세한 설명은 없습니다. 죄송합니다)

게임에서 사용할 타이머를 만들어 보았다. 

우선 완성된 모습을 게시하고 정리하려고 함

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

타이머가 작동하면서 게이지가 줄어드는 것처럼 보이는건 유니티에서 제공하는 Slider를 사용했다.

Slider를 만들면 다음과 같은 오브젝트들이 생겨난다(Timebar는 본인이 바꾼 이름)

Background는 게이지가 채워지는 배경 영역으로 보면 되고 Fill Area와 Fill이 slider의 value에 따라 달라진다

Fill Area는 다음과 같이 채워지는 영역을 조절?하는 것으로 이해했다

Fill에 있는 스프라이트를 채워질 이미지로 바꾸면(본인의 경우, 노란색 바가 Fill의 스프라이트로 들어감)

이제 Slider의 value에 따라 이미지가 달라질 것이다

Slider 컴포넌트

보통 여기서 건들이는 것은 Direction, 스프라이트가 채워지거나 사라지는 방향을 정할 수 있음. 직접 바꿔보고 value를 다르게 하면 이해하기 쉬움

그리고 밑에 있는 Value는 스크립트에서 변경시킬 수 있다

 

그리고 알면 좋을 것이 하나 더 있는데 Fill에 있는 Image 컴포넌트를 보면

본인은 지금 바꿔놨지만 원래 Image Type이 Simple이었는데 Simple로 했을 때 value를 조절하다 보면 본래 이미지랑 다르게 보이는 경우가 있었다.

그래서 Filled로 바꾸고 Fill Method를 표현하고자 하는 방식으로 바꾸면(수직, 원형도 가능) 제대로 이미지가 채워지는 것을 볼 수 있었다

 

이제 본격적으로 타이머를 구현해보겠다.

구현하고자 하는 방식은 사람마다 다 다른데, Update문에서 바꿀 수도 있는데 나는 코루틴을 사용해 구현하기로 했다(성능적으로 뭐가 더 나은지는 잘 모르겠다)

본인은 Timer라는 스크립트를 만들고 다음과 같은 변수들을 만들었다.

slider는 위에서 만든 슬라이더 오브젝트를 넣어줬고

totalTime은 타이머로 설정할 시간, remainTime은 남은 시간 그리고 isPaused는 일시정지 등의 이벤트를 대응하기 위한 변수이다. 자세한 구현내용은 다른 블로그에도 다양하게 있어서 코드를 전체적으로 올리진 않을려고 하고 그냥 핵심만 기록하자면

시작할 때 remainTime에 totalTime 값을 넣어주고 Update나 반복문에서 remainTime -= Time.deltaTime으로 감소시켜주고 slider의 value 값을 remainTime / totalTime으로 해주면 나오는 값으로 비율이 정해져 스프라이트의 일부분만 보여지게 된다.

 

 

먼저 JSON 이란?

JavaScript Object Notation의 약자

일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식. 클라이언트가 사용하는 언어에 관계없이 통일된 데이터를 주고 받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 저장, 표시할 수 있음. XML의 대안으로 사용되고 있음.

그 외 구조나 특징은 나무위키 참조 - https://namu.wiki/w/JSON 

 

현재 진행중인 졸업 프로젝트에서 사용할 학과 데이터, 강의 데이터, 건물 데이터가 필요한데 데이터들이 좀 많아서 유니티 내부에서 스크립트에 정의하지 말고 구글 스프레드 시트에 데이터를 다 입력한 다음 그 데이터를 JSON으로 변환해 프로젝트에서 보관해서 게임이 시작될 때 그 데이터들을 다 로딩하고 써먹기로 했다.

 

먼저 CSV 파일로 데이터를 작성한 다음 JSON으로 변환해주는 과정을 거쳤는데 이 때 내가 사용한 사이트는

https://csvjson.com/csv2json << 이 사이트인데 따로 설명이 필요없을정도로 쉽다. 그래서 여기 나온 파일을 프로젝트에 넣어준다.

 

나는 프로젝트에서 건물데이터, 학과데이터, 강의데이터들을 배열로 관리하고 싶기에 배열로 JSON을 파싱하는 방법을 찾았다. 

크게 도움이 된 블로그를 소개하자면 https://bloodstrawberry.tistory.com/m/754

 

유니티 - JsonUtility로 Json 파싱하기 : (2) 배열 파싱

Unity 전체 링크 JsonUtility로 Json 파싱하기 (1) Json Parsing (2) Json Array Parsing (배열 파싱) (3) Array of Objects in Json Array Parsing (배열 안에 있는 오브젝트 배열 파싱) (4) Json Export (파일 출력, 내보내기) 이번

bloodstrawberry.tistory.com

 

이걸 보고 손쉽게 해결할 수 있었다. 

일반적인 JSON 파싱과 다르게 배열로 파싱할 때는 구조를 다르게 JSON을 구성해야 하므로 위 블로그를 보고 잘 따라해보면 잘 될것임.

클래스로 선언할 때 변수명과 배열이나 리스트의 이름을 JSON에 있는 것과 같아야 한다는 것을 주의하자

 

유니티 프로젝트 도중 화면에 띄워지는 UI를 버튼을 누르면 두루마리를 펼치고 접는 것처럼 그런 이펙트를 주고 싶었다. 

여기서 버튼을 누르면 버튼 아래에 있는 애들이 접히면서 창이 축소되는 느낌을 주려고 했다.

처음에는 UI를 한 게임 오브젝트로 만들어서 높이를 수정하면 되지 않을까했는데 원하는 느낌이 아니라서

팝업 오브젝트를 두 부분으로 나누어(Title과 Content) Title에는 팝업 제목과 버튼이 있고 Content에는 이미지에 보이는 정보들이 있다.

그 후에 방법을 두 가지 생각했는데 처음 방법은 그냥 Content를 비활성화시키면 되지 않을까 였는데 이 팝업의 의도는 현재 게임에서 진행되는 정보들이 표시되는 창이기에 계속 스크립트에서 정보가 갱신될 것임. 그래서 비활성화하면 에러가 날 것이다라는 결론으로 폐기

그렇게 생각해낸 방법이 그냥 Content의 Scale을 0으로 만들면 그냥 보이지만 않을 뿐이지 정보는 갱신될 것이기에 이 방법으로 가기로 했다.

그래서 무턱대고 scale을 0으로 줄이면 되는데 나는 펼치고 접는 것이 보고싶다. 그래서 이럴 때 자주 쓰는 DOTween을 사용해서 

Content의 오브젝트.DOScaleY(0f, 1f) 라는 코드로 1초동안 스케일 y 값을 0f로 수정해라라고 했는데

UI가 가운데 방향으로 축소를 하네?

곰곰이 생각해보다가 깨달았는데 이런 UI들은 Rect Transform이 있고 이 트랜스폼에는 피봇(pivot)이 있어 이것을 기준으로 회전하고 Scale을 조정하는 것이었다. 원래 UI는 피봇의 y가 0.5로 되어 있어 가운데로 축소해보이는 것처럼 보였던 것이다.

RectTransform의 pivot에 마우스를 대면 보이는 툴팁

그래서 Content 오브젝트의 피봇 값을 (0.5, 1)로 설정해주고 DOScaleY(0f, 1f)를 해주니 아래에서 위로 잘 접히는 것을 볼 수 있었다.

 

 

이번 포스트의 핵심

UI를 회전하거나 스케일링할 때 피봇값을 잘 확인하자!

유니티 클라이언트로서 게임 프로젝트들을 하다보니 느낀점이 유니티에서 데이터를 서버에서 주고 받기 위해 내가 클라의 업무를 하더라도 서버를 잘 알고 있고 구현까지 해보면 좋을 것 같아 연습해보기로 했다.

 

게임은 모바일 용으로 대충 버튼을 눌러서 캐릭터의 스테이터스를 성장시키고 그 성장시킨 캐릭터의 능력치를 서버에 저장하고 불러오는 걸 배워보자. 거의 구글링으로 공부할 예정이다. 로그인 기능도 넣을 수 있으면 좋겠지?

 

Server_Practice로 이름을 붙이고 2D 템플릿을 사용해 프로젝트를 만들었다. 그리고 빌드 세팅에서 모바일(안드로이드)로 설정 후 switch platform 해 줌.

 

화면 설정

화면 회전 & 고정

가볍게 화면 설정부터 들어가자.

모바일 게임을 하다보면 가로 모드가 있고 세로 모드가 있는데, 고정으로 세로 모드를 시키자

안드로이드로 빌드를 바꿨다고 가정하에

Build Setting > Player Settings > Resolution and Presentation을 선택하면 이런 화면이 나온다.

지금 설정되어 있는 Auto Rotation을 하면 휴대폰의 회전에 따라 자동으로 가로 모드, 세로 모드가 되는 것 같다.

나머지 4개를 정리해보면

Portrait : 디바이스 홈버튼이 아래에 있는 세로모드로 고정

Portrait Upside Down : 홈 버튼이 위에 있는 세로모드로 고정 

Landscape Right : 홈 버튼이 오른쪽에 있는 가로모드로 고정 

Landscape Left : 홈 버튼이 왼쪽에 있는 가로모드로 고정

 

나는 Portrait을 선택하겠다, 코드로도 직접 세팅이 가능

 

해상도 고정

화면을 1920 * 1080 해상도로 고정시키고 싶다.

Game 뷰에서 Free Aspect를 1920 * 1080 Portrait으로 설정

 

Canvas에 대해

Canvas는 유니티에서 UI를 사용할 때 필요한 오브젝트이다. 3d 게임에선 게임의 다른 오브젝트들과 무관한 위치에서 UI를 꾸밀 수 있는데 2d 모바일 게임에서는 Canvas가 main camera 영역과 같으면 디자인이 편하지 않을까? 그래서 바꿔보자.

Canvas를 처음 생성하면 나오는 화면

Canvas가 카메라와 다른 영역을 가진다. 바꾸려면 어떻게 해야할까?

Canvas 오브젝트를 클릭하면 Canvas 말고 Canvas Scaler나 Graphic Raycaster같은 컴포넌트가 있다.

우선 Canvas 컴포넌트를 보면 Render mode가 있는 데 사용 목적에 따라 달리 사용됨.

Screen Space - Overlay : Default로 화면 전체에 항상 떠 있게 할 수 있음.

Screen Space - Camera : 카메라를 할당해 카메라를 항상 따라다니게 할 수 있음. 카메라에 맞는 UI 화면 구성에 사용됨.

World Space : 3D 게임을 만들 때 주로 사용되는 방식, 3D 오브젝트를 배치하는 것처럼 자유자재로 사용이 가능

 

여기서 Screen Space - Camera 방식을 사용해보자. 바꿔보면 Overlay 방식과 다른 옵션들이 나온다.

그 중 Render Camera란에 이미 있는 카메라를 넣어보자.

Canvas Scaler를 보면 UI Scale Mode가 있다. 정보를 찾아보면

Canvas Scale 컴포넌트는 화면 크기가 변경될 때 Canvas의 UI 컴포넌트 크기를 조정하는 방법을 뭘로 할 지 정한다.

UI Scale Mode 옵션은 Canvas 및 해당 자식 컴포넌트들의 크기를 조정하는 방법을 제어함.

Constant Pixel Size

이 모드에서는 UI 컴포넌트의 크기가 조정되지 않으며 화면 크기에 관계없이 UI 크기가 일정. 모든 화면 크기에서 동일하게 보이는 UI를 디자인하는 경우에 유용하나 다른 화면이 되면 크기가 뒤죽박죽 될 수 있다.

Scale with Screen Size

이 모드에서 UI 컴포넌트는 화면 크기에 비례해 크기가 조정된다. UI가 디자인되는 해상도인 기준 해상도를 설정하며, 현재 화면 해상도에 따라 UI의 크기가 조정된다. 

Constant Physical Size

UI 요소가 물리적 크기에 따라 크기가 조정된다. UI에서 한 단위를 나타내는 픽셀 수인 단위당 참조 픽셀을 설정할 수 있으며 UI 요소는 화면의 물리적 크기에 따라 크기가 조정된다.

 

나는 모바일로 만들어야 하는데 디바이스들이 다양한 화면 크기를 가지고 있어 그 크기들에 대응해야 하니까 두 번째를 선택하자. 그리고 Reference Resolution을 1920 x 1080으로 설정해준다.

 

이제 서버를 파보자. 

보통 찾아보면 Firebase를 쓰는 것을 알 수 있다. 그래서 Google 계정과 연동해보는 식으로 공부해보겠다.

참조 : https://nidelva.tistory.com/28

 

Unity + Firebase Google 로그인 구현하기

니델바, Firebase 써 봤어요? 음, 아니. 분명 대학다닐 시절 언젠가 DB서버로 한 번 활용한 적이 있었을 것이다. 구글 모바일 플랫폼으로 굉장히 자주 쓰인다 들어는 봤지만 이렇게 빨리 경험하게 될

nidelva.tistory.com

이거 보다가 유튜브가 더 알기 쉬울 것 같아서 유튜브 보고 했다

https://www.youtube.com/watch?v=harSUx-aIzo&t=436s 

이건 구글 아이디랑 연동하지 않고 그냥 파이어베이스에 있는 이메일 사용해서 로그인 구현한 내용인데 여기서 배운 내용을 토대로 구글 아이디 연동 도전해보면 좋을 것 같다.

일단 유니티로 회원가입, 로그인해서 파이어베이스에 내 계정이 올라가는지 확인해봤고 로그인, 로그아웃도 잘 되는지 확인했다. 오늘은 여기까지

개요

분산 시스템 텀 프로젝트로 서버와 클라이언트를 만들어 분산시스템을 구현해보는 것이 주어졌다.

교수님께서 제공하신 CM을 이용해 작업할 예정이다.

유저 가이드를 보면서 CM을 이용해 내 프로젝트 만들기 전 기초까지 오늘 완성했다.

이제 깃에 연동시킬려고 하는데 자꾸 에러가 나서 블로그에 정리해보려고 한다.

 

현재 상황

인텔리제이를 이용해 프로젝트를 만든 후(CMApp) 레포지토리를 생성하기 위해 내 깃헙에서 레포를 생성했다.

이제 생성한 레포에 내가 만든 프로젝트를 넣기 위해 깃허브 데스크탑으로 push 요청을 했는데 까였다.

Fetch해도 안되길래 구글링해보니까 내가 레포를 만든 다음 Readme 파일을 수동으로 레포에서 생성해서 현재 로컬 레포와 원격 레포간의 차이로 인해 발생한 오류 같다.

그래서 깃허브 데스크탑에서 main 브랜치를 새로 고침한 후 원래 없었던 커밋이 아래와 같이 새로 생겼다.

이제 이걸 fetch하고 다시 push를 해보자

만족스럽게 잘 됐다.

이제 맘편히 개발해야지,,,

팀원분들에게 빌드를 해보라는 요청을 받고 유니티와 싸운 지 좀 됐다

민폐끼치기 싫은데 자꾸 안된다 ㅠㅠ

계속 gradle 문제 떠서 지금 노트북 포맷을 한번 하고 다시 설치해서 싹 깔았다

 

1. 유니티 허브를 받는다

2. 2020.3.17f1 버전을 설치받으면서 sdk,jdk도 설치 받는다

3. 들어와서 안드로이드로 스위치 플랫폼 한 뒤 각종 설정해준다

4. 첫번째 오류 발생

SDK 버전 문제 같다 이게 안드로이드 스튜디오 설치를 해야하나,,,

 

>>>>

 

설치하고 sdk매니저가서 sdk 플랫폼 api 31 설치하고 sdk 빌드 툴 30.0.2 설치하고 다시 빌드 돌려봤는데

gradle 문제 나서 흠 하고 팀원 분이 말해준 부분에서 수정해보고 빌드 돌려보니 됐다!

로그에서 런처 뭐시기 문제라고 하길래

custom launcher gradle template을 체크해서 돌려보니까 잘 된다!

야호

+ Recent posts