スタイルのプロパティー link

スタイルプロパティーは、 styles による displayable の表示方法の制御に関係しています。スタイルプロパティーは、接頭辞を付けずに displayable のすべての状態に対して適用することもできますし、接頭辞を付けてプロパティーを特定の状態だけに限定することもできます。

スタイルプロパティーの接頭辞 link

スタイルプロパティーに接頭辞を使うことで、フォーカスや選択肢の状態に応じた displayable の見た目の変更を示すことができます。例えば、ボタンの上にマウスが置かれた時に色を変更したり、ボタンによって現在選択されているものを表すことができます。

displayable がなりうる状態は5つあります。

insensitive

ユーザーが displayable を操作できない時に使用されます。

idle

displayable がフォーカスも選択もされていない時に使用されます。

hover

displayable がフォーカスされて選択されていない時に使用されます。

selected_idle

displayable がフォーカスされずに選択されている時に使用されます。

selected_hover

displayable がフォーカスかつ選択されている時に使用されます。

ボタンとバーの displayable (及びその類のもの) は、自身の状態と子要素の状態をイベントに応じて更新します。例えば、ユーザーが選択されていないボタンの上でマウスを通過させた時、ボタンとその子要素は hover 状態になります。

スタイルプロパティーの接頭辞により、異なる状態に対してそれぞれのスタイルプロパティーを設定できます。包含セットアップのシステムがあるため、接頭辞によって1つ以上の状態に対してプロパティーをまとめて設定できます。

包含関係は:

接頭辞

接頭辞に含まれる状態

(接頭辞なし)

insensitive, idle, hover, selected_idle, selected_hover
idle_ idle, selected_idle
hover_ hover, selected_hover
selected_ selected_idle, selected_hover
insensitive_ insensitive
selected_idle_ selected_idle
selected_hover_ selected_hover
selected_insensitive_ selected_insensitive

テキストボタンを使ってこれを実演します。テキストボタンには2つのスタイルがあり、 button はボタン本体に対して、 button_text はボタン中のテキストに対してあります。 background スタイルプロパティーによってボタンの背景を設定するとともに、 color プロパティーによってテキストの色を設定します。:

# The button background is gray when insensitive, light
# blue when hovered, and dark blue otherwise.
style button:
    background "#006"
    insensitive_background "#444"
    hover_background "#00a"

# The button text is yellow when selected, and white
# otherwise.
style button_text:
    color "#fff"
    selected_color "#ff0"

スタイルプロパティーの値 link

Each style property expects a specific kind of data. Many of these are standard python types, but a few are novel. Here are descriptions of the novel kinds of value a style property can expect.

position

位置は、ある領域の左上角からの相対的な場所を指定するために使用されます。(位置における領域は displayable が含まれているレイアウトによって与えられるか、レイアウトがない場合はスクリーンとなります。アンカーにおける領域は displayable そのものの大きさとなります。)

位置の値は、値の型によって解釈のされ方が異なります:

int (例 0, 1, 37, 42)

整数は、領域の左端または上端からのピクセル数として解釈されます。

float (例 0.0, 0.5, 1.0)

浮動小数点数は、領域に対する割合として解釈されます。例えば 0.5 は領域の両端に対する半分の点となり、また 1.0 は右端または下端となります。

renpy.absolute (例 renpy.absolute(100.25))
A renpy.absolute number is interpreted as the number of pixels from the left or top side of the screen, when using subpixel-precise rendering.
displayable

どのような displayable でもかまいません。 displayable に "[prefix_]" 置換文が含まれていれば以下で述べる接頭辞検索が処理されます。

color

Ren'Pyにおける色は、先頭のハッシュマーク(#)と、それに続く3つか4つの16進数の文字列によって表現され、3つか4つの要素のそれぞれは、1桁か2桁の16進数の色コードとなっています。

16進数が3つの場合、それぞれの成分は赤、緑、青を意味します。16進数が4つの場合、それぞれの成分は赤、緑、青、アルファを意味します。例 :

  • "#f00""#ff0000" は不透明の赤色を意味します。

  • "#0f08"#00ff0080" は半透明の緑色を意味します。

3つの16進数で表される色は、HTMLで使われているものと同じです。

