Added alignment support and separate dimming of gamelist and system views to the help system.

es-app/src/guis/GuiAlternativeEmulators.cpp

@@ -242,10 +242,3 @@ std::vector<HelpPrompt> GuiAlternativeEmulators::getHelpPrompts()
         prompts.push_back(HelpPrompt("a", "select"));
     return prompts;
 }
-
-HelpStyle GuiAlternativeEmulators::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiAlternativeEmulators.h

@@ -26,7 +26,7 @@ private:
 
     bool input(InputConfig* config, Input input) override;
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
     MenuComponent mMenu;
     bool mHasSystems;

es-app/src/guis/GuiGamelistFilter.cpp

@@ -17,7 +17,6 @@
 #include "guis/GuiTextEditKeyboardPopup.h"
 #include "guis/GuiTextEditPopup.h"
 #include "utils/StringUtil.h"
-#include "views/ViewController.h"
 
 GuiGamelistFilter::GuiGamelistFilter(SystemData* system,
                                      std::function<void(bool)> filterChangedCallback)
@@ -256,10 +255,3 @@ std::vector<HelpPrompt> GuiGamelistFilter::getHelpPrompts()
     prompts.push_back(HelpPrompt("a", "select"));
     return prompts;
 }
-
-HelpStyle GuiGamelistFilter::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiGamelistFilter.h

@@ -14,6 +14,7 @@
 #include "FileFilterIndex.h"
 #include "GuiComponent.h"
 #include "components/MenuComponent.h"
+#include "views/ViewController.h"
 
 template <typename T> class OptionListComponent;
 class SystemData;
@@ -27,7 +28,7 @@ public:
     bool input(InputConfig* config, Input input) override;
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     void initializeMenu();

es-app/src/guis/GuiGamelistOptions.cpp

@@ -539,13 +539,6 @@ bool GuiGamelistOptions::input(InputConfig* config, Input input)
     return mMenu.input(config, input);
 }
 
-HelpStyle GuiGamelistOptions::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(mSystem->getTheme(), "system");
-    return style;
-}
-
 std::vector<HelpPrompt> GuiGamelistOptions::getHelpPrompts()
 {
     auto prompts = mMenu.getHelpPrompts();

es-app/src/guis/GuiGamelistOptions.h

@@ -30,7 +30,7 @@ public:
 
     bool input(InputConfig* config, Input input) override;
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     void openGamelistFilter();

es-app/src/guis/GuiMenu.cpp

@@ -30,7 +30,6 @@
 #include "guis/GuiTextEditKeyboardPopup.h"
 #include "guis/GuiTextEditPopup.h"
 #include "utils/PlatformUtil.h"
-#include "views/ViewController.h"
 
 #include <SDL2/SDL_events.h>
 #include <algorithm>
@@ -1476,10 +1475,3 @@ std::vector<HelpPrompt> GuiMenu::getHelpPrompts()
     prompts.push_back(HelpPrompt("start", "close menu"));
     return prompts;
 }
-
-HelpStyle GuiMenu::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiMenu.h

@@ -13,6 +13,7 @@
 #include "GuiComponent.h"
 #include "components/MenuComponent.h"
 #include "guis/GuiSettings.h"
+#include "views/ViewController.h"
 
 class GuiMenu : public GuiComponent
 {
@@ -23,7 +24,7 @@ public:
     bool input(InputConfig* config, Input input) override;
     void onSizeChanged() override;
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     void close(bool closeAllWindows);

es-app/src/guis/GuiMetaDataEd.cpp

@@ -30,7 +30,6 @@
 #include "guis/GuiTextEditPopup.h"
 #include "resources/Font.h"
 #include "utils/StringUtil.h"
-#include "views/ViewController.h"
 
 #define TITLE_HEIGHT (mTitle->getFont()->getLetterHeight() + Renderer::getScreenHeight() * 0.060f)
 
@@ -886,10 +885,3 @@ std::vector<HelpPrompt> GuiMetaDataEd::getHelpPrompts()
     prompts.push_back(HelpPrompt("b", "back"));
     return prompts;
 }
-
-HelpStyle GuiMetaDataEd::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiMetaDataEd.h

@@ -19,6 +19,7 @@
 #include "components/ScrollIndicatorComponent.h"
 #include "guis/GuiSettings.h"
 #include "scrapers/Scraper.h"
+#include "views/ViewController.h"
 
 class ComponentList;
 class TextComponent;
