Ren'Py画像表示の基本：show・scene・トランジション

入門ガイドで scene bg room と書いたとき、画面は真っ黒だったはずだ。画像ファイルがなかったから。

この記事では、Ren'Py 8.5.2 で画像を表示する方法を基礎から解説する。命名規則、scene/show/hide の使い分け、トランジション、表情差分の切り替え、位置とレイヤーの制御までカバーする。

画像の命名規則を理解する

Ren'Py は game/images/ フォルダに置いた画像ファイルを 自動的に検出 して、スクリプトから使えるようにする。ここでの命名ルールを間違えると「画像が表示されない」原因になる。

ファイルの置き場所

画像は game/images/ フォルダに置く。サブフォルダを作っても検出される。

mygame/
└── game/
    └── images/
        ├── bg forest.png
        ├── bg castle.jpg
        ├── characters/
        │   ├── eileen happy.png
        │   └── eileen sad.png
        └── ui/
            └── textbox.png

ファイル名から画像名への変換

Ren'Py はファイル名を スペースまたはアンダースコアで分割 し、画像名に変換する。

最初の単語が タグ、残りが ** 属性** になる。タグは画像をグループ化する名前で、show や hide で使う。属性は同じタグ内のバリエーション（表情、衣装など）を区別するために使う。

# ファイル名が bg forest.png なら
scene bg forest

# ファイル名が eileen_happy.png なら
show eileen happy

「画像が表示されない」よくある原因

画像が表示されないとき、まず確認すべきは以下の3点だ。

1. ファイルが game/images/ にない — 別のフォルダに置いていないか確認する
2. 画像名が一致しない — scene bg_forest ではなく scene bg forest。スクリプト上ではスペース区切りで書く
3. show の後に対話がない — show 単独では画面が更新されない（次のセクションで詳しく説明する）

scene・show・hide の使い分け

画像を画面に表示するには3つの文を使う。それぞれ役割が違う。

scene — 背景を切り替える

# 画面をクリアして背景を表示
scene bg forest
with fade

scene は レイヤー上のすべての画像をクリア してから、指定した画像を表示する。背景の切り替えに使う。

クリアされるのは master レイヤーのみなので、show screen で表示したUIなどは残る。

show — キャラクターを表示する

# キャラクターを表示
show eileen happy

# 同じタグの画像は自動で置き換わる
show eileen sad

show は画像を画面に追加する。同じタグの画像がすでに表示されていれば、置き換える。show eileen happy の後に show eileen sad を実行すると、eileen happy が消えて eileen sad に切り替わる。

hide — キャラクターを消す

hide eileen

hide は指定したタグの画像を画面から消す。属性は不要で、タグ名だけ指定すればいい。

実践例：シーンの流れ

label start:
    # 背景を表示
    scene bg forest
    with fade

    # キャラクター登場
    show eileen happy
    with dissolve

    e "この森はきれいだね。"

    # 表情を変える（同じタグなので自動置換）
    show eileen sad

    e "でも、少し寂しい気もする。"

    # キャラクター退場
    hide eileen
    with dissolve

    "彼女は森の奥へ消えていった。"

トランジションで画面を切り替える

with 文を使うと、画面の切り替えにアニメーション効果を加えられる。

基本のトランジション

# フェードイン（黒画面から）
scene bg forest
with fade

# ディゾルブ（クロスフェード）
show eileen happy
with dissolve

# 直前の変更を見せずに確定（次のトランジションの起点を更新）
scene bg castle
with None

よく使うトランジションの一覧:

全トランジションの一覧は Transitions を参照。

with の書き方：2つのスタイル

with には2つの書き方がある。

# スタイル1: 独立した with 文
# 直前のすべての変更をまとめてトランジション
show eileen happy
show bg forest
with dissolve

# スタイル2: show/scene の同一行
# その1行の変更だけにトランジション
show eileen happy with dissolve

