딤딤과 만삐의 VNAP 강의 1. 비주얼 노벨을 만들자!

 

1강. 게임 디스플레이를 디자인하자! : vnap.ini 건드리기 (3)

3) 스킨을 건드려 보자!

자, 그럼 이제 지난 강의에 이어서 디스플레이 디자인의 마지막,
대화창 스킨 꾸미는 법을 알아봅시다.

VNAP에서는 자기가 직접 그린 스킨을 사용할 수도 있고,
VNAP에 자체적으로 있는 스킨을 사용할 수도 있지요.
먼저 자체스킨부터 살펴보도록 합시다.

 

## VNAP 자체 스킨을 건드려 보자!

알아야 할 명령어는

 

 

이렇습니다.

 

i) TEXT_WINDOW_RECT은 대화창의 범위를 지정하는 겁니다.
숫자 네 개를 지정해 줘야 하는데, 그 숫자는 앞에서부터 차례대로
왼쪽 위 x 좌표, 왼쪽 위 y 좌표, 오른쪽 아래 x 좌표, 오른쪽 아래 y 좌표입니다.
(확실히 기억해 두시길! 이거 은근히 잘 틀리시더라구요.)

 

물론 좌표는 포토샵이나 알씨 등으로 직접 알아내셔야 합니다.
(좌표질은 보조강의에서 다룰게요)

 

직접 해 봅시다.
지금 설정은 이렇지요.

 

TEXT_WINDOW_RECT=(10,350,625,450)

 

이걸 한 번 이렇게 바꿔 봅시다.

 

TEXT_WINDOW_RECT=(240,240,625,450)

 

그리고 Perfect Cherry Blossom.cfg 지우고 실행!

 

 

자, 대화창의 위치와 범위가 바뀌었네요.
여러 설정을 시험해 보면서 적당한 위치를 찾으면 되겠습니다.

 

주의! 이유는 잘 모르겠지만, 오른쪽 아래 좌표를 해상도와 같게 설정하면
(우리 경우에는 640, 480 이겠죠) VNAP이 오류로 꺼져 버리더군요.
오른쪽 아래 끝까지 꽉 찬 대화창을 원하시더라도
해상도보다 하나 작게 설정하세요. (639, 479처럼)

 

ii) TEXTWINDOWALPHA 는 대사창의 투명도를 설절합니다.
값은 0부터 4까지 줄 수 있어요.
0이면 투명도 0%, 1이면 25%, 2면 50%, 3이면 75%, 4면 100%지요.
기본값은 2인데, 한 번 바꿔 볼까요?

 

TEXTWINDOWALPHA=0

 

로 바꾸고 실행해 봅시다. (cfg 파일 지우고요!)

 

 

자, 대사창이 완전히 불투명해졌지요?

 

iii) TEXTWINDOWCOLOR1, TEXTWINDOWCOLOR2, TEXTWINDOWGRADATION 는
대사창의 색과 그라데이션 형태를 지정하는 데 쓰입니다.
TEXTWINDOWCOLOR1은 그라데이션이 시작하는 색의 RGB값,
(기본값은 0, 0, 0, 즉 검정이죠)
TEXTWINDOWCOLOR2는 그라데이션이 끝나는 색의 RGB값입니다.
(기본값은 255, 255, 255, 즉 흰색이지요.
RGB값 알아내는 법은 보조 강의에서 다루겠습니다.)
TEXTWINDOWGRADATION은 그라데이션의 형태를 결정합니다.
이면 그라데이션 없음, 1이면 세로(이게 기본값이죠), 2면 가로,
3이면 왼쪽 위에서 오른쪽 아래로, 4면 왼쪽 아래에서 오른쪽 위로입니다.

 

우리는 붉은 보라에서 푸른 보라로의 그라데이션을
왼쪽 아래에서 오른쪽 위로 넣어 봅시다.

 

TEXTWINDOWCOLOR1=(200,0,80)
TEXTWINDOWCOLOR2=(80,0,200)
TEXTWINDOWGRADATION=4

 

이렇게 설정해 보세요.
cfg 파일을 지우고 실행하면

 

 

음, 좀 그럴싸해졌네요?
그런데 테두리가 조금 거슬리는 군요 ^^;

 

