[Lecture 12. VNAP 튜닝하기]

[Lecture 12. VNAP 튜닝하기]

강좌 2010. 1. 5. 13:46

지금까지 기능 위주로 다루어 왔지만, VNAP의 기본 형태는 많이 투박한 것이 사실입니다.
후속으로 나온 바실리어트나, 외국계 프로그램들은 좀 더 세련된 디자인을 제공하고 있지요.

VNAP도 예쁘게 치장해 봅시다!

이번 강좌의 핵심은 vnap.ini파일의 설정 세팅입니다.
물론 매뉴얼에 상세한 기능이 소개되어있지만, 일단 많이 궁금해하시고, 자주 쓰는 기능부터 이야기 드리겠습니다.

[Lecture 12. VNAP 튜닝하기]

1. VNAP 해상도와 윈도우 모드 설정하기.

VNAP의 기본 설정은, 창 크기는 640*480에 윈도우 모드입니다.

많은 분들이 이 기본 사이즈를 그냥 이용하시더군요, 아마 VNAP이 출시되었을 시점을 보면 이 사이즈가 적절했던것 같으나,
최근에는 와이드 모니터를 많이 이용하시니, 크기에 불만이 있었던 분들도 계셨을 거라 생각합니다.

먼저 창 크기 변경에 대해 알아보지요.

창 크기는 vnap.ini파일에서 조절이 가능합니다.
먼저 vnap.ini파일을 열면 메모장에 여러 글씨들이 적혀있습니다.
그 중에 아래 스크린 샷에 적힌 부분을 찾아봅시다.

빨간 선 안에 들어있는 부분이 바로 해상도를 조절하는 옵션입니다.
여기서는 기본값인 640*480이 아닌 다른 해상도를 선택하였습니다.
추천하는 해상도는 그래픽 카드가 구현하는 정격 해상도로, 640*480 , 800*600 , 1024*768입니다.
정격 해상도가 아니면 풀 스크린 모드로 변경은 불가능하다고 하네요.

앞에서 이야기했듯, VNAP의 기본값은 윈도우 모드입니다.
SCREEN MODE값이 WINDOW로 되어있을때는 윈도우모드, FULL로 되어있을때에는 풀 스크린 모드가 됩니다.

2. 작품의 이름과 시나리오 파일 이름 변경하기.

여러분이 제작하시고 계시는 작품들의 이름은 다 있을테지만 아무런 설정을 하지 않으면 무정하게도[...]
"제목없음"이라는 타이틀이 적혀있을겁니다. 이를 바꾸어봅시다.

GAME_TITLE항목에 따옴표를 포함해서 원하는 제목을 적습니다.
그리고 반드시 저장을 합니다.

다음, VNAP 폴더에 가서 제목없음.cfg파일을 지웁니다.(중요합니다.)

그리고 VNAP을 실행시켜봅시다.

vnap.ini파일에 적은 그대로의 제목이 타이틀에 나타났고, WHITE ALBUM Dramatic Edition.cfg 라는 파일이 새로이 생겨난 것을 볼 수 있습니다.

앞으로 vnap.ini파일을 변경시에는 정상 작동을 위하여 이전의 .cfg파일을 지워주는 것을 잊지 마셔야 합니다.
이전 .cfg파일이 있으면 변경된 결과가 제대로 적용되지 않습니다.

다음에는 VNAP 시나리오 핵심 파일인 scenario.txt파일의 이름을 바꾸는 법을 알아봅시다.
이름이 마음에 안들어! 하시는 분들은 바로 바꾸시면 되겠습니다;

예제에서는 start.txt로 바꾸었습니다. 오류를 방지하기 위하여 알파벳 이름을 권장합니다;
그리고 .cfg파일을 지우고 실행하면 친숙한[...] 오류가 발생합니다.
그때는 모르는 척 하시지 마시고[...] scenario.txt파일을 지정한 start.txt파일로 바꾸시면 됩니다.

3. 텍스트 창 설정 및 스킨 변경하기.

<화려하거나 혹은 깔끔한 상용작품의 텍스트 창에 비하면 다소 투박한 VNAP의 기본 스킨.>

그동안 VNAP의 기본 텍스트 인터페이스에 많은 아쉬움을 가지고 계셨을 것입니다.
이미 변경은 가능했으나, 변경에 대한 언급이나 강좌는 많이 없었지요.
그 때문에 자세히 알아보도록 하겠습니다.

VNAP의 텍스트 창 구조는 포토샵의 레이어 개념과 동일하게 구성되어있습니다.
표지에 해당하는 공간인 텍스트 창이 가장 아래에 깔려있고, 그 위가 스킨, 가장 위가 텍스트입니다.
텍스트 창은 window ON 혹은 OFF로 보이기 / 숨기기를 하더라도 텍스트는 표시할 수 있는 이유가 위의 구조이기 때문이죠.

먼저 기본값으로 제공되는 텍스트 창은 아래와 같은 세부 속성이 합쳐져서 표현되어있습니다.

사실 현란하게 적혀있다고 보일뿐이지 실은 간단합니다(...정말이에요;;)

① 텍스트 창 색 설정

