2023年7月1日時点Ren'Py ver.7.6.0の初心者の覚書。
変なところやもっと効率的な部分があったら教えてください。
この記事で確認できる実装内容は以下の3つです。
- 選択肢に背景を追加する
- 選択肢の数によって表示開始位置を変更する
- 選択肢によってstyleを変更する
選択肢の表示を編集する
選択肢の編集を行う時はscreen.rpyのscreen choice(items):(211行目あたり)を編集します。
screen choice(items):
style_prefix "choice"
vbox:
for i in items:
textbutton i.caption action i.action
style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text
style choice_vbox:
xalign 0.5
ypos 540
yanchor 0.5
spacing gui.choice_spacing
style choice_button is default:
properties gui.button_properties("choice_button")
style choice_button_text is default:
properties gui.button_text_properties("choice_button")
公式のドキュメントは特別な名前のスクリーンを参照
選択肢に背景を追加する
選択肢の表示範囲に画像を表示したい。
screen choice(items):
style_prefix "choice"
+ frame: #fram.pngは自分の好きな画像に変更済み
vbox:
for i in items:
textbutton i.caption action i.action
+style choice_frame is frame #上のframeに設定するstyleの追加
+style choice_frame:
+ xalign 0.5 #x軸の中央
+ yalign 0.5 #y軸の中央
+ ysize 450 #利用している画像の縦横比の関係で追加設定
背景が追加された。
vboxが選択肢がまとめて入っている透明な箱なので、vboxを入れるframeを追加した。
私の場合はConfirmと同じ背景を使っているのでframe.pngを直接書き換えた。
frameを使う場合はもしかしたらgui.rpyのフレームについての設定(300行目)を書き換えないといけないかもしれない。
公式ドキュメントはwindowを使っているので、そっちのが良いかもしれない。
styleに設定できるプロパティについてまとめている公式のスタイルのプロパティーはこちら！
選択肢の数によって表示開始位置を変更する
デフォルトの設定だとボタンの表示開始位置が全部一緒なので、選択肢の最大値に合わせて設定すると選択肢が少ない時にframeの上の方に表示されたり、逆に最小値に合わせて設定すると選択肢が多い時に下にはみ出て不格好。
ボタンの数によって表示位置を変更したい
screen choice(items):
style_prefix "choice"
vbox:
+ yalign 0.54 - len(items)*0.04 #選択肢の個数が増えるたびにvboxの開始位置が0.04上に上がる
for i in items:
textbutton i.caption action i.action
len(items)でitems(選択肢)の数を取得しています。
len(items)*0.04で取得した選択肢の数だけyalignの設定を-0.04しています。
こうすることで選択肢の数が変動しても勝手に良い感じに調整してくれます。
選択肢が3つの時は2つ目が中央、1つの時は1つが中央。
ちょっとずれているような気がしなくもないけど、それはframeとのサイズの兼ね合いだと思うので各自調整してください。
選択肢によってstyleを変更する
選択肢の内容によってstyleを変更したい。
screen choice(items):
style_prefix "choice"
vbox:
+ if len(items) == 1: #選択肢の数が1つの時だけstyleを変更する処理
+ $ item = items[0] #itemsの1つ目の値を取得する
+ textbutton item.caption text_style "who_are_you" action item.action
+ else:
for i in items:
textbutton i.caption action i.action
+style who_are_you : #選択肢に追加したいstyleの設定
+ size 30 #サイズを大きくする
+ bold True #太字にする
+ xalign 0.5 #文字の表示位置を中央にする
選択肢が1つの時だけ文字サイズが大きくなって太文字になった。
本当はchoice(items, args)でargsに渡した値によって分岐させられると思うんですが、やり方がよくわからなかったのでやめました。
いつかわかったら追記します。
全部実装したらこんな感じ
screen choice(items):
## 次の文は、このスクリーンが表示されている間、他のスクリーンの反応を無視するようにしています。
modal True
style_prefix "choice"
frame:
vbox:
yalign 0.54 - len(items)*0.04
if len(items) == 1: #ここのlen(items)は本当は変数に入れて確認したかったけどやり方がわからなかったのでやむなく2回len(items)しています。
$ item = items[0]
textbutton item.caption text_style "who_are_you" action item.action
else:
for i in items:
textbutton i.caption action i.action
style choice_frame is frame
style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text
style choice_vbox:
ypos 0.2
spacing 30
style choice_frame:
xalign 0.5
yalign 0.5
ysize 450
style choice_button is default:
properties gui.button_properties("choice_button")
style choice_button_text is default:
properties gui.button_text_properties("choice_button")
style who_are_you :
size 30
bold True
xalign 0.5
実装した結果は『PARALLEL LINES』で見れます。よろしくお願いします！！！！！！！！！１