概要

戦闘画面を作るのにあたり、Alpha指定のメッセージ画面の実現を目指しているが、残像が残る問題を約数時間をつぶしていた。結果的にフェードテキストを使用して、約1秒ほどにし、残像がほぼ残らないようになった。

ChatGPTやGoogleに聞いてもなかなか答えがなく。
描画のバッファを持っているから、どうしようもない問題かもしれません。

以下の解説は機械的に生成していますが、ほぼ実装内容を反映しています。

ゲーム画面

メッセージ部分を半透明にし、少し高級感があるので、満足しています。

ソース解説

このコードは、pygame を用いてバトル画面の描画を管理するクラス Battle を実装したものです。それぞれのメソッドがどのように動作するかを順番に解説します。

クラスの全体構造

Battle クラスは、バトルシーンを描画・制御する役割を持っています。
主に以下を管理しています:
1. 背景画像や敵キャラクターの描画。
2. テキストエリアの更新とクリア。
3. プレイヤーの選択肢（ボタン）を管理。
4. アニメーション（フェードインやテキストの描画効果）。

コンストラクタ: `init`

def __init__(self):
    self.display_surface = pg.display.get_surface()
    self.back_ground_img = pg.image.load('../battle/bg.png').convert()
    ...

バトル画面の初期設定を行います。
- self.display_surface: ゲームの描画対象となるスクリーン。
- self.back_ground_img: バトル背景画像の読み込み。
- self.font: メッセージ描画に使うフォントを設定。
- self.battle_message: 表示するメッセージのリスト。
- self.mob_surface: 敵キャラクターの画像を格納。

`draw` メソッド

def draw(self, player):
    enemy = player.collided_enemy
    self.mob_pos =  ((WIDTH - 128) / 2, HEIGHT / 8)
    self.mob_surface = enemy.battle_surface.copy()
    self.display_surface.blit(enemy.battle_surface, self.mob_pos)

    self.action_command()
    ...

バトル画面全体を描画します。
- 敵キャラクターを中央に配置して描画。
- プレイヤーの行動選択肢（ボタン）を描画。
- 最初のメッセージ（敵が出現したことを通知）を設定し、描画します。

`fade_text` メソッド

def fade_text(self):
    for alpha in range(0, 70, 5):
        temp_surface = self.back_ground_img.copy()
        temp_surface.set_alpha(alpha)
        self.display_surface.blit(temp_surface, self.rect.topleft + self.off_set)
        pg.display.flip()
        pg.time.delay(1)
    self.display_surface.blit(self.mob_surface, self.mob_pos)

テキストを描画する前に、背景画像を段階的にフェード表示します。
- set_alpha(alpha): 透明度を調整してフェード効果を実現。
- 一定間隔で pg.display.flip() を呼び出すことでアニメーション効果を実現しています。

`clear_text_area` メソッド

def clear_text_area(self):
    self.text_area_rect = pg.Rect(250, 430, self.bg_size[0] * 0.95, self.bg_size[1] * 0.3)

    semi_transparent_surface = pg.Surface(self.text_area_rect.size, pg.SRCALPHA)
    semi_transparent_surface.fill((0, 0, 255, 128))

    self.display_surface.blit(semi_transparent_surface, self.text_area_rect.topleft)
    pg.draw.rect(self.display_surface, (255, 255, 255), self.text_area_rect, 3, border_radius=5)

テキストエリアを更新するための背景をクリアします。
- 半透明の青い背景を描画。
- 枠線を描画してエリアを区切ります。

`action_command` メソッド

def action_command(self):
    px = 100
    py = 300
    ...
    for button in self.action_buttons:
        button.draw(self.display_surface)

プレイヤーの行動選択肢（「攻撃」「魔法」「逃げる」）のボタンを描画します。
各ボタンには、対応するアクション関数（attack, magic, escape）が紐づけられています。

`handle_mouse_event` メソッド

def handle_mouse_event(self, event):
    if event.type == pg.MOUSEBUTTONDOWN:
        mouse_pos = event.pos
        for button in self.action_buttons:
            if button.check_click(mouse_pos):
                button.action()

マウスのクリックイベントを処理します。
- クリックされた位置がどのボタンの上にあるかを判定。
- 該当ボタンのアクション（attack, magic, escape）を実行。

`attack`, `magic`, `escape` メソッド

def attack(self):
    self.initial_action()
    self.battle_message.append('攻撃')
    self.draw_text()
    pg.display.update()

各アクション共通の処理を以下の順序で実行します。
1. initial_action: フェードとクリア処理。
2. 対応するメッセージを battle_message に追加。
3. テキストを描画。
4. 画面を更新。

`fade_in` メソッド

def fade_in(self):
    for alpha in range(0, 125, 5):
        temp_surface = self.back_ground_img.copy()
        temp_surface.set_alpha(alpha)
        self.display_surface.blit(temp_surface, self.rect.topleft + self.off_set)
        pg.display.flip()
        pg.time.delay(30)

バトル画面全体をフェードインで表示するアニメーションを実現します。
set_alpha で透明度を調整し、pg.time.delay で描画間隔を調整しています。

まとめ

このクラスは pygame を使って、バトル画面での描画・更新・操作を実現するための便利な仕組みを提供しています。

フェード処理: fade_in や fade_text で視覚的な演出を追加。
メッセージ描画: draw_text で動的にメッセージを表示。
アクションボタン: マウスクリックで対応するアクションを実行。