아날로그 어 헤이트 스토리 따라하기 - 5 환경 설정

목표

이번엔 환경설정 메뉴입니다. 우선 왼편에 있는 "환경설정" 화면만 따라 만들어보았습니다.

준비물

012345678910

스크립트

screen preferences: tag menu # 네비게이션은 안 쓰니까 뺐습니다. add 'bg mainmenu' # 환경설정 배경. 나중에 수정해야.. window: style_group "prefs" has vbox label '{color=#fff}환경설정{/color}' xpadding 20 ypadding 5 frame: background Null() xpadding 30 ypadding 20 has vbox text '음악 볼륨' bar value Preference("music volume") null height 15 text '효과음 볼륨' bar value Preference("sound volume") null height 15 hbox: textbutton '본 내용 건너뛰기' action Preference("skip", "seen") textbutton '모두 건너뛰기' action Preference("skip", "all") null height 15 text '텍스트 속도' bar value Preference("text speed") null height 15 hbox: spacing 20 # 나중에 체크. textbutton '전체 화면\n (1024*640)' action Preference("display", "fullscreen") xminimum 120 yminimum 70 textbutton '전체 화면\n (1024*600)' action Preference("display", "fullscreen") xminimum 120 yminimum 70 textbutton '창 모드' action Preference("display", "window") xminimum 120 yminimum 70 null height 15 hbox: textbutton '애니메이션 최대' action Preference("transitions", "all") textbutton '애니메이션 최소' action Preference("transitions", "none") null height 15 hbox: textbutton 'English' textbutton '한글' null height 15 init: # 환경설정의 레이블 배경 그림은 게임 ai가 # 누구인지에 따라 색이 달라집니다. # ConditionSwitch로 이를 ai가 달라질 때마다 바뀌도록 정했습니다. $ ai = None image header = ConditionSwitch( "ai == 'hyunae'", "ha_header.png", "ai == 'mute'", "mute_header.png", "ai == None", im.MatrixColor("ha_header.png", im.matrix.desaturate()) # imMatrix는 이미지의 색상을 바꾸는 이미지 조작기입니다. # desaturate는 무채색으로 바꾸는 행렬. ) image name = ConditionSwitch( "ai == 'hyunae'", "ha_name.png", "ai == 'mute'", "mute_name.png", "ai == None", im.MatrixColor("ha_name.png", im.matrix.desaturate()) ) init python: style.prefs_window.background = Frame("window.png", 15, 15) # 환경 설정란의 테두리를 설정합니다. style.prefs_window.align = (0, 0) # 기준점 설정 style.prefs_window.pos = (25, 30) # 위치 설정 style.prefs_window.xmaximum = 475 # 가로 길이 설정 style.prefs_window.ymaximum = 580 # 세로 길이 설정 style.prefs_window.xpadding = 1 #좌우 여백 style.prefs_window.ypadding = 1 #상하 여백 # 음량 조절 막대의 스타일링은 이렇게 설정합니다. 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 # 막대가 어느 지점을 가리키는지 알려주는 thumb 이미지는 사용 안 함. style.prefs_button.background = Frame('button_idle.png' , 20, 20) # 버튼의 일반 배경 style.prefs_button.hover_background = Frame('button_hover.png' , 20, 20) # 마우스를 올렸을 때 style.prefs_button.selected_idle_background = Frame('button_hover.png', 20, 20) #활성화된 버튼에 마우스가 안 올려졌을 때 style.prefs_button.selected_hover_background = Frame('button_selected.png' , 20, 20) # 활성화된 버튼에 마우스를 올렸을 때 style.prefs_button.xminimum = 190 # 버튼의 가로길이 style.prefs_button.yminimum = 50 #버튼의 세로 길이 style.prefs_button_text.size = 16 # 버튼에 쓰이는 글씨 크기 style.prefs_button_text.color = '#686868' # 색상 style.prefs_text.color = '#686868' # 텍스트.. 음악 볼륨 등에 적용할 색상 style.prefs_text.size = 27 # 크기 style.prefs_label.background = 'name' # 레이블(환경설정이라고 쓰인 글씨)에 적용할 배경그림 style.prefs_hbox.spacing = 15 # hbox 로 가로배열한 하위위젯의 간격.

결과

알흠답네요
스크립트는 지저분하지만;

기타

- 배경이 제가 생각한대로 작동하지 않는 걸 보니 제가 뭔가 잘못한 모양입니다-_-; 애니메이션 최대/최소 버튼을 눌러도 꿈쩍 않고 계속 움직이는 게.. 나중에 손봐야하지 싶습니다.
- 아 이제보니 저 옆의 콜로니 어쩌구 하는 안내문도 넣을 걸 그랬네요...........지만 귀찮아서 일단 패스합니다;
- 전체모드/창모드 기능을 제대로 따라 구현하지 않았습니다... 만 어차피 UI만 만들어보려고 했으니까요.. 나중에 생각나면 해상도 조절해서 전체모드로 바꾸는 기능도 만들어보겠습니다.
- 사실 약간의 창의력과 좋은 레이아웃에 대한 구상만 있다면 비주얼 노벨의 gui를 스크립트하는 건 그다지 어렵지 않습니다. 스크립팅은 그냥 보고 옮기기만 하면 되는 .. 번거로운 노가다 작업입니다;
- game 디렉토리에 구현하려는 레이아웃 이미지를 넣어둔 다음 image location picker 를 이용해 각 위젯의 위치를 파악하면 편리합니다.

- 지난 스팀 세일 기간 때 정품을 구입해서 아마도 데모 건드릴 때보다는 진도를 더 나갈 수 있게 되었습니다. 스팀 세일 만세!

- 아시겠지만 제 스크립트가 정답이다..이런 건 아닙니다. 어떤 기능을/디자인을 스크립팅할 때 중요한 건 1. 한 눈에 봐도 파악하기 쉬운 구조 2. 효율성  이 아닐까요. 구상대로 구현하는 것이야 기본이겠고요.

그런 의미에서 제 스크립트는 아마 꽝일지도(.. 저야 이런 것도 된다는 걸 보여드린다고 적은 거니까 여러분도 여러분 나름의 스크립트를 만들어보세요.