@@ -37,7 +38,7 @@ public:
     void onSizeChanged() override;
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     void save();

es-app/src/guis/GuiOfflineGenerator.cpp

@@ -11,7 +11,6 @@
 
 #include "SystemData.h"
 #include "components/MenuComponent.h"
-#include "views/ViewController.h"
 
 GuiOfflineGenerator::GuiOfflineGenerator(const std::queue<FileData*>& gameQueue)
     : mGameQueue {gameQueue}
@@ -327,10 +326,3 @@ std::vector<HelpPrompt> GuiOfflineGenerator::getHelpPrompts()
     std::vector<HelpPrompt> prompts = mGrid.getHelpPrompts();
     return prompts;
 }
-
-HelpStyle GuiOfflineGenerator::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiOfflineGenerator.h

@@ -14,6 +14,7 @@
 #include "MiximageGenerator.h"
 #include "components/ButtonComponent.h"
 #include "components/ComponentGrid.h"
+#include "views/ViewController.h"
 
 #include <queue>
 
@@ -30,7 +31,7 @@ private:
     void update(int deltaTime) override;
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
     std::queue<FileData*> mGameQueue;
 

es-app/src/guis/GuiScraperMenu.cpp

@@ -18,7 +18,6 @@
 #include "guis/GuiMsgBox.h"
 #include "guis/GuiOfflineGenerator.h"
 #include "guis/GuiScraperMulti.h"
-#include "views/ViewController.h"
 
 GuiScraperMenu::GuiScraperMenu(std::string title)
     : mMenu {title}
@@ -1134,10 +1133,3 @@ std::vector<HelpPrompt> GuiScraperMenu::getHelpPrompts()
     prompts.push_back(HelpPrompt("y", "start"));
     return prompts;
 }
-
-HelpStyle GuiScraperMenu::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiScraperMenu.h

@@ -14,6 +14,7 @@
 #include "components/MenuComponent.h"
 #include "guis/GuiSettings.h"
 #include "scrapers/Scraper.h"
+#include "views/ViewController.h"
 
 class FileData;
 class SwitchComponent;
@@ -31,7 +32,7 @@ public:
     bool input(InputConfig* config, Input input) override;
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     void pressedStart();

es-app/src/guis/GuiScraperMulti.cpp

@@ -22,7 +22,6 @@
 #include "components/TextComponent.h"
 #include "guis/GuiMsgBox.h"
 #include "guis/GuiScraperSearch.h"
-#include "views/ViewController.h"
 
 GuiScraperMulti::GuiScraperMulti(const std::queue<ScraperSearchParams>& searches,
                                  bool approveResults)
@@ -312,10 +311,3 @@ std::vector<HelpPrompt> GuiScraperMulti::getHelpPrompts()
     std::vector<HelpPrompt> prompts = mGrid.getHelpPrompts();
     return prompts;
 }
-
-HelpStyle GuiScraperMulti::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiScraperMulti.h

@@ -18,6 +18,7 @@
 #include "components/NinePatchComponent.h"
 #include "components/ScrollIndicatorComponent.h"
 #include "scrapers/Scraper.h"
+#include "views/ViewController.h"
 
 class GuiScraperSearch;
 class TextComponent;
@@ -32,7 +33,7 @@ public:
     void onSizeChanged() override;
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     void acceptResult(const ScraperSearchResult& result);

es-app/src/guis/GuiScraperSearch.cpp

@@ -33,7 +33,6 @@
 #include "guis/GuiTextEditPopup.h"
 #include "resources/Font.h"
 #include "utils/StringUtil.h"
-#include "views/ViewController.h"
 
 #define FAILED_VERIFICATION_RETRIES 8
 
@@ -1007,10 +1006,3 @@ std::vector<HelpPrompt> GuiScraperSearch::getHelpPrompts()
 
     return prompts;
 }
-
-HelpStyle GuiScraperSearch::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}

es-app/src/guis/GuiScraperSearch.h

@@ -21,6 +21,7 @@
 #include "components/BusyComponent.h"
 #include "components/ComponentGrid.h"
 #include "scrapers/Scraper.h"
+#include "views/ViewController.h"
 
 #include <future>
 #include <thread>
@@ -82,7 +83,7 @@ public:
     void update(int deltaTime) override;
     void render(const glm::mat4& parentTrans) override;
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
     void onSizeChanged() override;
 
     void decreaseScrapeCount()

es-app/src/guis/GuiScraperSingle.cpp