iv) 테두리를 바꾸는 명령은 TEXTWINDOWOUTLINE 입니다.

0이면 기본테두리(기본값이 이거죠), 1이면 간이테두리,
2면 없음. 3이면? 그건 자체 스킨을 쓸 때 알아보지요. ^^
테두리 없음은 알기 쉬우니까, 간이테두리가 어떻게 생겼는지 봅시다.

 

TEXTWINDOWOUTLINE=1

 

설정하고 cfg 지우고 실행.

 

 

음, 이렇게 생겼군요.
사실 저도 처음 봐요(;;)

 

자아! 이것으로 VNAP 기본 스킨 사용법은 다 뗐습니다!
잠깐 요점정리를 해 봅시다.

 

TEXT_WINDOW_RECT -> 대사창의 범위
TEXTWINDOWALPHA -> 대사창의 투명도
TEXTWINDOWCOLOR1 -> 그라데이션 시작색
TEXTWINDOWCOLOR2 -> 그라데이션 끝색
TEXTWINDOWGRADATION -> 그라데이션 형태
TEXTWINDOWOUTLINE -> 테두리 모양

 

정리 끝~

 

## 직접 만든 스킨을 써 보자!
잘 설정하면 VNAP 기본 스킨도 꽤 그럴싸하게 만들 수 있습니다.
하지만 게임분위기에 맞추어 자신이 직접 디자인한 스킨을
쓰고싶은 분들도 있겠지요?

이제 직접 만든 스킨 쓰는 법을 알아봅시다.

여기서는 알아야 할 명령어가 좀 다릅니다.

 

 

i) 가장 먼저 해야 할 것은 TEXTWINDOWOUTLINE을 건드리는 것입니다.

 

TEXTWINDOWOUTLINE=3

 

이렇게요.

이걸 3으로 설정하는 것은 VNAP에게 "나 자작스킨 쓸 거다~"라고 말해주는 겁니다.
이 설정을 빼먹으면 VNAP은 애써 만든 스킨파일을 읽지를 않아요 ^^;

 

ii) 그리고 TEXT_WINDOW_SKIN에는 자작 스킨파일 이름을 지정해야 합니다.
스킨파일은 물론 bmp나 png로 하셔야 합니다.
(png파일로 해서 투명도를 주시는 게 보기 좋겠지요?
투명도를 주는 법은 보조강의에서 다룰 겁니다)

그럼 우리는

 

TEXT_WINDOW_SKIN = "CherrySkin.png"

 

로 설정합시다. (첨부파일에 있어요 'ㅁ')

 

 

야, 완전히 안 맞네요;
스킨위치와 대사창범위를 다시 지정해 줘야 겠지요?

 

iii) TEXT_WINDOW_SKIN_POS은 스킨이 나타날 위치를 지정하는 겁니다.
이건 왼쪽 위 좌표(x, y)만 적어주면 돼요.
방금 확인했듯이, 스킨의 크기, 위치와 대화창의 크기, 위치는 다를 수 있습니다.
보통은 비슷하게 맞추겠지만, 필요에 따라서 다르게 해 볼 수도 있겠지요.

 

그럼 우리 스킨의 위치를 맞춰 봅시다. 약간의 계산이 필요해요.

일단 x축 방향으로 보면 스킨파일은 가운데 있어야 하겠지요.
가로 해상도는 640 인데 스킨은 가로가 610 이이니까...
x = (640-610)/2 = 15 군요.
또, y축 방향으로 보면 스킨파일은 아래쪽에 있어야 하겠는데,
바닥에 딱 붙어 있으면 보기 안 좋을 것 같으니 10 정도 올리기로 하죠.
세로 해상도는 480 이고 스킨은 세로가 150.
y = 480 - 150 - 10 = 330 이군요.

 

TEXT_WINDOW_SKIN_POS=(15,330)

 

으로 설정.

대화창 범위도 똑같이 맞춥시다. 왼쪽위 좌표는 15, 330.
그런데, 대화창범위는 오른쪽 아래 좌표도 지정해 줘야 하니까 계산을 해야겠죠?
대화창이 왼쪽에서 x좌표로 15만큼 떨어져 있으니까
오른쪽도 똑같이 떨어지게 해야 겠죠. 그래서 오른쪽아래 x는 640-15 = 625.
아래에서 10 떨어지도록 해 놓았으니까 오른쪽 아래 y는 480-10 = 470.

 

