Merge feat/notifier-polish — geometria i animació del Notifier al ui.yaml
This commit is contained in:
commit
964c32dd0d
7 files changed
+156
-38
No files matched your search
@@ -65,6 +65,22 @@ hud:
|
||||
flash_ms: 250 # durada del flash quan un jugador rep un hit
|
||||
shake_ms: 300 # durada del shake que acompanya el flash
|
||||
|
||||
# Geometria del popup superior (Notifier). En píxels del canvas, llevat de
|
||||
# slide_ms (durada en ms de l'animació d'entrada i d'eixida; constant
|
||||
# independentment de la mida de la caixa). El padding vertical és asimètric a
|
||||
# propòsit: padding_top > padding_bottom puja una mica el text dins la caixa.
|
||||
# Corbes disponibles: linear, outQuad, inQuad, inOutQuad, outCubic, inCubic.
|
||||
notifier:
|
||||
padding_h: 6
|
||||
padding_top: 4
|
||||
padding_bottom: 3
|
||||
line_gap: 1
|
||||
margin_top: 3
|
||||
border_px: 1
|
||||
slide_ms: 400
|
||||
slide_in_curve: outCubic
|
||||
slide_out_curve: inCubic
|
||||
|
||||
# Pausa graduada de la GameScene: el món no para d'un colp, s'atura amb
|
||||
# easing i torna a arrancar amb una altra corba. Els timings es poden
|
||||
# afinar independentment, i les corbes permeten estils diferents entrant
|
||||
|
||||
@@ -154,6 +154,14 @@ namespace GlobalInputs {
|
||||
Options::setVideoRenderInfoPosition(static_cast<Defaults::RenderInfoPosition>(NEXT));
|
||||
}
|
||||
|
||||
// Debug helper: dispara una notificació prou llarga perquè
|
||||
// `wrapToWidth` la parteixi en (almenys) dues línies. Útil per a
|
||||
// verificar visualment el padding asimètric, el line_gap i la caixa
|
||||
// multilinia després de tocar la geometria a `data/ui.yaml`.
|
||||
void onDebugLongNotification() {
|
||||
Notification::notify("Notificació de prova llarga per a comprovar que el text es parteix correctament en dues línies dins la caixa.");
|
||||
}
|
||||
|
||||
void onExit() {
|
||||
if (exit_window_s > 0.0F) {
|
||||
quit_requested = true;
|
||||
@@ -193,6 +201,10 @@ namespace GlobalInputs {
|
||||
onCycleRenderInfo();
|
||||
} else if (SC == KeyConfig::get().scancode("exit")) {
|
||||
onExit();
|
||||
} else if (SC == SDL_SCANCODE_KP_2) {
|
||||
// Tecla de debug fora del KeyConfig: dispara una notificació
|
||||
// multilinia per a inspeccionar el layout de la caixa.
|
||||
onDebugLongNotification();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
#include "core/rendering/screen.hpp"
|
||||
#include "core/rendering/text.hpp"
|
||||
#include "core/ui/ui_config.hpp"
|
||||
#include "utils/defines.hpp"
|
||||
|
||||
namespace {
|
||||
@@ -67,26 +68,39 @@ void Notifier::init(std::shared_ptr<Text> text, const Palette& ui_palette) {
|
||||
}
|
||||
|
||||
void Notifier::update(int delta_ms) {
|
||||
const float DT = static_cast<float>(delta_ms) / 1000.0F;
|
||||
const auto& geo = UiConfig::get().notifier();
|
||||
switch (status_) {
|
||||
case Status::RISING:
|
||||
y_ += SLIDE_SPEED * DT;
|
||||
if (y_ >= static_cast<float>(MARGIN_TOP + BORDER_PX)) {
|
||||
y_ = static_cast<float>(MARGIN_TOP + BORDER_PX);
|
||||
case Status::RISING: {
|
||||
slide_elapsed_ms_ += delta_ms;
|
||||
if (slide_elapsed_ms_ >= geo.slide_ms) {
|
||||
y_ = slide_y_on_;
|
||||
status_ = Status::ACTIVE;
|
||||
} else {
|
||||
const float T = static_cast<float>(slide_elapsed_ms_) / static_cast<float>(geo.slide_ms);
|
||||
const float K = geo.slide_in_curve(T);
|
||||
y_ = slide_y_off_ + ((slide_y_on_ - slide_y_off_) * K);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case Status::ACTIVE:
|
||||
remaining_ms_ -= delta_ms;
|
||||
if (remaining_ms_ <= 0) { status_ = Status::VANISHING; }
|
||||
break;
|
||||
case Status::VANISHING:
|
||||
y_ -= SLIDE_SPEED * DT;
|
||||
if (y_ <= static_cast<float>(-current_box_h_ - BORDER_PX)) {
|
||||
y_ = static_cast<float>(-current_box_h_ - BORDER_PX - MARGIN_TOP);
|
||||
status_ = Status::HIDDEN;
|
||||
if (remaining_ms_ <= 0) {
|
||||
slide_elapsed_ms_ = 0;
|
||||
status_ = Status::VANISHING;
|
||||
}
|
||||
break;
|
||||
case Status::VANISHING: {
|
||||
slide_elapsed_ms_ += delta_ms;
|
||||
if (slide_elapsed_ms_ >= geo.slide_ms) {
|
||||
y_ = slide_y_off_;
|
||||
status_ = Status::HIDDEN;
|
||||
} else {
|
||||
const float T = static_cast<float>(slide_elapsed_ms_) / static_cast<float>(geo.slide_ms);
|
||||
const float K = geo.slide_out_curve(T);
|
||||
y_ = slide_y_on_ + ((slide_y_off_ - slide_y_on_) * K);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -95,6 +109,7 @@ void Notifier::update(int delta_ms) {
|
||||
void Notifier::render() {
|
||||
if (status_ == Status::HIDDEN || text_ == nullptr || current_lines_.empty()) { return; }
|
||||
|
||||
const auto& geo = UiConfig::get().notifier();
|
||||
const int BOX_X = (GameCanvas::WIDTH - current_box_w_) / 2;
|
||||
const int BOX_Y = static_cast<int>(y_);
|
||||
|
||||
@@ -106,13 +121,13 @@ void Notifier::render() {
|
||||
// costat i una mica fora de la caixa. Cada segment es queda dins del
|
||||
// rang del costat corresponent perquè les cantonades no es cobrisquen.
|
||||
const std::uint32_t BORDER_ARGB = ui_palette_[current_text_color_];
|
||||
Screen::get().fillRect(BOX_X, BOX_Y - BORDER_PX, current_box_w_, BORDER_PX, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X, BOX_Y + current_box_h_, current_box_w_, BORDER_PX, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X - BORDER_PX, BOX_Y, BORDER_PX, current_box_h_, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X + current_box_w_, BOX_Y, BORDER_PX, current_box_h_, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X, BOX_Y - geo.border_px, current_box_w_, geo.border_px, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X, BOX_Y + current_box_h_, current_box_w_, geo.border_px, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X - geo.border_px, BOX_Y, geo.border_px, current_box_h_, BORDER_ARGB);
|
||||
Screen::get().fillRect(BOX_X + current_box_w_, BOX_Y, geo.border_px, current_box_h_, BORDER_ARGB);
|
||||
|
||||
const int LINE_STEP = Rendering::Hud::FONT_SIZE_PX + LINE_GAP;
|
||||
int line_y = BOX_Y + PADDING_V;
|
||||
const int LINE_STEP = Rendering::Hud::FONT_SIZE_PX + geo.line_gap;
|
||||
int line_y = BOX_Y + geo.padding_top;
|
||||
for (const auto& line : current_lines_) {
|
||||
text_->writeDX(Text::CENTER_FLAG | Text::COLOR_FLAG,
|
||||
GameCanvas::CENTER_X,
|
||||
@@ -129,18 +144,26 @@ void Notifier::notify(const std::string& text, Uint8 text_color, Uint8 bg_color,
|
||||
// gestionar-ne una cua, canviar ací per una FIFO quan calga.
|
||||
if (text_ == nullptr) { return; }
|
||||
|
||||
const auto& geo = UiConfig::get().notifier();
|
||||
const int MAX_TEXT_WIDTH = GameCanvas::WIDTH - (2 * SIDE_MARGIN) - (2 * geo.padding_h);
|
||||
current_lines_ = wrapToWidth(text, MAX_TEXT_WIDTH, *text_, 1);
|
||||
|
||||
// Amplada = max de les línies + padding. Alçada = N*glif + (N-1)*gap + padding.
|
||||
// Amplada = max de les línies + padding. Alçada = N*glif + (N-1)*gap + padding asimètric.
|
||||
const int MAX_LINE_W = std::accumulate(current_lines_.begin(), current_lines_.end(), 0, [this](int acc, const std::string& s) { return std::max(acc, text_->length(s, 1)); });
|
||||
current_box_w_ = MAX_LINE_W + (2 * PADDING_H);
|
||||
current_box_w_ = MAX_LINE_W + (2 * geo.padding_h);
|
||||
|
||||
const int N = static_cast<int>(current_lines_.size());
|
||||
current_box_h_ = (N * Rendering::Hud::FONT_SIZE_PX) + ((N - 1) * LINE_GAP) + (2 * PADDING_V);
|
||||
current_box_h_ = (N * Rendering::Hud::FONT_SIZE_PX) + ((N - 1) * geo.line_gap) + geo.padding_top + geo.padding_bottom;
|
||||
|
||||
current_text_color_ = text_color;
|
||||
current_bg_color_ = bg_color;
|
||||
remaining_ms_ = time_ms;
|
||||
y_ = static_cast<float>(-current_box_h_ - BORDER_PX - MARGIN_TOP);
|
||||
|
||||
// Posicions extremes en y (top-left de la caixa). Off = totalment fora
|
||||
// del canvas per dalt; On = posició final amb la vora respectada.
|
||||
slide_y_off_ = static_cast<float>(-current_box_h_ - geo.border_px - geo.margin_top);
|
||||
slide_y_on_ = static_cast<float>(geo.margin_top + geo.border_px);
|
||||
slide_elapsed_ms_ = 0;
|
||||
y_ = slide_y_off_;
|
||||
status_ = Status::RISING;
|
||||
}
|
||||
@@ -43,16 +43,11 @@ class Notifier {
|
||||
|
||||
void notify(const std::string& text, Uint8 text_color, Uint8 bg_color, int time_ms);
|
||||
|
||||
static constexpr int PADDING_H = 6;
|
||||
static constexpr int PADDING_V = 3;
|
||||
static constexpr int LINE_GAP = 1; // Separació vertical entre línies multilinia.
|
||||
static constexpr int MARGIN_TOP = 2; // Separació amb la vora superior del canvas (fins a la línia exterior).
|
||||
static constexpr int BORDER_PX = 1; // Gruix de la vora externa de color text.
|
||||
static constexpr float SLIDE_SPEED = 120.0F;
|
||||
// Amplada màxima (sense comptar padding) que pot ocupar el text abans que
|
||||
// `wrapToWidth` el parteixi en línies. Deixem marge respecte a la vora del
|
||||
// canvas perquè la caixa no toqui els laterals.
|
||||
static constexpr int MAX_TEXT_WIDTH = GameCanvas::WIDTH - 20 - (2 * PADDING_H);
|
||||
// Marge lateral entre la caixa i les vores esquerra/dreta del canvas.
|
||||
// Limita l'amplada disponible al text en multilinia (combinat amb el
|
||||
// padding horitzontal llegit d'UiConfig). No està exposat al YAML
|
||||
// perquè en pantalles 240 px no té sentit retallar més.
|
||||
static constexpr int SIDE_MARGIN = 10;
|
||||
|
||||
private:
|
||||
enum class Status : std::uint8_t { HIDDEN,
|
||||
@@ -73,4 +68,11 @@ class Notifier {
|
||||
Uint8 current_text_color_{0};
|
||||
Uint8 current_bg_color_{0};
|
||||
int remaining_ms_{0};
|
||||
|
||||
// Animació d'entrada/eixida per temps. `slide_elapsed_ms_` avança
|
||||
// amb el delta dins de RISING/VANISHING; els extrems s'avaluen a
|
||||
// `notify()` perquè depenen de la mida de la caixa.
|
||||
int slide_elapsed_ms_{0};
|
||||
float slide_y_off_{0.0F};
|
||||
float slide_y_on_{0.0F};
|
||||
};
|
||||
@@ -102,7 +102,18 @@ UiConfig::UiConfig()
|
||||
placeholder_font_{.name = Defaults::UI::Font::PLACEHOLDER_NAME, .gif = Defaults::UI::Font::PLACEHOLDER_GIF, .fnt = Defaults::UI::Font::PLACEHOLDER_FNT, .kerning = Defaults::UI::Font::PLACEHOLDER_KERNING},
|
||||
room_text_font_{.name = Defaults::UI::Font::ROOM_TEXT_NAME, .gif = Defaults::UI::Font::ROOM_TEXT_GIF, .fnt = Defaults::UI::Font::ROOM_TEXT_FNT, .kerning = Defaults::UI::Font::ROOM_TEXT_KERNING},
|
||||
menu_title_font_{.name = Defaults::UI::Font::MENU_TITLE_NAME, .gif = Defaults::UI::Font::MENU_TITLE_GIF, .fnt = Defaults::UI::Font::MENU_TITLE_FNT, .kerning = Defaults::UI::Font::MENU_TITLE_KERNING},
|
||||
menu_items_font_{.name = Defaults::UI::Font::MENU_ITEMS_NAME, .gif = Defaults::UI::Font::MENU_ITEMS_GIF, .fnt = Defaults::UI::Font::MENU_ITEMS_FNT, .kerning = Defaults::UI::Font::MENU_ITEMS_KERNING} {
|
||||
menu_items_font_{.name = Defaults::UI::Font::MENU_ITEMS_NAME, .gif = Defaults::UI::Font::MENU_ITEMS_GIF, .fnt = Defaults::UI::Font::MENU_ITEMS_FNT, .kerning = Defaults::UI::Font::MENU_ITEMS_KERNING},
|
||||
notifier_{
|
||||
.padding_h = Defaults::UI::Notifier::PADDING_H,
|
||||
.padding_top = Defaults::UI::Notifier::PADDING_TOP,
|
||||
.padding_bottom = Defaults::UI::Notifier::PADDING_BOTTOM,
|
||||
.line_gap = Defaults::UI::Notifier::LINE_GAP,
|
||||
.margin_top = Defaults::UI::Notifier::MARGIN_TOP,
|
||||
.border_px = Defaults::UI::Notifier::BORDER_PX,
|
||||
.slide_ms = Defaults::UI::Notifier::SLIDE_MS,
|
||||
.slide_in_curve = curveByName(Defaults::UI::Notifier::SLIDE_IN_CURVE),
|
||||
.slide_out_curve = curveByName(Defaults::UI::Notifier::SLIDE_OUT_CURVE),
|
||||
} {
|
||||
}
|
||||
|
||||
auto UiConfig::get() -> UiConfig& {
|
||||
@@ -193,6 +204,19 @@ void UiConfig::load(const std::string& file_path) {
|
||||
readField(s, "menu_accept", menu_accept_sound_);
|
||||
}
|
||||
|
||||
if (yaml.contains("notifier")) {
|
||||
const auto& n = yaml["notifier"];
|
||||
readField(n, "padding_h", notifier_.padding_h);
|
||||
readField(n, "padding_top", notifier_.padding_top);
|
||||
readField(n, "padding_bottom", notifier_.padding_bottom);
|
||||
readField(n, "line_gap", notifier_.line_gap);
|
||||
readField(n, "margin_top", notifier_.margin_top);
|
||||
readField(n, "border_px", notifier_.border_px);
|
||||
readField(n, "slide_ms", notifier_.slide_ms);
|
||||
readCurve(n, "slide_in_curve", notifier_.slide_in_curve);
|
||||
readCurve(n, "slide_out_curve", notifier_.slide_out_curve);
|
||||
}
|
||||
|
||||
std::cout << "UiConfig: carregat des de " << file_path << '\n';
|
||||
} catch (const std::exception& e) {
|
||||
std::cerr << "UiConfig: error parsejant " << file_path << ": " << e.what() << '\n';
|
||||
|
||||
@@ -20,6 +20,27 @@ class UiConfig {
|
||||
int kerning;
|
||||
};
|
||||
|
||||
// Signatura d'una funció d'easing: t ∈ [0, 1] → valor ∈ [0, 1].
|
||||
// Permet triar corbes des de data/ui.yaml per nom (cadena) i guardar
|
||||
// el punter a la corresponent funció de `utils/easing.hpp`.
|
||||
using CurveFn = auto (*)(float) -> float;
|
||||
|
||||
// Geometria del Notifier (popup superior). Carregada des de
|
||||
// data/ui.yaml secció `notifier:`; els valors per defecte vénen de
|
||||
// Defaults::UI::Notifier. El moviment és per temps (slide_ms) i no per
|
||||
// velocitat, perquè una caixa més gran no triga més a entrar/eixir.
|
||||
struct Notifier {
|
||||
int padding_h;
|
||||
int padding_top;
|
||||
int padding_bottom;
|
||||
int line_gap;
|
||||
int margin_top;
|
||||
int border_px;
|
||||
int slide_ms;
|
||||
CurveFn slide_in_curve;
|
||||
CurveFn slide_out_curve;
|
||||
};
|
||||
|
||||
static auto get() -> UiConfig&;
|
||||
|
||||
UiConfig(const UiConfig&) = delete;
|
||||
@@ -51,11 +72,6 @@ class UiConfig {
|
||||
[[nodiscard]] auto roomText() const -> Uint8 { return room_text_; }
|
||||
[[nodiscard]] auto roomTextOutline() const -> Uint8 { return room_text_outline_; }
|
||||
|
||||
// Signatura d'una funció d'easing: t ∈ [0, 1] → valor ∈ [0, 1].
|
||||
// Permet triar corbes des de data/ui.yaml per nom (cadena) i guardar
|
||||
// el punter a la corresponent funció de `utils/easing.hpp`.
|
||||
using CurveFn = auto (*)(float) -> float;
|
||||
|
||||
// Timings (ms).
|
||||
[[nodiscard]] auto notificationMs() const -> int { return notification_ms_; }
|
||||
[[nodiscard]] auto exitMs() const -> int { return exit_ms_; }
|
||||
@@ -88,6 +104,9 @@ class UiConfig {
|
||||
[[nodiscard]] auto menuTitleFont() const -> const Font& { return menu_title_font_; }
|
||||
[[nodiscard]] auto menuItemsFont() const -> const Font& { return menu_items_font_; }
|
||||
|
||||
// Geometria del Notifier.
|
||||
[[nodiscard]] auto notifier() const -> const Notifier& { return notifier_; }
|
||||
|
||||
// Flags visuals.
|
||||
[[nodiscard]] auto hudBgEnabled() const -> bool { return hud_bg_enabled_; }
|
||||
|
||||
@@ -135,5 +154,7 @@ class UiConfig {
|
||||
Font menu_title_font_;
|
||||
Font menu_items_font_;
|
||||
|
||||
Notifier notifier_;
|
||||
|
||||
bool hud_bg_enabled_{false};
|
||||
};
|
||||
@@ -168,6 +168,26 @@ namespace Defaults {
|
||||
constexpr Uint8 NOTIFICATION_BG = 64;
|
||||
constexpr int NOTIFICATION_TIME_MS = 4000;
|
||||
|
||||
// Geometria del Notifier (en píxels del canvas). Asimètric a
|
||||
// propòsit: PADDING_TOP > PADDING_BOTTOM puja una mica el text
|
||||
// dins la caixa i deixa la base més arrapada al vora inferior.
|
||||
// MARGIN_TOP és la separació entre la vora superior del canvas i
|
||||
// la línia exterior de la caixa. SLIDE_MS és la durada de l'entrada
|
||||
// i de l'eixida (independent de la mida de la caixa, perquè el
|
||||
// moviment va per temps i no per velocitat). Les corbes són noms
|
||||
// del registre d'`Easing` (veure UiConfig::curveByName).
|
||||
namespace Notifier {
|
||||
constexpr int PADDING_H = 6;
|
||||
constexpr int PADDING_TOP = 4;
|
||||
constexpr int PADDING_BOTTOM = 3;
|
||||
constexpr int LINE_GAP = 1;
|
||||
constexpr int MARGIN_TOP = 3;
|
||||
constexpr int BORDER_PX = 1;
|
||||
constexpr int SLIDE_MS = 400;
|
||||
constexpr const char* SLIDE_IN_CURVE = "outCubic";
|
||||
constexpr const char* SLIDE_OUT_CURVE = "inCubic";
|
||||
} // namespace Notifier
|
||||
|
||||
// Preset per a la confirmació d'eixida (ESC doble). La durada ha
|
||||
// de coincidir amb la del Notifier perquè el missatge i la finestra
|
||||
// de confirmació expiren alhora (veure GlobalInputs::onExit).
|
||||
|
||||
Reference in new issue
Block a user