スタイル1は、複数の変更（背景 + キャラクター）を同時にトランジションしたいときに使う。

カスタムトランジション

Dissolve() や Fade() の引数を調整して、独自のトランジションを作れる。

# 2秒かけてディゾルブ
define slow_dissolve = Dissolve(2.0)

# 白画面を経由してフェード（暗転ではなく白転）
define white_fade = Fade(0.5, 0.0, 0.5, color="#fff")

label start:
    scene bg forest
    with slow_dissolve

    scene bg castle
    with white_fade

キャラクターの表情を切り替える

属性による差分管理

同じタグで複数の属性を持つ画像を用意すれば、show だけで表情を切り替えられる。

images/
├── eileen happy.png
├── eileen sad.png
├── eileen angry.png
└── eileen surprised.png

show eileen happy
e "今日はいい天気だね。"

show eileen surprised
e "えっ、本当に？"

show eileen angry
e "それはひどい！"

show eileen sad
e "……そうだったんだ。"

show eileen sad を実行すると、前の show eileen angry の画像は自動的に消えて、eileen sad に差し替わる。これが 同一タグの自動置換 だ。

image 文で手動定義する

自動検出に頼らず、画像名を自分で定義することもできる。ファイルが game/images/ 以外にある場合や、複雑な構成の場合に使う。

# ファイルパスを直接指定
image eileen happy = "characters/eileen/happy.png"
image eileen sad = "characters/eileen/sad.png"

# Composite で複数パーツを合成することもできる
image eileen happy dress = Composite(
    (300, 600),
    (0, 0), "characters/eileen/base_dress.png",
    (0, 0), "characters/eileen/face_happy.png",
)

手動定義した画像は show eileen happy でそのまま使える。

位置とレイヤーを制御する

組み込み位置

at キーワードで、キャラクターの表示位置を指定する。

show eileen happy at left
show sakura smile at right

e "左側にいるよ。"
s "右側にいるよ。"

Ren'Py に組み込まれている位置:

カスタム位置

組み込み位置では足りない場合、transform で独自の位置を定義できる。

transform quarter_left:
    xalign 0.25
    yalign 1.0

transform quarter_right:
    xalign 0.75
    yalign 1.0

label start:
    show eileen happy at quarter_left
    show sakura smile at quarter_right

xalign は水平位置（0.0 = 左端、1.0 = 右端）、yalign は垂直位置（0.0 = 上端、1.0 = 下端）を指定する。キャラクタースプライトの足が画面下端に揃うように yalign 1.0 を使うのが一般的だ。

レイヤー順序の制御

複数のキャラクターが重なるとき、表示順序を制御したい場合がある。

# zorder で手前・奥を指定（数字が大きいほど手前）
show eileen happy at left zorder 10
show sakura smile at right zorder 5

# behind で特定のタグの後ろに配置
show sakura smile behind eileen

まとめ

この記事で解説したこと:

• 命名規則: game/images/ にファイルを置く。スペースまたはアンダースコア区切りで画像名に自動変換される
• scene/show/hide: scene は背景切り替え（クリア付き）、show はキャラクター表示（同タグ置換）、hide は削除
• トランジション: with fade/with dissolve で画面切り替えにアニメーション効果を追加
• 表情差分: 同じタグで複数の属性を持つ画像を用意し、show で切り替える
• 位置とレイヤー: at left/center/right で位置指定、zorder/behind で重なり順を制御

Ren'Py が初めてなら 入門ガイド から、ステータスシステムの実装は ステータス管理ガイド を参照してほしい。

キャラクターの表情・衣装パーツを動的に組み合わせる LayeredImage や、アニメーションを制御する ATL は、この記事の内容を理解した次のステップだ。

公式リソース:

• Displaying Images — 画像表示の公式リファレンス
• Transitions — 全トランジションの一覧
• Transforms — 位置とアニメーションの制御
• r/RenPy — コミュニティ