色は4つの要素のタプルとして表すこともでき、4つの要素は0から255までの整数となります。それぞれの要素は、赤、緑、青、アルファの順です。

  • (0, 0, 255, 255) は不透明の青色を意味します。

最終的にカラーは Color クラスのインスタンスです。

すべてのスタイルプロパティーの一覧 link

スタイルプロパティーによって様々な displayable の外観を制御できます。すべてのスタイルプロパティーがすべての displayable に適用できるわけではないため、これらを分類しました。

位置のスタイルプロパティー link

これらのプロパティーは、すべての displayable に適用され、多くは layout によって確保される領域の内部、または layout の内部でない場合は screen 上で displayable の位置を制御します。

alt - string or None link

自己発話が有効なときに displayable に使用される代替テキスト。詳細は self voicing の節を参照してください。

xpos - position link

displayable が含まれている領域の左端からの相対的な位置。

ypos - position link

displayable が含まれている領域の右端からの相対的な位置。

pos - tuple of (position, position) link

タプルの第1要素に xpos を設定し、タプルの第2要素に ypos を設定することと等価。

xanchor - position link

displayable の左端からの、アンカーの相対的な位置。

yanchor - position link

displayable の右端からの、アンカーの相対的な位置。

anchor - tuple of (position, position) link

タプルの第1要素に xanchor を設定し、タプルの第2要素に yanchor を設定することと等価。

xalign - float link

xpos と xanchor に同じ値を設定することと等価。これはスクリーン上の相対的な位置に displayable を設置するときに効果があり、0.0 で左端、0.5 で中央、1.0 で右端となります。

yalign - float link

ypos と yanchor に同じ値を設定することと等価。これはスクリーン上の相対的な位置に displayable を設置するときに効果があり、0.0 で上端、0.5 で中央、1.0 で下端となります。

align - tuple of (float, float) link

タプルの第1要素に xalign を設定し、タプルの第2要素に yalign を設定することと等価。

xcenter - position link

xpos をこのプロパティーの値に、xanchor を 0.5 に設定するのと等価です。

ycenter - position link

ypos にこのプロパティーの値を、yanchor に 0.5 を設定することと等価です。

xoffset - int link

xpos と xalign から計算される水平方向の位置に追加されるピクセル数を返します。

yoffset - int link

ypos と yalign から計算される垂直方向の位置に追加されるピクセル数を返します。

offset - tuple of (position, position) link

タプルの第1要素に xpos を設定し、タプルの第2要素に ypos を設定することと等価。

xmaximum - int link

displayable の水平方向の大きさの最大値をピクセル数で指定します。

ymaximum - int link

displayable の垂直方向の大きさの最大値をピクセル数で指定します。

maximum - tuple of (int, int) link

タプルの第1要素に xmaximum を設定し、第2要素に ymaximum を設定することと等価。

xminimum - int link

displayable の幅の最小値をピクセル数で設定します。displayable の大きさが変更可能なときのみ動作します。

yminimum - int link

displayable の高さの最小値をピクセル数で設定します。displayable の大きさが変更可能なときのみ動作します。

minimum - tuple of (int, int) link

タプルの第1要素に xminimum を設定し、第2要素に yminimum を設定することと等価。

xsize - int link

xminimum と xmaximum に同じ値を設定することと等価です。この結果として、displayable の幅が設定されます。

ysize - int link

yminimum と ymaximum に同じ値を設定することと等価です。この結果として、displayable の高さが設定されます。

xysize - tuple of (int, int) link

xminimum と xmaximum をタプルの1つ目の要素に、yminimum と ymaximum をタプルの2つ目の要素にすることと等価です。この結果として、displayable のサイズが設定されます。

xfill - boolean link

If true, the displayable will expand to fill all available horizontal space. If not true, it will only be large enough to contain its children.

displayable の大きさが変更可能なときのみ動作します。

yfill - boolean link

If true, the displayable will expand to fill all available vertical space. If not true, it will only be large enough to contain its children.

displayable の大きさが変更可能なときのみ動作します。

area - tuple of (int, int, int, int) link

The tuple is interpreted as (xpos, ypos, width, height). Attempts to position the displayable such that it's upper-left corner is at xpos and ypos, and its size is width and height.

