GUI 사용자 설정 안내

Ren'Py의 GUI 시스템은 기본 상태에서도 보기 좋은 인터페이스를 제공하고, 일부를 수정하거나 필요하면 완전히 교체할 수 있도록 설계되었습니다. 이 페이지에서는 간단한 수준과 중급 수준의 GUI 수정 방법을 설명합니다.

더 고급 수정은 스타일과 스타일 속성 목록, 스크린과 스크린 액션 및 특수 스크린 문서를 참조하세요.

gui.rpy 파일을 포함하는 새 방식의 Ren'Py GUI를 사용한다고 가정합니다. screens.rpy 파일을 사용하는 이전 GUI의 수정은 이 안내에서 고급 수정으로 취급합니다.

기본 GUI 설정

gui.rpy를 편집하지 않고도 할 수 있는 간단한 수정들이 있습니다. 아주 단순한 비주얼 노벨을 제외하면 대부분의 게임에 적합합니다. GUI를 어느 정도 바꾸지만 전체적인 모습은 크게 바꾸지 않습니다.

크기와 색상 변경하기

GUI에서 가장 쉽게 바꿀 수 있는 것은 크기와 색상입니다. Ren'Py가 프로젝트를 처음 만들 때 물어보지만 런처의 GUI 변경/갱신(Change/Update GUI)을 선택하여 나중에 바꿀 수도 있습니다.

런처에서 GUI를 바꾸면 Ren'Py가 런처만 바꿀지 gui.rpy도 갱신할지 묻습니다. 어느 쪽이든 대부분의 이미지 파일을 덮어쓰며, gui.rpy를 덮어쓰면 그 파일의 수정 사항이 사라집니다.

따라서 다른 수정을 시작하기 전에 하는 것이 좋습니다.

Ren'Py가 프로젝트의 기본 해상도와 색상 구성을 묻습니다. 선택하면 그에 맞추어 GUI를 갱신합니다.

Options.rpy

options.rpy에는 GUI가 사용하는 변수들이 있습니다.

config.name

사람이 읽을 수 있는 게임 이름 문자열입니다. 창 제목과 GUI에서 게임 제목이 필요한 모든 곳에 사용합니다.

gui.show_name

메인 메뉴에서 제목과 버전 번호를 숨기려면 False로 설정합니다. 예를 들어 제목이 메인 메뉴 이미지에 이미 들어 있을 때 사용합니다.

config.version

게임 버전 문자열입니다. 기본 GUI의 여러 곳에 표시되며 오류 메시지나 트레이스백 등에도 사용합니다.

gui.about

게임 정보 스크린에 추가할 텍스트입니다. 여러 문단의 크레딧을 쓰려면 \n\n으로 문단을 구분할 수 있습니다.

정의 예제는 다음과 같습니다.

define config.name = _('옛날 감성 고등학교')

define gui.show_name = True

define config.version = "1.0"

define gui.about = _("제작: PyTom.\n\n고등학교 배경: Mugenjohncel.")

gui.about을 삼중 따옴표 문자열로 정의하면 줄바꿈이 유지되므로 편리할 수 있습니다.

define gui.about = _("""\
제작: PyTom.

고등학교 배경: Mugenjohncel.""")

게임 화면과 메인 메뉴의 배경 이미지

GUI가 사용하는 이미지는 game/gui 디렉터리에 있습니다. 런처에서 디렉터리 열기: gui(Open Directory: gui)를 선택하여 열 수 있습니다. 관련 파일은 다음과 같습니다.

gui/main_menu.png

메인 메뉴의 모든 스크린에 사용할 배경 이미지 파일입니다.

gui/game_menu.png

게임 메뉴의 모든 스크린에 사용할 배경 이미지 파일입니다.

_images/easy_main_menu.jpg

gui/main_menu.png만 교체한 메인 메뉴.

_images/easy_game_menu.jpg

게임 정보 스크린은 gui/game_menu.png를 배경으로 사용하는 게임 메뉴나 gui/main_menu.png를 사용하는 메인 메뉴에 속할 수 있습니다. 둘 다 같은 이미지로 설정할 수 있습니다.

창 아이콘

창 아이콘은 실행 중인 애플리케이션이 Windows 작업 표시줄이나 Macintosh Dock 등에 표시하는 아이콘입니다.

gui/window_icon.png를 교체하여 바꿀 수 있습니다.

실행 중인 게임의 아이콘만 바뀝니다. Windows .exe 파일이나 Macintosh 애플리케이션의 아이콘을 바꾸려면 빌드 문서를 참조하세요.

중급 GUI 설정

다음은 중급 수준의 GUI 수정입니다. 게임에서 사용하는 색상, 글꼴, 이미지를 바꿀 수 있습니다. 일반적으로 버튼과 막대의 위치 등 스크린의 큰 틀은 유지하지만 새 기능을 추가하도록 스크린을 수정할 수도 있습니다.

gui.rpy의 변수를 편집하는 수정이 많습니다. 예를 들어 대사 글꼴 크기를 늘리려면 다음 줄을 찾아:

define gui.text_size = 22

다음과 같이 값을 늘리거나 줄입니다.

define gui.text_size = 20

기본값은 이 문서와 다른 경우가 많습니다. 게임의 크기와 색상 선택에 따라 달라질 수 있으며 이 문서의 값들은 GUI를 폭넓게 수정한 예제입니다. gui.rpy에서 define과 해당 변수, 예를 들어 define gui.text_size를 검색하는 것이 좋습니다.

아래 설정 중 일부는 이미지 파일에 부분적으로 또는 전적으로 영향을 줍니다. 따라서 이미지 파일 자체를 갱신해야 반영됩니다. 런처에서 GUI 변경(Change GUI)을 선택하고 이미지 파일을 다시 생성하도록 하면 됩니다. 이미 수정한 이미지 파일도 덮어쓴다는 점에 유의하세요.