텍스트 창의 색을 지정해 줄수 있는 항목입니다.

TEXTWINDOWCOLOR1=(0,0,0)
TEXTWINDOWCOLOR2=(255,255,255)

라고 되어있는데요,

TEXTWINDOWCOLOR1 가 가장 위, TEXTWINDOWCOLOR2가 그 아래에 깔리도록 되어있습니다.
가로 안의 숫자는 RGB(Red / Green / Blue)값으로, 255가 최대치입니다.
RGB값이 모두 0이면 검은색을 의미합니다. 그래서 기본 텍스트 창의 색은 검정색이 되지요.
괄호 안의 숫자를 변경시키면 텍스트 창의 색이 변합니다.

TEXTWINDOWCOLOR2의 기본값은 (255,255,255). 즉 흰색이 되고, 검은 색과 흰색이 섞여서 최초의 모습이 되는 것이죠.
마찬가지로 값을 변경시켜보시면서 익히시길 바랍니다^^

② 텍스트 창 효과 설정

텍스트 창의 효과를 설정하는 부분입니다.
순서대로 대사창의 투명도 , 그라데이션 스타일, 테두리 스타일을 설정하는 것입니다.

예제에서는

TEXTWINDOWALPHA=2
TEXTWINDOWGRADATION=1
TEXTWINDOWOUTLINE=0

라고 되어있는데, 이에 대해 자세히 알아보도록 합시다.

1) TEXTWINDOWALPHA
대사창의 투명도를 조절하는 것으로 5단계에 걸쳐서 변경이 가능합니다.

0 = 0%
1 = 12.5%
2 = 25%
3 = 50%
4= 100%

의 단계값을 가지고 있으며, 실제로 변경되는 값에 따라 변화를 보면 아래와 같습니다.

숫자의 값이 올라갈수록 투명해짐을 알 수 있습니다.
(투명해지니 텍스트 창의 검정색이 진해지는 것이지요.)

그리고, 나중에 스킨을 적용하실때, 주셔야 할 값은 4. 즉 투명도 100%입니다.
그렇게 하셔야 스킨 파일의 색이 지정하신대로 나타납니다.

알아두셔야 할 점은 포토샵에서의 투명도는 불투명도(Opacity)로, 값이 높을수록 불투명합니다.
즉, 포토샵에서 투명 처리를 하실 때에는 값을 낮추어야 하는 것을 잊지 마시길 바랍니다 ^^;

2) TEXTWINDOWGRADATION
대사창의 그라데이션 스타일을 설정하며, 5단계로 이루어져 있습니다.
기본값은 1로, 세로 방향으로 TEXTWINDOWCOLOR1 과 TEXTWINDOWCOLOR2의 값이 그라데이션 처리되어
나타나며, 0으로 지정하면 투명도 100으로 고정되며, 텍스트 창은 색을 가지지 못합니다.

0 = 없음.
1 = 세로 방향
2 = 가로 방향
3 = 왼쪽 위 -> 오른쪽 아래 방향
4 = 왼쪽 아래 -> 오른쪽 위 방향

3) TEXTWINDOWOUTLINE
대사창의 테두리의 모양을 설정하며, 4단계로 이루어져 있습니다.

0 = 보통테두리
1 = 간이테두리
2 = 없음
3 = 자체스킨 사용

보통테두리는 기본값이며 볼록한 모양을 가지고 있고,
간이 테두리는 보통 테두리에 있던 입체 효과(볼록한 모양)이 사라지며,
없음은 테두리의 모양이 사라지고, 다른 설정에 의해 텍스트 창의 모양이 결정되며,
자체 스킨 사용시 그에 맞는 파일을 준비해야 합니다. 없을 시에는 아래 스샷과 같이 에러가 나지요;

4) TEXT_WINDOW_RECT
텍스트 창의 위치를 설정하는 부분입니다.

TEXT_WINDOW_RECT=(10,350,625,450)

괄호 안의 숫자는 기존의 버튼 좌표를 설정하는 것과 동일하게 (왼쪽,위쪽,오른쪽,아래쪽)순서입니다.
기본값인 640*480에서는 건드릴 필요가 없으나 해상도를 바꾸거나 특별한 모양의 스킨을 사용하고 싶을때 변경합니다.

주의할 점은 텍스트 창은 설정해둔 해상도 이상의 크기로 만들면 에러가 난다는 점입니다.

예를 들어 640*480의 해상도에서 텍스트 창은 615*440 아래의 크기로 만들어야 합니다.
(텍스트 창은 자동으로 간격을 설정하기 때문에 위와 같은 제한 범위가 있습니다.)
같은 원리로 800*600의 추천 크기는 778*560 아래입니다.

이 설정의 자세한 이용법은 아래에 더 자세히 서술하도록 하겠습니다.

⑤ TEXT_WINDOW_SKIN
TEXT_WINDOW_SKIN_POS

텍스트 스킨 파일의 파일 이름과 게임상에서 표현될 좌표를 설정하는 부분입니다.

TEXT_WINDOW_SKIN="skin.bmp"
TEXT_WINDOW_SKIN_POS=(0,348)

