Add Hud. (#22)

* Add Hud.

- Divide viewport into hud and game areas.
- Add lavender hex for gun beam in styles.

* Update bave ref to stable 0.4.7.

Author: karnkaul

CMakeLists.txt

@@ -11,7 +11,7 @@ include(FetchContent)
 FetchContent_Declare(
   bave
   GIT_REPOSITORY https://github.com/karnkaul/bave
-  GIT_TAG 2b1b7ce206a031aa2c2c957f67c8bf92cc031b10 # v0.4.6
+  GIT_TAG 13ef94fe81e8914335b903c37c58bb2207fd786d # v0.4.7
   SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/ext/bave"
 )
 

assets/styles.json

@@ -5,7 +5,8 @@
     "mocha": "#6f5a48ff",
     "milk": "#e5cdaeff",
     "ice": "#0xd6dbe1e1",
-    "orange": "#f75c03ff"
+    "orange": "#f75c03ff",
+    "gun_beam": "#bc96e6ff"
   },
   "buttons": {
     "default": {

src/spaced/spaced/game/enemies/creep.cpp

@@ -5,6 +5,6 @@ using bave::Seconds;
 
 void Creep::tick(Seconds const dt) {
 	shape.transform.position.x -= x_speed * dt.count();
-	if (shape.transform.position.x < -0.5f * (get_layout().get_world_space().x + shape.get_shape().size.x)) { health = 0.0f; }
+	if (shape.transform.position.x < -0.5f * (get_layout().get_world_space().x + shape.get_shape().size.x)) { set_destroyed(); }
 }
 } // namespace spaced

src/spaced/spaced/game/enemy.cpp

@@ -10,8 +10,10 @@ using bave::RoundedQuad;
 Enemy::Enemy(Services const& services, bave::NotNull<IScorer*> scorer, std::string_view const type)
 	: m_layout(&services.get<ILayout>()), m_scorer(scorer), m_type(type) {
 	static constexpr auto init_size_v = glm::vec2{100.0f};
-	auto const y_bounds = 0.5f * (get_layout().get_world_space().y - 0.5f * init_size_v.y);
-	setup(init_size_v, random_in_range(-y_bounds, y_bounds));
+	auto const play_area = m_layout->get_play_area();
+	auto const y_min = play_area.rb.y + 0.5f * init_size_v.y;
+	auto const y_max = play_area.lt.y - 0.5f * init_size_v.y;
+	setup(init_size_v, random_in_range(y_min, y_max));
 }
 
 auto Enemy::take_damage(float const damage) -> bool {

src/spaced/spaced/game/enemy.hpp

@@ -16,7 +16,9 @@ class Enemy : public IDamageable, public bave::IDrawable {
 	[[nodiscard]] auto get_bounds() const -> bave::Rect<> override { return shape.get_bounds(); }
 	auto take_damage(float damage) -> bool override;
 
-	[[nodiscard]] auto is_destroyed() const -> bool { return health.is_dead(); }
+	[[nodiscard]] auto is_dead() const -> bool { return health.is_dead(); }
+	[[nodiscard]] auto is_destroyed() const -> bool { return is_dead() || m_destroyed; }
+	void set_destroyed() { m_destroyed = true; }
 
 	virtual void tick(bave::Seconds dt) = 0;
 	void draw(bave::Shader& shader) const override { shape.draw(shader); }
@@ -40,5 +42,6 @@ class Enemy : public IDamageable, public bave::IDrawable {
 	bave::NotNull<ILayout const*> m_layout;
 	bave::NotNull<IScorer*> m_scorer;
 	std::string_view m_type{};
+	bool m_destroyed{};
 };
 } // namespace spaced

src/spaced/spaced/game/enemy_spawner.cpp

@@ -15,7 +15,7 @@ EnemySpawner::EnemySpawner(Spawn spawn, ParticleEmitter explode) : m_spawn(std::
 void EnemySpawner::tick(Seconds const dt) {
 	for (auto const& enemy : m_enemies) {
 		enemy->tick(dt);
-		if (enemy->is_destroyed()) { explode_at(enemy->get_bounds().centre()); }
+		if (enemy->is_dead()) { explode_at(enemy->get_bounds().centre()); }
 	}
 
 	for (auto& emitter : m_explodes) { emitter.tick(dt); }

src/spaced/spaced/game/hud.cpp

@@ -0,0 +1,43 @@
+#include <fmt/format.h>
+#include <spaced/game/hud.hpp>
+#include <spaced/services/styles.hpp>
+
+namespace spaced {
+using bave::TextHeight;
+
+Hud::Hud(Services const& services) : ui::View(services), m_styles(&services.get<Styles>()), m_area(m_layout->get_hud_area()) {
+	create_background();
+	create_score(services);
+
+	block_input_events = false;
+}
+
+void Hud::set_score(std::int64_t const score) { m_score->text.set_string(fmt::format("{}", score)); }
+
+void Hud::create_background() {
+	auto background = std::make_unique<ui::OutlineQuad>();
+	m_background = background.get();
+	background->set_outline_width(0.0f);
+	background->set_size(m_area.size());
+	background->set_position(m_area.centre());
+	background->set_tint(m_styles->rgbas["milk"]);
+	push(std::move(background));
+}
+
+void Hud::create_score(Services const& services) {
+	auto const& rgbas = m_styles->rgbas;
+
+	auto text = std::make_unique<ui::Text>(services);
+	m_score = text.get();
+	text->text.set_height(TextHeight{60});
+	text->text.set_string("9999999999");
+	auto const text_bounds = text->text.get_bounds();
+	auto const text_bounds_size = text_bounds.size();
+	text->text.transform.position = m_area.centre();
+	text->text.transform.position.y -= 0.5f * text_bounds_size.y;
+	text->text.set_string("0");
+	text->text.tint = rgbas["grey"];
+
+	push(std::move(text));
+}
+} // namespace spaced

src/spaced/spaced/game/hud.hpp

@@ -0,0 +1,24 @@
+#pragma once
+#include <spaced/services/styles.hpp>
+#include <spaced/ui/outline_quad.hpp>
+#include <spaced/ui/text.hpp>
+#include <spaced/ui/view.hpp>
+
+namespace spaced {
+class Hud : public ui::View {
+  public:
+	explicit Hud(Services const& services);
+
+	void set_score(std::int64_t score);
+
+  private:
+	void create_background();
+	void create_score(Services const& services);
+
+	bave::NotNull<Styles const*> m_styles;
+	bave::Rect<> m_area{};
+
+	bave::Ptr<ui::OutlineQuad> m_background{};
+	bave::Ptr<ui::Text> m_score{};
+};
+} // namespace spaced

src/spaced/spaced/game/player.cpp

@@ -94,10 +94,11 @@ void Player::do_inspect() {
 }
 
 void Player::setup_ship() {
-	auto const x = m_services->get<ILayout>().get_player_x();
+	auto const& layout = m_services->get<ILayout>();
+	auto const x = layout.get_player_x();
 	ship.transform.position.x = x;
 	auto rounded_quad = RoundedQuad{};
-	rounded_quad.size = glm::vec2{100.0f};
+	rounded_quad.size = layout.get_player_size();
 	rounded_quad.corner_radius = 20.0f;
 	ship.set_shape(rounded_quad);
 }

src/spaced/spaced/scenes/game.cpp

@@ -19,6 +19,7 @@ using bave::KeyMods;
 using bave::PointerMove;
 using bave::PointerTap;
 using bave::Ptr;
+using bave::Rgba;
 using bave::Seconds;
 using bave::Shader;
 using bave::Texture;
@@ -27,6 +28,11 @@ namespace {
 [[nodiscard]] auto make_player_controller(Services const& services) {
 	auto ret = std::make_unique<PlayerController>(services);
 	if constexpr (bave::platform_v == bave::Platform::eAndroid) { ret->set_type(PlayerController::Type::eTouch); }
+	auto const& layout = services.get<ILayout>();
+	auto const half_size = 0.5f * layout.get_player_size();
+	auto const play_area = layout.get_play_area();
+	ret->max_y = play_area.lt.y - half_size.y;
+	ret->min_y = play_area.rb.y + half_size.y;
 	return ret;
 }
 
@@ -38,8 +44,10 @@ namespace {
 Game::Game(App& app, Services const& services) : Scene(app, services, "Game"), m_player(services, make_player_controller(services)) {
 	clear_colour = services.get<Styles>().rgbas["mocha"];
 	auto asset_loader = AssetLoader{make_loader(), &services.get<Resources>()};
-	auto task = asset_loader.make_load_texture("images/foam_bubble.png");
-	add_load_tasks({&task, 1});
+	auto tasks = std::array{
+		asset_loader.make_load_texture("images/foam_bubble.png"),
+	};
+	add_load_tasks(tasks);
 }
 
 void Game::on_loaded() {
@@ -59,6 +67,10 @@ void Game::on_loaded() {
 	emitter.config.lerp.tint = {rgbas["orange"], rgbas["milk"]};
 	emitter.config.lerp.tint.hi.channels.w = 0x0;
 	m_enemy_spawner.emplace(spawn, std::move(emitter));
+
+	auto hud = std::make_unique<Hud>(get_services());
+	m_hud = hud.get();
+	push_view(std::move(hud));
 }
 
 void Game::on_focus(bave::FocusChange const& focus_change) { m_player.on_focus(focus_change); }
@@ -97,6 +109,11 @@ void Game::render(Shader& shader) const {
 	m_player.draw(shader);
 }
 
+void Game::add_score(std::int64_t const score) {
+	m_score += score;
+	m_hud->set_score(m_score);
+}
+
 void Game::inspect(Seconds const dt, Seconds const frame_time) {
 	if constexpr (bave::imgui_v) {
 		m_debug.fps.tick(dt);

src/spaced/spaced/scenes/game.hpp

@@ -1,5 +1,6 @@
 #pragma once
 #include <spaced/game/enemy_spawner.hpp>
+#include <spaced/game/hud.hpp>
 #include <spaced/game/player.hpp>
 #include <spaced/game/scorer.hpp>
 #include <spaced/game/target_provider.hpp>
@@ -24,14 +25,15 @@ class Game : public Scene, public ITargetProvider, public IScorer {
 	[[nodiscard]] auto get_targets() const -> std::span<bave::NotNull<IDamageable*> const> final { return m_targets; }
 
 	[[nodiscard]] auto get_score() const -> std::int64_t final { return m_score; }
-	void add_score(std::int64_t const score) final { m_score += score; }
+	void add_score(std::int64_t score) final;
 
 	void inspect(bave::Seconds dt, bave::Seconds frame_time);
 
 	Player m_player;
 	std::int64_t m_score{};
 	std::optional<EnemySpawner> m_enemy_spawner{};
 	std::vector<bave::NotNull<IDamageable*>> m_targets{};
+	bave::Ptr<Hud> m_hud{};
 
 	struct {
 		struct {

src/spaced/spaced/scenes/home.cpp

@@ -14,7 +14,7 @@ using bave::TextHeight;
 Home::Home(bave::App& app, Services const& services) : Scene(app, services, "Home") {
 	auto const& resources = services.get<Resources>();
 	auto tasks = std::array{
-		util::create_font_atlas_task(resources.main_font, {TextHeight{100}}),
+		util::create_font_atlas_task(resources.main_font, {TextHeight{100}, TextHeight{60}}),
 	};
 	add_load_tasks(tasks);
 }

src/spaced/spaced/services/layout.hpp

@@ -8,9 +8,12 @@ class ILayout : public IService {
 	[[nodiscard]] virtual auto get_main_view() const -> bave::RenderView const& = 0;
 	[[nodiscard]] virtual auto get_framebuffer_size() const -> glm::vec2 = 0;
 	[[nodiscard]] virtual auto get_world_space() const -> glm::vec2 = 0;
+	[[nodiscard]] virtual auto get_play_area() const -> bave::Rect<> = 0;
+	[[nodiscard]] virtual auto get_hud_area() const -> bave::Rect<> = 0;
 	[[nodiscard]] virtual auto project_to_world(glm::vec2 fb_point) const -> glm::vec2 = 0;
 	[[nodiscard]] virtual auto unproject(glm::vec2 pointer) const -> glm::vec2 = 0;
 	[[nodiscard]] virtual auto get_player_x() const -> float = 0;
+	[[nodiscard]] virtual auto get_player_size() const -> glm::vec2 = 0;
 
 	virtual void set_framebuffer_size(glm::vec2 size) = 0;
 };

src/spaced/spaced/spaced.cpp

@@ -20,6 +20,7 @@ using bave::MouseScroll;
 using bave::NotNull;
 using bave::PointerMove;
 using bave::PointerTap;
+using bave::Rect;
 using bave::RenderDevice;
 using bave::RenderView;
 
@@ -48,12 +49,16 @@ struct Layout : ILayout {
 	NotNull<RenderDevice const*> render_device;
 	RenderView main_view{};
 	glm::vec2 framebuffer_size{};
+	Rect<> play_area{};
+	Rect<> hud_area{};
 
 	explicit Layout(NotNull<RenderDevice const*> render_device) : render_device(render_device) {}
 
 	[[nodiscard]] auto get_main_view() const -> RenderView const& final { return main_view; }
 	[[nodiscard]] auto get_framebuffer_size() const -> glm::vec2 final { return framebuffer_size; }
 	[[nodiscard]] auto get_world_space() const -> glm::vec2 final { return main_view.viewport; }
+	[[nodiscard]] auto get_play_area() const -> bave::Rect<> final { return play_area; }
+	[[nodiscard]] auto get_hud_area() const -> bave::Rect<> final { return hud_area; }
 
 	[[nodiscard]] auto project_to_world(glm::vec2 fb_point) const -> glm::vec2 final { return render_device->project_to(get_world_space(), fb_point); }
 
@@ -63,6 +68,7 @@ struct Layout : ILayout {
 	}
 
 	[[nodiscard]] auto get_player_x() const -> float final { return -700.0f; }
+	[[nodiscard]] auto get_player_size() const -> glm::vec2 final { return glm::vec2{100.0f}; }
 
 	void set_framebuffer_size(glm::vec2 const size) final { framebuffer_size = size; }
 };
@@ -136,6 +142,12 @@ void Spaced::set_layout() {
 	layout->main_view = app.get_render_device().get_default_view();
 	layout->main_view.viewport = app.get_render_device().get_viewport_scaler().match_height({1920.0f, 1080.0f});
 	layout->framebuffer_size = app.get_framebuffer_size();
+	auto const hud_size = glm::vec2{layout->main_view.viewport.x, 100.0f};
+	auto const hud_origin = glm::vec2{0.0f, 0.5f * (layout->main_view.viewport.y - hud_size.y)};
+	layout->hud_area = Rect<>::from_size(hud_size, hud_origin);
+	auto const play_size = glm::vec2{hud_size.x, layout->main_view.viewport.y - hud_size.y};
+	auto const play_origin = glm::vec2{0.0f, -0.5f * (layout->main_view.viewport.y - play_size.y)};
+	layout->play_area = Rect<>::from_size(play_size, play_origin);
 	m_services.bind<ILayout>(std::move(layout));
 }
 

src/spaced/spaced/ui/view.cpp

@@ -27,7 +27,7 @@ void View::tick(Seconds const dt) {
 }
 
 void View::render(Shader& shader) const {
-	if (m_widgets.empty()) { return; }
+	if (m_elements.empty()) { return; }
 	shader.set_render_view(m_layout->get_main_view());
 	for (auto const& element : m_elements) { element->draw(shader); }
 }