【もぐら叩きゲーム】ゲージのようなエフェクトを作る①

crow

画像1

逆三角形を描いてメーターのようなエフェクトを作成する。

Color color = //メーターを上昇させる条件
    ? Palette::Blue 
    : Palette::White;
Triangle(Vec2(1500, 100), Vec2(1650, 950), Vec2(1800, 100))
    .draw(ColorF(color, 0.3));

Vec2 leftBottomCornerVec = Vec2(1625, 800);
Vec2 rightBottomCornerVec = Vec2(1675, 800);

if (//メーターを上昇させる条件) {
    double t = Min(stopwatch.sF(), 1.0);
    double easeOut = EaseOutCirc(t);
    
    Vec2 pos1 = leftBottomCornerVec.lerp(Vec2(1570, 500), easeOut);
    Vec2 pos2 = rightBottomCornerVec.lerp(Vec2(1730, 500), easeOut);
    
    Triangle(pos1, Vec2(1650, 950), pos2)
        .draw(ColorF(Palette::Blue, 0.5));
}　else {
       Triangle(whiteLeftBottomCornerVec,
           Vec2(1650, 950),
           whiteRightBottomCornerVec)
               .draw(ColorF(Palette::White, 0.5));
}

まずはベースとなる背景側メーターを逆三角形で描画する。

（メーターの横ラインについてのコードは割愛）

画像2

色は上昇前と上昇後で変えるので、条件を指定しておく。

次に実メーター（実際に移動するメーター）のVec2を指定する。

メーター上昇前と上昇後のVec2をそれぞれ条件式で分岐させ、処理を記述する。上昇させる際はイージング関数(例:EaseOutCirc)を使用して移動をなめらかにする。

画像3

エンジンメーターのようなゲージの微動に関しては次回の記事で紹介する。