TEXT_WINDOW_RECT=(15,330,625,470)

 

그러면 cfg 파일을 지우고 실행해 봅시다.

 

 

위치는 괜찮은 것 같네요.
(안 괜찮은 것 같으면 좀 고쳐 보면서 최적의 위치를 맞추면 됩니다~)

 

iv) 그런데, 아까 설정한 색이 남아 있군요;;
자작 스킨에는 이미 색칠도 되어 있을 텐데,
보통은 VNAP 자체 스킨 색은 필요가 없겠지요.
그래서

 

TEXTWINDOWALPHA=4

 

로 설정해 줍니다. 투명도 100%라는 거죠.
(그러니 TEXTWINDOWCOLOR1, TEXTWINDOWCOLOR2, TEXTWINDOWGRADATION
이 세 명령은 필요가 없게 되지요;)

 

v) 그리고 글씨가 스킨에 딱 붙어 있는 것도 별로죠?
이때 쓰는 것이 바로 WINDOWMARGIN 명령어입니다.
이 명령을 통해 대화창과 텍스트 사이의 간격을 설정합니다.
직접 보는 게 빠를 테니, 일단 이걸 15 으로 설정하고 실행해 봅시다.
(Perfect Cherry Blossom.cfg 지울 것!)

 

WINDOWMARGIN=15

 

 

자, 이제 대화창과 텍스트 사이에 간격이 좀 생겨서 보기 좋지요?

(주: 자작 스킨과 글자의 간격을 맞추는 방법은 그러니까 두 가지입니다.
하나 - 스킨과 대사창 범위를 같게 하고 WINDOWMARGIN을 조정한다.
하나 - 스킨보다 대사창 범위를 작게 하고 WINDOWMARGIN은 놔 둔다.
자기가 편한 방식으로 쓰면 됩니다 ^^)

 

그럼 자작스킨 사용법을 요약해 봅시다.

 

TEXTWINDOWOUTLINE = 3
TEXTWINDOWALPHA = 4
TEXT_WINDOW_SKIN -> 스킨파일 지정
TEXT_WINDOW_SKIN_POS -> 스킨 위치 설정
TEXT_WINDOW_RECT -> 대화창 범위 설정
WINDOWMARGIN -> 대화창과 텍스트 간격 설정

 

끝.

 

어어, 어느새... 디스플레이 설정이 끝났군요! 끝!
이것으로 우리 게임, "Perfect Cherry Blossom"의 vnap.ini가 완성된 것입니다!
마지막으로 완성된 vnap.ini를 봅시다.
이번 강의에서 건드린 것만 표시되어 있습니다.

 

 

자아, 그럼 다음 시간에는 타이틀 강의로......
들어 가기 전에 잠깐.

 

4) 기타 명령어들

그러고보니 안 다룬 명령어가 많네요.

좀 특수한 경우에만 사용할 필요가 있거나,

사실상 거의 사용할 필요가 없는 명령들을 제껴 뒀더니 그렇게 되었어요.
그냥 넘어가기엔 좀 아쉽고 하니 간단히 코멘트만 하겠습니다.
별로 안 궁금하신 분들은 그냥 넘어가시면 되고,
자세히 알고픈 분들은 직접 VNAP 스크립트 가이드를 보면 되겠습니다.

 

HELP_FILE

 

도움말 파일 위치를 설정합니다.
html 파일로 만들어야 합니다.
도움말, 게임 가이드 등을 만들어 넣고 싶다면 쓰면 되겠지요.

 

SCENARIO_FILE

 

시작할 때 읽을 시나리오 파일을 지정합니다.

이것의 기본값이 바로 scenario.txt 이지요.

 

 

DEFAULT_BGM / ENABLE_CHANGE_BGM / FIRST_AUDIO_TRACK

 

VNAP은 bgm 폴더 내에 있는 음악파일뿐 아니라
CD 트랙을 배경음악으로 재생할 수도 있습니다.
게임을 CD에 넣어서 배포하고,
CD에 담긴 음악을 배경음악으로 쓰고 싶다면 이들 명령을 건드려야 합니다.

 

VOICE

 

