✨ Optionally make a camera stay inside a specific rectangle with new …

…rooms' settings.

app/data/ct.release/rooms.js

@@ -296,6 +296,12 @@ Room.roomId = 0;
                 ct.roomWidth,
                 ct.roomHeight
             );
+            if (template.cameraConstraints) {
+                ct.camera.minX = template.cameraConstraints.x1;
+                ct.camera.maxX = template.cameraConstraints.x2;
+                ct.camera.minY = template.cameraConstraints.y1;
+                ct.camera.maxY = template.cameraConstraints.y2;
+            }
             ct.pixiApp.renderer.resize(template.width, template.height);
             ct.rooms.current = ct.room = new Room(template);
             ct.stage.addChild(ct.room);

app/data/i18n/English.json

@@ -538,7 +538,12 @@
             "position": "Position",
             "rotation": "Rotation",
             "scale": "Scale"
-        }
+        },
+        "restrictCamera": "Keep camera in a rectangle",
+        "minimumX": "Min X",
+        "minimumY": "Min Y",
+        "maximumX": "Max X",
+        "maximumY": "Max Y"
     },
     "notepad": {
         "local": "Project's notepad",

src/node_requires/exporter/rooms.js

@@ -11,6 +11,28 @@ const getStartingRoom = proj => {
     }
     return startroom;
 };