It does this by setting the xpos, ypos, xanchor, yanchor, xmaximum, ymaximum, xminimum, yminimum, xfill, and yfill properties to appropriate values.

これはすべての displayable や layout で動作するわけではありません。

テキストスタイルのプロパティー link

antialias - boolean link

If True, the default, truetype font text will be rendered anti-aliased.

adjust_spacing - boolean link

True なら Ren'Py は drawable-resolution テキストのサイズを virtual resolution で描画されるテキストのスペースに合せて、フレームとテキストを含むコンテンツのサイズが変更されないことを保証します。

False ならテキストはサイズに応じて変更されませんが、どんなウィンドウサイズに対してもテキストをレイアウトするのに十分なスペースを確保することはクリエーターの責任です。

デフォルトでほとんどのテキストに対して True になりますが、 input のテキストに対しては False です。

black_color - color link

When rendering an image-based font, black will be mapped to this color. This has no effect for truetype fonts.

bold - boolean link

If True, render the font in a bold style. For a truetype font, this usually involves synthetically increasing the font weight. It can also cause the font to be remapped, using config.font_replacement_map.

caret - displayable or None link

None を設定するか、displayable を設定します。これは入力ウィジェットでテキスト末尾のカーソルとして使用されます。None の場合は1ピクセルの幅の線がカーソルとして使用されます。

color - color link

The color the text is rendered in. When using a truetype font, the font is rendered in this color. When using an image-based font, white is mapped to this color.

first_indent - int link

段落のテキストの1行目のインデント量を、ピクセル数で指定します。

font - string link

テキストのレンダリングに使用されるフォントの名前の文字列です。

For a truetype font file, this is usually the name of the file containing the font (like "DejaVuSans.ttf"). To select a second font in a collection, this can be prefixed with a number and at sign (like "0@font.ttc" or "1@font.ttc"). For an image-based font, this should be the name used to register the font.

size - int link

スクリーン上のフォントの大きさ。ピクセル数として指定しますが、フォントファイルではこの値について別の解釈をするかもしれません。

italic - boolean link

If true, the text will be rendered in italics. For a truetype font, this usually involves synthetically increasing the font slant. It can also cause the font to be remapped, using config.font_replacement_map.

justify - boolean link

If true, additional whitespace is inserted between words so that the left and right margins of each line are even. This is not performed on the last line of a paragraph.

kerning - float link

カーニングの調整で、各文字の間に追加されるスペースのピクセル数です。(これを負の値にしてスペースを削除することもできます。)

language - string link

複数の行への改行に使用する言語ファミリーを制御します。設定可能な値は:

"unicode" (既定値)

Unicode の改行アルゴリズムを用い、ほとんどの言語に適しています。

"japanese-strict"

日本語テキストの「厳密な」書き方です。小さい仮名文字と長音符の前では改行をしません。

"japanese-normal"

日本語テキストの「一般的な」書き方です。小さい仮名文字、長音符、いくつかのハイフンの前での改行を許可します。

"japanese-loose"

日本語テキストの「ゆるい」書き方です。小さい仮名文字、長音符、反復記号、分割できない文字、リーダー、接頭辞、接尾辞の前での改行を許可します。

"korean-with-spaces"

空白で区切られたハングル文字に使用します。隣接するハングルで改行されることを防ぎます。

"western"

空白以外の場所では改行をしません。ほとんどの言語に適しています。

3つの日本語の改行モードは CSS3 text module から引用しました。

layout - string link

単語が行にどのように割り当てられるかを制御します。設定可能な値は:

"tex" (既定値)

Knuth-Plass の改行アルゴリズムを使用し、最後の行以外のすべての行の長さの違いを最小限に抑えるようにします。

"subtitle"

Knuth-Plass の改行アルゴリズムを使用しますが、すべての行の長さを揃えるようにします。

"greedy"

単語が入るスペースが無いときだけ改行されます。

"nobreak"

改行されません。

line_leading - int link

各行の上に含められるスペースのピクセル数。

line_overlap_split - int link

スローテキストモードで2行にオーバーラップするとき、オーバーラップ用の数多いピクセルは一行目に割り当てられます。一行目の文字の下が欠ける場合に増やしてください。

