Progress bar helper class #1467

BlueWitherer · 2025-08-16T12:31:29Z

Since the base game doesn't use a class to create its progress bar UI, I would like to propose a helper class that I wrote that can help developers easily re-create them without having to use and set up the sprites and set the texture rects themselves.

`ProgressBar`

This class creates a progress bar. It can mimic the style of the progress bar shown while playing a level, or the style of the Normal/Practice mode progress bars shown when looking at your current best progress in the level. It inherits cocos2d::CCNode.

static ProgressBar* create(); // Create the custom progress bar

void setStyle(ProgressBarStyle style); // Set the style of the progress bar
void setProgressBarFillColor(ccColor3B color); // Set the color of the fill of the bar

virtual void updateProgress(float value); // Update the size of the fill of the bar

float getProgress() const; // Get the current progress percentage of the bar
CCLabelBMFont* getProgressLabel() const; // Get the progress percentage text label node
ProgressBarStyle getProgressBarStyle() const; // Get the current style of the progress bar

void showProgressLabel(bool show); // Show the label displaying the current percentage of progress

Example

auto bar = ProgressBar::create();
bar->setProgressBarFillColor({100, 100, 255});
bar->setStyle(ProgressBarStyle::Solid);
bar->showProgressLabel(false); // Don't show percentage text

bar->updateProgress(20.5f); // Sets to 20.5% full

this->addChild(bar);

progresstest.mp4

HJfod

Thank you very much for this PR! Left a few comments & fix suggestions, but looking good overall :)

loader/include/Geode/ui/ProgressBarSolid.hpp

loader/include/Geode/ui/ProgressBar.hpp

HJfod · 2025-08-31T07:37:46Z

loader/include/Geode/ui/ProgressBar.hpp

+        Ref<CCSprite> m_progressBar = nullptr; // Progress bar outline
+        CCSprite* m_progressBarFill = nullptr; // Progress bar fill
+
+        float m_progress = 0.f; // Current progress bar fill percentage ranging from 0 to 100
+
+        float m_progressBarFillMaxWidth = 0.f; // Max width for the progress fill bar node
+        float m_progressBarFillMaxHeight = 0.f; // Max height for the progress fill bar node


Class members should be PIMPL; aka these should be behind a source-defined Impl class and std::unique_ptr<Impl> m_impl. See other Geode classes for examples

loader/src/ui/nodes/ProgressBar.cpp

BlueWitherer · 2025-09-01T20:34:32Z

appreciate the feedback! i've made adjustments based on what you mentioned and asked for - lmk if anything else could use further tweaking :D

matcool · 2025-09-05T16:12:14Z

loader/include/Geode/ui/ProgressBar.hpp

+         *
+         * @param color RGB color object
+         */
+        void setProgressBarFillColor(ccColor3B color);


personally just setFillColor is enough

matcool · 2025-09-05T16:12:34Z

loader/include/Geode/ui/ProgressBar.hpp

+        /**
+         * Get the current style of the progress bar
+         */
+        ProgressBarStyle getProgressBarStyle() const;


should just be getStyle, like how setStyle is

matcool · 2025-09-05T16:12:58Z

loader/src/ui/nodes/ProgressBar.cpp

+    Ref<CCSprite> progressBar = nullptr; // Progress bar outline
+    CCSprite* progressBarFill = nullptr; // Progress bar fill
+    CCLabelBMFont* progressPercentLabel = nullptr; // The text label displaying the percentage
+
+    float progress = 0.0f; // Current progress bar fill percentage ranging from 0 to 100
+
+    ccColor3B progressBarFillColor = { 255, 255, 255 }; // Current color of the filled progress bar
+    bool showProgressPercentLabel = false; // Whether to show the label showing the percentage of the current progress
+
+    ProgressBarStyle style = ProgressBarStyle::Level; // Style of the progress bar
+
+    float progressBarFillMaxWidth = 0.0f; // Max width for the progress fill bar node
+    float progressBarFillMaxHeight = 0.0f; // Max height for the progress fill bar node


imo comments should be on the line before, not at the end of the line

matcool · 2025-09-05T16:13:11Z

loader/src/ui/nodes/ProgressBar.cpp

+        m_impl->style = style;
+
+        this->removeAllChildren();
+        init(); // init again with new style


calling CCNode::init multiple times 😟

BlueWitherer · 2025-09-05T22:22:09Z

sorry about all that, hopefully this fixes it!

HJfod

Looks good to me, don't have any major complaints, just some styling suggestions! Tyvm for this PR!

HJfod · 2025-09-20T17:33:11Z

loader/include/Geode/ui/ProgressBar.hpp

+        std::unique_ptr<Impl> m_impl;
+
+        ProgressBar();
+        ~ProgressBar();


The destructor should be marked virtual

HJfod · 2025-09-20T17:34:52Z

loader/src/ui/nodes/ProgressBar.cpp

