아날로그 어 헤이트 스토리 따라하기 - 6 세이브/로드

목표

오른편에 있는 세이브 로드 화면을 따라 만들어봤습니다.

스크립트

screens.rpy

screen main_menu: #..... # 로드 스크린을 부르는 대신 환경설정 스크린을 불러오도록 바꿈 textbutton "이어서 하기" action ShowMenu("preferences") xpos 380 ypos 415 # 세이브/로드 버튼을 만드는 스크린 screen file_picker: window: # 이 스크린에서 사용하는 모든 gui의 스타일 이름을 # filepicker로 만듬 style_group "filepicker" has vbox # 레이블은 환경설정 때와 마찬가지로.. label '{color=#fff}저장 파일{/color}' xpadding 20 ypadding 5 background 'header' frame: has vbox $ columns = 2 # 세로줄 개수 $ rows = 4 #가로줄개수 # 세이브/로드 버튼 그리드 grid columns rows: transpose True # 세이브 버튼 4개 for i in range(1, rows + 1): button: #버튼 크기 xminimum 310 yminimum 65 ypadding 10 # 게임 세이브 기능을 하도록 # 세이브 안 되는 상황에선 저절로 세이브가 안됩니다 action FileSave(i) #버튼 안에 hbox를 만들어서.. has hbox # 게임 세이브 지점이 어디인지 알려주는 # 스샷을 먼저 입력해놓.. #는데 원작에서는 현재 ai가 뮤트냐 현애냐에 따라 # 이 그림이 해당 ai의 이미지가 됩니다. # 그건 지난번처럼 conditionswitch 를 매겨서 # 이미지 이름 적으면 되는데 그림 따기가 귀찮아서; # 원래대로 파일 스샷 붙여넣어씁니다.. add FileScreenshot(i) # 세이브 설명글입니다. 세이브 시간, 세이브 이름.. # 세이브 이름은 본편에서는 문서 개봉 퍼센테이지를 설정하지만 # 마찬가지로 패스; 합니다. # 이 파일 세이브 네임을 관리하는 변수의 이름은 # save_name 입니다. $ description = "%s\n%s" % ( FileTime(i, empty="빈 슬롯"), FileSaveName(i)) text description size 19 align (.5, .5) # 버튼 위에 마우스 올려놓고 delete 키 누르면 세이브가 삭제됩니다. key "save_delete" action FileDelete(i) # 불러오기 버튼 4개 for i in range(1, rows + 1): textbutton "불러오기": xminimum 110 yminimum 55 yalign .5 text_size 20 # 세이브 파일 불러오는 액션. action FileLoad(i) null height 5 # 세이브/로드 페이지 자동저장페이지+여분의 페이지 4개. hbox: style_group "nav" textbutton "자동": action FilePage("auto") for i in range(1, 5): textbutton "[i] 페이지": action FilePage(i) screen preferences: tag menu add 'bg mainmenu' # 세이브/로드 스크린이 담긴 file_picker 를 함께 사용. use file_picker #... init -2 python: style.filepicker_window.align = (0, 0) style.filepicker_window.pos = (505, 150) style.filepicker_window.xmaximum = 495 style.filepicker_window.yminimum = 400 style.filepicker_frame.background = Null() style.filepicker_frame.xpadding = 30 style.filepicker_frame.ypadding = 10 style.filepicker_grid.spacing = 5 style.nav_button.background = Null() style.nav_button_text.size = 16 style.nav_button_text.align = (0, 0) # 세이브 페이지 선택 버튼에 마우스를 올려놓으면 # 주변에 테두리가 생기도록 한다. style.nav_button_text.hover_outlines = [(2, '#ccc6', 0, 0)] style.nav_button_text.selected_color = '#4c4c4c' # 선택된 페이지 버튼의 글자는 굵게. style.nav_button_text.selected_bold = True # 환경설정 스크린 스타일 #공통 스타일은 따로 빼내서 겹치는 부분은 지웠습니다. init python: style.prefs_window.align = (0, 0) style.prefs_window.pos = (25, 30) style.prefs_window.xmaximum = 475 style.prefs_window.ymaximum = 580 style.prefs_slider.right_bar = 'emptybar.png' style.prefs_slider.hover_right_bar = 'emptybar_hover.png' style.prefs_slider.left_bar = 'fullbar.png' style.prefs_slider.hover_left_bar = 'fullbar_hover.png' style.prefs_slider.thumb = None style.prefs_button.xminimum = 190 style.prefs_button.yminimum = 50 style.prefs_button_text.size = 16 style.prefs_text.size = 27 style.prefs_hbox.spacing = 15

styles.rpy

곳곳에 일치하는 스타일 설정이 많아서 기존 메인 메뉴에 적었던 스타일 설정을 지우고
공통분모만 뽑아 따로 적었습니다.

#styles.rpy init python: style.window.background = Frame("window.png", 15, 15) style.window.xpadding = 1 style.window.ypadding = 1 style.button.background = Frame('button_idle.png' , 20, 20) style.button.insensitive_background = Frame('button_hover.png', 20, 20) style.button.hover_background = Frame('button_hover.png' , 20, 20) style.button.selected_idle_background = Frame('button_hover.png', 20, 20) style.button.selected_hover_background = Frame('button_selected.png' , 20, 20) style.text.color = '#686868' style.button_text.color = '#686868'

결과물

기타

처음부터 개괄을 잡고 큰 줄기를 정리해서 스타일을 작성했다면 덜 해맸을 것 같습니다..흑.
만들고나서보니 역시 제일 중요한 건,
grid/vbox 등의 레이아웃 위젯을 사용할 땐, 어떤 게 가장 적절한 위젯일까 선택하는 것과..
프레임 류 위젯의 padding 과 레이아웃 위젯의 spacing 사용을 적절히;;; 사용하는 것인 듯합니다.

자주 만들어서 손에 익히는 게 가장 간편하고 쉬운 학습 방법이겠지만
그게 안 된다면 매뉴얼 옆에 두고 필요한 건 그때그때 찾아보며 적당한 기능을 찾아 스크립팅 하는 것이겠죠.. 저도 번역하느라고 한번 쫙 다 읽어보긴 했지만 가물가물해서 작업할 땐 한쪽에 켜놓고 작업합니다.

...지금 와서 생각해보니 제일 좋은 방법은 그냥 포토샵으로 미리 작업해서 이미지맵으로 작업하는 것 같습니다. 허허..