line_spacing - int link

各行の下に含められるスペースのピクセル数。

min_width - int link

各行の最小幅を設定します。行がこの値よりも短い場合は、text_align によって指定された位置に余白を作り、この長さに調整されます。

newline_indent - boolean link

If true, the first_indent indentation is used after each newline in a string. Otherwise, the rest_indent indentation is used.

outlines - list of tuple of (int, color, int, int) link

これはテキストの後ろに描画される輪郭のリストです。それぞれのタプルで輪郭を指定すると、輪郭が後ろから前にかけて描画されます。

The list contains (size, color, xoffset, yoffset) tuples. Size is the amount the font is expanded by, in pixels. Color is the color of the outline. xoffset and yoffset are the amount the outline is shifted by, in pixels.

外枠は機能的にはフォントに影を落とすためにも使用できます。これを行うには、サイズを0にしてオフセットを0以外にします。

By default, size, xoffset and yoffset are scaled with the text. When given as the absolute type, they are not scaled. For example:

style default:
    outlines [ (absolute(1), "#000", absolute(0), absolute(0)) ]

常に 1 ピクセルの幅を生成します。

Outlines only work with truetype fonts.

rest_indent - int link

段落の2行目以降のインデント量をピクセル数で指定します。

ruby_style - style or None link

None を設定するか、スタイルオブジェクトを設定します。これはルビテキストに使用されるスタイルです。

slow_cps - int or True link

数値の場合、ここで指定された文字数を1秒間に表示します。True のときは、「テキスト速度」設定の速度でテキストを表示します。

slow_cps_multiplier - float link

テキスト速度にこの数値が掛けられます。通常よりも速い速度で話すキャラクターがいるときに使用できます。

strikethrough - boolean link

True のとき、テキストの中央に線が描画されます。

text_align - float link

これは行がテキスト displayable の幅よりも短い場合に使用します。これによってテキストの左側に追加のスペースをどの程度入れるかを指定します。(つまりテキストの位置合わせです。)

0.0 で左寄せのテキスト、0.5 で中央揃えのテキスト、1.0 で右寄せのテキストとなります。

underline - boolean link

If true, an underline will be added to the text.

これは、テキスト中のハイパーリンクに関連する3つの関数のタプルです。

1つ目のアイテムはハイパーリンクのスタイルの関数です。単一のハイパーリンクの引数で呼び出されたとき、例えば style.hyperlink_text のようなハイパーリンクで使用するスタイルを返す必要があります。スタイルオブジェクトは文字列でないことに注意して下さい。

2つ目の引数はハイパーリンクがクリックされた時の関数です。この関数はハイパーリンクがユーザーにクリックされた時に呼び出されます。これが None 以外の値を返した場合、処理全体がその値を返します。

3つ目のアイテムはハイパーリンクのフォーカスの関数です。これはハイパーリンクにフォーカスが当てらてた時にハイパーリンクの引数とともに呼び出され、フォーカスを失った時は None を引数にして呼び出されます。これが None 以外の値を返した場合、処理全体がその値を返します。

vertical - boolean link

If true, the text will be rendered vertically.

hinting - str link

フォントのヒンティングを制御します。これは以下の文字列の一つであるべきです。

"auto"

デフォルトで、フリータイプのオートヒンティングを強制的に使用します。

"bytecode"

フォントのバイトコードのヒンティング情報を使用します。

"none"

フォントのヒンティングしますせん。

ウィンドウスタイルのプロパティー link

ウィンドウプロパティーは、ウィンドウ、フレーム、ボタンの外観を指定するときに使用します。

background - displayable or None link

ウィンドウの背景に使用される displayable。ここに Frame() を指定して、ウィンドウのサイズに合わせてサイズを変更できるようにすることが多いです。

None のときは背景が描画されませんが、他のプロパティーの機能によって背景があるように見せることもできます。

foreground - displayable or None link

None でない場合、ウィンドウの内容に重ねてこの displayable が描画されます。

left_margin - int link

背景の左にある透明なスペースの量を、ピクセル数で指定します。

right_margin - int link

背景の右にある透明なスペースの量を、ピクセル数で指定します。

