목차

이전 항목

ATL

다음 항목

스타일 속성

링크


원문 보러 가기
오역 신고하기
Created using Sphinx.

스타일

스타일이란 디스플레이어블의 모양을 바꿀 수 있도록 하는 것입니다. 디스플레이어블의 스타일 속성값을 바꾸면 디스플레이어블의 모양이 바뀌게 됩니다. 예를 들어 background 속성을 바꾸면 창이나 버튼의 배경을 바꿀 수 있습니다.

스타일 속성은 언제 속성이 적용되어야 하는가를 지정하는 접두사, 그리고 속성, 이렇게 두 부분으로 구성되어있습니다. 예를 들어 버튼의 hover_background 속성은 버튼에 마우스가 올라갔을 때 사용되는 반면, idle_background 는 버튼에 마우스가 올라가지 않았을 때 사용됩니다. (background 속성은 설정하면 idle_backgroundhover_background 가 같은 값으로 설정됩니다.)

렌파이 스타일에는 100가지가 넘는 스타일 속성이 있으나, 이 항목에서는 일부 속성만 사용됩니다. backgroundcolor, font, outlines , size 를 스타일 속성으로 사용합니다. 전체 스타일 속성 목록은 스타일 속성 문서를 참고하세요.

스타일 사용하기 및 스타일 상속

각 디스플레이어블에는 그에 알맞는 기본 스타일이 적용되어 있습니다. 디스플레이어블을 직접 만들던 스크린 언어를 써서 만들던 스타일 속성은 디스플레이어블에 적용할 수 있습니다. 그리고 스타일을 사용하면 디스플레이어블의 모양을 변경할 수 있습니다.

image big_hello_word = Text("Hello, World", size=40)

위 예제에서는 size 속성값을 Text 디스플레이어블에 전달해 글자 크기를 변경했습니다. 이렇게 하면 Hello, World 라는 글자가 40 픽셀 크기로 표시되도록 모양이 바뀔 것입니다.

이와 비슷하게, 스크린 언어를 사용할 때 유저 인터페이스 명령문은 저마다 그에 대응하는 스타일 속성을 받습니다.

screen big_hello_world:
    text "Hello, World" size 40

렌파이는 개별 스타일이 저마다 하나의 부모 스타일을 보유하도록 만들어 스타일 상속이 가능하도록 합니다. 스타일에서 어떤 스타일 속성이 정의되지 않았다면 가장 비슷한 부모, 조부모, 혹은 그 조상 스타일에서 해당 속성을 상속합니다.

디스플레이어블은 저마다 적용된 스타일의 부모 스타일을 지정할 수 있도록 style 이라는 속성을 받습니다.

image big hello world = Text("Hello World", style="big")

screen hello_world:
    text "Hello, World" style "big"

style 속성값을 입력하지 않았다면 부모 스타일은 디스플레이어블의 종류에 따라 결정됩니다. 이렇게 결정된 부모 스타일은 스크린 언어에 있는 유저 인터페이스문의 style_group 속성에 영향을 받을 수도 있습니다.

어느 스타일이 부모 스타일을 정하지 않은 채로 정의되었다면 부모 스타일은 기본 부모 스타일로 정해집니다. 스타일 이름에 언더바(_) 가 포함되어 있다면, 부모 스타일의 이름은 언더바가 적힌 위치까지의 문자를 제외한 나머지 문자들로 지정됩니다. 예를 들어, my_button 스타일은 button 에게서 스타일 속성을 상속 받습니다. 이러한 상속 방식은 스타일 객체에 메소드를 호출하거나 style문으로 변경할 수 있습니다. 존재하지 않는 스타일이 사용되거나 스타일 이름에 언더바가 사용된다면 렌파이는 기본 부모 스타일을 사용해 해당 스타일을 생성합니다.

언더바로 시작하는 스타일 이름들은 렌파이 내부에서 사용하도록 지정되어 있습니다.

렌파이는 구동 시에 스타일을 만들어내므로, 만들어진 스타일들은 init 코드 밖에서 변경할 수 없을 것입니다.

스타일 조사기

config.developer 값이 참이면 디스플레이어블에 적용된 스타일을 확인할 수 있는 스타일 조사기를 사용할 수 있습니다.

스타일 조사기를 활성화하려면 디스플레이어블에 마우스를 올린 뒤 Shift+I 키를 누르세요. 렌파이는 마우스 위치에 있던 디스플레이어블을 스크린에 그려지는 순서대로 나열합니다. (즉, 가장 뒤쪽에 그려지는 디스플레이어블은 스타일 조사기의 목록에서 최상위에 있는 디스플레이어블입니다.)

