8. 2D 월드 만들기
더 빠르고 간편하게 월드를 만들 수 있는 2D 월드를 공개합니다.
나만의 배경 이미지와 포털 연결만으로 빠르고 손쉽게 월드를 만들고 출시할 수 있습니다.
기존의 빌드잇 유니티 플러그인 프로젝트에 2D World 패키지를 설치해서 사용할 수 있어요!
적용 방법
Unity Hub에서 빌드잇 플러그인 폴더를 선택하고 Open 버튼을 눌러주세요.
📘 Note 만약 처음이라면, 1. 설치하기를 따라서 빌드잇 유니티 플러그인을 먼저 설치하고 기본 조작법을 익혀주세요.
빌드잇 플러그인 프로젝트가 열렸다면 상단의 ZEPETO > Buildit Plugin Package Manager > 2D World를 선택해 주세요.
Import를 눌러서 모든 구성 요소를 가져와 주세요.
3번 단계를 완료하면 Assets > Zepeto 2D World 폴더가 생성됐습니다.
폴더 내에 있는 2DWorldScene 파일을 더블클릭해서 열어주세요.
상단의 계정 로그인 후, 멀티플레이 서버를 On하고, Play 버튼을 누르면 2D 월드를 플레이할 수 있습니다.
2D 월드 기능
- 빌드잇 플러그인의 기본 모듈 기능을 사용할 수 있습니다.
- 음성 채팅, 퀵채팅, 제스쳐, 스크린샷/화면 녹화, 옷장, BGM 기능을 사용할 수 있습니다.
- 가로/세로 모드 변환 기능을 제공하고 있습니다.
- 로딩 화면을 변경할 수 있습니다.
- 맵의 배경을 변경할 수 있습니다.
- 원하는 만큼 맵을 추가하고 포털을 연결해서 창의적인 공간을 제작할 수 있습니다.
맵 개수에 제한은 없지만 제페토 스튜디오에 출시할 때, 빌드 파일의 용량 1기가 이내, 최적화 가이드를 벗어나지 않는 수치여야 합니다.
- 배경음악을 변경할 수 있습니다.
- 2D월드이기 때문에 3D 오브젝트 배치는 어울리지 않으므로 추천하지 않습니다.
- 배경과 포털 연결만으로 빠르고 손쉽게 월드를 만드는 목적입니다.
2D 월드 만들기
2DWorldScene 기본 구성
- 기본적으로 로딩화면 및 2개의 맵이 포털로 연결되어 있는 예제가 포함되어 있습니다.
- 작업의 편의를 위해서 유니티 에디터 Scene의 2D 메뉴를 클릭해 주세요.
로딩 화면
- Managers > LoadingScreen 오브젝트를 인스펙터에서 활성화 체크하면 로딩화면 기능을 사용할 수 있습니다.
- 로딩 이미지로 쓸 이미지를 Assets에 드래그해서 추가하고 Texture Type을 Sprite(2D and UI)로 변경한 후 Apply를 눌러 주세요.
Managers > LoadingScreen > Image를 선택해 주세요.
방금 추가한 로딩 이미지를 드래그해서 Image 오브젝트의 SourceImage 프로퍼티에 넣어주면 로딩 이미지가 변경됩니다.
Managers > LoadingScreen > Text(TMP)를 선택해 주세요.
TextMeshPro-Text(UI) 부분에 로딩 텍스트를 작성해 주세요. 텍스트를 원하지 않는다면 빈칸으로 남겨두어도 됩니다.
Managers > LoadingScreen > Delay After Ready는 제페토 캐릭터가 생성된 이후 로딩 화면이 유지되는 시간(초)을 나타냅니다. 기본값은 0.1 입니다.
캐릭터 이동 속도 변경하기
- Managers : 캐릭터의 이동 속도를 조절할 수 있습니다.
- Run Speed : 캐릭터 달리기 속도를 조절할 수 있습니다.
- Walk Speed : 캐릭터 걷기 속도를 조절할 수 있습니다.
점프 기능은 2D 월드에서 사용할 수 없습니다.
맵 수정하기
맵의 배경 이미지 변경, 포털 변경, 캐릭터 이동 가능 영역 변경, BGM 변경, 맵의 타이틀 변경을 할 수 있습니다.
배경 이미지 변경하기
Hierarchy에서 ZEPETO2D_BG 오브젝트를 선택해 주세요.
- Sprite Renderer > Sprite : 원하는 이미지를 드래그해서 배경을 변경할 수 있습니다.
- Rebuild Borders2D : 이미지를 변경했다면 반드시 이 버튼을 클릭해야 합니다. 이미지 크기에 맞춰서 외곽 테두리에 이동 가능한 영역인 BoxCollider2d를 생성해 줍니다.
Border2D-Top을 Move 툴로 이동시켜서 이미지 상 바닥 경계 부분에 위치시켜 주세요.
나머지 Border는 별도로 수정하지 않아도 됩니다.
맵 사이즈의 경우 원본 이미지 사이즈에 맞춰서 생성되지만, Transform의 Scale 값을 입력해서 원하는 크기로 조절할 수 있습니다.
권장 원본 이미지 사이즈 : 3400×1530px 가로 스크롤링이 되는 2D 배경 이미지 사이즈입니다. 권장 이미지와 사이즈가 달라도 월드를 제작하는 것에는 문제가 없습니다.
포털 연결하기
Hierarchy에서 ZEPETO2D_BG 오브젝트를 선택해 주세요.
- Linked Portal Obj : 포털의 Box Collider 영역 안에 캐릭터가 입장하면 포털이 활성화되고, 버튼을 클릭하면 연결된 목적지로 이동합니다. 목적지 포털을 드래그해서 추가해 주세요.
- Interact Button Text : 포털 버튼에 나타날 텍스트입니다. 연결된 포털이 없을 경우 텍스트가 나타나지 않습니다.
- Show Map Title Toast : 체크하면 포털 이동시 입력한 Map Title이 나타납니다.
- Map Title : 이름 텍스트입니다.
ZEPETO2D_BG > Create Portal2D(Child)을 통해 추가 포털을 생성할 수 있습니다.
BGM 변경하기
Hierarchy에서 ZEPETO2D_BG > BGM 오브젝트를 선택해 주세요.
BGM Audio Source에 원하는 음악을 드래그해서 변경해 주세요. 맵마다 다른 BGM을 설정할 수 있습니다.
맵 타이틀 UI 수정하기
- Managers > UIToolbar > MapTitleToast의 Rect Transform 위치값을 수정해서 타이틀이 뜨는 위치를 수정할 수 있습니다.
- Managers > UIToolbar > MapTilteToast>Background에서 Color를 수정하거나 커스텀 이미지를 사용할 수 있고, Rect Transform 값을 수정해서 배경 영역의 크기를 수정할 수 있습니다.
- Managers > UIToolbar > MapTilteToast>Background>Text(TMP)를 선택해서 Font Size와 Vertex Color로 글자색을 바꿀 수 있습니다.
맵 추가하기
- 상단의 ZEPETO 2D > Create BG를 눌러서 새로운 맵을 추가할 수 있습니다.
- 새로 추가된 맵도 동일한 방법으로 이미지를 변경하고 포털을 연결해 주세요.
NPC 추가하기
2D 월드에서는 대화를 나눌 수 있는 NPC를 사용할 수 있습니다.
샘플 씬에 배치된 NPC를 수정하거나 상단의 ZEPETO 2D > Create ZepetoNPC를 눌러서 제페토 NPC를 추가해 주세요.
Hierarchy에서 생성된 ZepetoNPC를 선택해 주세요.
- Zepeto ID : 사용할 제페토 계정 ID를 입력하세요.
- Npc Name : 화면에 표시될 NPC의 이름을 입력하세요.
- Dialogue ID : 사용할 Dialogue ID를 입력하세요.
Dialogue ID는 NPC Dialogue Editor로 만든 Dialogue의 고유값입니다.
📘 Note Dialogue 설정에 관한 내용은 NPC Dialogue 설정하기 를 참고해 주세요.
Sprite NPC 추가하기
Sprite NPC 기능으로 직접 넣은 이미지를 NPC로 만들 수 있습니다.
상단의 ZEPETO 2D > Create SpriteNPC를 선택해주세요.
Hierarchy에서 생성된 SpriteNPC를 선택해주세요.
- Sprite : NPC로 사용될 Sprite를 설정 할 수 있습니다.
NPC로 사용하고 싶은 이미지를 Project에 넣어주세요
- 배경이 없는 PNG 형태의 이미지를 사용해 주세요.
- 권장 이미지 사이즈 720*720
- 권장 이미지 사이즈가 아니더라도 테스트를 통해 유니티에서 크기를 조절할 수 있습니다.
가져온 이미지를 선택하여 Inspector > Texture Type > Sprite (2D and UI)로 변경해 주세요.
- 변경 후 하단의 Apply를 눌러 변경할 수 있습니다
Sprite NPC의 Inspector > Sprite Renderer > Sprite를 가져온 Sprite로 변경해 주세요.
- NPC의 크기를 변경하고 싶다면 Transform > Scale > X, Y값을 변경해 보세요.
- Inspector > Sprite Renderer > Flip으로 이미지를 X, Y 방향으로 뒤집어 사용할 수 있습니다
Play로 커스텀 이미지로 만든 Sprite NPC가 잘 보여지는지 확인해 보세요.
- NPC와의 상호작용 거리를 조절하고 싶다면, 변경하려는 Sprite NPC 선택 후 Inspector > Box Collider > Size > X, Y, Z값을 조절해 보세요
NPC가 포탈이나 다른 NPC와 겹치지 않게 배치해 주세요
📘 Note Dialogue 설정에 관한 내용은 NPC Dialogue 설정하기 를 참고해 주세요.
AD Teleport 2D 배치하기
AD Teleport 2D 오브젝트를 배치하여 2D 월드에서도 수익을 얻을 수 있습니다.
- 유저들이 광고를 시청해야만 동작하는 Teleport를 통해 직접 만든 월드에서 재미와 함께 수익도 얻어보세요.
- AD Teleport2D 오브젝트는 기존의 Advertisement 오브젝트와 동일하게 동작하는 2D 월드 전용 오브젝트 입니다.
Build it Asset Browser > 2D의 AdTeleport2D 오브젝트를 선택해주세요.
Scene에서 원하는 위치에 드래그해서 배치해 주세요.
Hierachy에서 배치하고 싶은 BG의 하위에 배치한 AdTeleport2D 오브젝트를 넣어주세요.
도착지점으로 만들고 싶은 위치에 AdTeleport2D > Destination 오브젝트를 배치해주세요.
- 도착지점을 다른 BG에 배치하고 싶다면 해당 BG 하위에 빈 GameObject를 배치한 후 AdTeleport2D > Inspector > Zepeto Script > Destination에 생성한 빈 GameObject를 넣어 Destination으로 사용할 수 있습니다.
AdTeleport2D 오브젝트의 테스트는 유니티에서는 불가하며 모바일에서 진행해야 합니다. Zepeto Studio에 빌드 파일을 등록해 할 수 있습니다.
4. 월드 테스트하기
2D 월드 제작 팁
- 각각의 맵은 z 좌표는 기본값인 100으로 고정해두고 x,y 값을 조절하여 배치하는 방법을 추천합니다.
- Scene에서 맵이 겹칠 경우 멀티플레이시 다른 맵의 플레이어가 화면에 보일 수 있어 아래 예시와 같이 맵 간의 간격을 두는 것이 필요합니다.
- AI 생성 이미지를 사용하실 수 있습니다.
- 제페토 스튜디오에 출시할 때 AI 이미지임을 월드 설명에 명시해 주세요.
💡 공간감이 있는 AI 이미지를 생성하려면 다음과 같은 프롬프트를 사용해 보세요.
- 이미지 추가와 포털 연결, 배경음악만으로 간단하게 나만의 공간을 만들어 보세요!