GUI カスタマイズガイド

Ren'Py の GUI はデフォルトでも魅力的 (そうであることを望みます) ですが、かなりカスタマイズ可能であり、必要ならば完全に置き換えられます。 このページでは簡単なものから中級レベルのものまで GUI カスタマイズの方法を説明します。

さらに高度なカスタマイズはドキュメントの スタイル ( スタイルプロパティー のリストを含む) や スクリーン ( アクション と 特別な名前のスクリーン を含む ) を参照してください。

ここでは ( gui.rpy ファイルにある) 新しい形式の Ren'Py GUI の使用を前提とします。 ( screens.rpy を使用する) 以前の GUI は、このガイドでは高度な GUI カスタマイズとして扱います。

簡単な GUI のカスタマイズ

最も単純なものを除いて、すべてのビジュアルノベルに影響する GUI カスタマイズが少数あります。これらのカスタマイズでは gui.rpy を編集する必要はありません。これらのカスタマイズは GUI を変更しますが、その外観を劇的に変化させはしません。

サイズと色の変更

GUI の最も簡単な変更は GUI の色とサイズの変更です。 Ren'Py はプロジェウト作成時にユーザーにこれらを決めるよう促しますが、ランチャーの "Change/Update GUI(GUIの変更と更新)" からも変更出来ます。

ランチャーから GUI を変更するとき、 Ren'Py は単にランチャーを変更したいのか、 gui.rpy を更新するかを尋ねます。どちらの選択肢もほとんどの画像ファイルを上書きし、 gui.rpy の更新はそのファイルの変更を失わせます。

このため、他のどのカスタマイズより先にこれをするべきです。

Ren'Py はプロジェクトのデフォルト解像度と使用するカラースチームを選択するよう求めます。一旦選択すると GUI を選択に合わせて更新します。

Options.rpy

options.rpy には GUI に使用されるいくつもの変数があります。

config.name

ゲームのタイトルです。これはウィンドウタイトルや他のゲームタイトルを必要とする GUI で使用されます。

gui.show_name

メインメニューのタイトルとバージョンナンバーを非表示にするなら、これを False にしてください(タイトルは メインメニュー画像に焼き込まれます)。

config.version

ゲームのバージョンを与える文字列です。これはデフォルト GUI の様々な場所でユーザーに表示されます。そのほかにもエラーメッセージや traceback にも使用されます。

gui.about

about スクリーンに表示される追加のテキストです。複数行のクレジットが欲しければ、\n\nを使用して段落を分けられます。

こちらは、これらの定義の例です

define config.name = _('Old School High School')

define gui.show_name = True

define config.version = "1.0"

define gui.about = _("Created by PyTom.\n\nHigh school backgrounds by Mugenjohncel.")

トリプルクウォートを使用して gui.about を定義すると行末がそのま反映され便利です。

define gui.about = _("""\
Created by PyTom.

High school backgrounds by Mugenjohncel.""")

ゲーム、メインメニュー背景画像

GUI に使用される画像は game/gui ディレクトリーで見付けられます。ランチャーの "Open Directory: gui" を選択すると開けます。以下は関連するファイルです :

gui/main_menu.png

メインメニューのすべてのスクリーンで背景に使用される画像ファイル

gui/game_menu.png

ゲームメニューのすべてのスクリーンで背景に使用される画像ファイル

gui/main_menu.png を置き換えただけのメインメニューです。

about スクリーンはゲームメニュー(背景に gui/game_menu.png を使用)やメインメニュー(背景に gui/main_menu.png を使用)の一部です。共に同じ画像を設定できます。

Window Icon

ウィンドウアイコンはアプリケーション起動で(ウィンドウズのタスクバーやマックのドックのような場所に)表示されるアイコンです。

ウィンドウアイコンは gui/window_icon.png の置き換えで変更可能です。

これはゲーム起動で使用されるアイコンのみを変更することに注意してください。ウォンドウズの .exe や マックの app に使用されるアイコンを変更するには、 build documentation を参照してください。

中級 GUI カスタマイズ

次に、中級レベルの GUI カスタマイズを示します。中級では、ゲームに使用される色とフォント、画像を変更できます。一般的に中級カスタマイズは同じ場所にボタンやバーがあるほとんど同じスクリーンを保ちますが、新しい機能を追加するスクリーンの修正も可能です。

これらの変更の多くは gui.rpy の変数の編集を含みます。例えば、セリフのフォントサイズを大きくするには次の行を見付け

define gui.text_size = 22

例えば以下のように変更します。

define gui.text_size = 20

デフォルト値がドキュメントと違うはことよくあるので注意してください。デフォルト値は選択したゲームのサイズや色によって変更され、このファイルの値は広大な GUI カスタマイズの1例です。知りたい定義と変数で gui.rpy を検索するのがベストです(例 define gui.font_size) 。

