렌파이 게임의 모양을 자기 입맛대로 꾸미려면 반드시 스타일 기능을 이용해야 합니다. 스타일이 무엇인지는 스타일 조사기의 쓰임새부터 먼저 보면서 조금씩 설명드리겠습니다.
1. 런처에서 예제 프로젝트를 만들던가 기존 프로젝트를 선택합니다. 프로젝트 폴더 안에 screens.rpy, screens.rpyc 파일이 있는 지 확인하시고 둘 다 다른 폴더로 옮겨둡니다. 그리고 options.rpy에서 config.developer = True 로 설정합니다. 이제 게임을 실행합니다.1
2. 주 메뉴가 뜨면 아무것도 없는 바탕에 커서를 갖다대고 Shift + I 를 누릅니다.
3. Style Inspector 어쩌구 하면서 화면이 나옵니다. 이 화면을 살펴보면 마우스 커서가 올려진 부분에 있는 위젯의 정보를 알 수 있습니다.
그러니까 방금 마우스를 올려놨던 그 화면은 window 위젯이고, 800 x 600 크기이며, 이름이 mm_root 라고 지어진 스타일의 설정을 적용받고 있다는 뜻입니다.
스타일 조사기를 이용하면 이런 식으로 위젯에 적용된 스타일에 대한 정보를 얻을 수 있습니다.
4. 주 메뉴에 있는 버튼에도 마우스를 올려놓고 스타일 조사기를 띄워봅시다.
스타일 조사기에 써있는 내용들은 대부분 아까 설명했던 것들과 같은 내용으로 위젯의 종류와, 스타일 이름, 크기를 나타냅니다. 여기서는 ② Multibox 와 ③ Button 은 안쪽으로 들여쓰기가 되어있는 것을 확인할 수 있는데, 이는 ① Window 위젯이 ② Multibox 위젯을 둘러싸고 있으며, ② Multibox는 ③ Button이라는 위젯을 둘러싸고 있다는 뜻입니다. 이렇게 무언가에 둘러쌓인 위젯에 스타일 조사기를 사용하면 그것을 둘러싸고 있는 상위 위젯에 관한 설명까지 함께 나타납니다.2
그런데 Button에 적용된 스타일의 이름(④)은 모양이 좀 다르게 생겼습니다. 해석하면 다음과 같습니다.
* 마우스 커서가 버튼의 글자에 올려져 있다면 Button: mm_buttom[u'Start Game'] 밑에 Text: mm_buttom_text[u'Start Game'] 이라고 적혀있을 겁니다. 쨌든 구조는 위에 설명했던 것과 동일합니다.
스타일을 이용해 위젯의 모양을 바꾸기
아까 스타일 조사기에서 봤듯이 주 메뉴의 배경 화면은 window 위젯이었습니다. window 위젯에 적용될 수 있는 스타일의 속성들이 있으니 이것을 알아보고 설정해야 합니다.
스타일의 속성 목록은 여기에서 확인할 수 있습니다. 각 스타일 속성에 배정될 수 있는 값이 다르지만 속성의 종류에 따라 쉽게 그 값을 짐작할 수 있습니다. 예를 들어 위치를 지정하는 속성에 색상값을 배정할 수는 없습니다.
링크된 페이지에 보면 윈도우 위젯에는 background 속성이 적용된다고 나와있습니다. 주 메뉴의 배경화면은 mm_root 라는 스타일의 적용을 받았으니, mm_root라는 스타일의 background 속성을 변경하면 주 메뉴의 바탕화면을 바꿀 수 있습니다.
스타일은 init 블록에서 설정해야 합니다. label 문 안에 적으면 스타일이 바뀌지는 않습니다(못믿겠으면 실험해보시길). 스타일을 바꾸는 명령문 앞에는 $를 붙여야하는데, 그게 싫다면 그냥 init python: 블록에 적어버립시다.
저장하고 게임을 실행하면 주 메뉴의 바탕화면 색상이 바뀐 것을 확인할 수 있습니다.
사실 background 속성에는 None값 아니면 모든 렌파이 디스플레이어블이 값으로 배정될 수 있습니다. 그림이나 프레임, 심지어 버튼까지도 이 속성에 값으로 배정될 수 있다는 얘기입니다다.
* Button()과 Text()는 각각 버튼과 텍스트 디스플레이어블을 생성하는 함수입니다. 물론 이걸 주 메뉴의 바탕화면으로 쓸 일은 거의 없겠지만..
시작 버튼에 적용된 스타일의 이름은 mm_button[u'Start Game'] 이었습니다. 아까 윈도우 위젯을 변경했던 때랑 똑같이
"처음부터" 라고 적힌 버튼의 색상만 바뀌었고 나머지 버튼들은 아직 그대로인 걸 확인할 수 있습니다. 이처럼 인덱스 스타일은 간단히 스타일을 바꿀 때 사용할 수 있는 기능입니다.
* 시작 버튼의 모서리가 각이 진 이유는 시작 버튼에 스타일을 다르게 적용하면서 기존의 스타일 테마인 roundrect 가 적용해제되었기 때문입니다.
재미로 텍스트의 색상도 바꿔보았습니다(텍스트에는 텍스트에 적용되는 또 다른 스타일 속성이 있으니 스타일 속성 목록을 꼭 확인하시길)
인덱스 스타일을 이용할 때 대괄호 안의 이름은 문자열로 작성해야 합니다. 시작 버튼의 인덱스 스타일에는 u'Start Game'앞에 u가 적혀있는데.. 이건 u 다음에 적힌 문자열을 유니코드 문자열로 만들라는 뜻입니다. 현재 버전에 와서는 의미 없는데 예전부터 이렇게 지정된 거라 무시해도 됩니다.
이렇게 생성한 스타일은 다음과 같이 적용하면 됩니다.
ui를 사용할 때나 스크린 언어를 사용할 때나 스타일 이름을 문자열로 작성하여 스타일을 지정할 수도 있습니다.
하위 위젯을 포함하는 위젯에 style_group과 스타일 이름을 적어주면 그 위젯과, 위젯이 포함하는 하위 위젯들의 스타일을 한꺼번에 바꿀 수 있습니다.
예를 들어 프레임에 style_gruop "my" 라는 속성을 적어주면 프레임 위젯에는 my_frame 이라는 스타일이 적용되며 프레임이 하위 위젯으로 버튼을 가지고 있다면 그 버튼에는 my_button 이라는 스타일이 적용됩니다.
아래는 스타일 속성 접두사의 종류입니다.
insensitive
디스플레이어블과 상호작용을 할 수 없을 때 사용됨.
idle
디스플레이어블이 선택되지 않고, 마우스가 올라가 있지도 않은 때 사용됨.
hover
디스플레이어블에 마우스가 올라가 있지만 선택되진 않은 때 사용됨.
selected_idle
디스플레이어블이 선택되었으나 마우스가 올라가있지는 않은 때 사용됨.
selected_hover
디스플레이어블이 선택되고 마우스도 올라가있는 때 사용됨.
* 초점이 맞춰진 상태라는 건 마우스 등을 이용해 그 버튼 등에 마우스 포인터를 올려놓는다는 뜻입니다(화살표 키로도 초점을 맞출 수 있다).
스타일 조사기 Style Inspector
1. 런처에서 예제 프로젝트를 만들던가 기존 프로젝트를 선택합니다. 프로젝트 폴더 안에 screens.rpy, screens.rpyc 파일이 있는 지 확인하시고 둘 다 다른 폴더로 옮겨둡니다. 그리고 options.rpy에서 config.developer = True 로 설정합니다. 이제 게임을 실행합니다.1
2. 주 메뉴가 뜨면 아무것도 없는 바탕에 커서를 갖다대고 Shift + I 를 누릅니다.
3. Style Inspector 어쩌구 하면서 화면이 나옵니다. 이 화면을 살펴보면 마우스 커서가 올려진 부분에 있는 위젯의 정보를 알 수 있습니다.
그러니까 방금 마우스를 올려놨던 그 화면은 window 위젯이고, 800 x 600 크기이며, 이름이 mm_root 라고 지어진 스타일의 설정을 적용받고 있다는 뜻입니다.
스타일 조사기를 이용하면 이런 식으로 위젯에 적용된 스타일에 대한 정보를 얻을 수 있습니다.
4. 주 메뉴에 있는 버튼에도 마우스를 올려놓고 스타일 조사기를 띄워봅시다.
 |  |