스타일 조사기에서 스타일 이름을 클릭하면 디스플레이어블이 상속하는 스타일과 최종 디스플레이어블에 적용된 각 스타일의 속성을 표시합니다.

스타일 정의하기 - style 문

스타일을 정의하는 좋은 방법은 스타일 명령문을 사용하는 것입니다.:

style my_text is text:
    size 40
    font "gentium.ttf"

스타일이 존재하지 않는다면 스타일 명령문이 알아서 스타일을 생성합니다. 그 외에는 기존에 설정된 스타일이 수정됩니다.

스타일 명령문은 style 키워드와 그 다음에 적히는 스타일 이름으로 시작됩니다. 그 뒤에는 0개 이상의 절을 적거나 콜론을 적을 수 있습니다.

스타일 명령문에 콜론이 있다면 블럭이 따라와야 합니다. 블럭 안에 있는 각 줄에는 하나 이상의 절이 적혀 있어야 합니다. 콜론이 없다면 스타일 명령문은 그대로 종료됩니다.

스타일 명령문은 다음과 같은 절을 받을 수 있습니다.:

스타일 속성 단순 표현식
입력한 스타일 속성에 단순 표현식의 값을 대입합니다.
is 부모 스타일 이름
스타일의 부모를 설정합니다. 부모 스타일 이름은 반드시 스타일의 이름을 나타내는 단어이어야 합니다.
clear
이 스타일 명령문이 실행되기 전에 해당 스타일에 적용되었던 모든 속성을 제거합니다. 부모에게서 속성값을 내려 받는 것은 예방하지 않습니다.
take 스타일 이름
이 스타일 명령문이 실행되기 전에 해당 스타일에 적용되었던 모든 속성을 제거하며, 이 명령문으로 지정한 스타일의 속성들로 대체합니다. 부모 스타일은 변경하지 않습니다.
variant 단순 표현식
단순 표현식을 계산하여 만들어지는 문자열이나 문자열 리스트를 스크린 종류 로 해석합니다. 그 중에 활성화된 스크린 종류가 단 하나라도 있다면 스타일 명령문을 실행하며, 그 외에는 무시합니다.

아래는 스타일 명령문 예제입니다.

# default 스타일을 상속하는 새 스타일을 만든다.
style big_red:
    size 40

# 스타일을 갱신한다.
style big_red color "#f00"

# 터치 화면인 경우에만
# label_text가 big_red 스타일에서 속성값을 받는다.

style label_text:
    variant "touch"
    take big_red

스타일 명령문은 언제나 초기화 때에만 실행됩니다. 스타일 명령문이 init 블럭에 없다면, 자동으로 init 0 블럭 안에 놓이게 됩니다.

스타일 정의하기: 파이썬

스타일에 이름을 붙이면 그 스타일은 전역 style 객체의 필드가 됩니다. 새 스타일을 만드려면 Style 클래스의 객체를 만들고, style 객체의 필드에 자신이 만든 스타일 객체를 배정해야 합니다.

init python:
     style.big_red = Style(style.default)

스타일 속성을 설정하려면 필드와 유사한 Style 객체의 속성에 값을 배정하면 됩니다. .

init python:
     style.big_red.color = "#f00"
     style.big_red.size = 42
class Style(parent)

새 스타일 객체를 생성한다. 스타일 속성은 이 객체의 필드에 배정될 수 있다.

parent
부모 스타일. 다른 스타일 객체나 스타일 이름이 적힌 문자열을 적을 수 있다.
clear()

객체의 스타일 속성을 모두 제거한다. 스타일 속성값은 이 객체의 부모 스타일에게 상속받는다.

set_parent(parent)

스타일 객체의 부모를 parent 로 설정한다.

take(other)

이 메소드는 other 에서 모든 스타일 속성을 받는다. other 는 반드시 스타일 객체이어야 한다.

인덱스 스타일

인덱스 스타일은 디스플레이어블에 주어진 데이터에 따라 디스플레이어블의 모양을 바꿀 때 사용하는 가벼운 스타일 시스템입니다. 인덱스 스타일은 스타일 객체를 문자열이나 정수로 인덱싱해서 만들 수 있습니다. 인덱스 스타일이 존재하지 않는다면 인덱싱을 통해 인덱스 스타일을 만듭니다.

init python:
    style.button['Foo'].background = "#f00"
    style.button['Bar'].background = "#00f"

