ゲーム開発で使用したテクニック～スキルエフェクト～

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

今回は「スキルエフェクト」について書きます。

概要

スキルを使用したときに円形（輪）のエフェクトを表示させます。
通常スキルは円を1回表示させます。
必殺技は円を3回表示させます。

円1回

def skill_effect(self, rgb, Player):
    """
    スキル使用時のエフェクトを描画する
    """
    x,y = Player.ICON_POS
    r,g,b = rgb
    width = 10
    for radius in range(0, 128, 1):
        self.screen.fill(self.BG_COLOR)
        self.screen.blit(Player.P_IMG, (x, y), Player.get_direction())
        pg3.draw.circle(self.screen,(r,g,b),(x+30,y+30),radius*8,width)
        pg3.time.delay(4)
        pg3.display.update()
    # 元に戻す
    self.redraw()
    # プレイヤーを表示する
    self.screen.blit(Player.P_IMG, (x, y), Player.get_direction())
    pg3.display.update()

radiusを更新することで、円はプレイヤーを中心に広がっていき、画面外に消えていきます。
描画がかなり重く、円を表示している間は背景とプレイヤー以外は表示しないようにしました。
円の描画が終わったら「self.redraw()」で画面全体を再描画しています。
「Player.get_direction()」はプレイヤーの現在の向きに応じた切り取り位置を返す関数です。

円3回

def skill_effect_sp(self, rgb, Player):
    """
    SPスキル使用時のエフェクトを描画する
    """
    x,y = Player.ICON_POS
    r,g,b = rgb
    width = 10
    temp_surface = pg3.Surface(self.DISP_SIZE, pg3.SRCALPHA)
    for radius in range(0, 128, 1):
        self.screen.fill(self.BG_COLOR)
        self.screen.blit(Player.P_IMG, (x, y), Player.get_direction())
        pg3.draw.circle(self.screen,(r,g,b),(x+30,y+30),radius*8,width)
        if radius > 25:
            pg3.draw.circle(self.screen,(r,g,b),(x+30,y+30),(radius-25)*8,width)
        if radius > 50:
            pg3.draw.circle(self.screen,(r,g,b),(x+30,y+30),(radius-50)*8,width)
        temp_surface.fill((r, g, b, radius))
        self.screen.blit(temp_surface, (0, 0))
        pg3.time.delay(3)
        pg3.display.update()
    # 元に戻す
    self.redraw()
    # プレイヤーを表示する
    self.screen.blit(Player.P_IMG, (x, y), Player.get_direction())
    pg3.display.update()

処理は円1回と大体同じです。
radiusが一定値を超えたら次の円を表示します。
最後の円が画面外に消えるように調整しています。
こちらは描画時に半透明のサーフェイスも描画しています。
透明度はradiusに一致させているので、円が広がると同時に透明度も変更されます。

「スキルエフェクト」に関しては以上となります。

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

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