이 방식으로 gui.rpy를 수정하는 작업은 게임이 거의 완성될 때까지 기다리는 것도 고려해 보세요. 이전 gui.rpy는 새 Ren'Py 버전에서도 동작하지만 새 gui.rpy에는 이전 버전에 없는 기능과 수정이 있을 수 있습니다. 일찍 수정하면 이런 개선을 활용하기 어려워질 수 있습니다.

대사

플레이어에게 대사가 표시되는 방식을 비교적 쉽게 바꿀 수 있습니다. 먼저 텍스트 상자부터 바꾸겠습니다.

gui/textbox.png

say 스크린의 일부로 표시되는 대사창 배경 파일입니다. 게임 너비 전체를 차지해야 하지만 텍스트는 좌우 20%씩을 남긴 중앙 60% 영역에만 표시합니다.

대사를 바꾸는 데 사용할 변수도 여러 개 있습니다.

define gui.text_color = "#402000"

대사 텍스트의 색상을 설정합니다.

define gui.text_font = "ArchitectsDaughter.ttf"

대사, 메뉴, 입력 및 기타 게임 내 텍스트의 글꼴을 설정합니다. 글꼴 파일은 game 디렉터리에 있어야 합니다.

define gui.text_size = 33

대사 텍스트의 크기를 설정합니다. 선택한 글꼴이 할당된 공간에 맞도록 늘리거나 줄여야 할 수 있습니다.

define gui.name_text_size = 45

캐릭터 이름의 크기를 설정합니다.

기본적으로 캐릭터 이름에는 강조 색상을 사용합니다. 캐릭터를 정의할 때 쉽게 바꿀 수 있습니다.

define e = Character("에일린", who_color="#104010")
_images/textbox.png

텍스트 상자 이미지 예제.

_images/easy_say_screen.jpg

위의 텍스트 상자 이미지와 변수 설정으로 꾸민 대사.

선택지 메뉴

choice 스크린은 menu 문이 플레이어에게 선택지를 표시할 때 사용합니다. 비교적 쉽게 수정할 수 있으며 먼저 다음 두 이미지 파일을 바꿀 수 있습니다.

gui/button/choice_idle_background.png

포커스가 없는 선택 버튼의 배경 이미지입니다.

gui/button/choice_hover_background.png

포커스가 있는 선택 버튼의 배경 이미지입니다.

기본적으로 텍스트는 이미지 중앙 75%에 배치합니다. 선택 버튼의 글자 색상을 제어하는 변수도 있습니다.

define gui.choice_button_text_idle_color = '#888888'

포커스가 없는 선택 버튼의 텍스트 색상입니다.

define gui.choice_button_text_hover_color = '#0066cc'

포커스가 있는 선택 버튼의 텍스트 색상입니다.

이미지 크기를 바꿀 필요가 없는 간단한 수정에는 이 정도면 충분합니다. 더 복잡한 수정은 아래의 버튼 절을 참조하세요.

_images/choice_idle_background.png

gui/button/idle_background.png 이미지 예제.

_images/choice_hover_background.png

gui/button/choice_hover_background.png 이미지 예제.

_images/easy_choice_screen.jpg

위 이미지와 변수 설정으로 꾸민 선택 스크린.

오버레이 이미지

오버레이 이미지도 있습니다. 배경을 어둡게 하거나 밝게 하여 버튼과 다른 인터페이스 요소가 잘 보이게 합니다. overlay 디렉터리에 있습니다.

gui/overlay/main_menu.png

메인 메뉴 스크린에서 사용하는 오버레이입니다.

gui/overlay/game_menu.png

불러오기, 저장, 환경설정, 게임 정보, 도움말 등 게임 메뉴 형태의 스크린에 사용하는 오버레이입니다. 각 스크린에서 선택하므로 메인 메뉴에서 해당 스크린을 열어도 사용합니다.

gui/overlay/confirm.png

확인 스크린에서 배경을 어둡게 하는 오버레이입니다.

다음은 오버레이 이미지 예제 두 개와 이를 추가한 게임의 모습입니다.

_images/main_menu.png

gui/overlay/main_menu.png 이미지 예제.

_images/game_menu.png

gui/overlay/game_menu.png 이미지 예제.

_images/overlay_main_menu.jpg

오버레이를 바꾼 메인 메뉴.

_images/overlay_game_menu.jpg

오버레이를 바꾼 게임 메뉴.

색상, 글꼴, 글자 크기

GUI 변수로 텍스트의 색상, 글꼴, 크기를 바꿀 수 있습니다.

일반적으로 웹 브라우저와 비슷한 "#rrggbb" 형식의 16진수 색상 코드 문자열을 지정합니다. 알파를 포함하려면 "#rrggbbaa"를 사용합니다. 예를 들어 "#663399"는 보라색의 한 색조입니다. 이 도구처럼 HTML 색상 코드를 만드는 온라인 도구가 많이 있습니다.

위의 gui.text_color, gui.choice_idle_color, gui.choice_hover_color 외에 다음 변수가 있습니다.

define gui.accent_color = '#000060'

강조 색상입니다. 제목과 레이블 등 GUI의 여러 곳에 사용합니다.

define gui.idle_color = '#606060'

대부분의 버튼에서 포커스나 선택 상태가 아닐 때 사용하는 색상입니다.

define gui.idle_small_color = '#404040'

저장 슬롯의 날짜와 이름, 빠른 메뉴 버튼 같은 작은 텍스트에 호버가 없을 때 사용하는 색상입니다. 작은 글꼴을 보완하기 위해 idle_color보다 약간 밝거나 어둡게 해야 하는 경우가 많습니다.

define gui.hover_color = '#3284d6'

