【C++/OpenSiv3D】泡のアニメーション Texture

泡が上昇するアニメーションを RenderTexture で生成し、そのテクスチャを UI やゲームの要素に使うと、面白い表現ができます。
この記事では、泡の生成、アニメーションの更新、Texture の取得までを 4 行で書けるようにする BubbleTexture クラスを実装します。（対象バージョン: OpenSiv3D v0.4.2 以上）

BubbleTexture クラスのソースコード

コピーすれば、すぐに使えます。

class BubbleTexture
{
private:

	// 泡を描画する内部テクスチャ
	MSRenderTexture m_texture;

	// 泡を表現する Circle の配列
	Array<Circle> m_bubbles;

	// 泡の発生レートの最大値（個/秒）
	static constexpr double MaxSpawnRate = 300.0;

	// 泡のスピードの最小値（ピクセル/秒）
	static constexpr double MinSpeed = 10.0;

	// 泡の発生レート（個/秒）
	double m_spawnRate = 10.0;

	// 泡のスピード（ピクセル/秒）
	double m_speed = 40.0;

	// 泡の最小サイズ
	double m_minSize = 0.0;

	// 泡の最大サイズ
	double m_maxSize = 0.0;

	// 泡発生更新用のカウンタ
	double m_timeAccum = 0.0;

public:

	BubbleTexture() = default;

	// コンストラクタ
	BubbleTexture(const Size& size, double spawnRate, double speed, double minSize, double maxSize)
		: m_texture(size)
		, m_spawnRate(Clamp(spawnRate, 0.0, MaxSpawnRate))
		, m_speed(Max(speed, MinSpeed))
		, m_minSize(minSize)
		, m_maxSize(maxSize)
	{
		// prewarm
		const double prewarmTime = (size.y + m_maxSize * 2) / speed;
		const double prewarmStepTime = 1.0 / 60.0;

		for (int32 i = 0; i < (prewarmTime / prewarmStepTime); ++i)
		{
			update(prewarmStepTime);
		}
	}

	// 泡の更新
	void update(double deltaTime)
	{
		// 泡の移動
		{
			const double speedBase = ((m_minSize + m_maxSize) * 0.5);

			for (auto& bubble : m_bubbles)
			{
				bubble.y -= deltaTime * m_speed * (bubble.r / speedBase);
			}
			m_bubbles.remove_if([maxSize = m_maxSize](const Circle& c) { return c.y < -maxSize; });
		}

		// 泡の発生
		{
			m_timeAccum += deltaTime;

			const double spawnTime = 1.0 / m_spawnRate;

			while (m_timeAccum > spawnTime)
			{
				const RectF spawnArea(-m_maxSize, m_texture.height() + m_maxSize, m_texture.width() + (m_maxSize * 2), m_maxSize);

				m_bubbles.emplace_back(RandomVec2(spawnArea), Random(m_minSize, m_maxSize));

				m_timeAccum -= spawnTime;
			}
		}
	}

	// 泡を内部テクスチャに描画
	void render(const ColorF& backgroundColor)
	{
		m_texture.clear(backgroundColor);
		{
			ScopedRenderTarget2D rt(m_texture);
			ScopedRenderStates2D blend(BlendState::Additive);

			for (const auto& bubble : m_bubbles)
			{
				const double a = EaseInQuad(0.15 + bubble.y / m_texture.height() * 0.45);
				bubble.draw(ColorF(1.0, a));
			}
		}
		Graphics2D::Flush();
		m_texture.resolve();
	}

	// 内部テクスチャを取得
	const Texture& getTexture() const
	{
		return m_texture;
	}
};

使用例 1

# include <Siv3D.hpp> // OpenSiv3D v0.4.2

/* ここに BubbleTexture クラス */

void Main()
{
	Scene::SetBackground(ColorF(0.4));

	const Font font(40, U"example/font/LogoTypeGothic/LogoTypeGothic.otf");

	constexpr Size size(240, 80);

	constexpr RoundRect button(280, 400, size, 20);

	BubbleTexture bubbleTexture(size, 10, 40, 2, 6);

	while (System::Update())
	{
		// 泡の更新
		{
			bubbleTexture.update(Scene::DeltaTime());
			bubbleTexture.render(ColorF(0.1, 0.3, 0.6));
		}

		// 描画
		{
			// 背景
			Circle(Scene::Center(), 800).draw(ColorF(1.0), ColorF(0.1, 0.3, 0.6));

			// ボタン
			button(bubbleTexture.getTexture())
				.draw()
				.drawFrame(2, 0, ColorF(1.0, 0.5));

			// ボタンの文字
			font(U"はじめる").drawAt(button.center());

			// カーソル
			if (button.mouseOver())
			{
				Cursor::RequestStyle(CursorStyle::Hand);
			}
		}
	}
}

使用例 2

# include <Siv3D.hpp> // OpenSiv3D v0.4.2

/* ここに BubbleTexture クラス */

void Main()
{
	Scene::SetBackground(ColorF(0.4));

	const Texture texture(Emoji(U"🐧"));

	constexpr Size size(180, 240);

	constexpr RoundRect rect(310, 200, size, 90);

	BubbleTexture bubbleTexture(Size(size.x * 2, size.y), 50, 90, 1, 4);

	while (System::Update())
	{
		// 泡の更新
		{
			bubbleTexture.update(Scene::DeltaTime());
			bubbleTexture.render(ColorF(0.0));
		}

		// 描画
		{
			Circle(Scene::Center(), 800).draw(ColorF(0.3, 0.0, 0.3), ColorF(0.0));

			Ellipse(rect.rect.bottomCenter(), rect.w / 4, rect.w / 12)
				.draw(ColorF(0.6));

			rect.draw(ColorF(0.1, 0.8, 0.2, 0.6));
			
			{
				ScopedRenderStates2D blend(BlendState::Additive);
				rect(bubbleTexture.getTexture()(0, 0, size)).draw();
			}

			texture.drawAt(rect.center().movedBy(0, Periodic::Sine0_1(5s) * 10));

			rect.draw(ColorF(0.1, 0.8, 0.2, 0.3));

			{
				ScopedRenderStates2D blend(BlendState::Additive);
				rect(bubbleTexture.getTexture()(size.x, 0, size)).draw();
			}

			rect.drawFrame(0.5, 0, ColorF(0.0, 0.5));

			Ellipse(rect.rect.topCenter().movedBy(0, 8), rect.w / 4, rect.w / 12)
				.draw(ColorF(0.6));
		}
	}
}