이번주는 지난 주에 만든 Humanoid 모델을 가지고 플레이어 외의 NPC를 만들고 UI 요소를 만들어보는 것으로 시간을 보냈다.
일정 거리 내의 플레이어를 쫓아오는 NPC 만들기
Vector3.Distance 함수를 사용해 플레이어와 NPC 사이의 거리를 체크하여 NPC의 탐지 거리보다 작으면 쫓아오고, 탐지 거리보다 크면 더이상 쫓아오지 않는 Script를 붙여준다.
private void FixedUpdate()
{
// 두 오브젝트 사이 거리 계산
distToPlayer = Vector3.Distance(player.transform.position, transform.position);
// 플레이어와 npc 현재 위치 사이 거리
distToOrigin = Vector3.Distance(originalPos, transform.position); // 현재 npc 위치와 원래 자리 사이 거리
if (!questClear)
{
// quest 수락 전
if (questMode != true)
{
// player가 npc 탐지 거리 안에 있을 때
if (distToPlayer < detectArea)
{
if (distToPlayer < 1.7f)
{
// npc가 플레이어 몸통 파고드는 것 방지
anim.SetBool("walk", false);
}
else
{
transform.LookAt(player.transform);
transform.position += transform.forward * npcSpeed * Time.deltaTime;
anim.SetBool("walk", true);
goHome = true;
}
}
// player가 npc의 탐지 거리 벗어났을 때
if (distToPlayer >= detectArea)
{
dialogue1.SetActive(false); // quest 수락하지 않고 player가 도망갔으므로 quest window off
if (distToOrigin < 1f)
{
// 원래 위치 도착하면 멈춤
transform.rotation = originalRot;
anim.SetBool("walk", false);
goHome = false;
}
else
{
// 플레이어와의 거리 멀어지면 원래대로 돌아가게
this.transform.LookAt(originalPos); // 원래 위치 바라봄
transform.position += transform.forward * npcSpeed * Time.deltaTime;
anim.SetBool("walk", true);
}
}
}
if (questMode)
{
// quest 수락 후에 NPC가 원래 위치로 돌아가도록
if (goHome == true)
{
if (distToOrigin < 1f)
{
// 원래 위치 도착
transform.rotation = originalRot;
anim.SetBool("walk", false);
goHome = false;
}
else
{
this.transform.LookAt(originalPos);
transform.position += transform.forward * npcSpeed * Time.deltaTime;
anim.SetBool("walk", true);
}
}
}
}
}미니맵 만들기
UI Canvas 구석에 미니맵을 보여준다.
준비
- Minimap 용 RenderTexture 생성
- Layer에 Minimap 추가
- 움직이는 Player 오브젝트 하위에
- Minimap Camera 생성
- Minimap용 Canvas, Image, 플레이어 위치 표시용 Raw Image 생성
- Image 파일 준비
- Minimap masking을 위한 흰 배경 이미지 준비
- Minimap에서 플레이어 위치를 표시하고 싶다면 위치 표시용 이미지 준비
Main Camera
- Culling Mask에서 Minimap 레이어 제외
Minimap Camera
- 플레이어 머리 위에 위치하면서 x축으로 90도 돌려 바닥 바라보도록
- Orthographic으로 설정
- Size로 바닥과 Orthographic 카메라 사이의 거리 조절
- Culling Mask (지상의 모든 오브젝트를 포함해 보여주어야 하므로 Everything)
- Target Texture : Minimap용 RenderTexture
Minimap Canvas
- Render Mode : Screen Space - Overlay
- Canvas 크기에 따라 Minimap의 크기도 달라지게 하고 싶다면 Canvas Scaler - Scale With Screen Size로 설정
- Canvas 하위에 Image 생성
- Source Image에 흰 2D sprite 넣기
- Mask Component 추가
- Image 하위에 Raw Image 생성 후 Texture에 Minimap용 RenderTexture 넣기
플레이어 위치 표시용 이미지
- Minimap에서 플레이어의 위치를 표시하기 위한 이미지 파일 Assets 폴더에 넣어줌
- Texture Type : 2D sprite
- Minimap Camera 앞에 적당한 크기로 배치
- Layer : Minimap 레이어 설정
결과
플레이어를 따라다니는 Orthographic으로 설정된 Minimap camera가 지상의 물체와 플레이어 위치 표시하는 이미지를 함께 보여준다.
캐릭터 선택 창 만들기
준비물
UI
Canvas
Log In Panel
- Input Field : ID, Password 작성
- Button : Submit
Character Select Panel
- Raw Image : 캐릭터 이미지 보여줌
- Button : 캐릭터 선택
- Button : 다음 화면 넘어갈 버튼
Nickname Submit Panel
- Input Field : Nickname 작성
- Button : Submit
World
Character Object
Camera
- Clear Flags - Solid color
- 요상하게 Depth only로 하면 캐릭터 회전할 때 잔상이 남더라…
- Projection - Orthographic
- Target Texture - Render Texture 캐릭터 개수만큼 만들어 카메라에 하나씩 넣어줌
Canvas
Scale With Screen Size
스크린 크기에 맞추어 캔버스 늘어나게 하기
Log In Panel
Input Field
- Placeholder에 텍스트 작성
- 비밀번호 창 Content Type 내용 보여주지 않게 Password로 설정
- Font Awesome 활용Font 다운로드Free font로 다운 받았으므로 Free에 해당하는 Icon만 사용 가능
Search | Font Awesome
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
- Copy Glyph 버튼을 통해 복사 → Unity에서 Legacy - Text 생성 후 Text 부분에 붙여넣기 → 다운 받은 font로 설정 (Icon에 따라 설정해야 하는 font가 Solid 또는 Regular로 달라질 수 있음)
Download Font Awesome Free or Pro for the Web or Desktop | Font Awesome
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
- 아이콘을 이미지 파일이 아닌 Text를 이용해 Unity에 붙여넣을 수 있음
Select Panel
Character Object 준비
- World에 캐릭터가 될 오브젝트, 캐릭터 오브젝트 개수만큼 RenderTexture, 카메라 준비
- RenderTexture는 캐릭터가 들어갈 수 있는 충분한 공간 크기(ex. 400 x 600)로 설정
- Camera - Solid Color, Orthographic으로 설정 각각을 비추는 카메라의 Target Texture에 RenderTexture 연결
캐릭터 선택 창 UI 요소 준비
- 각 캐릭터 선택 버튼
- Text optional
- Raw Image 자식으로 생성 - Texture에 각 캐릭터를 비추고 있는 카메라의 RenderTexture 넣음
- 다음 버튼
- Text에 원하는 글자 적기
- OnClick() 이벤트 등록 (현재 화면 끄고 다음 화면 켜는 것)
결과
카메라에 담긴 각 캐릭터가 Render Texture를 통해 UI 버튼 위치에 나타나게 된다.
버튼 클릭 시 테두리 색 변경
캐릭터 선택 창에서 캐릭터에 마우스를 호버하고 선택할 때, 테두리 색깔을 바꿔줌으로써 캐릭터 선택 여부를 직관적으로 보이게 만들었다.
할 일
버튼 아래에 테두리 이미지 넣어두고, Target Graphic을 테두리 이미지로 설정
Selected Color 원하는 색으로 설정
버튼 클릭 시 선택된 옵션에 테두리 넣기
- Assets Folder에 이미지 가져다 놓고 타입을 2D sprite로 변경
- Button 하위에 Image 생성
- Image의 Source Image에 방금 sprite로 변경한 파일 넣어주고 눈에 안 보이게끔 Color를 배경색과 같게 설정
- Button의 Target Graphic에 테두리 Image 오브젝트를 넣어줌
- Button의 Selected Color에 버튼 클릭 시 넣고 싶은 테두리 색깔 넣어줌
결과
후기
캐릭터 선택 창이라고 하면 2D 이미지를 활용할 생각밖에 못했는데, 카메라와 Render Texture를 활용해 3D 오브젝트를 보여줄 수 있어 신선했다. 수업 시간에 배운 대로만 하면 캐릭터 선택이 되었는지 안 되었는지 알 수가 없어서 버튼 클릭 시 테두리가 생기게끔 기능을 추가했다. 직접 흰 테두리를 만들어 Unity 내에서 색을 입히는 식으로 작업했는데 다른 분이 와서 어떻게 하는 거냐고 물어보고 공유해줘서 고맙다 해서 좀 뿌듯했다.
수업 시간에 퀘스트를 받을 때까지 쫓아오는 NPC를 만들고 나서 가만히 서있다가 혼자 복싱하는 NPC도 만들어보고 싶었다. 애니메이션을 Has Exit Time을 켜놓은 채로 연속 재생하게 만드니 가만히 서있다가 복싱 여러 기술을 연습했다가 다시 한 템포 쉬고 복싱을 연마하는 복싱 소년이 만들어졌다.
이번주에 잘한 것은 Notion을 포함해 배운 내용을 정리하는 습관을 들였다는 것, 못한 것은 알고리즘에 소홀했다는 것. 이전에도 배운 내용을 기록하긴 했는데 그냥 한 파일에 마구잡이로 정리했달까... 지금은 기능별로 정리하고 필요에 따라 함수도 정리해보려 하고 있다. 추가로 알고리즘 기초 문제를 몇 개 풀면서 C#의 string 처리 함수를 일부 정리해보았다. 다음주에는 조건문 부분 문제를 빨리 끝내야겠다.
유데미코리아 바로가기 : https://bit.ly/3b8JGeD
본 포스팅은 유데미-웅진씽크빅 취업 부트캠프 유니티 1기 과정 후기로 작성되었습니다.
새로운 가능성의 시작, 유데미 x 웅진씽크빅
글로벌 최신 IT 기술과 실무 교육을 입문부터 심화까지! 프로그래밍, 인공지능, 데이터, 마케팅, 디자인 등 세계 최고의 강의를 경험하세요.
www.udemykorea.com
댓글