8. 2D 월드 만들기

더 빠르고 간편하게 월드를 만들 수 있는 2d 월드를 공개합니다 나만의 배경 이미지와 포털 연결만으로 빠르고 손쉽게 월드를 만들고 출시할 수 있습니다 기존의 빌드잇 유니티 플러그인 프로젝트에 2d world 패키지를 설치해서 사용할 수 있어요! 적용 방법 unity hub에서 빌드잇 플러그인 폴더를 선택하고 open 버튼을 눌러주세요 📘 note 만약 처음이라면, docid\ hwefqvatzjtb5siz0gm n 를 따라서 빌드잇 유니티 플러그인을 먼저 설치하고 기본 조작법을 익혀주세요 빌드잇 플러그인 프로젝트가 열렸다면 상단의 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의 고유값입니다 자세한 내용은 아래 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와 겹치지 않게 배치 해 주세요 npc dialogue 설정하기 새로운 npc dialogue system 을 활용하면 나만의 월드에 한층 더 재미있고 생동감 넘치는 npc를 추가할 수 있습니다! 단답형 대화를 넘어 유저의 선택지에 따라 이야기가 이어지는 대화의 연속성 을 구현할 수 있으며, 다국어 지원(localization) 을 통해 전 세계 글로벌 유저들과 소통하는 몰입감 있는 대화 시스템을 구축할 수 있습니다 이 시스템은 크리에이터가 대화를 쉽게 구성하고 적용할 수 있도록 dialogue editor , dialogue helper , npc (zepetonpc component) 세 가지 핵심 요소로 이루어져 있습니다 1\ dialogue helper 활용하기 dialogue helper 는 다이얼로그 생성과 npc 할당을 돕는 중앙 제어 지점(central control point)입니다 상단 메뉴의 zepeto 2d > npc dialogue helper 를 선택해 창을 열어주세요 npc 필드 scene에서 현재 선택된 npc를 표시합니다 zepetonpc component를 가진 gameobject를 선택하면 자동으로 업데이트됩니다 (자동 업데이트가 되지 않았다면, refresh 를 눌러주세요 ) dialogue 필드 현재 할당된 다이얼로그를 보여주며, 클릭 시 다이얼로그 에셋(node graph asset)을 할당할 수 있는 선택 창이 나타납니다 export 버튼 다이얼로그 설정 후 2d 월드 런타임에서 사용 가능하도록 데이터를 변환하여 추출합니다 에셋 수정 후엔 이 버튼을 꼭 눌러야 합니다 dialogue 폴더 모든 다이얼로그 에셋이 저장된 폴더를 엽니다 create new 새로운 다이얼로그 에셋을 만듭니다 2\ dialogue graph editor (노드 에디터) 활용하기 dialogue helper 에서 create new 를 누르거나 다이얼로그 에셋을 열면 dialogue graph editor 가 나타납니다 이 에디터는 시각적인 노드(node) 연결을 통해 복잡한 대화의 흐름을 직관적으로 디자인할 수 있는 툴입니다 핵심 노드(node) 종류 start node 대화가 시작되는 진입점입니다 (그래프당 1개만 존재해야 합니다 ) npc node npc의 대사와 플레이어의 응답(선택지)을 입력하는 핵심 노드입니다 what the npc says npc가 화면에 출력할 대사를 적습니다 answer options 플레이어가 선택할 수 있는 답변을 여러 개 추가하여 대화를 분기(branching)시킬 수 있습니다 end node 대화가 끝나는 지점을 나타냅니다 플레이어가 이 노드에 연결된 선택지를 고르면 대화가 종료됩니다 그래프 편집 및 연결 다이얼로그 캔버스에서 아래와 같은 방법으로 노드를 생성하고 연결할 수 있습니다 캔버스의 빈 공간을 우클릭 하여 새로운 노드를 생성( create node )하거나, 기존 노드를 복사 및 삭제할 수 있습니다 선택지(answer options) 우측의 output 포트 를 드래그해서 다음 노드의 input 포트 에 연결하면 대화의 흐름(flow)이 완성됩니다 tips 네비게이션 화면은 아래와 같은 방법으로 이동할 수 있습니다 마우스 휠 을 누른 채로 드래그 option(mac) / windows 키 + 마우스 왼쪽 버튼 드래그 다국어(localization) 지원 설정 inspector 창 설정 생성한 다이얼로그 에셋(node graph asset)을 클릭하고 inspector 창을 보면 지원할 언어(english, korean, japanese 등)를 체크할 수 있습니다 에디터 툴바 활용 에디터 창 좌측 상단의 language selector(언어 선택기) 에서 언어를 변경해가며 각 언어에 맞는 번역 텍스트를 직접 입력할 수 있습니다 3\ 새로운 npc dialogue 생성하기 다이얼로그 생성하기 dialogue helper 창에서 create new 를 클릭합니다 자동으로 열리는 dialogue editor 에서 노드(npc 대사)와 플레이어의 응답(선택지)을 자유롭게 편집하여 대화 노드를 구성해 주세요 npc 지정하기 hierarchy 창에서 다이얼로그를 추가할 npc 오브젝트를 클릭합니다 inspector 창에서 해당 오브젝트에 zepetonpc component가 있는지 확인해 주세요 npc dialogue helper의 'npc' 항목에 대화를 적용할 npc를 할당합니다 다이얼로그 할당 및 export dialogue helper의 dialogue 필드 를 클릭해 방금 만든 다이얼로그 에셋을 연결합니다 적용이 완료되면 인게임에서 동작하도록 export 버튼을 클릭해 주세요 inspector 최종 점검 해당 npc의 inspector 창( zepetonpc component)에서 설정이 올바른지 점검합니다 npc 해당하는 npc 에셋이 맞는지 확인합니다 dialogue id 선택한 다이얼로그 에셋과 dialogue id의 문자열이 일치하는지 확인합니다 tips 동일한 npc 다이얼로그 에셋을 다수의 npc에 쉽게 재사용할 수 있습니다 작업한 대사 내용이 실제 게임에 정상적으로 반영되도록, 다이얼로그를 수정했다면 수시로 export 를 진행해 주세요 faq 다이얼로그가 화면에 안 뜰 때 export를 진행했는지, dialogue panel과 dialogue id가 inspector에 정확하게 들어갔는지 확인해 보세요 툴에서 npc 정보가 안 바뀔 때 dialogue helper 창에서 refresh 버튼을 누르거나, hierarchy에서 npc를 다시 클릭해 보세요 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 에 빌드 파일을 등록해 할 수 있습니다 docid\ hvjqkscnioe1au4tqsrxs 2d 월드 제작 팁 각각의 맵은 z 좌표는 기본값인 100으로 고정해두고 x,y 값을 조절하여 배치하는 방법을 추천합니다 scene에서 맵이 겹칠 경우 멀티플레이시 다른 맵의 플레이어가 화면에 보일 수 있어 아래 예시와 같이 맵 간의 간격 을 두는 것이 필요합니다 ai 생성 이미지를 사용하실 수 있습니다 제페토 스튜디오에 출시할 때 ai 이미지임을 월드 설명에 명시해 주세요 💡 공간감이 있는 ai 이미지를 생성하려면 다음과 같은 프롬프트를 사용해 보세요 \[공간 콘셉트]의 장면 넓고 깊이감이 느껴지는 구도로, 카메라 시점이 공간 안쪽으로 자연스럽게 이어진다 중앙 혹은 한 지점으로 시선이 모이는 원근감(소실점)이 강조된 구도 바닥의 반사광, 공기 중의 안개나 빛줄기, 그림자 대비를 통해 현실적인 공간 깊이를 표현 입체적인 조명과 사실적인 재질감이 어우러져 공간의 분위기가 생생하게 전달된다 시네마틱한 구도와 사실적인 조명, 디테일한 질감 표현 고해상도, 깊이 있는 원근감, 초점이 앞뒤로 자연스럽게 흐려지는 효과 이미지 추가와 포털 연결, 배경음악만으로 간단하게 나만의 공간을 만들어 보세요!