xmargin - int link

left_margin と right_margin に同じ値を設定することと等価です。

top_margin - int link

背景の上にある透明なスペースの量を、ピクセル数で指定します。

bottom_margin - int link

背景の下にある透明なスペースの量を、ピクセル数で指定します。

ymargin - int link

top_margin と bottom_margin に同じ値を設定することと等価です。

margin - tuple link

二要素のタプルの指定は、 xmargin と ymargin にその二つの要素を設定するのと等価です。四要素のタプルの指定は、 left_margin と top_margin, right_margin, bottom_margin にその四つの要素を設定するのと等価です。

left_padding - int link

背景とウィンドウ内容の左端との間のスペース量を、ピクセル数で指定します。

right_padding - int link

背景とウィンドウ内容の右端との間のスペース量を、ピクセル数で指定します。

xpadding - int link

left_padding と right_padding に同じ値を設定することと等価です。

top_padding - int link

背景とウィンドウ内容の上端との間のスペースの量を、ピクセル数で指定します。

bottom_padding - int link

背景とウィンドウ内容の下端との間のスペースの量を、ピクセル数で指定します。

ypadding - int link

top_padding と bottom_padding に同じ値を設定することと等価です。

padding - tuple link

二要素のタプルの指定は、 xpadding と yapadding にその二つの要素を設定するのと等価です。四要素のタプルの指定は、 left_padding と top_padding, right_padding, bottom_padding にその四つの要素を設定するのと等価です。

size_group - string or None link

None を設定するか、文字列を設定します。Ren'Py は、すべての同じ size_group のウィンドウを同じ大きさでレンダリングします。

ボタンスタイルのプロパティー link

child - displayable or None link

None を設定するか、ボタンの子要素を置き換える displayable を設定します。例えば、insensitive_child を使うと無効なボタンの内容を画像によって置き換えることができ、ボタンがロックされていることを示すことができます。

hover_sound - string link

ボタンがフォーカスされた時に再生されるサウンド。

activate_sound - string link

ボタンがクリックされた時に再生されるサウンド。

mouse - string link

ボタンがフォーカスされた時に使われるマウスのスタイル。これは config.mouse の1スタイルでなければなりません。

focus_mask - multiple link

ボタンのどの部分をフォーカスでき、クリックできるかを制御するためのマスクです。このプロパティーの型によって、解釈のされ方が決まります。

Displayable

displayable の透明以外の領域でボタンがフォーカスされるようになります。

True

ボタン自身が displayable として使用されます (つまり、透明以外の領域でボタンがフォーカスされるようになります)。

callable
If a non-displayable callable (like a function, method, or object with a __call__ method) is given, the function is called with two arguments, the x and y offset from the top-left corner of the displayable. If the function returns true, the displayable is focused.
None

None が与えられた場合、ボタン全体をフォーカスできます。

keyboard_focus - boolean link

If true, the default, this button can be focused using the keyboard focus mechanism, if it can be focused at all. If false, the keyboard focus mechanism will skip this button. (The keyboard focus mechanism is used by keyboards and keyboard-like devices, such as joypads.)

key_events - boolean link

If true, keyboard-generated events are passed to the children of this button. If false, those events are not propagated. In this default style, this is set to true while the button is hovered, and false otherwise.

Setting this to true can be used to propagate keyboard events to an input inside a button, even when the button isn't focused.

バースタイルのプロパティー link

バーは左右の枠がともに描画され、クリックすることによってバーを少し移動することが出来ます。残りのスペースはバーの値を変更できる部分で、左右の量の比はバーの値に比例し、その値は可変範囲の分数となります。

つまみ (thumb) はバーの中央部分の領域で、ユーザーはここをドラッグすることができます。

バーが描画される時、つまみの影が最初に描画されます。次にバーの上下左右の端が描画され、最後にバーそのものが描画されます。

上で述べたバーの端は bar_vertical プロパティーによって変化することに注意して下さい。これが True のときは上下の端に対応し、それ以外のときは左右の端となります。

bar_vertical - boolean link

If true, the bar has a vertical orientation. If false, it has a horizontal orientation.

bar_invert - boolean link