버튼 텍스트나 슬라이더 및 스크롤바의 손잡이처럼 GUI에서 포커스된 항목의 색상입니다.

define gui.selected_color = '#555555'

선택된 버튼의 텍스트 색상입니다. 호버 및 기본 색상보다 우선합니다.

define gui.insensitive_color = '#8888887f'

입력을 받을 수 없는 버튼의 텍스트 색상입니다. 예를 들어 롤백할 수 없을 때의 롤백 버튼입니다.

define gui.interface_text_color = '#404040'

도움말과 게임 정보 스크린처럼 게임 인터페이스의 정적 텍스트 색상입니다.

define gui.muted_color = '#6080d0'
define gui.hover_muted_color = '#8080f0'

막대, 스크롤바, 슬라이더에서 값이나 보이는 영역을 나타내지 않는 부분에 사용하는 약한 색상입니다. 이미지 생성에만 사용하므로 런처에서 이미지를 다시 생성해야 반영됩니다.

gui.text_font 외에 다음 변수로 글꼴을 선택합니다. 이 글꼴들도 game 디렉터리에 두어야 합니다.

define gui.interface_text_font = "ArchitectsDaughter.ttf"

메인 메뉴, 게임 메뉴, 버튼 등 사용자 인터페이스 요소의 텍스트에 사용하는 글꼴입니다.

define gui.system_font = "DejaVuSans.ttf"

예외 메시지와 shift+A 접근성 메뉴 같은 시스템 텍스트의 글꼴입니다. ASCII와 게임의 번역 언어를 모두 표시할 수 있어야 합니다.

define gui.glyph_font = "DejaVuSans.ttf"

건너뛰기 표시의 화살표 같은 특정 글리프에 사용할 글꼴입니다. DejaVuSans가 적절한 기본값이며 모든 Ren'Py 게임에 자동으로 포함됩니다.

gui.text_size와 gui.name_text_size 외에 다음 변수로 텍스트 크기를 제어합니다.

define gui.interface_text_size = 36

게임 인터페이스의 정적 텍스트 크기와 버튼 텍스트의 기본 크기입니다.

define gui.label_text_size = 45

게임 인터페이스의 구역 레이블 크기입니다.

define gui.notify_text_size = 24

알림 텍스트의 크기입니다.

define gui.title_text_size = 75

게임 제목의 크기입니다.

_images/text.jpg

텍스트 색상, 글꼴, 크기를 바꾼 게임 메뉴.

테두리

버튼과 막대 등 여러 GUI 요소는 Border 객체로 설정한, 크기 조절 가능한 배경을 사용합니다. 버튼과 막대의 수정 방법에 앞서 작동 방식을 설명하겠습니다.

Frame() 디스플레이어블에 테두리 정보를 전달합니다. Frame은 이미지를 네 모서리, 네 변, 가운데의 아홉 부분으로 나눕니다. 모서리 크기는 유지하고 좌우 변은 세로로, 위아래 변은 가로로, 가운데는 양방향으로 늘립니다.

Borders 객체는 왼쪽, 위쪽, 오른쪽, 아래쪽 순서로 테두리 크기를 지정합니다. 다음 테두리 이미지에:

_images/borders.png

다음 테두리 값을 지정하면:

Borders(40, 40, 40, 40)

다음과 같은 결과가 나올 수 있습니다.

_images/borders1.png

자식 크기가 바뀌면 배경도 바뀝니다.

Border 객체에는 안쪽 여백도 지정할 수 있습니다. 음수 여백을 지정하면 자식이 테두리와 겹칩니다. 예를 들어 다음 테두리는:

Borders(40, 40, 40, 40, -20, -20, -20, -20)

자식이 양쪽 변과 겹치도록 합니다. 이 때문에 테두리가 차지하는 공간이 줄어 결과도 더 작아집니다.

_images/borders2.png

테두리를 늘리는 대신 반복 배치할 수도 있습니다. 변수로 설정하며 다음과 같은 결과를 만듭니다.

_images/borders3.png

작동 방식을 보여 주기 위한 예제 이미지는 다소 투박하지만 실제로는 보기 좋은 결과를 만들 수 있습니다. 인터페이스 요소를 담는 frame 창의 배경에 Frame 디스플레이어블을 사용하면 됩니다.

frame 창은 두 방법으로 꾸밀 수 있습니다. 첫째는 배경 이미지 파일을 바꾸는 것입니다.

gui/frame.png

frame 창의 배경 이미지입니다.

둘째는 변수를 수정하는 것입니다.

define gui.frame_borders = Borders(15, 15, 15, 15)

frame 창에 적용할 테두리입니다.

define gui.confirm_frame_borders = Borders(60, 60, 60, 60)

확인 스크린의 frame에 적용할 테두리입니다.

define gui.frame_tile = True

참이면 확인 스크린의 변과 가운데를 반복 배치하고, 거짓이면 늘립니다.

_images/frame.png

gui/frame.png 이미지 예제.

_images/frame_confirm.jpg

위 설정을 적용한 확인 스크린.

버튼

Ren'Py 인터페이스에는 크기와 용도가 다양한 버튼이 많이 있습니다. 종류는 다음과 같습니다.

button

기본 버튼입니다. 인터페이스 내 탐색에 사용합니다.

choice_button

게임 내 메뉴의 선택지 버튼입니다.

quick_button

게임 중 표시되며 게임 메뉴에 빠르게 접근하는 버튼입니다.

navigation_button

메인 메뉴와 게임 메뉴에서 스크린을 이동하거나 게임을 시작하는 버튼입니다.

page_button

불러오기와 저장 스크린에서 페이지를 바꾸는 버튼입니다.

slot_button

파일 슬롯을 나타내며 썸네일, 저장 시간, 선택적인 저장 이름을 담는 버튼입니다. 아래에서 자세히 설명합니다.