下記の調整のいくつかは、部分的または完全に画像ファイルに影響します。そのためランチャーから "Change GUI" を選択して、画像ファイルを再生成して更新するまで変更は影響しません( これによってすでに変更した画像ファイルが上書きされることに気を付けてください)。

この方法で gui.rpy をカスタマイズする前にゲームを完成させるとよいでしょう。 古い gui.rpy は新しい Ren'Py で動作しますが、新しい gui.rpy には古いバージョンに欠けている機能と修正があるでしょう。最初にカスタマイズをすると、そのような改善の利点を利用するのが難しくなります。

台詞

台詞がプレイヤーにどう表示されるかを変更する、比較的簡単なカスタマイズがいくつかあります。一つ目はテキストボックスの変更です。

gui/textbox.png

テキストウィンドウの背景画像で、say スクリーンの一部として表示されます。これはゲームの最大幅であるべきですが、テキストは中央の 60% にのみ表示され、20% は両サイドの境界になります。

さらに、台詞を変更するいくつかの変数があります。

define gui.text_color = "#402000"

台詞の色を変更します。

define gui.text_font = "ArchitectsDaughter.ttf"

台詞、選択肢、入力、その他ゲーム内テキストのフォントを設定します。フォントファイルはゲームディレクトリ内にあるべきです。

define gui.text_size = 33

台詞のサイズを設定します。これは割り当てられた空間に選択したフォントがフィットするよう調整する必要があります。

define gui.name_text_size = 45

キャラクター名のサイズを設定します。

デフォルトでは、キャラクター名はアクセントカラーを使用します。色はキャラクター定義時に簡単に変更できます。

define e = Character("Eileen", who_color="#104010")

テキストボックス画像の例

テキストボックス画像と上述の様々な変数によってカスタマイズされた台詞

選択肢

choice スクリーンはプレイヤーに選択肢を表示するために menu ステートメントで使用されます。比較的簡単に choice スクリーンをカスタマイズするいくつかの方法があります。一つ目は二つの画像ファイルです :

gui/button/choice_idle_background.png

フォーカスされていない選択肢ボタンの背景に使用されます。

gui/button/choice_hover_background.png

フォーカスされた選択肢ボタンの背景に使用されます。

デフォルトでは、テキストはこれら画像の中央 75% に配置されます。選択肢ボタンテキストの色を変更する変数もいくつかあります。

define gui.choice_button_text_idle_color = '#888888'

フォーカスされていない選択肢ボタンテキストの色です。

define gui.choice_button_text_hover_color = '#0066cc'

フォーカスされた選択肢ボタンテキストの色です。

画像サイズを変更する必要がない単純なカスタマイズには、これらで十分なはずです。さらに複雑なカスタマイズには後述のボタンの項をチェックしてください。

gui/button/idle_background.png 画像の例。

gui/button/choice_hover_background.png 画像の例。

上述の画像と変数を使用してカスタマイズした choice スクリーンの例

オーバーレイ画像

オーバーレイ画像のペアもあります。これらは背景画像を暗く、または明るくして他のユーザーインターフェースを読み易くします。これらの画像は overlay ディレクトリーにあります。

gui/overlay/main_menu.png

オーバーレイはメインメニュースクリーンで使用されます。

gui/overlay/game_menu.png

ロード、セーブ、設定、アバウト、ヘルプのようなゲームメニュースクリーンで使用されるオーバーレイです。このオーバーレイは該当のスクリーンで選択され、メインメニューでも使用されます。

gui/overlay/confirm.png

confirm スクリーンで、背景を暗くするのに使用されるオーバーレイです。

こちらはオーバーレイ画像の例で、オーバーレイ画像を追加したゲームの外観です。

gui/overlay/main_menu.png 画像の例。

gui/overlay/game_menu.png 画像の例

オーバーレイ変更後のメインメニューです。

オーバーレイ変更後のゲームメニュー

色、フォント、サイズ

テキストの色、フォント、サイズを変更する GUI 変数がいくつかあります。

These variables should generally be set to hexadecimal color codes, which are are strings of the form "#rrggbb" (or "#rrggbbaa" to specify an alpha component), similar to color codes used by web browsers. For example, "#663399" is the code for a shade of purple. There are many tools online that let you create HTML color codes, such as this one.

ドキュメントで上述された gui.text_color や gui.choice_idle_color, gui.choice_hover_color に加えて、以下の変数があります。 :

define gui.accent_color = '#000060'

タイトルやラベルを含む、GUI の多くの場所で使用されるアクセントカラーです。

define gui.idle_color = '#606060'

フォーカスまたは選択されていないときに、ほとんどのボタンに使用される色です。

define gui.idle_small_color = '#404040'

非フォーカス時の ( セーブスロットのデータや名前、クイックメニューボタンのような) スモールテキストに使用される色です。この色にはより小さなフォントサイズを補強するため、 idle_color より少し明るいか暗い色がよく使用されます。

define gui.hover_color = '#3284d6'