If true, the value of the bar is represented on the right/top side of the bar, rather than the left/bottom side.

bar_resizing - boolean link

If true, we resize the sides of the bar. If false, we render the sides of the bar at full size, and then crop them.

left_gutter - int link

バーの左端の枠の大きさを、ピクセル数で指定します。

right_gutter - int link

バーの右端の枠の大きさを、ピクセル数で指定します。

top_gutter - int link

バーの上端の枠の大きさを、ピクセル数で指定します。

bottom_gutter - int link

バーの下端の枠の大きさを、ピクセル数で指定します。

left_bar - displayable link

バーの左端に使用される displayable。

right_bar - displayable link

バーの右端に使用される displayable。

top_bar - displayable link

バーの上端に使用される displayable。

bottom_bar - displayable link

バーの下端に使用される displayable。

base_bar - displayable link

left_bar/right_bar や top_bar/bottom_bar に使用される displayable です。( これは thumb と共にスライダーやスクロールバーの作成にも使えます。 )

thumb - displayable or None link

None を設定するか、バーの両端の境目に描かれる displayable を設定します。

thumb_shadow - displayable or None link

None を設定するか、バーの両端の境目に描かれる displayable を設定します。

thumb_offset - int link

ピクセル数でのつまみがバーをはみ出す量です。バーの左右が崩れないために、これをピクセル数でつまみの半分に設定しましょう。

mouse - string link

ボタンがフォーカスされた時に使われるマウスのスタイル。これは config.mouse の1スタイルでなければなりません。

unscrollable - string or None link

バーがスクロール不能な時の挙動を制御します(範囲が0に設定されていて、ビューポートが自身よりも小さい displayable を含んでいる場合に限る)。設定可能な値は3つあります:

None

バーを通常通りレンダリングします。

"insensitive"

バーを無効な状態でレンダリングします。これはバーのスタイルを変更し、使用できないことを意味させます。

"hide"

バーが全てレンダリングされることを防ぎます。スペースはバーのために確保されますが、そのスペースの箇所には何も描画されません。

keyboard_focus - boolean link

If true, the default, this button can be focused using the keyboard focus mechanism, if it can be focused at all. If false, the keyboard focus mechanism will skip this button. (The keyboard focus mechanism is used by keyboards and keyboard-like devices, such as joypads.)

ボックススタイルのプロパティー link

これらは、水平または垂直にボックスをレイアウトするときに使用します。

spacing - int link

ボックス内の要素間のスペースをピクセル数で指定します。

first_spacing - int link

None を設定するか、ボックス内の1つ目の要素と2つ目の要素の間のスペースを、ピクセル数で設定します。これは、spacing プロパティーを上書きします。

box_reverse - boolean link

If true, the placement of the items in the box will be reversed. When this is true, a hbox will be filled right-to-left, and a vbox will be filled bottom-to-top. This defaults to false.

box_wrap - boolean link

If true, then boxes will wrap when they reach the end of a line or column. If false (the default), they will extend past the end of the line.

Grid のスタイルプロパティー link

これらは、grid または vgird に使用されます。

spacing - int link

グリッドのセル間のスペースをピクセル数で指定します。

xspacing - int or None link

ピクセル数で、grid のセル間を水平方向に空けます。これは None でなければ spacing プロパティーの設定を受け継ぎます。

yspacing - int or None link

ピクセル数で、grid のセル間を垂直方向に空けます。これは None でなければ spacing プロパティーの設定を受け継ぎます。

Fixed のスタイルプロパティー link

これらは fixed のレイアウトで使用されます。

fit_first - boolean or "width" or "height" link

If true, then the size of the fixed layout is shrunk to be equal with the size of the first item in the layout. If "width", only the width is changed (the fixed will fill the screen vertically). Similarly, "height" only changes the height.

xfit - boolean link

If true, the size of the fixed layout is shrunk horizontally to match the right side of the rightmost child of the fixed.

yfit - boolean link

If true, the size of the fixed layout is shrunk vertically to match the bottom side of the bottommost child of the fixed.

order_reverse - boolean link

If false, the default, the items in the box will be draw first-to-last, with the first item in the box being below the second, and so on. If true, this order will be reversed, and the first item in the box will be above all other items in the box.