스크린 언어 (6) 게임 화면 꾸미기

앞서도 얘기했듯, 렌파이의 모든 게임 화면은 스크린 언어로 만들어진 것입니다.
고로 각 메뉴나 게임 화면마다에는 스크린 이름이 정해져 있습니다. 따라서 같은 이름으로 스크린 블럭을 만들면 아얘 새로 만들 수 있습니다. 아니면 프로젝트/game 폴더 안에 있는 screens.rpy 파일을 이용해서 수정할 수도 있습니다.

게임 화면

게임 화면이란 게임의 일부로 쓰이는 화면을 가리킵니다.

say

대사창을 만드는 스크린입니다. 이 스크린은 Character()를 통해서 충분히 모양을 바꿔줄 수 있습니다. 그러니 스크립트를 잘 모르는채로 스크린 자체를 건드리는 것은 좋지 않습니다. 단축메뉴를 사용하지 않고 싶다면 블록 제일 밑의 use quick_menu 를 주석처리해버리시면 됩니다.

screen say:

# Defaults for side_image and two_window
    default side_image = None
    default two_window = False

# Decide if we want to use the one-window or two-window varaint.
    if not two_window:

# The one window variant.        
        window:
            id "window"

has vbox:
                style "say_vbox"

if who:
                text who id "who"

text what id "what"

else:

# The two window variant.
        vbox:
            style "say_two_window_vbox"

if who:            
                window:
                    style "say_who_window"

text who:
                        id "who"
                        
            window:
                id "window"

has vbox:
                    style "say_vbox"

text what id "what"
              
    # If there's a side image, display it above the text.
    if side_image:
        add side_image
    else:
        add SideImage() xalign 0.0 yalign 1.0

# Use the quick menu.
    use quick_menu

choice

선택지를 만드는 스크린입니다. for 문에 caption, action, chosen 은 각각 선택지문, 선택지를 클릭했을 때의 동작, 선택지를 이전에도 선택했는지의 여부를 가리킵니다. for 문에는 이 세가지가 꼭 필요하니 수정할 때 유의해야 합니다. for문 동작방식을 모르겠다면 역시 냅두고 스타일로 모양을 바꾸는 것이 안전합니다.

input

글자입력창을 만드는 스크린입니다. 한국어를 입력받을 때는 다른 스크린을 써야 하니 이 스크린이 바뀔 일은 없다고 생각하지만... 어쨌든 이 스크린에도 use quick_menu 스크립트가 있으니 단축메뉴를 없애려면 주석처리하면 되겠습니다.

nvl

비주얼노벨스타일, 그러니까 화면 전체를 덮는 대사창을 만드는 스크린입니다. 이 스크립트에는 대사와 선택지를 한 번에 관리하도록 적혀있는데, if items: 밑으로 적혀있는 블록이 선택지 관련 스크립트입니다. caption, action, chosen 은 위의 choice에서 설명한 것과 같습니다.
say 스크린처럼 이 화면도 Character()나 스타일로 충분히 관리할 수 있습니다.

메뉴 화면

메뉴화면이란 게임 흐름과는 상관 없는 화면을 가리킵니다.

main_menu

게임의 첫 화면, 시작 버튼 등이 붙어있는 화면을 만드는 스크린입니다. 여기서 textbutton _("Start Game") .... 이라고 적힌 이유는 이렇게 _("내용") 하고 적힌 글자를 config.translation 이라는 것으로 번역할 수 있기 때문입니다.

혹시 translations.rpy 파일을 이용하신다면 config.translations[u'Start Game'] 라고 적힌 내용을 보실 수 있습니다. 이렇게 할 수 있는 이유가 textbutton _("Start Game") 처럼 밑줄과 괄호로 싸여있기 때문입니다. 어쨌든..

main_menu 스크립트를 보시면 시작버튼/게임 불러오기/환경설정/도움말/종료 버튼 이렇게 다섯 개가 있는 것을 확인할 수 있습니다. 되도록이면 도움말 버튼을 뺀 나머지 네 개는 메인 메뉴에 있는 것이 좋습니다.

각 버튼의 action 속성을 보시면 Start(), ShowMenu("load"), ShowMenu("preferences"), Quit(confirm=False) 가 적혀있습니다. 각각 게임시작/불러오기 화면 띄우기/환경설정 화면 띄우기/종료(종료 확인창은 띄우지 않음) 동작을 수행하는 액션입니다.