ボタンのテキストやスライダーやスクロールバーのつまみのような GUI 要素がフォーカスされているとき使用される色です。

define gui.selected_color = '#555555'

選択されたボタンのテキストに使用される色です(これは hover や idle の色より優先度が高いです)。

define gui.insensitive_color = '#8888887f'

ユーザーの入力が無効なボタンのテキストに使用される色です(例: ロールバックができないときのロールバックボタン)。

define gui.interface_text_color = '#404040'

help や about スクリーンのようなゲームインターフェースの静的テキストに使用される色です。

define gui.muted_color = '#6080d0'

define gui.hover_muted_color = '#8080f0'

値や表示位置を表さない無効なバーやスクロールバー、スライダーに使用されるカラーです(これらは画像生成時のみ使用され、ランチャーで画像が再生成するまでは効果がありません)。

gui.text_font に加えて、以下の変数でテキストに使用するフォントを選択します。これらのフォントは game ディレクトリに配置されるべきです。

define gui.interface_text_font = "ArchitectsDaughter.ttf"

メインメニューやゲームメニュー、ボタンのようなユーザーインターフェースに使用されるテキストのフォントです。

define gui.system_font = "DejaVuSans.ttf"

例外メッセージや shift+A のアクセシビリティーメニューのようなシステムテキストに使われるフォントです。これは ASCII とそのゲームが翻訳された言語の両方を扱えるべきです。

define gui.glyph_font = "DejaVuSans.ttf"

スキップインディケーターの矢印のような特定の標識に使用されるフォントです。 DejaVuSans はこれらの標識のデフォルトで、自動的に Ren'Py のゲームに含まれます。

gui.text_size や gui.name_text_size に加えて、以下の変数がテキストサイズを制御します。

define gui.interface_text_size = 36

ユーザーインターフェースの静的なテキストのサイズで、ボタンテキストのデフォルトサイズでもあります。

define gui.label_text_size = 45

ユーザーインターフェースのセクションラベルのサイズです。

define gui.notify_text_size = 24

通知テキストのサイズです

define gui.title_text_size = 75

ゲームタイトルのサイズです。

テキストの色、フォント、サイズのカスタマイズ後のゲームメニューです。

Borders

ボタンやバーのような、 Border オブジェクトを使用して設定される拡大可能な背景を持つ GUI 要素がいくつかあります。どのようにボタンやバーをカスタマイズするかを語る前に、これがどのように働くかを語ります。

Borders は Frame() displayable に指定されます。 フレームは一つの画像を受け取ってそれを四隅と四つの側面、中央の九つのパーツに分けます。隅は常に同じサイズのままで、左右両サイドは縦に伸ばされ、上下端は横に伸ばされ、中央は両方向に伸ばされます。

Borders オブジェクトは左上右下の順に各境界のサイズを指定します。以下のボーダー画像が :

次の Borders で使用されると

Borders(40, 40, 40, 40)

結果は次の通りです。

Child はサイズを変えるので、背景として使用できます。

Border オブジェクトには child をボーダーに重ねられるネガティブパディングを含むパディングも指定できます。例えば、これらの Borders は

Borders(40, 40, 40, 40, -20, -20, -20, -20)

child に両サイドと重なることを許可します。この重なりにより、Borders 自身のスペースが狭くなり、結果が小さくなるので注意してください。

Borders はスケーリングではなくタイリング ( 拡大縮小ではなくタイルのように敷き詰める ) でも使用できます。これは変数で指定され、次の結果となります。

これらの例の画像は、何が起きるかを示すために少し歪ですが、実際はこのシステムはかなりよい結果になります。これは Frame displayable がフレームウィンドウの背景として使用された場合です。

これらのフレームウィンドウは二つの方法でカスタマイズできます。一つ目は背景画像ファイルの変更です。 :

gui/frame.png

フレームウィンドウの背景として使用される画像です。

二つ目は設定変数によるものです。

define gui.frame_borders = Borders(15, 15, 15, 15)

Borders がフレームウィンドウに適用されます。

define gui.confirm_frame_borders = Borders(60, 60, 60, 60)

Borders が confirm スクリーンのフレームに使用されます。

define gui.frame_tile = True

True、 なら confirm スクリーンのサイドと中央はタイリングされます。False なら、スケーリングされます。

gui/frame.png 画像の例です。

上記のカスタマイズ後の confirm スクリーンです。

Buttons

Ren'Py のユーザーインターフェースには多くのボタンがあり、ボタンは様々なサイズと目的で使用されます。以下は様々な種類のボタンです。 :

button

基本的なボタン ユーザーインターフェースのナビゲーションで使用されます。

choice_button

選択肢の選択肢ボタンに使用されます。

quick_button

ゲームメニューに迅速にアクセスできるよう、ゲーム中に表示されるボタンです。

navigation_button

main, game スクリーンで使用されるボタンで、ゲームを開始します。

page_button