@@ -16,7 +16,6 @@
 #include "components/ButtonComponent.h"
 #include "components/MenuComponent.h"
 #include "components/TextComponent.h"
-#include "views/ViewController.h"
 
 GuiScraperSingle::GuiScraperSingle(ScraperSearchParams& params,
                                    std::function<void(const ScraperSearchResult&)> doneFunc,
@@ -192,13 +191,6 @@ std::vector<HelpPrompt> GuiScraperSingle::getHelpPrompts()
     return prompts;
 }
 
-HelpStyle GuiScraperSingle::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}
-
 void GuiScraperSingle::close()
 {
     // This will cause update() to close the GUI.

es-app/src/guis/GuiScraperSingle.h

@@ -15,6 +15,7 @@
 #include "components/NinePatchComponent.h"
 #include "components/ScrollIndicatorComponent.h"
 #include "guis/GuiScraperSearch.h"
+#include "views/ViewController.h"
 
 class GuiScraperSingle : public GuiComponent
 {
@@ -29,7 +30,7 @@ public:
     void update(int deltaTime) override;
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     bool mClose;

es-app/src/guis/GuiSettings.cpp

@@ -19,7 +19,6 @@
 #include "guis/GuiTextEditKeyboardPopup.h"
 #include "guis/GuiTextEditPopup.h"
 #include "views/GamelistView.h"
-#include "views/ViewController.h"
 
 #include <SDL2/SDL.h>
 
@@ -233,13 +232,6 @@ bool GuiSettings::input(InputConfig* config, Input input)
     return GuiComponent::input(config, input);
 }
 
-HelpStyle GuiSettings::getHelpStyle()
-{
-    HelpStyle style = HelpStyle();
-    style.applyTheme(ViewController::getInstance()->getState().getSystem()->getTheme(), "system");
-    return style;
-}
-
 std::vector<HelpPrompt> GuiSettings::getHelpPrompts()
 {
     std::vector<HelpPrompt> prompts = mMenu.getHelpPrompts();

es-app/src/guis/GuiSettings.h

@@ -13,6 +13,7 @@
 
 #include "SystemData.h"
 #include "components/MenuComponent.h"
+#include "views/ViewController.h"
 
 // This is just a really simple template for a GUI that calls some save functions when closed.
 class GuiSettings : public GuiComponent
@@ -60,7 +61,7 @@ public:
 
     bool input(InputConfig* config, Input input) override;
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return ViewController::getInstance()->getViewHelpStyle(); }
 
 private:
     MenuComponent mMenu;

es-app/src/views/GamelistLegacy.h

@@ -307,6 +307,7 @@ void GamelistView::legacyOnThemeChanged(const std::shared_ptr<ThemeData>& theme)
     }
 
     sortChildren();
+    mHelpStyle.applyTheme(mTheme, getName());
 }
 
 void GamelistView::legacyUpdateInfoPanel()

es-app/src/views/GamelistView.cpp

@@ -211,6 +211,7 @@ void GamelistView::onThemeChanged(const std::shared_ptr<ThemeData>& theme)
                 addChild(mRatingComponents.back().get());
             }
         }
+        mHelpStyle.applyTheme(mTheme, "gamelist");
     }
 
     mList.setDefaultZIndex(50.0f);
@@ -253,16 +254,6 @@ void GamelistView::render(const glm::mat4& parentTrans)
     mRenderer->popClipRect();
 }
 
-HelpStyle GamelistView::getHelpStyle()
-{
-    HelpStyle style;
-    if (mLegacyMode)
-        style.applyTheme(mTheme, getName());
-    else
-        style.applyTheme(mTheme, "gamelist");
-    return style;
-}
-
 std::vector<HelpPrompt> GamelistView::getHelpPrompts()
 {
     std::vector<HelpPrompt> prompts;

es-app/src/views/GamelistView.h

@@ -87,7 +87,7 @@ public:
     void update(int deltaTime) override;
     void render(const glm::mat4& parentTrans) override;
 
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return mHelpStyle; }
     std::vector<HelpPrompt> getHelpPrompts() override;
 
 private:
@@ -103,6 +103,7 @@ private:
     void legacyInitMDValues();
 
     Renderer* mRenderer;
+    HelpStyle mHelpStyle;
     ViewController::GamelistViewStyle mViewStyle;
     bool mLegacyMode;
 

es-app/src/views/SystemView.cpp