radio_button

환경설정 스크린에서 여러 항목 중 하나를 선택하는 버튼입니다.

check_button

환경설정 스크린에서 설정을 켜고 끄는 버튼입니다.

test_button

환경설정 스크린에서 오디오 재생을 시험하는 버튼입니다. 가로 슬라이더와 높이가 같아야 합니다.

help_button

플레이어가 원하는 도움말 종류를 선택하는 버튼입니다.

confirm_button

확인 스크린에서 예나 아니요를 선택하는 버튼입니다.

nvl_button

NVL 모드 메뉴의 선택지 버튼입니다.

다음 이미지 파일이 있으면 버튼 배경을 꾸미는 데 사용합니다.

gui/button/idle_background.png

포커스가 없는 버튼의 배경 이미지입니다.

gui/button/hover_background.png

포커스가 있는 버튼의 배경 이미지입니다.

gui/button/selected_idle_background.png

선택되었지만 포커스가 없는 버튼의 배경 이미지입니다. 선택 사항이며 있으면 idle_background.png보다 우선 사용합니다.

gui/button/selected_hover_background.png

선택되었지만 포커스가 없는 버튼의 배경 이미지입니다. 선택 사항이며 있으면 hover_background.png보다 우선 사용합니다.

종류를 접두사로 붙여 버튼 종류별 배경을 지정할 수 있습니다. 예를 들어 gui/button/check_idle_background.png는 포커스가 없는 체크 버튼의 배경입니다.

라디오 및 체크 버튼에는 선택 여부를 나타내는 전경 장식으로 네 이미지 파일을 사용합니다.

gui/button/check_foreground.png, gui/button/radio_foreground.png

선택되지 않은 체크 또는 라디오 버튼에 사용하는 이미지입니다.

gui/button/check_selected_foreground.png, gui/button/radio_selected_foreground.png

선택된 체크 또는 라디오 버튼에 사용하는 이미지입니다.

다음 변수로 버튼의 여러 속성을 설정합니다.

define gui.button_width = None
define gui.button_height = 64

버튼 너비와 높이로, 픽셀 단위입니다. None이면 내부 텍스트 크기와 아래의 테두리 설정으로 자동 결정합니다.

define gui.button_borders = Borders(10, 10, 10, 10)

버튼 주위의 테두리로, 왼쪽, 위쪽, 오른쪽, 아래쪽 순서입니다.

define gui.button_tile = True

참이면 버튼 배경의 변과 가운데를 반복 배치하여 크기를 늘리거나 줄입니다. 거짓이면 늘리거나 압축합니다.

define gui.button_text_font = gui.interface_font
define gui.button_text_size = gui.interface_text_size

버튼 텍스트의 글꼴과 크기입니다.

define gui.button_text_idle_color = gui.idle_color
define gui.button_text_hover_color = gui.hover_color
define gui.button_text_selected_color = gui.accent_color
define gui.button_text_insensitive_color = gui.insensitive_color

각 상태의 버튼 텍스트 색상입니다.

define gui.button_text_xalign = 0.0

버튼 텍스트의 가로 정렬입니다. 0.0은 왼쪽, 0.5는 가운데, 1.0은 오른쪽 정렬입니다.

define gui.button_image_extension = ".png"

버튼 이미지의 확장자입니다. .webp로 바꾸면 png 대신 WEBP 이미지를 사용할 수 있습니다.

변수 앞에 버튼 종류를 붙여 특정 종류의 속성을 설정할 수 있습니다. 예를 들어 gui.choice_button_text_idle_color는 기본 상태의 선택 버튼 색상을 설정합니다.

예제 게임에서는 다음 변수를 수정합니다.

define gui.navigation_button_width = 290

탐색 버튼의 너비를 늘립니다.

define gui.radio_button_borders = Borders(40, 10, 10, 10)
define gui.check_button_borders = Borders(40, 10, 10, 10)

라디오와 체크 버튼의 테두리 너비를 늘려 왼쪽에 체크 표시 공간을 확보합니다.

다음은 플레이 화면을 꾸미는 예제입니다.

_images/idle_background.png

gui/button/idle_background.png 이미지 예제.

_images/hover_background.png

gui/button/hover_background.png 이미지 예제.

_images/check_foreground.png

gui/button/check_foreground.png 및 gui/button/radio_foreground.png로 사용할 이미지.

_images/check_selected_foreground.png

gui/button/check_selected_foreground.png 및 gui/button/radio_selected_foreground.png로 사용할 이미지.

_images/button_preferences.jpg

이 절의 설정을 적용한 환경설정 스크린.

저장 슬롯 버튼

불러오기와 저장 스크린은 썸네일과 저장 시점 정보를 표시하는 슬롯 버튼을 사용합니다. 다음 변수들은 저장 슬롯 크기를 바꿀 때 유용합니다.

define gui.slot_button_width = 414
define gui.slot_button_height = 309

저장 슬롯 버튼의 너비와 높이입니다.

define gui.slot_button_borders = Borders(15, 15, 15, 15)

각 저장 슬롯에 적용할 테두리입니다.

config.thumbnail_width = 384와 config.thumbnail_height = 216은 저장 썸네일의 너비와 높이를 설정합니다. gui가 아닌 config 네임스페이스에 있다는 점에 유의하세요. 파일을 저장하고 불러온 뒤에 반영됩니다.

define gui.file_slot_cols = 3
define gui.file_slot_rows = 2

저장 슬롯 격자의 열 수와 행 수입니다.

저장 슬롯에는 다음 배경 이미지를 사용합니다.

gui/button/slot_idle_background.png

포커스가 없는 저장 슬롯의 배경 이미지입니다.

gui/button/slot_hover_background.png

