非プログラマのRen'Pyノート：タイトル画面のカスタマイズ
ノベルゲームエンジンRen'Py（以下renpy）は海外製のため、タイトル画面を「メインメニュー」と呼びます。なのでタイトル画面をどうにかしたいときには「renpy mainmenu」とかで調べたりしてます。もちろんヒットする記事も英語なので翻訳ツールを使いがんばって読んでいる。
だがそんな日々とはもうオサラバだ！！ 「renpy タイトル画面 ◯◯◯」で調べても国内ユーザーが困らないように、そして調べたことがとっ散らかりがちでスクリプト内にurlやメモを貼ってきちゃなくなりがちな私のためにも、タイトル画面をカスタマイズする方法をまとめました。
本来こういったツールはイチから勉強した方が良いのかも知れませんが、私は基礎知識ガン無視で詳しい方に聞いて丸々コピペーとかさせてもらってここまできたので、renpy使い始めで何もわからんがゲームを作りたい。という方はどんどんコピペーして使ってください。
ゲーム制作って勉強しなくちゃマインドはしんどい。と思うのと、他力本願コピペーとかで完成させちゃって、次はもっとこうしたいからrenpyでまたゲーム作ってみよう、と皆様が制作を楽しめる一助になれば嬉しいです。
タイトル文字色、背景変更などの基本は「メインメニュー」で検索をかける
基本は「options.rpy」または「gui.rpy」ファイルのいずれかで「メインメニュー」と検索すれば関連の画像やフォント、背景画像やタイトルで流すbgmなどの変更方法は分かります。
問題はその辺りを変更しても足りない、さらにカスタマイズしたいケースです。なので、まずは上記を一通りチェックして回るのをおすすめします。grep機能が活用できると見つけやすいです。
タイトルロゴ画像とか立ち絵を入れたい
renpyではタイトル文字を入れることができますが、ロゴ画像なんかを別途入れたい場合、screens.rpy 「メインメニュー」項目のaddの下にこのように書けば画像とか入れて場所も指定できます。
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
tag menu
add gui.main_menu_background
add "images/name.png":#ここにちょんちょんを入れて
xalign 0.5 #場所指定すれば通ります（通るんだ）ついでにタイトル画面に出るタイトルテキストは、options.rpyのdefine gui.show_nameをFalseにすれば消えます。
## 上で定義したタイトルをメインメニュースクリーン（ゲーム起動後、最初に表示され
## るスクリーン）に表示するかどうか決めます。False にすると表示しません。
define gui.show_name = True #これをFalseにすれば表示されないアニメーションを入れたい方は以下動画をご参考に。
アニメーション/背景に動画を入れる
この方の解説動画が分かりやすかったので貼っておきます。解説は英語だけど、つまりgui にあるスクリプトを書き換えるだけ！
背景に動画を流す
動画に差し替えるやつ、目コピーして手でスクリプト打ったのを置いときます。
define gui.main_menu_background = Movie(play=images/test.webm)ただ私のPC（2017年のMacbook）で1920サイズを再生したところカクカクになってたのでスペックには注意が必要です。タイトルに置いたせいなのかはちょっと分かりません。
なお動画の形式はmp4では再生できませんでした。webm という形式にする必要があります。
他の形式再生できるってマニュアルに書いてるの嘘なん……？
アニメーションを入れる
これもimageなどでアニメーションを作り、addのところを書き換えると何とかなります。
image logoanime:
"logo" #この名前の画像を、
align (0.1, 0,1) #左上ら辺に
linear 0.5 zoom 0.9 #0.5秒かけてこのサイズで表示する（実寸の何%）ってことだよ！
linear 0.5 zoom 1.0 #0.5秒かけて100%になるよ
repeat #上記の動きを繰り返すよ
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
tag menu
add gui.main_menu_background #基本は、先に書いた方が下に表示される
add "logoanime" #あとで書いた方が上に表示されるよ背景スライド+ロゴフェードインのサンプルも置いときます。screen.rpyの「メインメニュースクリーン」以下を丸ごと上書きする形です。
パーティクルを入れる
これがやりたかったッシャオラーーー！！
これもscreens.rpyのメインメニューaddを書き換えれば可能です。もちろん、パーティクルには素材が必要なんですが……こんなこともあろうかと、素材もスクリプトも用意した！ ので、
1.パーティクルのことがわかる人は自分で素材とスクリプトを準備。何もわからん人は以下を読んで適切な箇所（わからん人は label start: より前）にコピペーする
2.1で作ったimageとかをscreen.rpy の以下の箇所にaddすればOK。
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
tag menu
add gui.main_menu_background
add "eff_snow" #ここに追加
#add "logo.png" #ロゴとか立ち絵とか置く時はここに挟むと奥と手前にパーティクルが降るよ
add "eff_snow_mae" #ここにも追加なお、スクリプトは数を降らせ過ぎるとブラウザ版でめちゃ重になる可能性があるのでご注意ください。場合によりカクカクになりプレイに支障があります。
メニューボタンの位置を変更する
renpyのメニューボタン配列はそのままでも十分機能的だし、タイトル→ゲームシーンのメニューが同じ並びなので混乱が少なく、いい感じ。
ただ私の思い込みかも知れないんですけど、なんかゲームのタイトル画面ボタンって画面の下部分に横並びになってるイメージないです？
というわけでせっかくの機能性ガン無視で、画面下部に横並びにしたボタン配列のスクリプトをそのまま貼っておきます。オンマウスで背景？ に帯？ 枠？ がつくように調整したんですが、いらない方は頑張って外してください。
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
## ↑これ意味不明だけど、以下を消すと他画面からメインメニューに戻れなくなる
tag menu
add gui.main_menu_background #パーティクル入れたい人はこの下に書く
if gui.show_name:
hbox: #これで横並びになる
#style_prefix "navigation" #ないと音が鳴らん？
xpos 0.5
yalign 0.9
xanchor 0.5
xalign 0.5
spacing 10
textbutton _("スタート"):
style "main_menu_button"
action Start()
textbutton _("ロード"):
style "main_menu_button"
action ShowMenu("load")
textbutton _("環境設定"):
style "main_menu_button"
action ShowMenu("preferences")
textbutton _("操作説明") :
style "main_menu_button"
action ShowMenu("help")
textbutton _("Read Me"):
style "main_menu_button"
action ShowMenu("about")
textbutton _("終了"):
style "main_menu_button"
action Quit(confirm=not main_menu)
text "[config.name!t]":
style "main_menu_title"
text " ver.[config.version]":
style "main_menu_version"
style main_menu_button:
activate_sound "audio/oto1.mp3"
hover_sound "audio/oto2.mp3" #オンマウスの音
hover_color "#d2d2d2"
hover_background "#000000" #これを消すと背景に黒いのがつかない
padding (40,-15,40,10) #これは背景につく黒いのの幅を決めてる
#ここから下は「タイトル文字だけ色変更したい場合」のカスタマイズ箇所####
style main_menu_title: #タイトル文字
xalign 0.07
ypos 0.1
size 84
color "#fff"
style main_menu_version:#バージョン文字
xalign 0.05
ypos 0.20
size 48
color "#fff"
タイトルのメニューボタンを画像に変更
メインメニューと、メインじゃないメニューボタンはうっすら連動しているらしい。なので、よくわかんないまま変更しちゃうと、タイトル画面じゃなく他メニュー画面まで変わってしまうことがあり、つまづきポイントです。これはつまり……以下のようなことです！（他力本願）
#RenPy小技 というほどでもないかもですが
— 倉下@crAsm (@krsm94) January 29, 2023
Ren'Py使い始めの頃に困惑した気がする？のが、メインメニュー・右クリックメニューの左側のボタンが共通のスクリーン（screen navigation）の引用であるという点。
メインメニューの方はuse navigationを消して自前でボタンを用意してることが多いです。 pic.twitter.com/FywNrFVxGO
メニューボタンに音を入れたい
無音はなんか寂しいし、音が鳴るとゲームっぽくなる気がする（？）ので私はなるべくボタン音を入れるようにしています。
screen.rpy の「ナビゲーションスクリーン」項目、下の方にあるstyle navigation_button のスクリプトをこのように変更すれば、タイトルメニューボタン&コンフィグ押下&選択時に音が鳴ります。
style navigation_button:
size_group "navigation"
properties gui.button_properties("navigation_button")
activate_sound "audio/oto1.mp3" #タイトル画面選択の音を変更したいときはここ
hover_sound "audio/oto2.mp3" #オンマウスの音
#なおこんときは""と拡張子がいるよ！ なぜかは分かりません！ちなみに、メインメニューのボタンをイメージ（画像）ボタンにした場合は上記入れても音が鳴らないので、以下をどこかに書くといいんですが、そうするとタイトル以外の画像ボタンもぜんんんぶ音が鳴ってしまいます。
style image_button: #イメージボタンは全部この音が鳴ってしまう
activate_sound "audio/se_decide.mp3" #決定時の音
hover_sound "audio/se_hover.mp3" #オンマウスの音 分けたい、という方はご面倒ですが、いっこいっこのボタンに書いていただくか、上級者の方はstyleで対応いただくことになります。
ボタン音は良いものをaudioフォルダに入れてくださいね。
タイトル文字色だけ変更する
そもそもgui.rpyにある「アクセントカラー」を変更すれば、タイトル文字色を変更するのは可能です。
しかし、あちこちカスタマイズした結果「アクセントカラーのうち、タイトル色だけ変更したいケース」が私にはありました。
以下のように、options.rpyにあるスクリプトを変更すれば可能ですが、
define config.name = _("{color=ffffff}タイトルだよ{/color}")↓のように上のバーに出る文字にまで反映される！ かっこ悪い！
じゃあどこに書けばいいのか……
1.簡単に済ませるなら、screens.rpyの「メインメニュー」項目にある以下の記述をこのようにすると、
if gui.show_name:
vbox:
style "main_menu_vbox"
text "{color=#ff0000}[config.name!t]{/color}":#ここを変更する
style "main_menu_title"
text "[config.version]":
style "main_menu_version"バーには反映されず、タイトル文字の色だけ変えることが可能です。
ちなみに、その下にあるconfig.version というのはバージョン表示の文字が入るところなので、同様の処理を書けばバージョン表示だけ違う色に変えたりできます。
2.タイトルが出る位置とかもっと細かくカスタマイズしたい。styleちょっとわかるよ。という方は、同じくscreens.rpyの、上記スクリプトのちょっと下にある以下の箇所を以下のような感じで書き換えればOKです。
#ここから下は「タイトル文字だけ色変更したい場合」のカスタマイズ箇所####
style main_menu_title:
xalign 0.07
ypos 0.1
size 84
color "#fff"
style main_menu_version:
xalign 0.05
ypos 0.20
size 48
color "#fff"ただしここに書いちゃうと、gui.renpy にある設定より優勢になって、フォントサイズなどの設定が二箇所存在することになりますので、よくわからんという人は触らない方がいいかも知れません。
3.とあるRen'Pyユーザーからいただいたアドバイスによると、どこにどのstyleが適用されているかよくわからない場合などは、以下のようにtext直下にスタイルプロパティーを書いて凌ぐこともできるそうです。
if gui.show_name:
vbox:
style "main_menu_vbox"
text "[config.name!t]":
# style "main_menu_title"
xalign 0.07
ypos 0.1
size 84
color "#ff0000"本編のフラグでタイトル画像を変える
例えば「クリアしたらタイトル背景画像を変えたい」とかですね。
タイトル画面のメニューはscreenで作られていて、この中ではif文が効くので簡単にできるはず。
ただ普通の変数（$のやつ）はゲーム開始時やリセット時（タイトル画面に戻った際）に初期化されてしまいます。そこで、ここでは「永続データ」と呼ばれる変数を使います。永続データはリセット時やゲーム終了後にも保持されます。
まず準備として、その他の変数と違い永続データはどこか（startより前とかで良いと思います）でちゃんと定義しないと怒られるので、定義します。
default persistent.gameclear = False次に、以下のような感じで、クリアした箇所に書きます。自分だったらエンドロールの直前とかに置くかな。
$ persistent.gameclear = True
# 変数名の頭に $ persistent. とつける。この場合は「gameclear」という永続データ次に、screens.rpy にある例の箇所を以下のように書き換えます。
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
tag menu
if persistent.gameclear: #ここ書き換え「もしclearedっていう永続データフラグがTrueの時」
add "images/bg_onsen.jpg" #この画像を表示。頭の行送りに注意
else: #ここ書き換え「もしclearedっていう永続データフラグがTrue"以外"の時」
add gui.main_menu_background #フラグTrueじゃない時の普段の画像。頭の行送りに注意
マニュアルにはTrue Falseの例しかないですが、普通に演算も使えるっぽいです。何回クリアしたらこれを表示。とかにも使えます。
ただ永続データはつよめのデータなので永続してしまい、消すには一手間必要です。詳しくはマニュアルに載ってる……のですが、書き方がわかりませんでしたので調べました。
"今クリアフラグは[persistent.gameclear]です。リセットできるかな。"
$ persistent._clear() #永続データをリセット
"今クリアフラグは[persistent.gameclear]です。リセットできたかな。"
##個人的に、一回で全部消せるのが便利なのでこの._clear() を使ってます本稿監修ご担当者倉下さんによると「saveフォルダ内のpersistentというファイルとwinのappdata（C:\Users（またはユーザー）\（ユーザー名）\AppData\Roaming\RenPy にある）を削除する方法でも消せます」とのこと。ちなみに、Macのappdateは ~/Library/RenPy/save_directory にあるそうです！
タイトル前にロゴ（スプラッシュ）を表示
よくゲームが始まる前にメーカーさんのロゴが表示されたりするやつ、あの名前は「スプラッシュ」ないし「スプラッシュスクリーン」というそうです。公式マニュアルにやり方が実例とともに（うれしい）表記されています。
テキストベースのスプラッシュスクリーンをゲームに追加するには、以下のようなコードをスクリプトの(splashscreen ラベル内でなければ)どこでもよいので追加します。
例えばロゴ画像 logo.png を使用する場合、以下をどこかにコピペーします。適切な箇所がわからない人は、label start: の前がいいかも知れません。
label splashscreen:
scene black #blackという画像が必要です
pause 1.0
play sound "ping.mp3" #音はaudioフォルダに入れてね
show logo with dissolve
pause 2.0
scene black with dissolve
pause 1.0
return"splashscreen" ラベルはメインメニュー前に自動で再生されます。
つまり label splashscreen: という名前をつければ、そこからreturnまでがタイトル前に勝手に呼び出される仕様みたいです。callしなくてもよい。
なお、スプラッシュの後→タイトル移行の際のトランジションは、以下で設定できます。
define config.end_splash_transition = dissolve #←ここを変更 デフォルトだとNoneタイトル周りのトランジションはマニュアルの上記リンクにまとめられています。
ここまでの合わせ技サンプル
いずれもscreen.rpy にあるメインメニュー周りを書き換えています。
Senjiさまの「天拝山クエスト ねこねこパニック」
## Main Menu（メインメニュー）スクリーン #####################################################
##
## Ren'Py が起動した時に表示されるメインメニューを表示するスクリーンです。
##
## https://ja.renpy.org/doc/html/screen_special.html#main-menu
image bg_title:#タイトル背景をカメラ移動してます
"images/opening.jpg"
alpha 0.0
ypos 0.0
linear 1.0 ypos -160 alpha 1.0
image neko_ato:#猫の場所
"images/title02_neko.png"
align (1.0, 1.08)
alpha 0.0
pause 0.3
linear 0.5 alpha 1.0
image title_anm:#タイトルをフェードインしてます
"images/title02_line.png"
zoom 0.8
alpha 0.0
align (0.98, 0.98)
#xanchor 0.5
linear 0.3 alpha 1.0 zoom 0.8
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
tag menu
#add gui.main_menu_background #以下オリジナルに差し替えています
add "bg_title"
add "title_anm"
add "neko_ato"
## 次の空のフレームは gui/overlay/main_menu.png を表示してメインメニューを暗
## くしています。
frame:
#style "main_menu_frame"
background "images/black_frame.png" #差し替えました
ポンコツ騎士さまの「Hide my Love」
##アニメは重たいのでブラウザ版はおすすめじゃないよ〜
##タイトルアニメーション関係#############################################
image title_logo:#タイトルロゴアニメ
"gui/hml_logo.png"
zoom 0.7
alpha 0.0
pos (0.25, 0.25)
anchor (0.5, 0.5)
#align (0.5, 0.5)
linear 0.2 zoom 1.0 alpha 1.0
image icon_kaiten:#お花のくるくるアニメ
"icon"
pos (214, 128)
xanchor 0.5
yanchor 0.5
rotate 0
linear 5 rotate 360
repeat
### キラキラ##################### 顔被りをさけるため場所固定##############
transform kirakira:
linear 0
choice:
align (0.0, 1.0)
choice:
align (0.1, 0.0)
choice:
align (0.6, 1.4)
choice:
align (0.95, 1.2)
choice:
align (1.0, -0.2)
choice:
align (0.0, 1.3)
alpha 0 #一旦透明度を挟んでサイズを選ぶ
choice:
zoom 0.8
choice:
zoom 0.7
choice:
zoom 0.6
choice:
zoom 0.4
choice:
linear 0.8 alpha 1.0
choice:
linear 0.6 alpha 1.0
choice:
linear 1.0 alpha 1.0
linear 0.8 alpha 0.0
repeat
#####################################################################
## Main Menu（メインメニュー）スクリーン #####################################################
##
## Ren'Py が起動した時に表示されるメインメニューを表示するスクリーンです。
##
## https://ja.renpy.org/doc/html/screen_special.html#main-menu
screen main_menu():
## 次のコードは、同じタグを持つ他のメニュースクリーンが表示された時にスクリ
## ーンを置換します。
tag menu
add gui.main_menu_background #タイトル画面背景を変更
add "light" at kirakira
add "light" at kirakira
add "light" at kirakira
add "title_logo"
add "icon_kaiten"
## 次の空のフレームは gui/overlay/main_menu.png を表示してメインメニューを暗
## くしています。
#frame:
# style "main_menu_frame"#フレームいらないよ〜
## use ステートメントは、他のスクリーンを現在のスクリーンの内に表示するのに
## 使います。メインメニューの実際のコンテンツは navigation（ナビゲーション）
## スクリーンです。
#use navigation #コメントアウト
vbox:#勝手に足した
style "image_button"
xpos 90
yalign 0.65
spacing 20
imagebutton auto "button_start_%s.png" action Start()
imagebutton auto "button_load_%s.png" action ShowMenu("load")
imagebutton auto "button_preference_%s.png" action ShowMenu("preferences")
imagebutton auto "button_extra_%s.png" action Show("gallery", transition=Dissolve(0.2))
text "©︎copylightだよ〜てすと": #いらなければ削除で動きます
color "#e77159"
text_align 1.0 #文字が右揃えで揃うよ
xalign 0.95
yalign 0.95
if gui.show_name:
vbox:
style "main_menu_vbox"
text "[config.name!t]":
style "main_menu_title"
text "[config.version]":
style "main_menu_version"
style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text
style image_button:#足した #イメージボタンは全部この音が鳴ってしまう
activate_sound "audio/se_decide.mp3" #追加/タイトル画面選択の音を変更したいときはここ
hover_sound "audio/se_hover.mp3" #オンマウスの音 ローディングの絵を変更する ※ブラウザ版
デフォルトのままだとこれが表示されます。
ブラウザ版をビルドした時、ゲーム（プロジェクト）フォルダ直下に web-presplash.png という画像がどうやら自動で生成される？ らしいです。
だ、誰？？ ってなるので差し替えたい方は、プロジェクトフォルダ直下にweb-presplash.png （jpgでもいいという噂を某所で聞きましたがまだ未確認）という名前の画像を入れておくと置き換えられます。
または、上記マニュアルの「プレスプラッシュ」項目によると、プログレスバー画像のベースと%を表示する画像を入れとけば、プレスプラッシュ画像より優先して表示されるとのこと……ですが、私がやってみたところプレスプラッシュが優先されてしまったので検証中です。
なおAndroidやiOSはこの限りではありません。上記マニュアルの末尾にリンクが貼られています。
タイトル前に言語選択ボックスを出す
##日本語・英語ウィンドウを表示する###########################################
default persistent.gengosentaku = False #言語選択ウィンドウのフラグ
label splashscreen: #タイトル前に言語選択とロゴを呼ぶ
if persistent.gengosentaku:
pass #言語選択を初回した後はここをスルー
else:
call screen gengosentaku
show logo
pause 0.5
hide logo
$ persistent.gengosentaku = True #言語選択ウィンドウを表示したよフラグ
return
screen gengosentaku(): #言語選択のスクリーン（ウィンドウ）
modal True
zorder 200
add "gui/overlay/confirm.png"
frame:
#background "#fcd0c2" #言語選択ウィンドウの背景に色を入れる
xalign 0.5
yalign 0.45
xsize 500
ysize 360
vbox:
xalign .5
yalign .5
spacing 40
text "Select Language":
xalign 0.5
hbox:
spacing 70
textbutton _"日本語":
style "l_button"
action Language(None)
textbutton "English":
style "l_button"
action Language("english")
textbutton _("OK"):
style "l_button"
action Return()
style l_button:
xalign 0.5
hover_background "bluegreen"
padding (20,-10,20,10)
activate_sound "audio/scene2.mp3"
hover_sound "audio/decision-6.mp3" #音素材はaudioフォルダに入れてね一回表示されたら永続データフラグが発動して表示されなくなるはず。言語選択だけでなく、注意書き読んでね！ とか年齢認証などにも使えるよ。
時間が経つと動画が流れるようにする（未決）
これができたらイベント展示とか便利そうだからやりたかったのですけどscreen内にタイマーを仕込むのは難易度激高とすでにわかっている（めっちゃ人に教えていただいた）ので……。
何とかinit とか trasnformで誤魔化せないか考えているところです。また何かわかれば追記します。
本記事作成ご協力：
crAsm 倉下様
いつもお世話になっているうえに 今回は助言+私のアホっぽい説明文を賢そうにしていただきました！ ※アニメーション例スクリプトもいただいていて一時掲載していたのですが、解説が長くなりそうだったので後日「アニメーション特集」など作って転載します。
Ren'Pyは制作期間が長い場合でも安心して使えると思います。手元の６年前のスクリプトが最新版のランチャーで動くという…。
— 倉下@crAsm (@krsm94) February 4, 2023
Ren'Pyの機能で探すのが面倒なときは当方までお声掛けください（歩く辞書としてご利用ください）！
又は #RenPy疑問 へ🏃
また、タイトル&アニメーション用素材ご提供は以下2名様からいただきました！ ありがとうございました！
「天拝山クエストねこねこパニック」公開しました！
— coexistem (@coexistem1) September 3, 2023
手軽に遊べますのでぜひプレイしてやって下さい！
進捗週報 / 天拝山クエストRC版公開！｜射干玉ゲームズ#renpy #plicy
@coexistem1 #note https://t.co/hcr61re6H2
＼\ 新作情報初公開 /／
— 織吾 (@origo_pkt) September 8, 2023
合作乙女ゲーム制作中です！
イラスト&デザイン:笹さん（@amanehotori3 ）
シナリオ&スクリプト:織吾
￣￣￣￣￣￣￣￣￣￣￣￣￣
長髪ハンサムちょっと変人（？）なお兄さんにガチ恋する女子高生の主人公。
推し活がバレて引かれないように回避せよ！#スーパーゲ制デー pic.twitter.com/cCt2AvJQRx
この記事が気に入ったらサポートをしてみませんか？