load, save スクリーンでページを切り替えるためのボタンです

slot_button

サムネイルとセーブ時間、任意のセーブ名を含んだファイルスロットを表示するボタンです。詳しくは後述します。

radio_button

preferences スクリーンで複数の選択肢を設定するボタンです。

check_button

preferences スクリーンで設定をトグルするボタンです。

test_button

preferences スクリーンで音声をテスト再生するボタンです。これは水平スライダーと同じ高さであるべきです。

help_button

プレイヤーがヘルプを求めるときのボタンです。

confirm_button

confirm スクリーンで yes または no を選択するボタンです。

nvl_button

NVL モードで選択肢に使用するボタンです。

以下の画像ファイルがあると、ボタンの背景を設定するために使用されます。

gui/button/idle_background.png

フォーカスされてないときのボタン背景の画像です。

gui/button/hover_background.png

フォーカスされているときのボタン背景の画像です。

gui/button/selected_idle_background.png

選択されているがフォーカスされてないときのボタン背景の画像です。これは任意で、存在すれば idle_background.png に優先して使用されます。

gui/button/selected_hover_background.png

選択されていてフォーカスされているときのボタン背景の画像です。これは任意で、存在すれば hover_background.png に優先して使用されます。

より具体的な背景が、接頭辞によって各ボタンに指定できます。例えば、 gui/button/check_idle_background.png はフォーカスされていないチェックボタンに使用されます。

オプションの選択状態を示すため、四つの画像ファイルがラジオボタンやチェクボタンの前掲に使用されます。

gui/button/check_foreground.png, gui/button/radio_foreground.png

これらの画像はチェックまたはラジオボタンが選択されてないとき使用されます。

gui/button/check_selected_foreground.png, gui/button/radio_selected_foreground.png

これらの画像はチェックまたはラジオボタンが選択されているとき使用されます。

以下の変数はボタンのプロパティーを設定するために使用されます。 :

define gui.button_width = None

define gui.button_height = 64

ボタンの幅と高さをピクセルで指定します。 None なら、サイズは自動的にボタン内のテキストのサイズに応じて決定され、 borders は以下が指定されます。

define gui.button_borders = Borders(10, 10, 10, 10)

左上右下の順にボタンを囲む borders です。

define gui.button_tile = True

True ならボタンのサイドと中央はサイズの増減に合わせてタイリングされます。 False ならサイドと中央はスケーリングされます。

define gui.button_text_font = gui.interface_font

define gui.button_text_size = gui.interface_text_size

ボタンテキストのフォントとサイズです。

define gui.button_text_idle_color = gui.idle_color

define gui.button_text_hover_color = gui.hover_color

define gui.button_text_selected_color = gui.accent_color

define gui.button_text_insensitive_color = gui.insensitive_color

様々な状態でのボタンテキストの色です。

define gui.button_text_xalign = 0.0

ボタンテキストの水平方向のアラインです。0.0 は左揃え、0.5 は中央、1.0 が右揃えです。

define gui.button_image_extension = ".png"

ボタン画像のための拡張です。これを .webp に変更して WEBP ボタン画像を png の代わりに使用出来ます。

これらの変数にはボタンの種類ごとに接頭辞を付けて、特定の種類のボタンに対するプロパティーを設定できます。例えば、 gui.choice_button_text_idle_color はフォーカスされていない選択肢ボタンの色を変更します。

例えば、サンプルゲームではこれらの変数をカスタマイズします。

define gui.navigation_button_width = 290

ナビゲーションボタンの幅を設定します。

define gui.radio_button_borders = Borders(40, 10, 10, 10)

define gui.check_button_borders = Borders(40, 10, 10, 10)

ラジオまたはチェックボタンの borders を設定し、チェックマークのために左にスペースを空けています。

こちらはどのようにスクリーンをカスタマイズできるかの例となります。

gui/button/idle_background.png 画像の例。

gui/button/hover_background.png の例です。

gui/button/check_foreground.png や gui/button/radio_foreground.png として使用できる画像の例です。

gui/button/check_selected_foreground.png や gui/button/radio_selected_foreground.png として使用できる画像の例です。

このセクションで述べたカスタマイズを施した preferences スクリーンです。

セーブスロットボタン

load, save スクリーンでは、サムネイルといつセーブされたかの情報を表示するスロットボタンを使います。以下の変数はセーブスロットのサイズをカスタマイズするにはかなり便利です。

define gui.slot_button_width = 414

define gui.slot_button_height = 309

セーブスロットボタンの幅と高さ。

define gui.slot_button_borders = Borders(15, 15, 15, 15)

各セーブスロットボタンに適用される Borders です。

config.thumbnail_width = 384 と config.thumbnail_height = 216 はセーブサムネイルの幅と高さを設定します。これらは config 名前空間にあり、 gui 名前空間にはないことに注意してください。これらはそのセーブファイルがセーブ、ロードされないと効果がありません。