포커스가 있는 저장 슬롯의 배경 이미지입니다.

적용하면 다음과 같습니다.

_images/slot_idle_background.png

gui/button/slot_idle_background.png 이미지 예제.

_images/slot_hover_background.png

gui/button/slot/slot_hover_background.png 이미지 예제.

_images/slot_save.jpg

이 절의 설정을 적용한 저장 스크린.

슬라이더

슬라이더는 환경설정 스크린에서 플레이어가 넓은 범위의 값을 조절할 수 있게 하는 막대입니다. 기본 GUI는 가로 슬라이더만 사용하지만 게임에서 세로 슬라이더도 사용할 수 있습니다.

다음 이미지로 슬라이더를 꾸밉니다.

gui/slider/horizontal_idle_bar.png, gui/slider/horizontal_hover_bar.png, gui/slider/vertical_idle_bar.png, gui/slider/vertical_hover_bar.png

기본 및 호버 상태에서 세로 막대와 기본 막대의 배경으로 사용하는 이미지입니다.

gui/slider/horizontal_idle_thumb.png, gui/slider/horizontal_hover_thumb.png, gui/slider/vertical_idle_thumb.png, gui/slider/vertical_hover_thumb.png

막대의 움직이는 부분인 손잡이 이미지입니다.

다음 변수도 사용합니다.

define gui.slider_size = 64

가로 슬라이더의 높이와 세로 슬라이더의 너비입니다.

define gui.slider_tile = True

참이면 슬라이더 막대를 담는 frame을 반복 배치하고, False이면 늘립니다.

define gui.slider_borders = Borders(6, 6, 6, 6)
define gui.vslider_borders = Borders(6, 6, 6, 6)

막대 이미지를 담는 Frame에 사용할 테두리입니다.

가로 슬라이더를 꾸미는 예제입니다.

_images/horizontal_idle_bar.png

gui/slider/horizontal_idle_bar.png 이미지 예제.

_images/horizontal_hover_bar.png

gui/slider/horizontal_hover_bar.png 이미지 예제.

_images/horizontal_idle_thumb.png

gui/slider/horizontal_idle_thumb.png 이미지 예제.

_images/horizontal_hover_thumb.png

gui/slider/horizontal_hover_thumb.png 이미지 예제.

_images/slider_preferences.jpg

이 절의 설정을 적용한 환경설정 스크린.

스크롤바

스크롤바는 뷰포트를 스크롤하는 막대입니다. GUI에서는 대사 기록 스크린이 대표적인 사용처이지만 다른 스크린에서도 세로 스크롤바를 사용할 수 있습니다.

다음 이미지로 스크롤바를 꾸밉니다.

gui/scrollbar/horizontal_idle_bar.png, gui/scrollbar/horizontal_hover_bar.png, gui/scrollbar/vertical_idle_bar.png, gui/scrollbar/vertical_hover_bar.png

기본 및 호버 상태에서 세로 막대와 기본 막대의 배경으로 사용하는 이미지입니다.

gui/scrollbar/horizontal_idle_thumb.png, gui/scrollbar/horizontal_hover_thumb.png, gui/scrollbar/vertical_idle_thumb.png, gui/scrollbar/vertical_hover_thumb.png

막대의 움직이는 부분인 손잡이 이미지입니다.

다음 변수도 사용합니다.

define gui.scrollbar_size = 24

가로 스크롤바의 높이와 세로 스크롤바의 너비입니다.

define gui.scrollbar_tile = True

참이면 스크롤바 막대를 담는 frame을 반복 배치하고, False이면 늘립니다.

define gui.scrollbar_borders = Borders(10, 6, 10, 6)
define gui.vscrollbar_borders = Borders(6, 10, 6, 10)

막대 이미지를 담는 Frame에 사용할 테두리입니다.

define gui.unscrollable = "hide"

스크롤할 수 없을 때의 동작을 제어합니다. "hide"이면 막대를 숨기고 None이면 계속 표시합니다.

세로 스크롤바를 꾸미는 예제입니다.

_images/vertical_idle_bar.png

gui/scrollbar/vertical_idle_bar.png 이미지 예제.

_images/vertical_hover_bar.png

gui/scrollbar/vertical_hover_bar.png 이미지 예제.

_images/vertical_idle_thumb.png

gui/scrollbar/vertical_idle_thumb.png 이미지 예제.

_images/vertical_hover_thumb.png

gui/scrollbar/vertical_hover_thumb.png 이미지 예제.

_images/scrollbar_history.jpg

이 절의 설정을 적용한 대사 기록 스크린.

바

일반 막대는 플레이어에게 숫자를 표시하는 데 사용합니다. GUI 자체에서는 사용하지 않지만 제작자가 정의한 스크린에서 사용할 수 있습니다.

다음 이미지를 편집하여 막대를 꾸밀 수 있습니다.

gui/bar/left.png, gui/bar/bottom.png

가로 및 세로 막대의 채워진 부분에 사용하는 이미지입니다.

gui/bar/right.png, gui/bar/top.png

가로 및 세로 막대의 채워진 부분에 사용하는 이미지입니다.

일반적인 막대 제어 변수도 있습니다.

define gui.bar_size = 64

가로 막대의 높이와 세로 막대의 너비입니다.

define gui.bar_tile = False

참이면 막대 이미지를 반복 배치하고 거짓이면 선형으로 늘립니다.

define gui.bar_borders = Borders(10, 10, 10, 10)
define gui.vbar_borders = Borders(10, 10, 10, 10)

막대 이미지를 담는 Frame에 사용할 테두리입니다.

가로 막대를 꾸미는 예제입니다.

_images/left.png

gui/bar/left.png 이미지 예제.

_images/right.png

gui/bar/right.png 이미지 예제.

_images/bar.jpg