버튼을 이미지버튼으로 만들던, 아님 이미지맵으로 만들던간에 저 네 액션은 따라서 적어주도록 합시다.

navigation

네비게이션이란 세이브/환경설정 등의 스크린으로 이동하는 데 필요한 메뉴입니다. navigation 은 그 메뉴를 만드는 스크린입니다. Return()은 도로 게임 화면으로 넘어가는 데 필요한 것이고, ShowMenu("save"), MainMenu() 는 각각 세이브 화면 띄우기 / 메인 메뉴로 돌아가기 액션입니다. 마찬가지로 모두 필요한 버튼이니 새로 만들더라도 같은 액션을 이용해서 만들어주는 게 좋습니다.

file_picker

세이브/로드 화면에서 파일을 선택하는 UI를 만드는 스크린입니다. 저장해야 할 때는 새로 파일을 만들고, 불러와야 할 때는 파일을 불러오는 기능을 합니다. 구색맞춰야 할 게 조금 있어서 수정하기 까다롭습니다.

일단 스크립트에서 hbox 블록 부분은 이미지에 표시해놓은 대로입니다. 각각 이전 세이브(로드) 파일 페이지/자동 세이브(로드) 파일 페이지/ 퀵세이브(로드) 파일 페이지/페이지 번호/다음 세이브(로드) 파일 페이지입니다.

그리고 grid 블록의 for문은 세이브 파일 버튼을 만드는 스크립트입니다. 표시한 스크립트가 1-10 까지의 세이브 파일 버튼을 만듭니다. 그림에서 표시한대로 FileScreenshot(i)는 세이브했을 때의 게임 화면을 추가한다는 얘기이고, description 변수는 각 세이브 파일에 번호를 매기고 이름을 달 때 쓰이는 변수입니다.

screen file_picker:

frame:
        style "file_picker_frame"

has vbox

# The buttons at the top allow the user to pick a
        # page of files.
        hbox:
            style_group "file_picker_nav"
            
            textbutton _("Previous"):
                action FilePagePrevious()

textbutton _("Auto"):
                action FilePage("auto")

textbutton _("Quick"):
                action FilePage("quick")

for i in range(1, 9):
                textbutton str(i):
                    action FilePage(i)
                    
            textbutton _("Next"):
                action FilePageNext()

$ columns = 2
        $ rows = 5
                
        # Display a grid of file slots.
        grid columns rows:
            transpose True
            xfill True
            style_group "file_picker"
            
            # Display ten file slots, numbered 1 - 10.
            for i in range(1, columns * rows + 1):

# Each file slot is a button.
                button:
                    action FileAction(i)
                    xfill True

has hbox

# Add the screenshot.
                    add FileScreenshot(i)
                    
                    # Format the description, and add it as text.
                    $ description = "% 2s. %s\n%s" % (
                        FileSlotName(i, columns * rows),
                        FileTime(i, empty=_("Empty Slot.")),
                        FileSaveName(i))

text description

key "save_delete" action FileDelete(i)

save / load

저장/불러오기 버튼을 눌렀을 때 보이는 화면을 만드는 스크린입니다. 스크립트에도 나와있듯 file_picker 를 사용합니다. 그러니 저장/불러오기 화면을 수정하려면 대개는 file_picker 의 스크립트를 수정해야 합니다.

preferences

환경 설정 화면을 만드는 스크린입니다. 여기 쓰인 액션들은 환경설정과 관련된 것으로 렌파이에서 기본으로 구현되어있습니다. 그러니 이 스크린을 뒤엎고 다시 만드려면 최소한 버튼 등의 액션은 환경설정 관련 액션을 적어야 하는 것입니다. 이와 관련한 내용은 매뉴얼에 적혀있습니다.

screen preferences:

tag menu

# Include the navigation.
    use navigation

# Put the navigation columns in a three-wide grid.
    grid 3 1:
        style_group "prefs"
        xfill True

# The left column.
        vbox:
            frame:
                style_group "pref"
                has vbox

label _("Display")
                textbutton _("Window") action Preference("display", "window")
                textbutton _("Fullscreen") action Preference("display", "fullscreen")