+    case ProgressBarStyle::Level:
+        m_impl->progressBar = CCSprite::create("slidergroove2.png");
+        m_impl->progressBar->setID("progress-bar");
+        m_impl->progressBar->setAnchorPoint({ 0.5, 0.5 });
+        m_impl->progressBar->setPosition({ m_impl->progressBar->getScaledContentWidth() / 2.0f, m_impl->progressBar->getScaledContentHeight() / 2.0f });
+        m_impl->progressBar->setZOrder(1);
+
+        m_impl->progressBarFill = CCSprite::create("sliderBar2.png");
+        m_impl->progressBarFill->setID("progress-bar-fill");
+        m_impl->progressBarFill->setAnchorPoint({ 0, 0.5 });
+        m_impl->progressBarFill->setPosition({ 2.0f, m_impl->progressBar->getScaledContentHeight() / 2.0f });
+        m_impl->progressBarFill->setColor(m_impl->progressBarFillColor);
+        m_impl->progressBarFill->setZOrder(-1);
+
+        m_impl->progressBarFillMaxWidth = m_impl->progressBar->getScaledContentWidth() - 4.0f;
+        m_impl->progressBarFillMaxHeight = m_impl->progressBarFill->getScaledContentHeight() - 0.5f;
+
+        m_impl->progressPercentLabel = CCLabelBMFont::create("0%", "bigFont.fnt");
+        m_impl->progressPercentLabel->setID("progress-percent-label");
+        m_impl->progressPercentLabel->setScale(0.5f);
+        m_impl->progressPercentLabel->setAnchorPoint({ 0, 0.5 });
+        m_impl->progressPercentLabel->setPosition({ m_impl->progressBar->getScaledContentWidth() + 2.5f, m_impl->progressBar->getScaledContentHeight() / 2.0f });
+        m_impl->progressPercentLabel->setAlignment(CCTextAlignment::kCCTextAlignmentLeft);
+        m_impl->progressPercentLabel->setVisible(m_impl->showProgressPercentLabel);
+        m_impl->progressPercentLabel->setZOrder(1);


This is just a styling thing but I would indent this whole thing one tab and then surround the block with braces, like so:

switch (x) { case y: { // code here... } break; }

HJfod · 2025-09-20T17:35:53Z

loader/include/Geode/ui/ProgressBar.hpp

+        ProgressBar();
+        ~ProgressBar();
+
+        void customSetup();


I tend to call functions like this reload or reloadStyle instead to make it clear that it may (and should) be called multiple times

HJfod · 2025-09-20T17:37:52Z

loader/src/ui/nodes/ProgressBar.cpp

+    };
+
+    if (m_impl->progressPercentLabel) {
+        auto percentString = fmt::format("{}%", static_cast<int>(m_impl->progress));


This should probably use geode::utils::numToString with a precision of 0. The class should probably also have a way to customize the precision of the percentage

BlueWitherer · 2025-09-20T19:26:30Z

happy to contribute! hopefully i've made this as best as it could possibly be!

progress bars

d78f3ad

BlueWitherer marked this pull request as ready for review August 16, 2025 12:44

BlueWitherer added 3 commits August 21, 2025 10:39

Merge branch 'geode-sdk:main' into main

5833511

Merge branch 'geode-sdk:main' into main

9cd6e67

Merge branch 'geode-sdk:main' into main

4313cf7

HJfod requested changes Aug 31, 2025

View reviewed changes

BlueWitherer added 2 commits September 1, 2025 15:26

merge classes and add pimpl

7dd5c09

dont force options

2ff3f4d

BlueWitherer changed the title ~~Progress bar helper classes~~ Progress bar helper class Sep 1, 2025

organize

969be70

BlueWitherer requested a review from HJfod September 1, 2025 22:33

matcool requested changes Sep 5, 2025

View reviewed changes

BlueWitherer added 2 commits September 5, 2025 14:11

customsetup, shorten func names

3a78b4e

Merge branch 'geode-sdk:main' into main

1a59f41

BlueWitherer added 2 commits September 16, 2025 09:49

Merge branch 'geode-sdk:main' into main

0ba5b28

Merge branch 'geode-sdk:main' into main

2f8003c

HJfod approved these changes Sep 20, 2025

View reviewed changes

BlueWitherer added 2 commits September 20, 2025 13:18

add percent precision, tweak some stuff

746e397

update progressbar when setting precision

de1d55c

Progress bar helper class #1467

Are you sure you want to change the base?

Progress bar helper class #1467

Uh oh!

Conversation

BlueWitherer commented Aug 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ProgressBar

Example

Uh oh!

HJfod left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BlueWitherer commented Sep 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matcool Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

BlueWitherer commented Sep 5, 2025

Uh oh!

HJfod left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

BlueWitherer commented Sep 20, 2025

Uh oh!

Uh oh!

BlueWitherer commented Aug 16, 2025 •

edited

Loading

`ProgressBar`

matcool Sep 5, 2025 •

edited

Loading