Fix #5102

Alayan-stk-2 · Alayan-stk-2 · commit fba7fdea85a9 · 2025-08-13T18:17:04.000+02:00
- Add horizontal / vertical cut parameters to skins. When the screen aspect ratio and the background image aspect ratio don't match, these parameters determine if the background picture gets stretched (but still displayed fully) or not (cutting away parts of the image but avoiding any stretching) - Use those parameters to appropriately display the background image Initial work for this commit was made by @willliam9
diff --git a/data/skins/cartoon-coal/stkskin.xml b/data/skins/cartoon-coal/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="true"/>
 
 <element type="bottom-bar" image="bottom_bar.png" />
 
diff --git a/data/skins/cartoon-desert/stkskin.xml b/data/skins/cartoon-desert/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="true"/>
 
 <element type="bottom-bar" image="bottom_bar.png" />
 
diff --git a/data/skins/cartoon-forest/stkskin.xml b/data/skins/cartoon-forest/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="true"/>
 
 <element type="bottom-bar" image="bottom_bar.png" />
 
diff --git a/data/skins/cartoon-ocean/stkskin.xml b/data/skins/cartoon-ocean/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="true"/>
 
 <element type="bottom-bar" image="bottom_bar.png" />
 
diff --git a/data/skins/cartoon-ruby/stkskin.xml b/data/skins/cartoon-ruby/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="true"/>
 
 <element type="bottom-bar" image="bottom_bar.png" />
 
diff --git a/data/skins/cartoon/stkskin.xml b/data/skins/cartoon/stkskin.xml
@@ -14,7 +14,7 @@ Here you can configure advanced theming rules for this skin
 <advanced normal_ttf="Inter-UI-Black.ttf NotoSansThai-Black.ttf NotoSansHebrew-Black.ttf NotoSansArabicUI-Black.ttf NotoSansMalayalam-Bold.ttf" />
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="true"/>
 
 <element type="bottom-bar" common="y" image="bottom_bar.png" />
 
diff --git a/data/skins/classic-coal/stkskin.xml b/data/skins/classic-coal/stkskin.xml
@@ -16,7 +16,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" image="background.jpg" />
+<element type="background" image="background.jpg" horizontal-cut="true" vertical-cut="false"/>
 
 <element type="bottom-bar" image="bottom_bar.png" />
 
diff --git a/data/skins/classic-desert/stkskin.xml b/data/skins/classic-desert/stkskin.xml
@@ -16,7 +16,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" common="y" image="background.jpg" />
+<element type="background" common="y" image="background.jpg" horizontal-cut="true" vertical-cut="false"/>
 
 <element type="bottom-bar" common="y" image="bottom_bar.png" />
 
diff --git a/data/skins/classic-forest/stkskin.xml b/data/skins/classic-forest/stkskin.xml
@@ -16,7 +16,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" common="y" image="background.jpg" />
+<element type="background" common="y" image="background.jpg" horizontal-cut="true" vertical-cut="false"/>
 
 <element type="bottom-bar" common="y" image="bottom_bar.png" />
 
diff --git a/data/skins/classic-ocean/stkskin.xml b/data/skins/classic-ocean/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" common="y" image="background.jpg" />
+<element type="background" common="y" image="background.jpg" horizontal-cut="true" vertical-cut="false"/>
 
 <element type="bottom-bar" common="y" image="bottom_bar.png" />
 
diff --git a/data/skins/classic-ruby/stkskin.xml b/data/skins/classic-ruby/stkskin.xml
@@ -17,7 +17,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" common="y" image="background.jpg" />
+<element type="background" common="y" image="background.jpg" horizontal-cut="true" vertical-cut="false"/>
 
 <element type="bottom-bar" common="y" image="bottom_bar.png" />
 
diff --git a/data/skins/classic/stkskin.xml b/data/skins/classic/stkskin.xml
@@ -15,7 +15,7 @@ Here you can configure advanced theming rules for this skin
 -->
 
 <!--  Stateless -->
-<element type="background" common="y" image="background.jpg" />
+<element type="background" common="y" image="background.jpg" horizontal-cut="true" vertical-cut="false"/>
 
 <element type="bottom-bar" common="y" image="bottom_bar.png" />
 
diff --git a/src/guiengine/skin.cpp b/src/guiengine/skin.cpp
@@ -71,6 +71,8 @@ namespace SkinConfig
     static std::string m_color_emoji_ttf;
     static std::vector<std::string> m_icon_theme_paths;
     static bool m_font;