define gui.file_slot_cols = 3

define gui.file_slot_rows = 2

セーブスロットのグリッド行列の数です。

これらはセーブスロットで使用される背景画像です。

gui/button/slot_idle_background.png

フォーカスされていないセーブスロットの背景画像です。

gui/button/slot_hover_background.png

フォーカスされているセーブスロットの背景画像です。

画像例です。 :

gui/button/slot_idle_background.png の例です。

gui/button/slot/slot_hover_background.png の例です。

このセクションで掲示されたカスタマイズを適用した後の save スクリーン

スライダー

スライダーは preferences スクリーンでプレイヤーが設定の値を調整するのに使用されるバーです。デフォルトでは、 GUI は水平スライダーのみを使用しますが、垂直スライダーも使用できます。

スライダーは以下の画像でカスタマイズできます。 :

gui/slider/horizontal_idle_bar.png, gui/slider/horizontal_hover_bar.png, gui/slider/vertical_idle_bar.png, gui/slider/vertical_hover_bar.png

idle 状態とフォーカス状態の垂直または水平バーの背景に使用される画像です。

gui/slider/horizontal_idle_thumb.png, gui/slider/horizontal_hover_thumb.png, gui/slider/vertical_idle_thumb.png, gui/slider/vertical_hover_thumb.png

バーの移動可能な部分、つまみに使用される画像です。

以下の変数も使用できます。 :

define gui.slider_size = 64

水平スライダーの長さと垂直スライダーの幅です。

define gui.slider_tile = True

True ならスライダーのバーを含むフレームはタイリングされます。 False なら、スケーリングされます。

define gui.slider_borders = Borders(6, 6, 6, 6)

define gui.vslider_borders = Borders(6, 6, 6, 6)

バー画像のフレームに使用されられる borders です。

こちらは、水平スライダーのカスタマイズ例です。

gui/slider/horizontal_idle_bar.png の例

gui/slider/horizontal_hover_bar.png 画像の例

gui/slider/horizontal_idle_thumb.png の例

gui/slider/horizontal_hover_thumb.png の例

このセクションで掲示されたカスタマイズ適用後の preferences スクリーンです。

スクロールバー

スクロールバーは viewport をスクロールするのに使用されるバーです。 GUI において、スクロールバーが使用されるもっとも確実な場所は history スクリーンですが、他のスクリーンでも同様に垂直スクロールバーを使用できます。

スライダーは以下の画像でカスタマイズできます。 :

gui/scrollbar/horizontal_idle_bar.png, gui/scrollbar/horizontal_hover_bar.png, gui/scrollbar/vertical_idle_bar.png, gui/scrollbar/vertical_hover_bar.png

idle 状態とフォーカス状態の垂直または水平バーの背景に使用される画像です。

gui/scrollbar/horizontal_idle_thumb.png, gui/scrollbar/horizontal_hover_thumb.png, gui/scrollbar/vertical_idle_thumb.png, gui/scrollbar/vertical_hover_thumb.png

バーの移動可能な部分、つまみに使用される画像です。

以下の変数も使用できます。 :

define gui.scrollbar_size = 24

水平スクロールバーの高さと、垂直スクロールバーの幅です。

define gui.scrollbar_tile = True

True ならスクロールバーのバーを含むフレームはタイリングされます。 False なら、スケーリングされます。

define gui.scrollbar_borders = Borders(10, 6, 10, 6)

define gui.vscrollbar_borders = Borders(6, 10, 6, 10)

バー画像のフレームに使用されられる borders です。

define gui.unscrollable = "hide"

バーがスクロールできないときどうするかを制御します。 "hide" はバーを非表示にし、 None は表示し続けます。

こちらは垂直スクロールバーのカスタマイズ例です。

gui/scrollbar/vertical_idle_bar.png の例

gui/scrollbar/vertical_hover_bar.png の例

gui/scrollbar/vertical_idle_thumb.png の例

gui/scrollbar/vertical_hover_thumb.png の例

このセクションで掲示されたカスタマイズ後の history スクリーンです。

バー

簡単なバーはプレイヤーに数字を表示するのに使用されます。それらは GUI では使用されませんが、ユーザー定義スクリーンでは使用できます。

バーは以下の画像を編集してカスタマイズできます。 :

gui/bar/left.png, gui/bar/bottom.png

水平、垂直バーの、最大状態の画像です。

gui/bar/right.png, gui/bar/top.png

水平、垂直バーの、最大状態の画像です。

バーを制御する変数もあります。

define gui.bar_size = 64

水平バーの高さと垂直バーの幅です。

define gui.bar_tile = False

True ならバー画像はタイリングされます。 False なら、画像はスケーリングされます。

define gui.bar_borders = Borders(10, 10, 10, 10)

define gui.vbar_borders = Borders(10, 10, 10, 10)

バー画像を含むフレームに使用される Borders です。

こちらは、水平バーのカスタマイズ例です。

