12. 変数と動き¶
時間の経過を使って変数を変化させてモーション（動き）を作る方法を学びます。
12.1 前フレームからの経過時間を調べる¶
Scene::DeltaTime() は、前フレームからの経過時間（秒）を double 型で返します。モニタが 60Hz の場合は約 0.0166 です。
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
ClearPrint();
// 60 Hz の場合, 1/60 秒（約 0.0166）
const double deltaTime = Scene::DeltaTime();
Print << deltaTime;
}
}
12.2 絵文字を動かす¶
メインループの繰り返しのたびに位置をずらすことで、移動のモーションができます。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });
const Texture emoji{ U"☃️"_emoji };
// 移動速度（ピクセル / 秒）
const double velocity = 20;
// 絵文字の X 座標
double x = 100;
while (System::Update())
{
x += (Scene::DeltaTime() * velocity);
emoji.drawAt(x, 300);
}
}
12.3 絵文字を回転させる¶
メインループの繰り返しのたびに回転角度をずらすことで、回転のモーションができます。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });
const Texture emoji{ U"🍣"_emoji };
// 回転速度（ラジアン / 秒）
const double angularVelocity = 90_deg;
// 回転角度
double angle = 0_deg;
while (System::Update())
{
angle += (Scene::DeltaTime() * angularVelocity);
emoji.rotated(angle).drawAt(400, 300);
}
}
12.4 図形の変数¶
Circle 型や Rect, RectF 型の変数を作れます。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(Palette::White);
Circle circle{ 200, 200, 100 };
RectF rect{ 400, 300, 300, 200 };
while (System::Update())
{
circle.draw(Palette::Orange);
circle.drawFrame(2, 2, Palette::Red);
rect.draw(ColorF{ 0.5 });
RectF{ rect.x, rect.y, (rect.w * 0.5), rect.h }.draw(ColorF{ 0.3, 0.9, 0.6 });
rect.drawFrame(4, 4, ColorF{ 0.2 });
}
}
12.5 図形を動かす¶
図形のメンバ変数を時間の経過に応じて変更することで、図形の位置や大きさをアニメーションできます。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });
Circle circle{ 200, 300, 0 };
RectF rect{ 300, 200, 300, 200 };
while (System::Update())
{
double deltaTime = Scene::DeltaTime();
circle.r += (deltaTime * 20);
rect.x += (deltaTime * 10);
circle.draw();
rect.draw(ColorF{ 0.5 });
}
}
12.6 経過時間を蓄積する¶
前フレームからの経過時間を蓄積することで、時間を測定できます。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });
const Font font{ FontMethod::MSDF, 48 };
// 経過時間の蓄積（秒）
double accumulatedTime = 0.0;
while (System::Update())
{
accumulatedTime += Scene::DeltaTime();
font(U"経過時間: {:.2f}"_fmt(accumulatedTime)).draw(40, 20, 20, Palette::Black);
}
}
12.7 残り時間をカウントダウンする¶
残り時間から Scene::DeltaTime() の値を引いていくことで、時間のカウントダウンができます。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });
const Font font{ FontMethod::MSDF, 48 };
// 残り時間（秒）
double timeLeft = 5.0;
while (System::Update())
{
timeLeft -= Scene::DeltaTime();
if (0.0 < timeLeft)
{
font(U"残り時間: {:.2f}"_fmt(timeLeft)).draw(40, 20, 20, Palette::Black);
}
else
{
font(U"ゲームオーバー").draw(40, 20, 20, Palette::Black);
}
}
}
12.8 一定時間ごとにイベントを発生させる¶
12.6 を応用すると、一定時間ごとにイベントを発生させることができます。蓄積時間が一定時間を超えたらイベントを発生させ、蓄積時間をその時間だけ減らします。
次のコードでは、3 秒ごとに Print << U"Hello!" を実行します。
# include <Siv3D.hpp>
void Main()
{
Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });
const Font font{ FontMethod::MSDF, 48 };
// 周期（秒）
const double interval = 3.0;
// 蓄積時間（秒）
double accumulatedTime = 0.0;
while (System::Update())
{
accumulatedTime += Scene::DeltaTime();
font(U"accumulatedTime: {:.2f}"_fmt(accumulatedTime)).draw(40, 200, 20, Palette::Black);
// 蓄積時間が一定時間を超えたら
if (interval <= accumulatedTime)
{
Print << U"Hello!";
// 蓄積時間からマイナス
accumulatedTime -= interval;
}
}
}
蓄積時間を完全に 0 にリセットしない理由
蓄積時間を accumulatedTime = 0.0 でリセットしないのは、例えば頻度が 3 秒ごとで、蓄積時間が 3.02 秒だった場合、イベントを発生させたあとに、余りの 0.02 秒を次のイベントの蓄積時間に使うためです。これを無視してしまうと、イベントの発生頻度が 3 秒よりも長くなってしまいます。
振り返りチェックリスト¶
-
Scene::DeltaTime()で前フレームからの経過時間（秒）を取得できることを学んだ - 経過時間を使って絵文字を動かす方法を学んだ
- 経過時間を使って図形を動かす方法を学んだ
- 経過時間を蓄積して時間を測定する方法を学んだ
- 経過時間を利用して残り時間をカウントダウンする方法を学んだ
- 経過時間の蓄積を利用して、一定時間ごとにイベントを発生させる方法を学んだ