+const getConstraints = r => {
+    if (r.restrictCamera) {
+        let x1 = r.restrictMinX || 0,
+            y1 = r.restrictMinY || 0,
+            x2 = r.restrictMaxX === void 0 ? r.width : r.restrictMaxX,
+            y2 = r.restrictMaxX === void 0 ? r.height : r.restrictMaxY;
+        if (x1 > x2) {
+            [x1, x2] = [x2, x1];
+        }
+        if (y1 > y2) {
+            [y1, y2] = [y2, y1];
+        }
+        return {
+            x1,
+            y1,
+            x2,
+            y2
+        };
+    }
+    return false;
+};
+
 const stringifyRooms = proj => {
     let roomsCode = '';
     for (const k in proj.rooms) {
@@ -57,6 +79,8 @@ const stringifyRooms = proj => {
             }
         }
 
+        const constraints = getConstraints(r);
+
         roomsCode += `
 ct.rooms.templates['${r.name}'] = {
     name: '${r.name}',
@@ -67,6 +91,7 @@ ct.rooms.templates['${r.name}'] = {
     bgs: JSON.parse('${JSON.stringify(bgsCopy)}'),
     tiles: JSON.parse('${JSON.stringify(tileLayers)}'),
     backgroundColor: '${r.backgroundColor || '#000000'}',
+    ${constraints ? 'cameraConstraints: ' + JSON.stringify(constraints) + ',' : ''}
     onStep() {
         ${proj.rooms[k].onstep}
     },

src/riotTags/app-view.tag

@@ -78,7 +78,6 @@ app-view.flexcol
         const assetListener = asset => {
             const [assetType] = asset.split('/');
             this.changeTab(assetType)();
-            console.log(assetType, asset);
             this.update();
         };
         window.orders.on('openAsset', assetListener);

src/riotTags/rooms/room-editor.tag

@@ -33,22 +33,69 @@ room-editor.panel.view
                     room-backgrounds-editor(show="{tab === 'roombackgrounds'}" room="{room}")
                     room-tile-editor(show="{tab === 'roomtiles'}" room="{room}")
                     .pad.panel(show="{tab === 'properties'}")
-                        .fifty.npt.npb.npl
-                            b {voc.width}
-                            br
-                            input.wide(type="number" value="{room.width}" onchange="{wire('this.room.width')}")
-                        .fifty.npt.npb.npr
-                            b {voc.height}
+                        fieldset
+                            .fifty.npt.npb.npl
+                                b {voc.width}
+                                br
+                                input.wide(type="number" value="{room.width}" onchange="{wireAndRedraw('this.room.width')}")
+                            .fifty.npt.npb.npr
+                                b {voc.height}
+                                br
+                                input.wide(type="number" value="{room.height}" onchange="{wireAndRedraw('this.room.height')}")
+                            .clear
+                        fieldset
+                            label.checkbox
+                                input(type="checkbox" checked="{room.restrictCamera}" onchange="{wireAndRedraw('this.room.restrictCamera')}")
+                                span {voc.restrictCamera}
+                            .aPoint2DInput.compact.wide(if="{room.restrictCamera}")
+                                label
+                                    span {voc.minimumX}:
+                                    |
+                                    input.compact(
+                                        step="{room.gridX}" type="number"
+                                        oninput="{wireAndRedraw('this.room.restrictMinX')}"
+                                        value="{room.restrictMinX === void 0 ? 0 : room.restrictMinX}"
+                                    )
+                                .spacer
+                                label
+                                    span.nogrow {voc.minimumY}:
+                                    |
+                                    input.compact(
+                                        step="{room.gridY}" type="number"
+                                        oninput="{wireAndRedraw('this.room.restrictMinY')}"
+                                        value="{room.restrictMinY === void 0 ? 0 : room.restrictMinY}"
+                                    )
+                            .aPoint2DInput.compact.wide(if="{room.restrictCamera}")
+                                label
+                                    span {voc.maximumX}:
+                                    |
+                                    input.compact(
+                                        step="{room.gridX}" type="number"
+                                        oninput="{wireAndRedraw('this.room.restrictMaxX')}"
+                                        value="{room.restrictMaxX === void 0 ? room.width : room.restrictMaxX}"
+                                    )
+                                .spacer
+                                label
+                                    span.nogrow {voc.maximumY}:
+                                    |
+                                    input.compact(
+                                        step="{room.gridY}" type="number"
+                                        oninput="{wireAndRedraw('this.room.restrictMaxY')}"
+                                        value="{room.restrictMaxY === void 0 ? room.height : room.restrictMaxY}"
+                                    )
+
+                        fieldset
+                            b {voc.backgroundColor}
                             br
-                            input.wide(type="number" value="{room.height}" onchange="{wire('this.room.height')}")
-                        .clear
-                        b {voc.backgroundColor}
-                        br
-                        color-input.wide(onchange="{updateRoomBackground}" color="{room.backgroundColor || '#000000'}")
-                        extensions-editor(entity="{room.extends}" type="room" wide="aye" compact="sure")
-                        label.block.checkbox
-                            input(type="checkbox" checked="{room.extends.isUi}" onchange="{wire('this.room.extends.isUi')}")
-                            b {voc.isUi}
+                            color-input.wide(onchange="{updateRoomBackground}" color="{room.backgroundColor || '#000000'}")
+
+                        fieldset
+                            extensions-editor(entity="{room.extends}" type="room" wide="aye" compact="sure")
+
+                        fieldset
+                            label.block.checkbox
+                                input(type="checkbox" checked="{room.extends.isUi}" onchange="{wire('this.room.extends.isUi')}")
+                                b {voc.isUi}
 
         .done.nogrow
             button.wide#roomviewdone(onclick="{roomSave}")
@@ -157,6 +204,10 @@ room-editor.panel.view
         this.mixin(window.riotWired);
         this.mixin(window.roomCopyTools);
         this.mixin(window.roomTileTools);
+        this.wireAndRedraw = way => e => {
+            this.wire(way)(e);
+            this.refreshRoomCanvas();
+        };
 
         this.room = this.opts.room;
         if (!this.room.extends) {
@@ -651,6 +702,16 @@ room-editor.panel.view
 
             // Outline the starting viewport frame
             this.drawSelection(-1.5, -1.5, this.room.width + 1.5, this.room.height + 1.5);
+
+            // Outline room's limits
+            if (this.room.restrictCamera) {
+                this.drawSelection(
+                    (this.room.restrictMinX || 0) - 1.5,
+                    (this.room.restrictMinY || 0) - 1.5,
+                    (this.room.restrictMaxX === void 0 ? this.room.width : this.room.restrictMaxX) + 1.5,
+                    (this.room.restrictMaxY === void 0 ? this.room.height : this.room.restrictMaxY) + 1.5
+                );
+            }
         };
 
         this.drawSelection = (x1, y1, x2, y2) => {

src/riotTags/shared/extensions-editor.tag

@@ -292,7 +292,7 @@ extensions-editor
                 obj[field] = [...def];
             }
             this.wire(way)(e);
-        }
+        };
 
         this.addRow = e => {
             const {ext} = e.item;