막대를 보여 주기 위해 정의한 예제 스크린.

건너뛰기와 알림

skip과 notify 스크린은 메시지가 담긴 frame을 표시합니다. 둘 다 별도의 frame 배경 이미지를 사용합니다.

gui/skip.png

건너뛰기 표시기의 배경입니다.

gui/notify.png

알림 스크린의 배경입니다.

다음 변수로 제어합니다.

define gui.skip_frame_borders = Borders(24, 8, 75, 8)

skip 스크린이 사용하는 frame의 테두리입니다.

define gui.notify_frame_borders = Borders(24, 8, 60, 8)

notify 스크린이 사용하는 frame의 테두리입니다.

define gui.skip_ypos = 15

창 위쪽에서 건너뛰기 표시기까지의 세로 위치로, 픽셀 단위입니다.

define gui.notify_ypos = 68

창 위쪽에서 알림 메시지까지의 세로 위치로, 픽셀 단위입니다.

건너뛰기와 알림 스크린을 꾸미는 예제입니다.

_images/skip.png

gui/skip.png 이미지 예제.

_images/notify.png

gui/notify.png 이미지 예제.

_images/skip_notify.jpg

작동 중인 건너뛰기와 알림 스크린.

대사 설정 더 살펴보기

위의 간단한 수정 외에도 플레이어에게 대사를 표시하는 방식을 여러 방법으로 제어할 수 있습니다.

텍스트 상자

텍스트 상자 또는 대사창은 대사를 표시하는 창입니다. gui/textbox.png 변경 외에 다음 변수로 표시 방식을 제어합니다.

define gui.textbox_height = 278

대사창의 높이입니다. gui/ textbox.png의 높이도 이 값과 같아야 합니다.

define gui.textbox_yalign = 1.0

화면에서 대사창의 세로 위치입니다. 0.0은 위쪽, 0.5는 가운데, 1.0은 아래쪽입니다.

이름과 이름 상자

캐릭터 이름은 gui/namebox.png를 배경으로 사용하는 frame 안에 배치됩니다. 이름 표시를 제어하는 변수도 여러 개 있습니다. 말하는 캐릭터에 이름이 있을 때만 이름 상자가 표시됩니다. " "처럼 빈 이름도 해당합니다.

define gui.name_xpos = 360
define gui.name_ypos = 0

이름과 이름 상자의 가로 및 세로 위치입니다. 보통 대사창 왼쪽이나 위쪽에서부터의 픽셀 수입니다. 0.5로 설정하면 이름이 대사창 가운데에 옵니다(아래 참조). 음수도 가능하며, 예를 들어 gui.name_ypos를 -22로 설정하면 대사창 위쪽보다 22픽셀 위에 배치합니다.

define gui.name_xalign = 0.0

캐릭터 이름의 가로 정렬입니다. 0.0은 왼쪽, 0.5는 가운데, 1.0은 오른쪽이며 거의 항상 0.0이나 0.5를 사용합니다. gui.name_xpos를 기준으로 한 이름 상자의 위치와, xpos에 맞출 이름 상자의 변을 모두 결정합니다.

define gui.namebox_width = None
define gui.namebox_height = None
define gui.namebox_borders = Borders(5, 5, 5, 5)
define gui.namebox_tile = False

이름 상자를 담는 frame의 표시를 제어하는 변수입니다.

대사

define gui.dialogue_xpos = 402
define gui.dialogue_ypos = 75

실제 대사의 가로 및 세로 위치입니다. 보통 대사창 왼쪽이나 위쪽에서부터의 픽셀 수입니다. 0.5로 설정하면 대사가 대사창 가운데에 옵니다(아래 참조).

define gui.dialogue_width = 1116

대사 한 줄의 최대 너비로, 픽셀 단위입니다. 이 너비에 도달하면 Ren'Py가 줄을 바꿉니다.

define gui.dialogue_text_xalign = 0.0

대사 텍스트의 가로 정렬입니다. 0.0은 왼쪽, 0.5는 가운데, 1.0은 오른쪽입니다.

예제

캐릭터 이름을 가운데에 놓으려면 다음을 사용합니다.

define gui.name_xpos = 0.5
define gui.name_xalign = 0.5

대사 텍스트를 가운데에 놓으려면 다음을 사용합니다.

define gui.dialogue_xpos = 0.5
define gui.dialogue_text_xalign = 0.5

예제 게임에서는 다음 문으로 가운데 정렬된 이름 상자를 꾸밉니다.

define gui.namebox_width = 300
define gui.name_ypos = -22
define gui.namebox_borders = Borders(15, 7, 15, 7)
define gui.namebox_tile = True
_images/namebox.png

gui/namebox.png 이미지 예제.

_images/intermediate_dialogue.jpg

위 설정으로 꾸민 예제 게임.

대사 기록

대사 기록 스크린 표시를 제어하는 변수들이 있습니다.

config.history_length는 Ren'Py가 기록에 유지할 대사 블록 수를 설정합니다. 기본값은 250입니다.

define gui.history_height = 210

기록 항목의 높이로, 픽셀 단위입니다. None이면 가변 높이를 사용할 수 있지만 성능 비용이 있습니다. 이 경우 config.history_length를 크게 줄여야 할 수 있습니다.

define gui.history_spacing = 0

기록 항목 사이의 간격으로, 픽셀 단위입니다.

define gui.history_name_xpos = 0.5
define gui.history_text_xpos = 0.5

이름 레이블과 대사 텍스트의 가로 위치입니다. 항목 왼쪽부터의 픽셀 수이거나 가운데를 뜻하는 0.5일 수 있습니다.

define gui.history_name_ypos = 0
define gui.history_text_ypos = 60

기록 항목 위쪽을 기준으로 한 이름 레이블과 대사 텍스트의 세로 위치로, 픽셀 단위입니다.