gui/bar/left.png の例

gui/bar/right.png の例

例にあるバーを定義したスクリーンです。

スキップと通知

skip, notify スクリーンは、共にメッセージを表示するスクリーンです。どちらも背景画像を使用します。

gui/skip.png

スキップインディケーターの背景です。

gui/notify.png

通知インディケーターの背景です。

これらを制御する変数です。 :

define gui.skip_frame_borders = Borders(24, 8, 75, 8)

skip スクリーンに使用されるフレームの borders です。

define gui.notify_frame_borders = Borders(24, 8, 60, 8)

notify スクリーンに使用されるフレームの borders です。

define gui.skip_ypos = 15

スキップインディケーターの垂直位置で、ウィンドウの頂点からのピクセル数です。

define gui.notify_ypos = 68

通知インディケーターの垂直位置で、ウィンドウの頂点からのピクセル数です。

こちらは、 skip, notify スクリーンのカスタマイズ例です。

gui/skip.png の例

gui/notify.png の例

アクションに対する skip, notify スクリーン

台詞

上述の簡単なカスタマイズに加えて、プレイヤーへの台詞の表示の仕方を制御する方法がいくつかあります。

テキストボックス

テキストボックス (またはウィンドウ) は台詞が表示されるウィンドウです。 gui/textbox.png の変更に加えて、以下の変数でテキストボックスの表示を制御します。

define gui.textbox_height = 278

テキストボックスの高さです。これは gui/textbox.png の高さと同じであるべきです。

define gui.textbox_yalign = 1.0

ボタンテキストの垂直方向の位置です。 0.0 が頂点、0.5 は中央、1.0 が底部です。

名前とネームボックス

キャラクター名は gui/namebox.png を背景に使用してフレーム内に配置されます。さらに、名前の表示を制御する変数があります。ネームボックスは話しているキャラクターが名前を持つとき (" " のような空の名前も含みます ) のみ表示されます。

define gui.name_xpos = 360

define gui.name_ypos = 0

名前とネームボックスの水平、垂直方向の位置です。これらは通常テキストボックスの左または上からのピクセル数です。 0.5 に設定するとテキストボックス(下記参照)の名前は中央になります。これらの数字はマイナスにもなります。例えば、 gui.name_ypos を -22 にするとテキストボックスの上 22 ピクセルに配置されます。

define gui.name_xalign = 0.0

キャラクター名の水平方向のアラインです。これは 0.0 で左揃え、 0.5 で中央、 1.0 で右揃えとなります(大体は 0.0 か 0.5 です)。 これは gui.name_xpos に対するキャラクター名の相対位置と xpos とともにネームボックスのアラインされる側面を選択の両方に使用されます。

define gui.namebox_width = None

define gui.namebox_height = None

define gui.namebox_borders = Borders(5, 5, 5, 5)

define gui.namebox_tile = False

これらの変数はネームボックスを含むフレームの表示を制御します。

台詞

define gui.dialogue_xpos = 402

define gui.dialogue_ypos = 75

実際の台詞の水平、垂直位置です。これらは通常テキストボックスの左、または上からのピクセル数です。 0.5 に設定すると テキストボックスの中央に台詞が来ます。(以下を参照)

define gui.dialogue_width = 1116

台詞行の最大幅をピクセルで指定する変数です。台詞がこの幅に到達すると、Ren'Py によって折り返されます。

define gui.dialogue_text_xalign = 0.0

水平方向の台詞テキストのアラインです。 0.0 は左揃え、 0.5 は中央、 1.0 は右揃えです。

例

キャラクター名を中央によせるなら以下を使います。

define gui.name_xpos = 0.5
define gui.name_xalign = 0.5

台詞テキストを中央にするなら以下を使います。

define gui.dialogue_xpos = 0.5
define gui.dialogue_text_xalign = 0.5

サンプルゲームでは、これらのステートメントを使用して中央寄せのネームボックスを設定しています。

define gui.namebox_width = 300
define gui.name_ypos = -22
define gui.namebox_borders = Borders(15, 7, 15, 7)
define gui.namebox_tile = True

gui/overlay/main_menu.png の例

上述の設定でのカスタマイズ例です。

ヒストリー

history スクリーンの表示を制御する変数がいくつかあります。

config.history_length 変数は Ren'Py が履歴に保持する台詞のブロック数を設定し、デフォルトでは 250 です。

define gui.history_height = 210

履歴のピクセル数での高さです。これを None にすると、エントリの高さが可変になりますが、パフォーマンスは低下します。これが None なら、 config.history_length はかなり小さ目にする必要があります。

define gui.history_spacing = 0

履歴間のスペースのピクセル単位の量です。

define gui.history_name_xpos = 0.5

define gui.history_text_xpos = 0.5

名前と台詞の水平位置です。これらはエントリの左側面からのピクセル数で、 0.5 なら中央です。

define gui.history_name_ypos = 0

