Add an option to extend width or height and never crop the game area (#…

…7177)
4ian · Nov 20, 2024 · ac6b64b · ac6b64b
1 parent 44b18cb
commit ac6b64b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
@@ -286,19 +286,17 @@ namespace gdjs {
       if (isFullPage && !this._keepRatio) {
         canvasWidth = maxWidth;
         canvasHeight = maxHeight;
-      } else {
-        if (
-          (isFullPage && this._keepRatio) ||
-          canvasWidth > maxWidth ||
-          canvasHeight > maxHeight
-        ) {
-          let factor = maxWidth / canvasWidth;
-          if (canvasHeight * factor > maxHeight) {
-            factor = maxHeight / canvasHeight;
-          }
-          canvasWidth *= factor;
-          canvasHeight *= factor;
+      } else if (
+        (isFullPage && this._keepRatio) ||
+        canvasWidth > maxWidth ||
+        canvasHeight > maxHeight
+      ) {
+        let factor = maxWidth / canvasWidth;
+        if (canvasHeight * factor > maxHeight) {
+          factor = maxHeight / canvasHeight;
         }
+        canvasWidth *= factor;
+        canvasHeight *= factor;
       }
 
       // Apply the calculations to the canvas element...

diff --git a/GDJS/Runtime/runtimegame.ts b/GDJS/Runtime/runtimegame.ts
@@ -584,15 +584,27 @@ namespace gdjs {
             this._gameResolutionWidth =
               (this._gameResolutionHeight * windowInnerWidth) /
               windowInnerHeight;
-          } else {
-            if (this._resizeMode === 'adaptHeight') {
-              this._gameResolutionHeight =
-                (this._gameResolutionWidth * windowInnerHeight) /
-                windowInnerWidth;
+          } else if (this._resizeMode === 'adaptHeight') {
+            this._gameResolutionHeight =
+              (this._gameResolutionWidth * windowInnerHeight) /
+              windowInnerWidth;
+          } else if (this._resizeMode === 'scaleOuter') {
+            const widthFactor = windowInnerWidth / this._originalWidth;
+            const heightFactor = windowInnerHeight / this._originalHeight;
+
+            if (widthFactor < heightFactor) {
+              this._gameResolutionWidth = this._originalWidth;
+              this._gameResolutionHeight = Math.floor(
+                windowInnerHeight / widthFactor
+              );
+            } else {
+              this._gameResolutionWidth = Math.floor(
+                windowInnerWidth / heightFactor
+              );
+              this._gameResolutionHeight = this._originalHeight;
             }
           }
         }
-      } else {
       }
 
       // Don't alter the game resolution. The renderer
@@ -1203,7 +1215,7 @@ namespace gdjs {
     /**
      * Enlarge/reduce the width (or the height) of the game to fill the inner window.
      */
-    _forceGameResolutionUpdate() {
+    private _forceGameResolutionUpdate() {
       this.setGameResolutionSize(
         this._gameResolutionWidth,
         this._gameResolutionHeight

diff --git a/newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js b/newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js
@@ -624,13 +624,17 @@ const ProjectPropertiesDialog = (props: Props) => {
                     value=""
                     label={t`No changes to the game size`}
                   />
+                  <SelectOption
+                    value="scaleOuter"
+                    label={t`Extend width or height to fill screen (without cropping the game area)`}
+                  />
                   <SelectOption
                     value="adaptWidth"
-                    label={t`Change width to fit the screen or window size`}
+                    label={t`Adjust width to fill screen (extend or crop)`}
                   />
                   <SelectOption
                     value="adaptHeight"
-                    label={t`Change height to fit the screen or window size`}
+                    label={t`Adjust height to fill screen (extend or crop)`}
                   />
                 </SelectField>
                 <Checkbox