@@ -209,13 +209,6 @@ std::vector<HelpPrompt> SystemView::getHelpPrompts()
     return prompts;
 }
 
-HelpStyle SystemView::getHelpStyle()
-{
-    HelpStyle style;
-    style.applyTheme(mCarousel->getEntry(mCarousel->getCursor()).object->getTheme(), "system");
-    return style;
-}
-
 void SystemView::onCursorChanged(const CursorState& /*state*/)
 {
     int cursor {mCarousel->getCursor()};
@@ -395,6 +388,7 @@ void SystemView::populate()
                 [](GuiComponent* a, GuiComponent* b) { return b->getZIndex() > a->getZIndex(); });
 
             mSystemElements.emplace_back(std::move(elements));
+            mSystemElements.back().helpStyle.applyTheme(theme, "system");
         }
 
         if (!mLegacyMode) {
@@ -517,6 +511,7 @@ void SystemView::populate()
                                  return b->getZIndex() > a->getZIndex();
                              });
             mSystemElements.emplace_back(std::move(elements));
+            mSystemElements.back().helpStyle.applyTheme(theme, "system");
         }
 
         CarouselComponent::Entry entry;

es-app/src/views/SystemView.h

@@ -28,6 +28,7 @@
 class SystemData;
 
 struct SystemViewElements {
+    HelpStyle helpStyle;
     std::string name;
     std::string fullName;
     std::vector<std::unique_ptr<GameSelectorComponent>> gameSelectors;
@@ -96,7 +97,7 @@ public:
     void onThemeChanged(const std::shared_ptr<ThemeData>& theme);
 
     std::vector<HelpPrompt> getHelpPrompts() override;
-    HelpStyle getHelpStyle() override;
+    HelpStyle getHelpStyle() override { return mSystemElements[mCarousel->getCursor()].helpStyle; }
 
 protected:
     void onCursorChanged(const CursorState& state);

es-app/src/views/ViewController.cpp

@@ -905,7 +905,7 @@ void ViewController::render(const glm::mat4& parentTrans)
 
     // Fade out.
     if (mFadeOpacity) {
-        unsigned int fadeColor = 0x00000000 | static_cast<unsigned char>(mFadeOpacity * 255);
+        unsigned int fadeColor = 0x00000000 | static_cast<unsigned char>(mFadeOpacity * 255.0f);
         mRenderer->setMatrix(parentTrans);
         mRenderer->drawRect(0.0f, 0.0f, Renderer::getScreenWidth(), Renderer::getScreenHeight(),
                             fadeColor, fadeColor);
@@ -981,6 +981,7 @@ void ViewController::reloadGamelistView(GamelistView* view, bool reloadTheme)
                 mCurrentView = newView;
 
             newView->populateCursorHistory(cursorHistoryTemp);
+            updateHelpPrompts();
             break;
         }
     }
@@ -1076,3 +1077,18 @@ HelpStyle ViewController::getHelpStyle()
 
     return mCurrentView->getHelpStyle();
 }
+
+HelpStyle ViewController::getViewHelpStyle()
+{
+    if (mState.getSystem()->getTheme()->isLegacyTheme()) {
+        // For backward compatibility with legacy theme sets, read the helpsystem theme config
+        // from the system view entry.
+        return getSystemListView()->getHelpStyle();
+    }
+    else {
+        if (mState.viewing == ViewMode::GAMELIST)
+            return getGamelistView(mState.getSystem())->getHelpStyle();
+        else
+            return getSystemListView()->getHelpStyle();
+    }
+}

es-app/src/views/ViewController.h

@@ -117,6 +117,7 @@ public:
 
     std::vector<HelpPrompt> getHelpPrompts() override;
     HelpStyle getHelpStyle() override;
+    HelpStyle getViewHelpStyle();
 
     std::shared_ptr<GamelistView> getGamelistView(SystemData* system);
     std::shared_ptr<SystemView> getSystemListView();

es-core/src/HelpStyle.cpp

@@ -3,8 +3,7 @@
 //  EmulationStation Desktop Edition
 //  HelpStyle.cpp
 //
-//  Style (default colors, position and origin) for the help system.
+//  Style (colors, position, icons etc.) for the help system.
-//  Also theme handling.
 //
 
 #include "HelpStyle.h"
@@ -14,18 +13,18 @@
 #define PREFIX "button_"
 
 HelpStyle::HelpStyle()