+    static bool m_horizontal_cut;
+    static bool m_vertical_cut;
 
     static void parseElement(const XMLNode* node, std::vector<std::string>& skin_paths)
     {
@@ -98,6 +100,16 @@ namespace SkinConfig
             return;
         }
 
+        // We use these parameters to know if the background image should be
+        // stretched or cut when its aspect ratio is different from the screen's
+        if (type == "background")
+        {
+            m_horizontal_cut = false;
+            m_vertical_cut = false;
+            node->get("horizontal-cut", &m_horizontal_cut);
+            node->get("vertical-cut", &m_vertical_cut);
+        }
+
         node->get("left_border", &leftborder);
         node->get("right_border", &rightborder);
         node->get("top_border", &topborder);
@@ -635,11 +647,10 @@ void Skin::drawBgImage()
     static core::recti dest;
     static core::recti source_area;
 
-    if(m_bg_image == NULL)
+    if (m_bg_image == NULL)
     {
         int texture_w, texture_h;
-        m_bg_image =
-            SkinConfig::m_render_params["background::neutral"].getImage();
+        m_bg_image = SkinConfig::m_render_params["background::neutral"].getImage();
         assert(m_bg_image != NULL);
         texture_w = m_bg_image->getSize().Width;
         texture_h = m_bg_image->getSize().Height;
@@ -650,25 +661,69 @@ void Skin::drawBgImage()
         const int screen_w = frame_size.Width;
         const int screen_h = frame_size.Height;
 
-        // stretch image vertically to fit
-        float ratio = (float)screen_h / texture_h;
+        // Calculate aspect ratios for the image and the screen
+        float image_ratio = (float)texture_w / texture_h;
+        float screen_ratio = (float)screen_w / screen_h;
+
+        float factor_h, factor_w;
+
+        // ----------------------------------------------------------
+        // Fill the screen without distorting the image.
+        //
+        // The dimension (horizontal or vertical) furthest away is scaled to be able
+        // to cover the entire screen.
+        // Then the other dimension is either scaled uniformly (if cropping is preferred
+        // over stretching) or non-uniformly (if stretching is preferred over cropping)
+        // ----------------------------------------------------------
 
-        // check that with the vertical stretching, it still fits horizontally
-        while(texture_w*ratio < screen_w) ratio += 0.1f;
+        if (screen_ratio > image_ratio) // Screen has a wider ratio than the bg image
+        {
+            if (SkinConfig::m_vertical_cut)
+            {
+                // Scale to fit width, allow vertical crop
+                factor_w = (float)screen_w / texture_w;
+                factor_h = factor_w;
+            }
+            else 
+            {
+                // Cannot crop vertically → stretch both width and height to fit
+                factor_h = (float)screen_h / texture_h;
+                factor_w = (float)screen_w / texture_w;
+            }
+        }
+        else // Screen has taller ratio than the bg image
+        {
+            if (SkinConfig::m_horizontal_cut)
+            {
+                // Scale to fit height, allow horizontal crop
+                factor_h = (float)screen_h / texture_h;
+                factor_w = factor_h;
+            }
+            else
+            {
+                // Cannot crop horizontally → stretch both width and height to fit
+                factor_h = (float)screen_h / texture_h;
+                factor_w = (float)screen_w / texture_w;
+            }
+        }
 
-        texture_w = (int)(texture_w*ratio);
-        texture_h = (int)(texture_h*ratio);
+        // Scale the original image dimensions
+        int scaled_w = (int)(texture_w * factor_w);
+        int scaled_h = (int)(texture_h * factor_h);
 
-        const int clipped_x_space = (texture_w - screen_w);
+        // Center the image on screen
+        int offset_x = (screen_w - scaled_w) / 2;
+        int offset_y = (screen_h - scaled_h) / 2;
 
-        dest = core::recti(-clipped_x_space/2, 0,
-                               screen_w+clipped_x_space/2, screen_h);
+        dest = core::recti(offset_x, offset_y,
+                           offset_x + scaled_w, offset_y + scaled_h);
     }
 
+    // Render the background image to the screen
     irr_driver->getVideoDriver()->enableMaterial2D();
     draw2DImage(m_bg_image, dest, source_area,
-                                        /* no clipping */0, /*color*/ 0,
-                                        /*alpha*/false);
+                /* no clipping */0, /*color*/ 0,
+                /*alpha*/false);
     irr_driver->getVideoDriver()->enableMaterial2D(false);
 #endif
 }   // drawBgImage