먼저, 스킨을 이용하기 위해서는 TEXTWINDOWOUTLINE를 3으로 지정하여 자체 스킨모드로 만들어야 합니다.
그 다음에는 스킨 파일을 제작하여 TEXT_WINDOW_SKIN에 파일 이름을 지정합니다.
스킨은 보통 하단 아래부분의 일부분에 적용되며, 대부분 투명한 색을 기본으로 하기 때문에 투명값을 지니는 PNG파일을 추천합니다.

스킨 제작디자인은 독자님들의 미적 센스에 맞기고(^^;;) 전 아래와 같은 형태의 스킨을 구현해보도록 하겠습니다.
많이 질문하시는 유형의 모양이고, 아래의 형태를 구현하는 것을 배우시면 응용으로 다른 것도 구현이 가능하시겠지요.

텍스트 창 왼쪽에 케릭터의 소형 화상이 나오고 그 오른쪽에 글이 나오는 형태를 가장 궁금해하시는 분들이 많더군요.
위와 같은 형태를 구현하기 위하여 저는 아래와 같은 구조로 만들기로 하였습니다.

먼저, VNAP의 해상도를 조절하여 크게 만듭니다.
(예제는 800*600입니다. 해상도 조절을 안해도 상관없습니다.)

다음, 텍스트 창의 가로 사이즈를 전체 해상도보다 줄입니다.
(남는 왼쪽 공간에 소형 화상 이미지를 배치하기 위해서입니다.)

다음, 텍스트 창의 시작 좌표를 오른쪽으로 이동합니다.

결과적으로 왼쪽은 캐릭터 CG와 같은 형태의 소형 이미지가 텍스트 창의 왼쪽에 위치하여,
위의 스크린샷과 동일한 패턴의 스킨을 완성하는 것이지요.

그럼 이와 같은 텍스트 창의 구성을 위해 단계별로 알아보도록 하겠습니다.

먼저 전체 윈도우 창의 해상도를 800*600으로 조절하였습니다.

그리고 vnap.ini파일의 설정 중에 반드시 아래와 같이 값을 조절합니다.

TEXTWINDOWALPHA=4 : 대사창의 투명도를 100%로 합니다.

TEXTWINDOWOUTLINE=3 : 테두리 사용 모드는 스킨 모드로 합니다.

그리고 스킨의 사이즈를 정해보았는데, 이 부분은 여러분의 재량에 맡기도록 하겠습니다.

예제에서는 왼쪽 하단에 나올 소형 이미지의 사이즈는 200*180 , 스킨 창의 사이즈는 600*180으로 하였습니다.
이때 스킨은, 텍스트가 잘 보일 정도로 불투명도를 조절하는 것이 중요합니다.
저는 60%를 주었습니다.

다음, 아래의 값을 이렇게 지정하였습니다.

TEXT_WINDOW_RECT=(210,422,789,579)
TEXT_WINDOW_SKIN="skin.png"
TEXT_WINDOW_SKIN_POS=(200,420)

그 이유는 스크린 샷을 보면서 설명드리지요.

일단 소형 이미지는 char 명령어에 좌표를 설정하여 나오게 할 것이기 때문에 scenario.txt에 0 420의 값을 줍니다.

텍스트는 소형 이미지가 나오는 부분을 피해서 나와야 하므로, 소형 이미지가 차지하는 x좌표와, 간격 10을 생각해서
x좌표는 210(200+10), y좌표는 422를 주었습니다.
(이는 스킨 파일의 형태에 따라 사이즈 조절에 따라 조금씩의 차이가 날 수 있습니다. 저의 경우는 예입니다.)

마지막의 값 789, 579는 에러 발생을 막기 위한 텍스트 창 좌표의 최대값입니다. (800*600기준)
따라서 텍스트 창의 스킨 좌표가 (210,422,789,579)로 나왔습니다.

텍스트 스킨은 그 크기가 게임의 해상도에 정확하게 맞추시면 됩니다.

따라서 가로 크기 총 800에서 소형 이미지의 가로 크기 200을 감안하여 x좌표는 200.
세로 크기 총 600에서 소형 이미지의 세로 크기 180을 감안하여 y좌표는 420이 됩니다.

자, 여기까지 따라오셨으면 예쁜 여러분만의 스킨을 적용하셨습니다!

4. 실행 아이콘과 커서, 대기 이미지(Caret) 변경하기.

VNAP 튜닝도 마지막의 단계에 왔습니다.
바로 실행 아이콘과 커서, 대기 이미지의 변경인데요,
아이콘 파일의 확장자는 .ico 커서 파일의 확장자는 .cur이며, 대기 이미지는 통상의 이미지 파일을 씁니다.

아이콘과 커서는 구하셔도 되고, 프로그램으로도 제작이 가능합니다.
저는 IconXP라는 프로그램을 사용해서 만들어보았습니다.
사용법이 매우 간단하니 아래의 그림을 참조해서 만드시거나, 원하는 이미지를 불러와서 커서 혹은 아이콘 파일로
저장만 하시면 되겠습니다. 커서는 다른이름으로 저장하실때 창이 하나 더 뜨는데 기본값으로 나두고 ok를 누릅니다.