define gui.history_name_width = 225
define gui.history_text_width = 1110

이름 레이블과 대사 텍스트의 너비로, 픽셀 단위입니다.

define gui.history_name_xalign = 0.5
define gui.history_text_xalign = 0.5

텍스트 정렬과 xpos에 맞출 텍스트의 변을 제어합니다. 0.0은 왼쪽, 0.5는 가운데, 1.0은 오른쪽 정렬입니다.

_images/history.png

위 설정으로 꾸민 대사 기록 스크린.

NVL

nvl 스크린은 NVL 모드 대사를 표시하며 여러 방법으로 꾸밀 수 있습니다. 먼저 NVL 모드 배경 이미지를 바꿀 수 있습니다.

gui/nvl.png

NVL 모드의 배경 이미지입니다. 게임 창과 크기가 같아야 합니다.

NVL 모드 텍스트 표시를 제어하는 변수도 여러 개 있습니다.

define gui.nvl_borders = Borders(0, 15, 0, 30)

NVL 모드 배경 주위의 테두리입니다. 배경이 frame이 아니므로 화면 가장자리에 붙지 않도록 여백을 확보하는 데만 사용합니다.

define gui.nvl_height = 173

NVL 모드 항목 하나의 높이입니다. 고정 높이를 지정하면 페이지를 나누지 않고 일정한 수의 항목을 한꺼번에 표시할 수 있습니다. None이면 항목 크기를 가변적으로 설정합니다.

define gui.nvl_spacing = 15

gui.nvl_height가 None일 때의 항목 간격 및 NVL 모드 메뉴 버튼 간격입니다.

define gui.nvl_name_xpos = 0.5
define gui.nvl_text_xpos = 0.5
define gui.nvl_thought_xpos = 0.5

항목 왼쪽을 기준으로 한 캐릭터 이름, 대사, 생각/서술 텍스트의 위치입니다. 픽셀 수 또는 항목 가운데를 뜻하는 0.5입니다.

define gui.nvl_name_xalign = 0.5
define gui.nvl_text_xalign = 0.5
define gui.nvl_thought_xalign = 0.5

텍스트 정렬입니다. 텍스트 자체의 정렬과 xpos에 배치할 변을 모두 제어합니다. 0.0은 왼쪽, 0.5는 가운데, 1.0은 오른쪽입니다.

define gui.nvl_name_ypos = 0
define gui.nvl_text_ypos = 60
define gui.nvl_thought_ypos = 0

항목 위쪽을 기준으로 한 캐릭터 이름, 대사, 생각/서술 텍스트의 위치입니다. 위쪽부터의 픽셀 수여야 합니다.

define gui.nvl_name_width = 740
define gui.nvl_text_width = 740
define gui.nvl_thought_width = 740

각 텍스트의 너비로, 픽셀 단위입니다.

define gui.nvl_button_xpos = 0.5
define gui.nvl_button_xalign = 0.5

NVL 모드 메뉴 버튼의 위치와 정렬입니다.

Ren'Py는 기본적으로 NVL 모드를 사용하지 않습니다. NVL 모드 캐릭터를 사용하고 script.rpy에서 몇 가지 변수를 정의하여 활성화해야 합니다.

define e = Character("에일린", kind=nvl)
define narrator = nvl_narrator
define menu = nvl_menu

위 설정으로 꾸민 NVL 스크린 예제입니다.

_images/nvl.png

gui/nvl.png 이미지 예제.

_images/nvl.jpg

위 설정으로 꾸민 예제 게임.

텍스트

대부분의 텍스트는 GUI 변수로 꾸밀 수 있습니다. 변수 형식은 다음과 같습니다.

define gui.kind_text_font

있으면 텍스트에 사용할 글꼴입니다.

define gui.kind_text_size

있으면 텍스트 크기입니다.

define gui.kind_text_color

있으면 텍스트 색상입니다.

다른 텍스트 스타일 속성도 같은 방식으로 설정할 수 있습니다. 예를 들어 gui.kind_text_outlines는 outlines 속성을 설정합니다.

kind 접두사는 생략할 수 있으며, 이 경우 텍스트의 기본 모양을 바꿉니다. 지정할 때는 위의 버튼 종류나 다음 중 하나를 사용할 수 있습니다.

interface

게임 밖 인터페이스의 기본 텍스트입니다.

input

텍스트 입력 위젯의 텍스트입니다.

input_prompt

텍스트 입력의 안내문 부분입니다.

label

장식용 레이블입니다.

prompt

플레이어에게 질문하는 확인 안내문입니다.

name

캐릭터 이름입니다.

dialogue

대사입니다.

notify

알림 텍스트입니다.

예를 들어:

define gui.dialogue_text_outlines = [ (0, "#00000080", 2, 2) ]

대사 텍스트의 오른쪽 아래에 그림자를 추가합니다.

번역과 GUI 변수

gui 네임스페이스는 초기화 단계 후, 모든 translate python 블록 실행 전에 저장된다는 점에서 특별합니다. 따라서 translate python 블록에서 모든 GUI 변수를 바꾸어 다른 언어에 맞출 수 있습니다. 예를 들어 다음 코드는 기본 텍스트 글꼴과 크기를 바꿉니다.

translate japanese python:
    gui.text_font = "MTLc3m.ttf"
    gui.text_size = 24

번역자가 알아야 할 점이 하나 있습니다. gui.rpy의 일부에서는 변수에 다른 변수의 값을 할당합니다. 예를 들어 기본 gui.rpy에는 다음이 있고:

define gui.interface_text_font = "DejaVuSans.ttf"

뒤에는 다음이 있습니다.

define gui.button_text_font = gui.interface_text_font

두 문 모두 translate 블록보다 먼저 실행되므로 두 변수를 모두 바꾸어야 합니다.

