튜토리얼 완성 - Githubissues

miniron-v commented 1 month ago

개요

튜토리얼 씬이 완성되었습니다.

튜토리얼 씬이란?

게임 시작 시 처음 마주하는 화면입니다. 주인공의 독백으로 시작됩니다.
화면 클릭 시 다음 문장이 출력되며, 한 페이지가 끝나면 다음 장으로 넘길 수 있습니다.
일기를 써내려가는 도중 선택지가 나타나며, 이때 고르는 선택지에 따라 초기 카드, 아이템이 달라집니다.

변경 사항

PageCurl

책 넘기기 효과를 구현한 스크립트입니다. 여기에서 자세한 개발 과정을 볼 수 있습니다.
최상위 책 오브젝트 하나에 부착되며, 자식 오브젝트인 페이지를 넘기는 기능도 담당합니다.

FlipPage

한 페이지를 넘기는 코루틴 함수입니다. 주로 외부에서 호출됩니다.

MoveBackPage(int i)

i번째 페이지를 넘기는 기능입니다. 이때 i는 PageCurl 내에서, 페이지가 넘어갈 때 증가됩니다.
DOTween과 Ease 함수를 이용해 포물선을 구현하였습니다.
DOTween이 끝나면 위치를 고정시키고(뒤틀림 방지), 추가 작업을 진행합니다.

CurlPage

책 넘기기 효과를 낼 수 있게, 뒷면과 마스크, 그림자를 계산해 움직이는 함수입니다.
LateUpdate에서 실행되며, 매 프레임마다 새로 계산해 회전시킵니다.
우측 하단 꼭짓점의 이동을 기준으로 합니다.

Supplier

직업 별 카드, 직업 별 아이템 리스트를 갖고 있습니다.
DiaryManager에서 선택지를 고를 때 사용됩니다.

DiaryManager

튜토리얼의 핵심 기능, 일기를 다루는 큰 개념의 스크립트입니다.
CSV 파일에서 글을 가져오고, 페이지와 문장 번호를 제어하고, 페이지 넘김, 문장 출력 등을 지시합니다.

StartTutorial

튜토리얼을 시작할 때 호출합니다.
책을 한 장 넘기고, 페이지 번호를 조정합니다.

AddDialog

다음 문장을 PageScripter에게 넘겨주며 출력하게 지시합니다.
현재 타이핑 중이라면 캔슬을 지시합니다.
Next Sentence Button이 사용하는 함수입니다.

ShowChoiceButton

선택지를 띄우고, 선택을 기다립니다.
유저가 선택지를 고르면, 결과를 현재 페이지 스크립터에 전다랍니다.

Select(int i)

선택지 버튼들이 사용하는 함수입니다.
각 선택지엔 0부터 n까지의 번호가 붙어 있으며, 클릭된 버튼이 자신의 번호를 넘겨줍니다.
DiaryManager는 그걸 받아 카드와 아이템을 추가합니다.

PageScripter

각 페이지에 붙어, 출력을 담당하는 스크립트입니다.

ShowDialog

행에서 내용을 골라내고, TypeSentence로 넘깁니다.
페이지 넘김, 튜토리얼 종료를 구분하고 알맞은 함수를 실행합니다. (#은 페이지 넘김, $는 튜토리얼 종료

TypeSentence

문장을 한 글자씩 출력합니다. 캔슬 입력이 들어오면 즉시 종료합니다.
문장 출력 중 %를 만나면 선택지를 띄우고 대기합니다. 선택이 완료되면 선택된 단어를 출력한 후, 남은 문장을 출력합니다.
글자, 문장 부호에 따라 다른 딜레이를 갖습니다. 쉼표와 온점 역시 다른 시간을 갖습니다.
타이핑 중 Wait Cursor를 끄고, 타이핑이 끝나면 켭니다.
출력이 완료되면 다음 줄로 이동하라고 알립니다.

Select

DiaryManager에서 결과를 넘겨줄 때 사용합니다.

CancelTyping

출력을 즉시 종료합니다.

스크린샷

튜토리얼 완성본

배경과 페이지 그림만 추가되면 더 완벽할 것 같아요.

참고 자료

책 넘김 구현 과정이 잘 드러난 제 블로그입니다.
GNUPart, "Unity3D Simple Page Curl Effect", 티스토리, 2015. 11. 16., https://gnupart.tistory.com/entry/Unity3D-Simple-Page-Curl-Effect
- 책 넘김 효과를 구현할 때 개념적 기초가 된 블로그
Rito15, "유니티 - UI 이미지에 구멍뚫기", GitHub Pages, 2021. 9. 15., https://rito15.github.io/posts/unity-punch-ui-image/
- 여기서 특정 부분 빼고 그리기를 배웠는데, 결국 안 쓰게 되었습니다.
아이스푸푸, "Unity Mask, 유니티 마스크, 원하는 모양으로 이미지 보여지게 하기.", 티스토리, 2018. 12. 20., https://freezer09.tistory.com/4
- 투명 마스크를 만드는 방법
두야, " [Asset] Unity3D 'DOTween' 7 : 포물선 움직임 트윈으로 간단하게 표현하기", 네이버 블로그, 2020. 3. 2., https://blog.naver.com/PostView.naver?blogId=dooya-log&logNo=221833590828&categoryNo=9&parentCategoryNo=0
- DOTwee으로 포물선으로 움직이기
DevIndie, "두트윈 move 끝날때까지 기다리기(코루틴)", 티스토리, 2022. 6. 15., https://themestock7.tistory.com/140
- DOTween이 끝날 때까지 기다리기

miniron-v commented 1 month ago

이거만 고치고 자야지~ 하다보니 어느새 시간이 5시

ThisIsTAEWON commented 1 month ago

수고하셨습니다 ㄷㄷ

pknu-wap / Zenocide

튜토리얼 완성 #78

개요