This page is out of date

You've reached a page on the Ren'Py wiki. Due to massive spam, the wiki hasn't been updated in over 5 years, and much of the information here is very out of date. We've kept it because some of it is of historic interest, but all the information relevant to modern versions of Ren'Py has been moved elsewhere.

Some places to look are:

Please do not create new links to this page.


テキストボックススタイルのカスタマイズ

テキストボックスのカスタマイズを説明する前に、それをデザインする必要があります。 最も簡単な方法は画像編集ソフトで、あるテキストボックスを真似することです。 たとえかなり面倒な作業でも正確に望む外観でテキストを表示しましょう。繰り返し使えるモデルになります。

保存した画像をRen'Pyに統合するには2つの方法があります。 Frameを使用して望む大きさに調整するか、 あらかじめ調整された画像を直接テキストボックスに使うかです。

Frameの使用

Frameを使用したテキストボックスは先ず画像の四隅を探し、それ以外の部分をコードで指定した比率に合わせて拡大します。

Frame_example.jpg
Frame_example.jpg
style.window.background = Frame("PinkBox.png", 25, 25)

このコードはすでに画像を除いてoptions.rpyにあります。画像名と四隅のサイズを置き換えてください。#マークを取り除いて、アンコメントすることを忘れないでください。

もちろんRen'Pyは自動でマージンやテキストを調整したりしません。 新しいゲームを完璧にするためには新しい画像つきテキストボックスを調整しなければなりません。 殆どの必要な項目はコメントアウトされていますが、すでに用意されています。

options.rpyファイルを開いてこれらの行を探してださい:

    ## Margin is space surrounding the window, where the background
    ## is not drawn.

    # style.window.left_margin = 6
    # style.window.right_margin = 6
    # style.window.top_margin = 6
    # style.window.bottom_margin = 6


    ## Padding is space inside the window, where the background is
    ## drawn.

    # style.window.left_padding = 6
    # style.window.right_padding = 6
    # style.window.top_padding = 6
    # style.window.bottom_padding = 6


    ## This is the minimum height of the window, including the margins
    ## and padding.

    # style.window.yminimum = 250

もう一度、#マークを取り除いてアンコメントしてください。

ボックスのマージンは画面の端からのテキストボックスの距離です。 下の画像はマージンを大きくした(パッディングには手を付けていない)例示したピンクのボックスです:

Margin_example.jpg
Margin_example.jpg

ボックスのパッディングはテキストボックスの端からのテキストの距離です。 ここにパッディングを大きくした(マージンはデフォルトに戻した)画像を載せます:

Padding_example.jpg
Padding_example.jpg

yminimumはボックスに指定された値をピクセル単位の高さとして強制します。 ボックスの普段の高さを定義するために使用します。(しかし、テキストが収まりきらない場合はより高くなります) これは次で紹介するあらかじめ調整された画像で重要な項目です。

パッディングとマージンについて望んだとおり正確になるまで、何度も試行錯誤してください。 時間短縮には、SHIFT+Rキーで変更を即座に反映するためにゲームを再起動する機能を利用できます。

あらかじめ調整された画像の使用

もう一つの方法は画像編集ソフトですでに望む外観にしたものを使用するので、実装は簡単です。 欠点は凡庸性がなく、変更したいたびに新しい画像を作らなければならないところです。 利点は早くて簡単で、正確に望む外観に調整できることです。

簡単のため、あなたの画像のテキストボックス部分のみを切り取らないでください。 Ren'Py内でマージンを変更しないで良いように、代わりに端(ボックスの上端まで)にスペースを含みなさい。 つまりあなたの完成した画像の幅はゲーム画面と同じです。(default: 800px)

単にファイル名をoptions.rpyにあるstyle.window.backgroundに代入してください。

yminimumが正確に画像の高さに設定されていること、ボックスに収まるようにパッディングが変更されていることを確認してください。 また、マージンは全て0に設定してください。 ゲームを起動すれば、あなたのボックスが見えるはずです。簡単だったでしょう?

Dialoguebox_yminimum.jpg
Dialoguebox_yminimum.jpg

キャラクター名のために分割したウィンドウを使用したいなら、ネームボックスを別ファイルとして保存する(推奨)か、ひとつの大きな画像としてテキストボックスに含めるかです。 後者の問題は、(名前の無いキャラクターの)ナレーターのセリフのとき、空のネームボックスがあると変に見えるために、同じ画像にネームボックスつきか、そうでないかの2つのバージョンが必要ということです。

キャラクター固有のテキストボックス

2つ以上の違うテキストボックスを使用するなら、最もよく使うものをデフォルトとします:

style.window.background = "dialoguebox.png"

そして、違ったボックスを持って欲しいキャラクター(この場合は、名前なしのキャラクターなので、ナレーター)を対象とします。 ここではFrame関数も使用できます。単にwindow.backgroundに使用したのと同じコードをコピーして、キャラクター名のwindow_backgroundの後に、ペーストするだけです(ファイル名は変更します):

