New option: Stage stretch (closes #219)

src/locales/en.json

@@ -140,6 +140,15 @@
     "stageSize": {
       "string": "Stage Size"
     },
+    "preserveRatio": {
+      "string": "Preserve aspect ratio when resized (recommended)"
+    },
+    "stretch": {
+      "string": "Stretch stage to fill screen without changing actual size (experimental)"
+    },
+    "dynamicResize": {
+      "string": "Dynamically resize size to match window size (experimental)"
+    },
     "username": {
       "string": "Username (each \"#\" gets replaced with a random number)"
     },
@@ -303,9 +312,6 @@
     "warpTimer": {
       "string": "Warp Timer"
     },
-    "dynamicResize": {
-      "string": "Dynamically resize stage to fill page (overrides stage size setting)"
-    },
     "projectId": {
       "string": "Project ID"
     },

src/p4/PackagerOptions.svelte

@@ -170,9 +170,13 @@
     min-width: 100%;
     height: 150px;
   }
+  /* TODO: fix the option-group mess */
   .option-group {
     margin-bottom: 12px;
   }
+  .stage-size-section {
+    margin-top: 12px;
+  }
   input:invalid {
     outline: 2px solid red;
   }
@@ -198,6 +202,7 @@
       'miscLimits',
       'stageWidth',
       'stageHeight',
+      'resizeMode',
       'username'
     ]);
   }}
@@ -251,17 +256,32 @@
       {$_('options.removeMiscLimits')}
       <LearnMore slug="remove-misc-limits" />
     </label>
-    <label>
-      {$_('options.stageSize')}
-      <input type="number" min="1" max="4096" step="1" bind:value={$options.stageWidth}>
-      &times;
-      <input type="number" min="1" max="4096" step="1" bind:value={$options.stageHeight}>
-      <LearnMore slug="custom-stage-size" />
-    </label>
     <label>
       {$_('options.username')}
       <input type="text" bind:value={$options.username}>
     </label>
+    <div class="stage-size-section">
+      <label>
+        {$_('options.stageSize')}
+        <input type="number" min="1" max="4096" step="1" bind:value={$options.stageWidth}>
+        &times;
+        <input type="number" min="1" max="4096" step="1" bind:value={$options.stageHeight}>
+        <LearnMore slug="custom-stage-size" />
+      </label>
+      <label>
+        <input type="radio" name="resize-mode" value="preserve-ratio" bind:group={$options.resizeMode}>
+        {$_('options.preserveRatio')}
+      </label>
+      <label>
+        <input type="radio" name="resize-mode" value="stretch" bind:group={$options.resizeMode}>
+        {$_('options.stretch')}
+      </label>
+      <label>
+        <input type="radio" name="resize-mode" value="dynamic-resize" bind:group={$options.resizeMode}>
+        {$_('options.dynamicResize')}
+        <LearnMore slug="packager/dynamic-stage-resize" />
+      </label>
+    </div>
   </div>
 </Section>
 
@@ -479,7 +499,6 @@
   reset={() => {
     resetOptions([
       'compiler',
-      'resizeToFill',
       'extensions',
       'custom',
       'projectId'
@@ -500,11 +519,6 @@
         {$_('options.warpTimer')}
         <LearnMore slug="warp-timer" />
       </label>
-      <label>
-        <input type="checkbox" bind:checked={$options.resizeToFill}>
-        {$_('options.dynamicResize')}
-        <LearnMore slug="packager/dynamic-stage-resize" />
-      </label>
       <!-- Ignore because CustomExtensions will have a <textarea> inside it -->
       <!-- svelte-ignore a11y-label-has-associated-control -->
       <label>

src/packager/packager.js

@@ -973,7 +973,7 @@ cd "$(dirname "$0")"
       const scaffolding = new Scaffolding.Scaffolding();
       scaffolding.width = ${this.options.stageWidth};
       scaffolding.height = ${this.options.stageHeight};
-      scaffolding.resizeToFill = ${this.options.resizeToFill};
+      scaffolding.resizeMode = ${JSON.stringify(this.options.resizeMode)};
       scaffolding.editableLists = ${this.options.monitors.editableLists};
       scaffolding.setup();
       scaffolding.appendTo(appElement);
@@ -1247,7 +1247,7 @@ Packager.DEFAULT_OPTIONS = () => ({
   miscLimits: true,
   stageWidth: 480,
   stageHeight: 360,
-  resizeToFill: false,
+  resizeMode: 'preserve-ratio',
   autoplay: false,
   username: 'player####',
   custom: {

src/scaffolding/scaffolding.js

@@ -29,7 +29,7 @@ class Scaffolding extends EventTarget {
 
     this.width = 480;
     this.height = 360;
-    this.resizeToFill = false;
+    this.resizeMode = 'preserve-ratio';
     this.editableLists = false;
 
     this.messages = defaultMessages;
@@ -260,12 +260,12 @@ class Scaffolding extends EventTarget {
     const offsetFromLeft = this._offsetFromLeft;
     const offsetFromRight = this._offsetFromRight;
 
-    const canvasWidth = Math.max(1, totalWidth - offsetFromLeft - offsetFromRight);
-    const canvasHeight = Math.max(1, totalHeight - offsetFromTop - offsetFromBottom);
+    const projectAreaWidth = Math.max(1, totalWidth - offsetFromLeft - offsetFromRight);
+    const projectAreaHeight = Math.max(1, totalHeight - offsetFromTop - offsetFromBottom);
 
-    if (this.resizeToFill) {
-      this.width = canvasWidth;
-      this.height = canvasHeight;
+    if (this.resizeMode === 'dynamic-resize') {
+      this.width = projectAreaWidth;
+      this.height = projectAreaHeight;
       this.renderer.setStageSize(
         -this.width / 2,
         this.width / 2,
@@ -276,13 +276,14 @@ class Scaffolding extends EventTarget {
       this.vm.runtime.stageHeight = this.height;  
     }
 
-    let height = canvasHeight;
-    let width = height / this.height * this.width;
-    let scale = height / this.height;
-    if (width > canvasWidth) {
-      scale = canvasWidth / this.width;
-      height = canvasWidth / this.width * this.height;
-      width = canvasWidth;
+    let width = projectAreaWidth;
+    let height = projectAreaHeight;
+    if (this.resizeMode !== 'stretch') {
+      width = height / this.height * this.width;
+      if (width > projectAreaWidth) {
+        height = projectAreaWidth / this.width * this.height;
+        width = projectAreaWidth;
+      }
     }
 
     const distanceFromTop = totalHeight - height;
@@ -293,7 +294,7 @@ class Scaffolding extends EventTarget {
     this._layers.style.transform = `translate(${translateY}px, ${translateX}px)`;
     this._layers.style.width = `${width}px`;
     this._layers.style.height = `${height}px`;
-    this._overlays.style.transform = `scale(${scale})`;
+    this._overlays.style.transform = `scale(${width / this.width}, ${height / this.height})`;
     this.renderer.resize(width, height);
 
     this.layersRect = this._layers.getBoundingClientRect();