인덱스 스타일은 해당 인덱스 스타일을 디스플레이어블에 공급해 사용할 수 있습니다.

screen indexed_style_test:
    vbox:
        textbutton "Foo" style style.button["Foo"]
        textbutton "Bar" style style.button["Bar"]

스타일 환경설정

플레이어가 직접 UI 스타일을 꾸밀 수 있는 게임을 만들고 싶을 때가 있습니다. 예를 들면 어떤 제작자는 플레이어가 게임에서 사용하는 글자의 모양, 크기, 색을 바꿀 수 있는 게임을 만들고 싶어합니다. 그럴 때에는 스타일 환경설정 시스템을 이용하면 됩니다.

스타일 환경설정이란 스타일 속성을 제어하는 설정입니다. 스타일 환경설정에는 이름과 플레이어가 선택할 수 있는 하나 이상의 설정이 있습니다. 스타일 환경설정 시스템을 이용할 때에 여러 설정 중 하나는 항상 선택된 상태가 됩니다. 그렇게 선택된 설정은 영구 데이터에 저장되어 스타일 속성에서 사용할 기본 설정이 됩니다.

하나의 설정에는 스타일, 속성, 그리고 그 속성에 대응하는 값이 하나 이상 입력되어야 하며, 스타일 환경설정에서 어떤 스타일 설정이 선택되면 그 설정에서 지정한 값을 스타일 속성에 배정하게 됩니다. 이 과정은 렌파이가 게임을 초기화할 때와 새로운 스타일 설정이 선택되었을 때 발생합니다.

스타일 환경설정을 위해 정의된 모든 스타일 설정들은 서로 다른 스타일 설정을 선택했을 때에도 동일한 스타일과 속성이 변경되도록 모두 같은 스타일과 속성을 정의해야 합니다. 그렇게 하지 않으면 값을 배정받지 못한 스타일이 생겨 결과물이 달라질 수 있습니다.

스타일 환경설정에서 사용되는 함수는 다음과 같습니다.

StylePreference(preference, alternative)

지정한 스타일 환경설정에서 alternative 스타일이 선택되도록 하는 액션.

preference
스타일 환경설정 이름을 적은 문자열.
alternative
스타일 옵션의 이름을 적은 문자열.
renpy.get_style_preference(preference)

지정한 스타일 환경설정에서 선택된 스타일 옵션의 이름이 적힌 문자열을 반환한다.

preference
스타일 환경설정 이름을 적은 문자열.
renpy.register_style_preference(preference, alternative, style, property, value)

스타일 환경설정에서 사용할 스타일 옵션의 정보를 등록한다.

preference
스타일 속성의 이름을 적은 문자열.
alternative
스타일 옵션의 이름을 적은 문자열.
style
업데이트 할 스타일 이름. 스타일 객체나 스타일 이름을 적은 문자열이어야 한다.
property
업데이트해야 할 스타일 속성의 이름을 적은 문자열.
value
스타일 속성에 배정할 값.
renpy.set_style_preference(preference, alternative)

스타일 환경설정에서 사용할 스타일 옵션을 설정한다.

preference
스타일 환경설정의 이름을 적은 문자열.
alternative
스타일 옵션의 이름을 적은 문자열.

아래는 크고 간결한 글자와 작고 테두리가 그려진 글자 가운데 하나를 플레이어가 선택할 수 있도록 만드는 스타일 설정 등록 예제입니다.

init python:
    renpy.register_style_preference("text", "decorated", style.say_dialogue, "outlines", [ (1, "#000", 0, 0) ])
    renpy.register_style_preference("text", "decorated", style.say_dialogue, "size", 22)

    renpy.register_style_preference("text", "large", style.say_dialogue, "outlines", [ ])
    renpy.register_style_preference("text", "large", style.say_dialogue, "size", 24)

아래 코드를 이용하면 버튼을 눌러 글자 모양을 바꾸도록 만들 수 있습니다.:

textbutton "Decorated" action StylePreference("text", "decorated")
textbutton "Large" action StylePreference("text", "large")

기타 스타일 함수

style.rebuild()

만든 스타일을 재작성하여 스타일을 init 코드 밖에서도 수정할 수 있도록 만든다.

경고

스타일은 게임 데이터의 일부로 저장되지 않습니다. 다시 말하면 게임 진행 중에 스타일을 바꿔도 세이브/로드 시에는 바뀐 스타일을 저장하거나 불러오지 않는다는 뜻입니다.