제페토 빌드잇 템플릿 가이드
8. 2D 월드 만들기
19 분
더 빠르고 간편하게 월드를 만들 수 있는 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를 입력하세요 dialogue id 사용할 dialogue id를 입력하세요 dialogue id 는 npc dialogue editor 로 만든 dialogue의 고유값입니다 자세한 내용은 아래 npc dialogue 설정하기를 확인해 주세요 npc dialogue 설정하기 npc dialogue system 으로 배치한 npc와 어떤 대화를 나눌지 설정 할 수 있습니다 상단의 zepeto 2d > edit npc dialogue 를 선택해주세요 활성화 된 npc dialogue editor 에서 npc의 대화를 설정할 수 있습니다 npc gameobject dialogue를 설정하고 싶은 npc를 넣어주세요 dialogue id 생성한 dialogue가 가지고 있는 고유한 식별 값 입니다 같은 dialogue id를 가지고 있는 npc들은 같은 대사를 출력합니다 npc name npc의 이름을 입력해주세요 what npc says npc가 처음 출력할 대사를 입력해주세요 questions & answers question 선택지에 노출될 질문을 입력하세요 answer 해당 질문에 대한 npc의 대답을 입력하세요 remove 해당 대화를 삭제합니다 add option 질문의 갯수를 추가할 수 있습니다 질문은 한 번에 최대 3개 까지만 노출되며, 생성된 질문이 4개 이상이라면 질문 중 3개가 랜덤으로 노출 됩니다 save dialogue 설정한 dialogue를 저장합니다 수정 한 뒤에는 꼭 잊지말고 눌러주세요! reload 마지막 저장 시점의 dialogue를 불러옵니다 delete 해당 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와 겹치지 않게 배치 해 주세요 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 이미지임을 월드 설명에 명시해 주세요 💡 공간감이 있는 ai 이미지를 생성하려면 다음과 같은 프롬프트를 사용해 보세요 \[공간 콘셉트]의 장면 넓고 깊이감이 느껴지는 구도로, 카메라 시점이 공간 안쪽으로 자연스럽게 이어진다 중앙 혹은 한 지점으로 시선이 모이는 원근감(소실점)이 강조된 구도 바닥의 반사광, 공기 중의 안개나 빛줄기, 그림자 대비를 통해 현실적인 공간 깊이를 표현 입체적인 조명과 사실적인 재질감이 어우러져 공간의 분위기가 생생하게 전달된다 시네마틱한 구도와 사실적인 조명, 디테일한 질감 표현 고해상도, 깊이 있는 원근감, 초점이 앞뒤로 자연스럽게 흐려지는 효과 이미지 추가와 포털 연결, 배경음악 만으로 간단하게 나만의 공간을 만들어 보세요!


