게임 내 메뉴 화면 꾸미기

1. 레이아웃 & 스타일 이용하기

각 메뉴 (게임 메뉴, 환경설정, 세이브 로드 화면, 프롬프트 - 안내창) 마다 지정된 레이아웃이 몇 가지 있다.

이 페이지를 확인해 보면 각 메뉴에 해당하는 레이아웃 종류가 다 나와있다.
layout.grouped_main_menu () 라던지  layout.classic_main_menu () 라던지 하는 것들

원하는 레이아웃으로 설정하는 방법은 init - 10 python: 블록에 이런 코드들을 써넣는 것이다.

init -10 python hide: layout.grouped_main_menu ()

각 레이아웃 설명 밑에 나와있는 변수 variables 는 그 레이아웃에 관련된 것들을 설정할 때 사용하는 것이다. 보기 좋게 레이아웃을 설정했던 블록에 같이 써 주면 된다.

init -10 python hide: layout.grouped_main_menu () config.main_menu_per_group = 3 # 한 행에 출력되는 메뉴를 3개로 한다.

-10 이라는 건 init 블록이 호출되는 우선순위를 뜻한다. 기본 메뉴들의 레이아웃은 전부 init - 1 python: 블록에 설정되어있는데, 사용자가 레이아웃을 지정한 블록을, 저 init -1 python: 블록보다 먼저 불러와야 충돌이 안 생김. 그래서 -10이라고 적어준 거다. 꼭 -10으로 해야하는 건 아니고, -1보다 작은 숫자면 아무거나 상관 없음.

이렇게 설정한 메뉴 화면을 스타일을 이용하여 변경해주면 된다(스타일 이용법은 링크를 클릭).


2. layout.imagemap_ ..

레이아웃 종류 중에서 앞에 imagemap_ 이 붙은 것들은 renpy.imagemap 과 사용법이 같다.
자세한 건 링크 참조

..벗뜨, 앞서 설명했던 layout 어쩌구들은 스크린 언어가 새로 추가되면서 사용할 필요가 없게 되었다(제대로 기능은 하지만 스크린 언어를 이용해 만드는 게 훨씬 쉽고 편하다)

3. 스크린 언어를 이용하여 새로 만들기

각 메뉴마다 기본 골격이 되는 스크립트는 여기 나와있음.
스크린 언어로 사용되는 명령문들의 종류는 여기
해당 명령문들에 대한 action, value값은 여기를 참조.

스크린을 만들어서 init -10: 같은 블록에다 넣어두도록 하자.


끝.


이라고 하면 좀 성의 없어보이니까 뭐 예제를 하나 만들어보겠음.
환경설정 화면을 예로 들면..


① 기본 버튼같은 것으로만 만드는 경우:

init -2 : screen navigation: # 환경설정 화면의 네비게이션으로 사용할 스크린. # 네비게이션 = 환경설정 화면에서 구석에 작게 나타나는 메뉴 # 세이브/로드/환경설정/돌아가기 뭐 이런 버튼이 있는 메뉴를 말함. # 만들려는 화면에 따라서 반드시 필요한 건 아니긴 하다. frame: align (.9 , .9) # 이 프레임의 위치를 지정한다 has vbox textbutton "돌아가기" action Return() screen preferences: # 환경설정화면의 스크린 이름 tag menu # 같은 태그가 달려있는 스크린은 서로 불려질 때마다 같은 태그가 있는 스크린을 숨긴다. # 세이브 화면에 tag menu 가 있으면, 세이브 화면이 뜬 상태에서 환경설명 화면을 불러올 때, # 세이브화면이 저절로 사라지고 환경설정 화면이 대체된다 use navigation # 위에서 지정한 네비게이션 스크린을 이 환경설정 스크린에서 사용한다는 뜻이다. frame: # 뽀대용로 프레임을 하나 만들어준다. style_group "preference" # 이 프레임에 속한 모든 차일드들에 적용될 스타일의 접두사임 # 그러니까 여기에 있는 label이랑 textbutton 의 스타일 이름은 전부 # preference_label 뭐 이런 식이라는 뜻. has vbox # 세로로 정렬되도록 vbox를 심어준다. # has를 쓰는 경우는 들여쓰기 안함 label "창 모드 변경" # 이 옵션이 뭘 조정하는 옵션인지 레이블을 달아준다 textbutton "창 모드" action Preference("display", "window") # 이 버튼을 누르면 윈도우 모드가 된다. textbutton "전체화면" action Preference("display", "fullscreen") # 이 버튼을 누르면 전체화면 모드가 된다.

② 스크린 언어의 이미지맵을 이용하는 경우:

init -2: screen preferences: tag menu # 다른 메뉴들과 서로 교체되도록 태그를 달아준다 imagemap: auto "pref_%s.png" # 이미지맵에 사용될 그림들을 자동으로 지정하는 것임 # 그니까 ground 로는 pref_ground.png 를 사용하고 # hover 에는 pref_hover.png 를 사용한다는 뜻. # 만일 필요한 이미지 중에 하나라도 없으면 # (pref_ground.png가 없다던지 하는 경우) # 에러가 발생한다. hotspot (82, 156, 70, 20) clicked Preference("display", "window") # 이미지맵의 핫스팟. # 기존 이미지맵과 비교해서 사용법이 바뀐 게 있는데 # 예전에는 왼쪽 모서리의 좌표와 오른쪽 아래의 모서리 좌표를 입력해야 했다면 # 지금은 왼쪽 모서리 좌표와 핫스팟의 영역 (가로,세로) 를 입력해야 한다. hotspot (156, 156, 110, 20) clicked Preference("display", "fullscreen") # 이걸 예로 들자면, # 이 핫스팟은 (156, 156) 이 왼쪽 모서리가 되고 # 가로 110, 세로 20 의 영역을 가진다는 뜻임. hotspot (82, 240, 20, 20) clicked Preference("transitions", "all") hotspot (112, 240, 40, 20) clicked Preference("transitions", "none") hotspot (82, 319, 40, 20) clicked Preference("skip", "all") hotspot (126, 319, 50, 20) clicked Preference("skip", "seen") hotspot (82, 403, 50 , 20) clicked Preference("after choices", "skip") hotspot (135, 403, 50 , 20) clicked Preference("after choices", "stop") hotbar (325, 210, 180, 30) value Preference("sound volume") #핫바도 핫스팟과 마찬가지. 왼쪽 모서리의 좌표랑 가로,세로 길이를 적어야 한다. hotbar (325, 270, 180, 30) value Preference("music volume") hotbar (325, 325, 180, 30) value Preference("voice volume")

주석을 차례대로 참조할 것.

환경설정과 관련된 버튼의 액션은 여기에 나와있는 것 중 '함수' 항목을 보면 알 수 있다.
자기가 만든 스크린을 사용하는 경우 스타일은 style_group을 사용해서 지정할 수 있음(링크된 페이지의 거의 마지막 부분에 적혀있다).