그런데 Button에 적용된 스타일의 이름(④)은 모양이 좀 다르게 생겼습니다. 해석하면 다음과 같습니다.
이 위젯의 종류는 Button으로 mm_button 이라는 스타일의 설정이 적용되고 있는데, mm_button과는 다른 스타일 설정이 mm_button[u'Start Game'] 스타일에 설정되어 있다면 후자의 설정을 우선 따른다.이렇게 스타일 이름 끝에 대괄호를 붙여서 또다른 이름이 지어진 스타일을 인덱스 스타일 Indexed Style이라고 합니다.
* 마우스 커서가 버튼의 글자에 올려져 있다면 Button: mm_buttom[u'Start Game'] 밑에 Text: mm_buttom_text[u'Start Game'] 이라고 적혀있을 겁니다. 쨌든 구조는 위에 설명했던 것과 동일합니다.
스타일을 바꾸는 법
스타일을 이용해 위젯의 모양을 바꾸기
아까 스타일 조사기에서 봤듯이 주 메뉴의 배경 화면은 window 위젯이었습니다. window 위젯에 적용될 수 있는 스타일의 속성들이 있으니 이것을 알아보고 설정해야 합니다.스타일의 속성 목록은 여기에서 확인할 수 있습니다. 각 스타일 속성에 배정될 수 있는 값이 다르지만 속성의 종류에 따라 쉽게 그 값을 짐작할 수 있습니다. 예를 들어 위치를 지정하는 속성에 색상값을 배정할 수는 없습니다.
링크된 페이지에 보면 윈도우 위젯에는 background 속성이 적용된다고 나와있습니다. 주 메뉴의 배경화면은 mm_root 라는 스타일의 적용을 받았으니, mm_root라는 스타일의 background 속성을 변경하면 주 메뉴의 바탕화면을 바꿀 수 있습니다.
스타일은 init 블록에서 설정해야 합니다. label 문 안에 적으면 스타일이 바뀌지는 않습니다(못믿겠으면 실험해보시길). 스타일을 바꾸는 명령문 앞에는 $를 붙여야하는데, 그게 싫다면 그냥 init python: 블록에 적어버립시다.
저장하고 게임을 실행하면 주 메뉴의 바탕화면 색상이 바뀐 것을 확인할 수 있습니다.
사실 background 속성에는 None값 아니면 모든 렌파이 디스플레이어블이 값으로 배정될 수 있습니다. 그림이나 프레임, 심지어 버튼까지도 이 속성에 값으로 배정될 수 있다는 얘기입니다다.
* Button()과 Text()는 각각 버튼과 텍스트 디스플레이어블을 생성하는 함수입니다. 물론 이걸 주 메뉴의 바탕화면으로 쓸 일은 거의 없겠지만..
인덱스 스타일 이용
메뉴 버튼에 있는 '시작'버튼에 인덱스 스타일이 사용되었는데, 이 녀석의 색을 바꿔봅시다.시작 버튼에 적용된 스타일의 이름은 mm_button[u'Start Game'] 이었습니다. 아까 윈도우 위젯을 변경했던 때랑 똑같이
style.스타일이름.스타일 속성 = 속성값이런 식으로 써 주면 됩니다.
"처음부터" 라고 적힌 버튼의 색상만 바뀌었고 나머지 버튼들은 아직 그대로인 걸 확인할 수 있습니다. 이처럼 인덱스 스타일은 간단히 스타일을 바꿀 때 사용할 수 있는 기능입니다.
* 시작 버튼의 모서리가 각이 진 이유는 시작 버튼에 스타일을 다르게 적용하면서 기존의 스타일 테마인 roundrect 가 적용해제되었기 때문입니다.
재미로 텍스트의 색상도 바꿔보았습니다(텍스트에는 텍스트에 적용되는 또 다른 스타일 속성이 있으니 스타일 속성 목록을 꼭 확인하시길)
새로운 스타일 만들기
스타일을 어떻게 변경하는지 알았으니 이젠 자신이 만든 스크린이나 위젯에 사용할 스타일을 만들어봅시다.인덱스 스타일 이용
딱히 스타일을 생성할 필요는 없이, 기존에 있던 스타일 이름 옆에 대괄호와 함께 인덱스 스타일의 이름을 적어주면 됩니다.인덱스 스타일을 이용할 때 대괄호 안의 이름은 문자열로 작성해야 합니다. 시작 버튼의 인덱스 스타일에는 u'Start Game'앞에 u가 적혀있는데.. 이건 u 다음에 적힌 문자열을 유니코드 문자열로 만들라는 뜻입니다. 현재 버전에 와서는 의미 없는데 예전부터 이렇게 지정된 거라 무시해도 됩니다.
새로운 이름의 스타일 생성
스타일의 생성은 다음과 같이 합니다.이렇게 생성한 스타일은 다음과 같이 적용하면 됩니다.
ui를 사용할 때나 스크린 언어를 사용할 때나 스타일 이름을 문자열로 작성하여 스타일을 지정할 수도 있습니다.
style_group
스크린 언어에서는 사용할 수 있는 스타일 적용법이 또 하나 있는데 바로 style_group을 이용하는 것입니다.하위 위젯을 포함하는 위젯에 style_group과 스타일 이름을 적어주면 그 위젯과, 위젯이 포함하는 하위 위젯들의 스타일을 한꺼번에 바꿀 수 있습니다.
예를 들어 프레임에 style_gruop "my" 라는 속성을 적어주면 프레임 위젯에는 my_frame 이라는 스타일이 적용되며 프레임이 하위 위젯으로 버튼을 가지고 있다면 그 버튼에는 my_button 이라는 스타일이 적용됩니다.
스타일 속성 접두사
버튼에는 아무런 상호작용 기능이 없는 비활성화 된 버튼이나, 활성화된 버튼이라도 마우스가 올려져 있을 때, 안 올려져 있을 때, 선택된 상태일 때 등 여러가지 상태가 있습니다. 버튼과 마찬가지로 바bar도 그런 여러가지 상태에 놓일 수 있는데, 스타일 속성 접두사를 사용하면 각 상황에따라 적용될 모양도 바꿀 수 있습니다.아래는 스타일 속성 접두사의 종류입니다.
insensitive
디스플레이어블과 상호작용을 할 수 없을 때 사용됨.
idle
디스플레이어블이 선택되지 않고, 마우스가 올라가 있지도 않은 때 사용됨.
hover
디스플레이어블에 마우스가 올라가 있지만 선택되진 않은 때 사용됨.
selected_idle
디스플레이어블이 선택되었으나 마우스가 올라가있지는 않은 때 사용됨.
selected_hover
디스플레이어블이 선택되고 마우스도 올라가있는 때 사용됨.
* 초점이 맞춰진 상태라는 건 마우스 등을 이용해 그 버튼 등에 마우스 포인터를 올려놓는다는 뜻입니다(화살표 키로도 초점을 맞출 수 있다).
