box2d: support custom stage size (#1224)

This PR makes the Box2D extension create boundaries around the stage
size when the stage size is (re)set to boxed, instead of using set sizes
and positions for a 480 pixel by 360 pixel stage. For the floor stage
type, it scales the floor width, since the floor was originally always
5000 units in width which could make stages 5000+ pixels in width not
have a full-width floor.

It also adds comments where the stage type is set to explain the code
and numbers. I think it could be useful since it took me many moments to
figure out what the magic numbers meant.

**New Constants**
```patch
- bodyDef.position.Set(0, 1000 / zoom);
+ bodyDef.position.Set(0, (stageBounds.top + 820) / zoom);
...
- fixDef.shape.SetAsBox(10 / zoom, 800 / zoom);
+ fixDef.shape.SetAsBox(10 / zoom, (stageHeight + 820) / zoom);
```
Originally the ceiling was positioned at 1000 units, so to get 820 I
subtracted 180 (default top bound) from 1000.

```patch
+ const floorY = (stageBounds.bottom - 100) / zoom;
```
Originally the floor boxes were positioned at `-280 / zoom`. I think
this is from a y of -180 (bottom stage bound) with 100 units subtracted
because the boxes have a height of 100.

```patch
- fixDef.shape.SetAsBox(5000 / zoom, 100 / zoom);
+ fixDef.shape.SetAsBox((stageWidth + 4520) / zoom, 100 / zoom);
```
I just subtracted 480 from 5000 since the stage is 480 pixels wide by
default and the boxes were originally 5000 units wide.
___
This PR resolves suggestion 1 from #236.

---------

Co-authored-by: Muffin <[email protected]>

extensions/box2d.js

@@ -12420,28 +12420,51 @@
     fixDef.shape = new b2PolygonShape();
     bodyDef.angle = 0;
 
+    const { stageWidth, stageHeight } = Scratch.vm.runtime;
+    const stageBounds = {
+      left: -stageWidth / 2,
+      right: stageWidth / 2,
+      top: stageHeight / 2,
+      bottom: -stageHeight / 2,
+    };
+
     if (type === STAGE_TYPE_OPTIONS.BOXED) {
-      fixDef.shape.SetAsBox(250 / zoom, 10 / zoom);
-      bodyDef.position.Set(0, -190 / zoom);
+      // For the ceiling boxes...
+      // use a width equivalent to the stage width + 10, with a thickness of 10
+      fixDef.shape.SetAsBox((stageWidth + 10) / zoom, 10 / zoom);
+      // create one such box at the bottom of the stage, accounting for thickness...
+      bodyDef.position.Set(0, (stageBounds.bottom - 10) / zoom);
       createStageBody();
-      bodyDef.position.Set(0, 1000 / zoom);
+      // and one 820 units above the top of the stage.
+      bodyDef.position.Set(0, (stageBounds.top + 820) / zoom);
       createStageBody();
-      fixDef.shape.SetAsBox(10 / zoom, 800 / zoom);
-      bodyDef.position.Set(-250 / zoom, 540 / zoom);
+      // For the left & right wall boxes...
+      // use a height equivalent to the stage height + 820, with a thickness of 10
+      fixDef.shape.SetAsBox(10 / zoom, (stageHeight + 820) / zoom);
+      // create a box at the left of the stage...
+      bodyDef.position.Set((stageBounds.left - 10) / zoom, 0);
       createStageBody();
-      bodyDef.position.Set(250 / zoom, 540 / zoom);
+      // and one at the right of the stage.
+      bodyDef.position.Set((stageBounds.right + 10) / zoom, 0);
       createStageBody();
     } else if (type === STAGE_TYPE_OPTIONS.FLOOR) {
-      fixDef.shape.SetAsBox(5000 / zoom, 100 / zoom);
-      bodyDef.position.Set(0, -280 / zoom);
+      // All floor boxes are positioned at the bottom of the stage, accounting for
+      // the thickness of 100.
+      const floorY = (stageBounds.bottom - 100) / zoom;
+
+      // The floor boxes have a width of the stage width + 4520 units, and a
+      // thickness of 100 units.
+      fixDef.shape.SetAsBox((stageWidth + 4520) / zoom, 100 / zoom);
+      // Floor boxes are created at different intervals throughout the bottom of the stage.
+      bodyDef.position.Set(0, floorY);
       createStageBody();
-      bodyDef.position.Set(-10000, -280 / zoom);
+      bodyDef.position.Set(stageBounds.left - 5000, floorY);
       createStageBody();
-      bodyDef.position.Set(10000, -280 / zoom);
+      bodyDef.position.Set(stageBounds.right + 5000, floorY);
       createStageBody();
-      bodyDef.position.Set(-20000, -280 / zoom);
+      bodyDef.position.Set(stageBounds.left - 15000, floorY);
       createStageBody();
-      bodyDef.position.Set(20000, -280 / zoom);
+      bodyDef.position.Set(stageBounds.right + 15000, floorY);
       createStageBody();
     }