define gui.history_text_ypos = 60

名前と台詞の、エントリの上端からのピクセル数での垂直位置です。

define gui.history_name_width = 225

define gui.history_text_width = 1110

名前と台詞のピクセル数での幅です。

define gui.history_name_xalign = 0.5

define gui.history_text_xalign = 0.5

これはテキストと xpos でアラインされているテキストの側面のアラインを制御します。 0.0 なら左揃え、 0.5 なら中央、 1.0 なら右揃えです。

上述のカスタマイズがされた history スクリーン

NVL

nvl スクリーンは NVL モードで台詞を表示します。設定方法はいくつかありますが、一つ目は NVL モードの背景画像をカスタマイズすることです。 :

gui/nvl.png

NVL モードで使用される背景画像です。これはゲームウィンドウと同じサイズであるべきです。

NVL モードのテキスト表示をカスタマイズするのに使用する変数もいくつかあります。

define gui.nvl_borders = Borders(0, 15, 0, 30)

NVL モード背景の borders です。背景はフレームではないので、これは NVL モードを詰め込んで、スクリーンの側面に押し寄せるのを防ぐためにのみ使用されます。

define gui.nvl_height = 173

NVL モードの一つのエントリの高さです。これを固定された高さに設定すると、一度に特定数のエントリを表示する、ページ分けのない NVL モードがつくれます。これを None に設定すると、要素は可変サイズになります。

define gui.nvl_spacing = 15

NVL モード選択肢間と gui.nvl_height が None のときの要素間のスペースです。

define gui.nvl_name_xpos = 0.5

define gui.nvl_text_xpos = 0.5

define gui.nvl_thought_xpos = 0.5

キャラクター名と台詞テキスト、ナレーションテキストの、要素の左端からの相対位置です。これはピクセル数で、 0.5 なら要素の中央です。

define gui.nvl_name_xalign = 0.5

define gui.nvl_text_xalign = 0.5

define gui.nvl_thought_xalign = 0.5

テキストのアラインです。これはテキストのアラインと、xpos に配置されるテキストの側面を制御します。これが 0.0 なら左揃え、 0.5 なら中央、 1.0 なら右揃えです。

define gui.nvl_name_ypos = 0

define gui.nvl_text_ypos = 60

define gui.nvl_thought_ypos = 0

キャラクター名と台詞テキスト、ナレーションテキストの、要素の上端からのピクセル数での相対位置です。

define gui.nvl_name_width = 740

define gui.nvl_text_width = 740

define gui.nvl_thought_width = 740

各種テキストのピクセル数での幅です。

define gui.nvl_button_xpos = 0.5

define gui.nvl_button_xalign = 0.5

NVL モード選択肢ボタンの位置とアラインです。

Ren'Py はデフォルトでは NVL モードを使用しません。 NVL モードキャラクターの使用や script.rpy でいくつかの変数の定義で実行されます。

define e = Character("Eileen", kind=nvl)
define narrator = nvl_narrator
define menu = nvl_menu

こちらは上述の設定がされた NVL screen の例です。

gui/overlay/main_menu.png の例

上述の設定でのカスタマイズ例です。

テキスト

ほとんどのテキストは GUI 変数を使用してカスタマイズできます。変数は以下のものが使用されます。 :

define gui.kind_text_font

存在すれば、テキストに使用されるフォントです。

define gui.kind_text_size

存在すれば、テキストのサイズです。

define gui.kind_text_color

存在すれば、テキストの色です。

その他の テキストスタイルプロパティー も同様に設定できます。例えば、 gui.kind_text_outlines は outlines プロパティーを設定します。

kind 接頭辞は省略され、テキストのデフォルトの外観をカスタマイズします。 kind 以外なら、上述、または以下のボタンの一つです :

interface

ゲームインターフェース外のデフォルトテキストです。

input

テキストインプットウィジェットのテキストです。

input_prompt

テキストインプットのプロンプト部分です。

label

装飾ラベルです。

prompt

プレイヤーに対する確認プロンプトです。

name

キャラクター名です。

dialogue

台詞です。

notify

通知テキストです。

例 :

define gui.dialogue_text_outlines = [ (0, "#00000080", 2, 2) ]

台詞テキストの右下に影を落とします。

翻訳と GUI 変化

gui 名前空間は特別で、初期化後、 translate python ブロックの前に保存されます。これにより translate python ブロックで GUI 変数を変更して、第二言語に反映させられます。例えば、以下のコードはデフォルトのテキストフォントとサイズを変更します。

translate japanese python:
    gui.text_font = "MTLc3m.ttf"
    gui.text_size = 24

翻訳が気を付けるべき問題が一つあり、それは gui.rpy のどこかで、ある変数に別の値を代入することです。例えば、デフォルトの gui.rpy に以下があり :

define gui.interface_text_font = "DejaVuSans.ttf"

後に次があるとします。

define gui.button_text_font = gui.interface_text_font