+    : position {Renderer::getScreenWidth() * 0.012f, Renderer::getScreenHeight() * 0.9515f}
+    , origin {glm::vec2 {}}
+    , horizontalAlignment {"left"}
+    , textColor {0x777777FF}
+    , textColorDimmed {0x777777FF}
+    , iconColor {0x777777FF}
+    , iconColorDimmed {0x777777FF}
+    , entrySpacing {16.0f}
+    , iconTextSpacing {8.0f}
+    , opacity {1.0f}
+    , letterCase {"uppercase"}
 {
-    position =
-        glm::vec2 {Renderer::getScreenWidth() * 0.012f, Renderer::getScreenHeight() * 0.9515f};
-    origin = glm::vec2 {};
-    textColor = 0x777777FF;
-    textColorDimmed = 0x777777FF;
-    iconColor = 0x777777FF;
-    iconColorDimmed = 0x777777FF;
-    entrySpacing = 16.0f;
-    iconTextSpacing = 8.0f;
-    letterCase = "uppercase";
-    opacity = 1.0f;
 
     if (FONT_SIZE_SMALL != 0)
         font = Font::get(FONT_SIZE_SMALL);
@@ -39,12 +38,33 @@ void HelpStyle::applyTheme(const std::shared_ptr<ThemeData>& theme, const std::s
     if (!elem)
         return;
 
+    if (elem->has("horizontalAlignment")) {
+        horizontalAlignment = elem->get<std::string>("horizontalAlignment");
+        if (horizontalAlignment != "left" && horizontalAlignment != "center" &&
+            horizontalAlignment != "right") {
+            LOG(LogWarning) << "HelpSystem: Invalid theme configuration, property "
+                               "<horizontalAlignment> defined as \""
+                            << horizontalAlignment << "\"";
+            horizontalAlignment = "left";
+        }
+    }
+
+    if (horizontalAlignment == "center")
+        position.x = 0.0f;
+
     if (elem->has("pos"))
         position = elem->get<glm::vec2>("pos") *
                    glm::vec2 {Renderer::getScreenWidth(), Renderer::getScreenHeight()};
 
-    if (elem->has("origin"))
+    if (elem->has("origin")) {
-        origin = elem->get<glm::vec2>("origin");
+        if (theme->isLegacyTheme()) {
+            origin = elem->get<glm::vec2>("origin");
+        }
+        else {
+            LOG(LogWarning) << "HelpSystem: Invalid theme configuration, property "
+                               "<origin> not allowed for the helpsystem component";
+        }
+    }
 
     if (elem->has("textColor"))
         textColor = elem->get<unsigned int>("textColor");

es-core/src/HelpStyle.h

@@ -3,8 +3,7 @@
 //  EmulationStation Desktop Edition
 //  HelpStyle.h
 //
-//  Style (default colors, position and origin) for the help system.
+//  Style (colors, position, icons etc.) for the help system.
-//  Also theme handling.
 //
 
 #ifndef ES_CORE_HELP_STYLE_H
@@ -21,6 +20,7 @@ class ThemeData;
 struct HelpStyle {
     glm::vec2 position;
     glm::vec2 origin;
+    std::string horizontalAlignment;
     unsigned int textColor;
     unsigned int textColorDimmed;
     unsigned int iconColor;
@@ -32,8 +32,7 @@ struct HelpStyle {
     std::string letterCase;
 
     struct CustomButtonIcons {
-
+        // Generic
-        // General.
         std::string dpad_updown;
         std::string dpad_leftright;
         std::string dpad_all;
@@ -44,7 +43,7 @@ struct HelpStyle {
         std::string button_lt;
         std::string button_rt;
 
-        // SNES.
+        // SNES
         std::string button_a_SNES;
         std::string button_b_SNES;
         std::string button_x_SNES;
@@ -52,7 +51,7 @@ struct HelpStyle {
         std::string button_start_SNES;
         std::string button_back_SNES;
 
-        // PS.
+        // PlayStation
         std::string button_a_PS;
         std::string button_b_PS;
         std::string button_x_PS;
@@ -62,7 +61,7 @@ struct HelpStyle {
         std::string button_start_PS5;
         std::string button_back_PS5;
 
-        // XBOX.
+        // XBOX
         std::string button_a_XBOX;
         std::string button_b_XBOX;
         std::string button_x_XBOX;
@@ -75,7 +74,7 @@ struct HelpStyle {
 
     CustomButtonIcons mCustomButtons;
 
-    HelpStyle(); // Default values.
+    HelpStyle();
     void applyTheme(const std::shared_ptr<ThemeData>& theme, const std::string& view);
 };
 

es-core/src/ThemeData.cpp

@@ -291,7 +291,8 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>>
        {"gameCount", UNSIGNED_INTEGER}}},
      {"helpsystem",
       {{"pos", NORMALIZED_PAIR},
-       {"origin", NORMALIZED_PAIR},
+       {"origin", NORMALIZED_PAIR}, // For backward compatibility with legacy themes.
+       {"horizontalAlignment", STRING},
        {"textColor", COLOR},
        {"textColorDimmed", COLOR},
        {"iconColor", COLOR},

es-core/src/components/HelpComponent.cpp

@@ -20,6 +20,7 @@
 static std::map<std::string, std::string> sIconPathMap {};
 
 HelpComponent::HelpComponent()
+    : mRenderer {Renderer::getInstance()}
 {
     // Assign icons.
     assignIcons();
@@ -200,7 +201,7 @@ void HelpComponent::updateGrid()
         return;
     }
 
-    std::shared_ptr<Font>& font = mStyle.font;
+    std::shared_ptr<Font>& font {mStyle.font};
 
     mGrid = std::make_shared<ComponentGrid>(glm::ivec2 {static_cast<int>(mPrompts.size()) * 4, 1});
 
@@ -212,7 +213,7 @@ void HelpComponent::updateGrid()
     float width {0.0f};
     const float height {std::round(font->getLetterHeight() * 1.25f)};
 
-    // State variable indicating whether gui is dimmed.
+    // State variable indicating whether the GUI is dimmed.
     bool isDimmed {mWindow->isBackgroundDimmed()};
 
     for (auto it = mPrompts.cbegin(); it != mPrompts.cend(); ++it) {
@@ -238,7 +239,7 @@ void HelpComponent::updateGrid()
 
         width +=
             icon->getSize().x + lbl->getSize().x +
-            ((mStyle.iconTextSpacing + mStyle.entrySpacing) * Renderer::getScreenWidthModifier());
+            ((mStyle.iconTextSpacing + mStyle.entrySpacing) * mRenderer->getScreenWidthModifier());
     }
 
     mGrid->setSize(width, height);
@@ -247,14 +248,27 @@ void HelpComponent::updateGrid()
         const int col = i * 4;
         mGrid->setColWidthPerc(col, icons.at(i)->getSize().x / width);
         mGrid->setColWidthPerc(
-            col + 1, (mStyle.iconTextSpacing * Renderer::getScreenWidthModifier()) / width);
+            col + 1, (mStyle.iconTextSpacing * mRenderer->getScreenWidthModifier()) / width);
         mGrid->setColWidthPerc(col + 2, labels.at(i)->getSize().x / width);
 
         mGrid->setEntry(icons.at(i), glm::ivec2 {col, 0}, false, false);
         mGrid->setEntry(labels.at(i), glm::ivec2 {col + 2, 0}, false, false);
     }
 
-    mGrid->setPosition({mStyle.position.x, mStyle.position.y, 0.0f});
+    if (mStyle.horizontalAlignment == "right") {
+        mGrid->setPosition({mRenderer->getScreenWidth() - mGrid->getSize().x - mStyle.position.x +
+                                mStyle.iconTextSpacing + mStyle.entrySpacing,
+                            mStyle.position.y, 0.0f});
+    }
+    else if (mStyle.horizontalAlignment == "center") {
+        mGrid->setPosition({(mRenderer->getScreenWidth() / 2.0f) - (mGrid->getSize().x / 2.0f) -
+                                mStyle.position.x + mStyle.iconTextSpacing,
+                            mStyle.position.y, 0.0f});
+    }
+    else {
+        mGrid->setPosition({mStyle.position.x, mStyle.position.y, 0.0f});
+    }
+
     mGrid->setOrigin(mStyle.origin);
 }
 

es-core/src/components/HelpComponent.h

@@ -11,6 +11,7 @@
 
 #include "GuiComponent.h"
 #include "HelpStyle.h"
+#include "renderers/Renderer.h"
 
 class ComponentGrid;
 class ImageComponent;
@@ -32,6 +33,7 @@ public:
     void setStyle(const HelpStyle& style);
 
 private:
+    Renderer* mRenderer;
     std::shared_ptr<TextureResource> getIconTexture(const char* name);
     std::map<std::string, std::shared_ptr<TextureResource>> mIconCache;