Visual Novel Project

이번에 구현할 기능은 백로그 기능입니다. 지금까지 진행한 게임의 내용을 다시 볼 수 있도록 하는 기능입니다. 이에 더해서 해당 장면으로 돌아갈 수 있는 기능도 함께 제공하도록 합니다. 이러한 기능은 실수로 여러번 클릭해서 다음 대사로 넘어간 경우거나, 혹은 잠시 직전의 대화 내용을 다시 한번 확인해보고 싶을 때 저장과 로드라는 번거로운 작업 없이 편리하게 훑어볼 수 있고 필요에 따라 돌아갈 수 있는 기능을 제공하기 때문에 유용합니다. 성우가 붙는다면 음성만 다시 재생하는 기능도 제공한다면 좋겠지요. 백로그는 반투명한 대화창 형태로 화면을 덮는 형태의 모달을 사용하는 것이 좋을 것 같습니다. 왜냐하면 게임에서 이탈한 느낌을 주지 않기 위해서도 있지만 페이지가 이동됨으로 인해 게임 컴포넌트가 언마운트되는 것..

스크립트 재생 기능을 만들어 두었으니, 이제 스킵 기능과 자동 진행 기능이 필요로 합니다. 이번 시간에는 덤으로 인터페이스를 숨기고 다시 표시하는 기능까지 구현해 보도록 하겠습니다. 인터페이스 숨기기 신사 여러분들은 CG를 감상하기 위해서 인터페이스가 방해되는 경우 숨길 수 있는 기능이 필요하게 됩니다. 어렵지도 않은 기능이니 뚝딱 만들어 주도록 합시다. // UI를 표시할지 말지 ON/OFF할 수 있도록 상태를 생성합니다. const [uiDisplay, setUiDisplay] = useState(false); // UI 숨기기 기능을 토클해주는 함수 const toggleUiDisplay = () => { togglePause() setUiDisplay(prev => !prev) } // 인게임 기..

본편 스크립트가 없지만 테스트를 위해서는 샘플 스크립트가 필요합니다. 따라서 스크립트 작성은 Novel AI 선생님께 간단하게 병사 이야기 하나를 뽑아 달라고 요청했습니다. 테스트를 할 뿐이니 짧게 부탁드립니다. 원래라면 적당한 스크립트를 뽑아내기 위해 한참을 고민하거나 의미 없는 문자열을 나열하게 되었을테지만 그래도 적당히 형태를 가진 소설 같은 스크립트가 만들어졌습니다. 그러나 아직 이 상태로는 문제가 해결되지 않습니다. 이 글은 말 그대로 소설입니다. 따라서 게임에 쓸 수 있게 스크립트를 구조화 해야합니다. 스크립트 = ["화자", "내용"] // 화자가 있는 경우 스크립트 = ["", "내용"] // 화자가 없는 경우 이러한 느낌으로 스크립트를 작성하면 좋을 것 같습니다. 다른 방식을 취할 수도 ..

타입 스크립트를 간단하게 맛을 볼겸 간단하게 텍스트 어드벤쳐 게임을 만들어 보도록 합시다. 텍스트 어드벤쳐 게임은 일반적으로 텍스트 위주로 진행되며 선택지에 따른 분기 처리로 엔딩이 갈리는 게임입니다. 시중에 다양한 엔진들이 이미 존재하지만 기능들을 하나씩 구현해 보도록 합시다. 타이틀은 마지막에 만들어도 상관이 없겠지만 아무래도 타이틀을 먼저 만들지 않으면 기분이 나지 않기 때문에 타이틀을 먼저 만들도록 하겠습니다. 타이틀 화면의 구성 디자인은 최대한 단순하게 가려합니다. 디자인하는데 시간을 쏟을 수도 없거니와 시간을 쏟은 만큼 좋은 디자인이 나올 것이라는 자신이 없기 때문입니다. 따라서 디자인은 고전 쯔꾸루 게임의 스타일을 따르려합니다. 유행과 관계 없고 이 디자인이라면 매우 단순해서 금새 떠올릴 수..