これらのステートメントの両方が translate ブロックの前に実行されるので、両変数が変更される必要があります。

translate japanese python::

    define gui.interface_text_font = "MTLc3m.ttf"
    define gui.button_text_font = "MTLc3m.ttf"

二つ目のステートメントがなければ、 DejaVuSans がまだ使用されます。

高度なカスタマイズ

さらに高度なカスタマイズが screeens.rpy のすべての削除や置き換えによって可能です。ここでは一部分から始めます。

スタイル

スタイル と スタイルプロパティー は displayables の表示を制御します。何のスタイルを displayable が使用しているか知るには、それをマウスで触れて、shift+I を押してください。これにより、スタイル名を表示するスタイルインスペクターが起動されます。スタイル名が分かれば、 style ステートメントを使用してカスタマイズが出来ます。

例えば、明るい赤いアウトラインを台詞テキストに追加したいなら、テキストにマウスを合わせて、 shift+I を押し、そのスタイルが say_dialogue と名付けられていることを調べます。そしたら、 (screens.rpy の終端や options.rpy のどこかに ) style ステートメントを追加します。

style say_dialogue:
    outlines [ (1, "#f00", 0, 0 ) ]

多くのカスタマイズが style ステートメントの使用で可能になります。

ナビゲーションスクリーン

次のレベルのカスタマイズはスクリーンの変更です。スクリーンに関する詳細は スクリーンとスクリーン言語 と Screen Actions, Values および Functions のセクションにあります。

最も重要なスクリーンのひとつは navigation スクリーンで、メインメニューとゲームメニューに対するナビゲーションの両方を提供します。このスクリーンを編集して、それらの一つまたは、両方にボタンをさらに追加できます。例えば、 navigation スクリーンを以下のように変更します。

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            textbutton _("Start") action Start()

            textbutton _("Prologue") action Start("prologue")

        else:

            textbutton _("Codex") action ShowMenu("codex")

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")

        textbutton _("Preferences") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        textbutton _("Extras") action ShowMenu("extras")

        if renpy.variant("pc"):

            textbutton _("Help") action ShowMenu("help")

            textbutton _("Quit") action Quit(confirm=not main_menu)

メインメニューから prologue スクリーンや、ゲームメニューから codex スクリーン、両方のスクリーンからの extra スクリーンへのアクセスを追加します。

ゲームメニュースクリーン

カスタマイズされたゲームメニューも作成可能です。これらのスクリーンは game_menu スクリーンを使用して、タイトルやスクロール可能な viewport を表示します。カスタマイズされた簡単なゲームメニューです。

screen codex():

    tag menu

    use game_menu(_("Codex"), scroll="viewport"):

        style_prefix "codex"

        has vbox:
            spacing 20

        text _("{b}Mechanical Engineering:{/b} Where we learn to build things like missiles and bombs.")

        text _("{b}Civil Engineering:{/b} Where we learn to build targets.")

関数の codex はより推敲される必要があります。

"tag menu" の行に注目してください。この行は重要で、 codex が表示されるとき、他のメニュースクリーンを非表示します。これがないと、他の メニュースクリーンから切り替えるのが困難となります。

クリック待ちスクリーン

だれもを望むスクリーンはクリック待ちのスクリーンです。これはテキストが表示を完了すると表示されるスクリーンです。こちらは簡単な例となります。 :

screen ctc(arg=None):

    frame:
        at ctc_appear
        xalign .99
        yalign .99

        text _("(click to continue)"):
            size 18

transform ctc_appear:
    alpha 0.0
    pause 5.0
    linear 0.5 alpha 1.0

この ctc スクリーンは 5 秒後にフレームを表示する transform を使用します。CTC のアニメーションを数秒遅らせて、Ren'Py に画像を読み込ませる時間が与えるとよいでしょう。

完全な GUI 置き換え

上級開発者は :file`screeens.rpy` の 一部またはすべてを置き換えられます。このとき、 gui.rpy の一部またはすべての内容が余分となります。 gui.init() を呼び出して、スタイルをリセットするとよいかもしれません。 特別な名前のスクリーン の一部またはすべてを含むことは、プレイヤーが Ren'Py のすべての機能にアクセスできるようになるためよいでしょう。

こちらも参照してください。

GUI についての詳細は Advanced GUI を参照してください。

非互換の GUI の変更

GUI の変更のため、時折変数のいくつかが名前を変えます。これらの変更は GUI が再生成されるときのみ影響します。そのときまで、更新された Ren'Py でゲームは古い変数名を使用し続けます。

6.99.12.3

• gui.default_font -> gui.text_font

• gui.name_font -> gui.name_text_font

• gui.interface_font -> gui.interface_text_font

• gui.text_xpos -> gui.dialogue_xpos

• gui.text_ypos -> gui.dialogue_ypos

• gui.text_width -> gui.dialogue_width

• gui.text_xalign -> gui.dialogue_text_xalign