ゲーム開発で使用したテクニック～フェード演出～

個人でゲーム開発をしている中で、実装に苦労した部分が多かったので、テクニックとして紹介していこうと思います。

今回は「フェード演出」について書きます。

フェードイン

画面が徐々に表示されていく演出です。
以下は実装したコードです。

def fade_in(self):
    """
    フェードインさせる
    """
    temp_surface = self.IMG.copy()
    for alpha in range(0, 131, 10):
        if alpha == 130:
            alpha = 125
        temp_surface.set_alpha(alpha)
        self.screen.blit(temp_surface, self.INIT_POS)
        pg3.display.update()
        pg3.time.delay(30)

「self.IMG」に表示したい画像が読み込まれています。
その画像オブジェクトのアルファ値を「0～125」まで「10ずつ」加算していきます。
「self.INIT_POS」は表示したい位置です。
「pg3.time.delay」またはステップ数（今回だと10）でフェードのスピードを調整できると思います。

フェードアウト

画面が徐々に暗転していく演出です。
以下は実装したコードです。

def fade_out(self):
    """
    フェードアウトさせる
    """
    temp_surface = pg3.Surface(self.DISP_SIZE, pg3.SRCALPHA)
    for change in range(0, 261, 10):
        if change == 260:
            change = 255
        self.screen.blit(self.IMG, self.INIT_POS)
        self.screen.blit(self.IMG_LIST[0], (250, 200))
        pg3.time.delay(1)
        temp_surface.fill((0, 0, 0, change))
        self.screen.blit(temp_surface, self.INIT_POS)
        pg3.display.update()

こちらは別途サーフェイスを作成しています。
「self.IMG」だけでなく「self.IMG_LIST[0]」もフェードアウトの対象にしたかったからです。
サーフェイスのアルファ値を「change」で更新しています。
こちらも「pg3.time.delay」またはステップ数（今回だと10）でフェードのスピードを調整できると思います。

注意点

フェード演出に共通していることですが、アルファ値の上限が決まっているので、ステップ数次第では上限を超えてしまい、エラーになることがありました。
それを回避する為、IF文で一定数値を超えたら上限を設定するようにしてあります。
ただし無限ループにならないように、rangeの上限には注意が必要です。

また、画面にオブジェクトがたくさんある場合、フェード中にすべて再描画する必要がありました。

def fade_out(self):
    """
    フェードアウトさせる
    """
    temp_surface = pg3.Surface(self.DISP_SIZE, pg3.SRCALPHA)
    for change in range(0, 261, 10):
        if change == 260:
            change = 255
        self.redraw()
        pg3.time.delay(1)
        temp_surface.fill((0, 0, 0, change))
        self.screen.blit(temp_surface, self.INIT_POS)
        pg3.display.update()

「self.redraw()」のように、再描画処理は別関数へまとめるようにしました。
redrawの中で「pg3.display.update」をコールする必要はありません。

「フェード演出」に関しては以上となります。

リリース済みのゲームはこちら

・PC向け無料ゲーム
『LAbyrinth』（2Dの迷路探索ゲーム）
●Freem!
https://www.freem.ne.jp/win/game/33791
●Unityroom
https://unityroom.com/games/2025-labyrinth-isukaka