translate japanese python::

    define gui.interface_text_font = "MTLc3m.ttf"
    define gui.button_text_font = "MTLc3m.ttf"

두 번째 문이 없으면 DejaVuSans를 계속 사용합니다.

고급 설정

screens.rpy를 수정하면 더 고급 수준으로 바꿀 수 있으며, 파일 전체를 지우고 직접 만든 내용으로 대체할 수도 있습니다. 다음 항목부터 시작해 보세요.

스타일

스타일과 스타일 속성은 디스플레이어블의 표시 방식을 제어합니다. 사용하는 스타일을 알아보려면 마우스를 올리고 Shift+I를 누릅니다. 스타일 검사기가 열려 이름을 보여 줍니다. 이름을 확인한 뒤 style 문으로 수정할 수 있습니다.

예를 들어 GUI 문서를 쓰다 문득 대사에 선명한 빨간 외곽선을 넣고 싶어졌다고 합시다. 텍스트 위에서 Shift+I를 누르면 스타일 이름이 say_dialogue임을 알 수 있습니다. 그런 다음 screens.rpy 끝이나 options.rpy에 다음 style 문을 추가합니다.

style say_dialogue:
    outlines [ (1, "#f00", 0, 0 ) ]

style 문으로 매우 다양한 수정을 할 수 있습니다.

스크린: 내비게이션

다음 단계는 스크린 수정입니다. 주요 문서는 스크린과 스크린 언어 및 스크린 액션, 값, 함수 절에 있습니다.

navigation 스크린은 메인 메뉴이자 게임 메뉴의 탐색 기능을 제공하는 중요한 스크린입니다. 수정하여 한쪽 또는 양쪽 메뉴에 버튼을 추가할 수 있습니다. 예를 들어 다음과 같이 바꾸면:

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            textbutton _("시작") action Start()

            textbutton _("프롤로그") action Start("prologue")

        else:

            textbutton _("용어 사전") action ShowMenu("codex")

            textbutton _("대사 기록") action ShowMenu("history")

            textbutton _("저장") action ShowMenu("save")

        textbutton _("불러오기") action ShowMenu("load")

        textbutton _("환경 설정") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("다시 보기 종료") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("메인 메뉴") action MainMenu()

        textbutton _("정보") action ShowMenu("about")

        textbutton _("추가 콘텐츠") action ShowMenu("extras")

        if renpy.variant("pc"):

            textbutton _("도움말") action ShowMenu("help")

            textbutton _("종료") action Quit(confirm=not main_menu)

메인 메뉴에 프롤로그, 게임 메뉴에 도감, 양쪽 메뉴에 추가 콘텐츠 스크린으로 이동하는 항목을 추가합니다.

스크린: 게임 메뉴

사용자 정의 게임 메뉴 스크린도 만들 수 있습니다. game_menu 스크린을 사용하여 제목과 스크롤 가능한 뷰포트를 제공할 수 있습니다. 최소 예제는 다음과 같습니다.

screen codex():

    tag menu

    use game_menu(_("용어 사전"), scroll="viewport"):

        style_prefix "codex"

        has vbox:
            spacing 20

        text _("{b}기계공학:{/b} 미사일이나 폭탄 같은 것을 만드는 법을 배우는 학문입니다.")

        text _("{b}토목공학:{/b} 표적을 만드는 법을 배우는 학문입니다.")

실제로 작동하는 도감은 이보다 더 상세하게 구현해야 합니다.

"tag menu" 줄에 유의하세요. 도감을 표시할 때 다른 메뉴 스크린을 숨기는 중요한 줄입니다. 없으면 다른 메뉴 스크린으로 이동하거나 돌아오기 어려워집니다.

스크린: 클릭하여 진행

자주 추가하게 될 스크린 중 하나는 클릭하여 계속 스크린입니다. 텍스트 표시가 끝나면 나타납니다. 간단한 예제는 다음과 같습니다.

screen ctc(arg=None):

    frame:
        at ctc_appear
        xalign .99
        yalign .99

        text _("(클릭하여 계속)"):
            size 18

transform ctc_appear:
    alpha 0.0
    pause 5.0
    linear 0.5 alpha 1.0

이 ctc 스크린은 트랜스폼으로 5초 뒤 frame을 표시합니다. Ren'Py가 이미지를 예측하고 로드할 시간을 갖도록 CTC 애니메이션은 몇 초 늦게 시작하는 것이 좋습니다.

GUI 전체 교체하기

고급 사용자는 screens.rpy의 일부나 전부를 완전히 대체할 수 있습니다. 이 경우 gui.rpy의 일부 또는 전체가 불필요해질 수 있습니다. gui.init()으로 스타일을 초기화하는 것이 좋지만 그 뒤에는 원하는 대로 구성할 수 있습니다. 플레이어가 Ren'Py의 모든 기능에 접근할 수 있도록 특수 스크린의 일부나 전부를 포함하는 것이 일반적으로 좋습니다.

함께 보기

GUI에 대한 자세한 내용은 고급 GUI 절을 참조하세요.

호환성에 영향을 주는 GUI 변경 사항

GUI가 변경되면서 일부 변수 이름도 바뀌는 경우가 있습니다. 이 변경은 GUI를 다시 생성한 뒤에만 적용됩니다. 그때까지는 새 Ren'Py에서도 이전 변수 이름을 계속 사용합니다.

6.99.12.3

  • gui.default_font -> gui.text_font

  • gui.name_font -> gui.name_text_font

  • gui.interface_font -> gui.interface_text_font

  • gui.text_xpos -> gui.dialogue_xpos

  • gui.text_ypos -> gui.dialogue_ypos

  • gui.text_width -> gui.dialogue_width

  • gui.text_xalign -> gui.dialogue_text_xalign