VNAP은 보이스 재생도 지원합니다.
보이스를 쓰시려면 이걸 ON으로 설정해야 합니다.

 

CG_DIRECTORY / SCENARIO_DIRECTORY / EFFECT_DIRECTORY
VOICE_DIRECTORY /  BGM_DIRECTORY / SAVE_DIRECTORY /
CGEFFECT_DIRECTORY

 

VNAP 게임에서 사용되는 파일들은 다 넣어야 할 위치가 있습니다.
효과음 파일은 vnap 폴더 내의 effect 폴더에,
배경음악 파일은 vnap 폴더 내의 bgm 폴더에 등등..
그런데 이 명령들을 고치면 이들 폴더를 바꿀 수 있습니다.

 

예를 들어

EFFECT_DIRECTORY=".\vnap\eff"

라고 고치면 VNAP은 효과음 파일은
effect가 아니라 eff 폴더에서 찾겠지요.

CG_DIRECTORY와 SCENARIO_DIRECTORY에는 어째서인지
폴더가 아니라 파일이름이 설정되어 있는데요,
이에 대해서는 10강에서 다룰 겁니다.
CGEFFECT_DIRECTORY도 5강에서 다룰 거고요.

 

DELAY_TIME

 

VNAP에는 일정시간동안 정지시키는 delay라는 명령어가 있습니다.
이 명령어에는 지연시간을 덧붙여 써 줘야 하는데(예를 들어: delay 5000)
지연시간을 덧붙이지 않고 delay만 써 줄 수도 있습니다.
그때는 여기 설정된 시간만큼 지연합니다.

 

CG_DELAY

 

VNAP은 배경이든 캐릭터 CG든 그림을 갑작스럽게 띄우지 않고
자체적으로 약간 페이드 인하듯이 띄웁니다.
안 그러면 그래픽이 너무 딱딱한 느낌이 들게 되지요.
그 페이드 인 시간을 설정하는 것이 이 명령입니다.

 

FONTADD

 

윈도우 기본 폰트가 아닌데 자기가 특별히 사용하고 싶은 폰트가 있을 경우,
이 명령으로 그 파일의 경로를 지정해주면
게임 내에서 그 폰트를 쓸 수 있습니다.
물론 폰트는 자기 게임과 함께 배포해야 겠지요?

 

IMAGEAA

 

VNAP은 캐릭터 CG를을 출력하면서 자체적으로 안티앨리어싱
(그림파일 윤곽선을 부드럽게 만들어 주는 것)을 하는 기능이 있습니다.
이것 때문에 이미 안티앨리어싱이 된 그림파일(포토샵으로 그린 그림처럼)은
출력하면서 윤곽이 요상해지는 일이 일어나기도 합니다만...
png 파일을 쓰면 어차피 상관없습니다.
(그리고 웬만하면 bmp 말고 png 쓰시길 추천하고요.)
그냥 ON으로 놔 두시길.

 

USEPNGALPHA

 

PNG 파일 자체가 가진 알파값(에... 투명도라고 알아두시면 되겠습니다)을
사용할지 여부입니다. 물론 써야죠.
(뒤에 png 투명 만들기 보조강의도 있을 겁니다.)

다음 두 명령은 기본 vnap.ini에는 없는 명령입니다.

 

PAGECARET_FILE

 

text 명령으로 텍스트를 많이 출력해서 한 페이지가 넘어가게 되면
VNAP은 알아서 한 페이지만 출력하고 멈춥니다.
이때 나오는 캐럿(앞에서 다뤘었죠?) PAGECARET입니다.
설정하지 않으면 이 때에도 평상시 캐럿이 나옵니다.

 

SPACEKEY

 

VNAP에서 스페이스키를 누르면 대화창이 사라집니다.
다시 스페이스키를 누르면 대화창이 다시 나타나고요.
(그래픽을 보여주기 위한 비주얼노벨 및 미연시의 기본 기능이지요 :)
기본값이 ON인데, 이걸 OFF로 설정하면 끌 수 있습니다.

 

##
자아, 이것으로 vnap.ini 강의가 끝났습니다!!

그럼 다음 번엔 VNAP 스크립트의 종류에 대해 알아 보고

"Perfect Cherry Blossom"의 scenario.txt 파일을 만들어 봅시다!

다음에 만나요~