$ narrator = Character(None, window_background="dialoguebox_noname.png")

デフォルトウィンドウで定義した他のすべてのプロパティーは維持されます。

キャラクターごとに特別な調整がしたいなら、Characterの呼び出し時に、このようにプロパティーを指定します:

    $ a = Character('Name', window_top_padding=15)
    $ b = Character('Name', what_xpos=50)
    $ c = Character('Name', who_yalign=0.5)

これらのコードで重要なのは、"window_", "what_", "who_" 接頭辞です。 どんな望むプロパティーにも使用可能ですが、キャラクターに何を指定しているかを伝える必要があります。 "window_"はstyle.window同様に、ウィンドウ全体を決めるプロパティーです。 "what_"は(話されている)テキストを、"who_"は(話している)キャラクターの名前について決めます。

タイピング量を減らすために、デフォルトのテキストスタイルを定義して、キャラクターごとにコピペで調整しなくて良いようにしましょう。

テキストスタイル

テキストの外観を編集するためには、options.rpyの後半にあるこれらのコードの行を探してください:

    ## The file containing the default font.
    # style.default.font = "DejaVuSans.ttf"

    ## The default size of text.
    # style.default.size = 22

フォントやテキストサイズを変更するために、これらの行をアンコメントしてください。 ファイルに含まれてなくても、望むスタイルのどんな要素についても変更出来ます。 色、影、望むなら、縁取りも可能です。ここでそれぞれの例を示します:

style.default.color = "#000000" #Makes text black

    style.default.drop_shadow = [(1, 1)] #Adds a shadow one pixel to the right and one pixel down

    style.default.outlines = [(4, "#ff0000", 0, 0), (2, "#fff", 0, 0)] #Adds a white outline 4 pixels thick, and then a black outline, 2 pixels thick

    style.default.xalign = 1.0 #aligned the text completely to the right

これらに加えて、テキストプロパティーのすべてをここで参照できます。

キャラクター名のように、特定のテキストを編集したいなら、そのテキストのスタイルがなんと呼ばれているか知る必要があります。この簡単な方法は、ゲームを起動し、変更したいテキストの上にマウスを持ってきて、SHIFT+Iキーを押しすることです。 そのオブジェクトが使用するすべてのスタイルと親スタイルを表示するブラックスクリーンが表示されます。 目的の物はスタイルリストの最後に表示されます:

Styleinspector.jpg
Styleinspector.jpg

Then you want say_label. For styles you can't hover on, you can try to find in the Style Hierarchy by hitting SHIFT+D.

スタイル名がわかった今、次のフォーマットで編集できます:

style.STYLE_NAME.PROPERTY = VALUE

say_labelを違うフォントで表示したいなら、これをoptions.rpyの最下部に加えます:

style.say_label.font = "myfont.tff"

フォントがgameディレクトリにあることを確認してください。

スタイル名

このページで学んだことをすべて使えば、Ren’Pyの制限の範囲で好きな場所に好きな外観で各要素を配置できます。 画像の時のように、キャラクター名の表示には2つの方法があります: 一つのテキストボックスに埋め込むか、テキストボックスから分離した名前用のウィンドウを作るかです。 デフォルトでは、名前はひとつのウィンドウに埋め込まれています。 これを変更するためには、show_two_windowを呼び出しているキャラクター定義にコードを加える必要があります。 show_two_windowを真にして、ウィンドウを分割したいすべてのキャラクターに対してこれを行います。 デフォルトでは、テキストボックスと同じ背景を受け継ぎます。

名前とウィンドウのスタイル:

ネームボックスの背景を変更指定なら、スタイル名をsay_who_windowで置き換える以外はテキストボックスにしたのとほぼ同様にします:

style.say_who_window.background = Frame("namebox.png", 15, 15)

さらに、画像と四隅のサイズを変えたり、Frameを使わないでもやってみてください。

ボックス内に名前を収めるために、xalign や xpos, xanchorのような位置をするプロパティーを使用してください。

クリック待ちアイコン

ストーリーを進めるためにクリックが必要なとき、プレイヤーにアイコンを表示する面白い機能です。 ボックスにこれを加えるためには、show_two_windowのようにそれを使いたいキャラクターに追加する必要があります。

Just link to the image's call name in quotes. If you want to animate it, build the animation first, and then link to the animations call name. 画面の最後の文字の後ろにアイコンを埋め込むことや、特定の位置に置くことも出来ます。 ここで、画面の端に常位置で表示されるアニメーションアイコンの例を示します。

image ctc_animation = Animation("ctc01.png", 0.2, "ctc02.png", 0.2, "ctc03.png", 0.2, "ctc04.png", 0.2, xpos=0.99, ypos=0.99, xanchor=1.0, yanchor=1.0)

    $ a = Character('Name', ctc="ctc_animation", ctc_position="fixed")

あたらしくATL言語をCTCアニメーションに使用できます。Just plug in the name in the quotes. 画面のどこかの上位置に表示したいなら、画像のposition propertiesを指定してください。

See this forum thread for an example of what it looks like all put together.