Rename

examples/jigsaw/generate-frames.js

@@ -17,6 +17,7 @@ class Demo extends Phaser.Scene {
             baseKey: 'classroom',
             targetKey: 'pieces',
             columns: 8, rows: 6,
+            edgeWidth: 15, edgeHeight: 15
         })
         this.add.image(0, 0, 'pieces', '__BASE').setOrigin(0);
 

templates/jigsaw/generateframes/GenerateFrames.js

@@ -11,7 +11,7 @@ var GenerateFrames = function (scene, {
     baseKey,
     targetKey,
     columns, rows,
-    overlap,
+    edgeWidth, edgeHeight,
     edges,
     drawMaskCallback,
     getFrameNameCallback = DefaultGetFrameNameCallback
@@ -22,16 +22,19 @@ var GenerateFrames = function (scene, {
     var baseFrameWidth = baseFrame.cutWidth,
         baseFrameHeight = baseFrame.height;
 
-    if (overlap === undefined) {
-        overlap = Math.min(baseFrameWidth / columns, baseFrameHeight / rows) / 7;
+    if (edgeWidth === undefined) {
+        edgeWidth = (baseFrameWidth / columns) / 7;
+    }
+    if (edgeHeight === undefined) {
+        edgeHeight = (baseFrameHeight / rows) / 7;
     }
 
     if (edges === undefined) {
         edges = RandomPieceEdges(columns, rows);
     }
 
-    var frameWidth = (baseFrameWidth + (columns - 1) * overlap) / columns;
-    var frameHeight = (baseFrameHeight + (rows - 1) * overlap) / rows;
+    var frameWidth = (baseFrameWidth + (columns - 1) * edgeWidth) / columns;
+    var frameHeight = (baseFrameHeight + (rows - 1) * edgeHeight) / rows;
 
     var frameManager = new FrameManager(scene, {
         key: targetKey,
@@ -45,12 +48,12 @@ var GenerateFrames = function (scene, {
 
     var sample = new JigsawPiece(scene, {
         width: frameWidth, height: frameHeight,
-        indent: overlap,
+        indentX: edgeWidth, indentY: edgeHeight,
         key: baseKey
     });
 
-    var startX = -overlap,
-        startY = -overlap;
+    var startX = -edgeWidth,
+        startY = -edgeHeight;
     var scrollX = startX,
         scrollY = startY;
     for (var r = 0; r < rows; r++) {
@@ -64,11 +67,11 @@ var GenerateFrames = function (scene, {
 
             frameManager.paste(getFrameNameCallback(c, r), sample);
 
-            scrollX += frameWidth - overlap;
+            scrollX += frameWidth - edgeWidth;
         }
 
         scrollX = startX;
-        scrollY += frameHeight - overlap;
+        scrollY += frameHeight - edgeHeight;
     }
 
     sample.destroy();
@@ -81,7 +84,8 @@ var GenerateFrames = function (scene, {
 
         frameWidth,
         frameHeight,
-        overlap,
+        edgeWidth,
+        edgeHeight,
         getFrameNameCallback,
     }
 }

templates/jigsaw/jigsawpiece/DrawPieceMask.js

@@ -5,55 +5,55 @@ const RAD180 = DegToRad(180);
 const RAD270 = DegToRad(270);
 const RAD360 = DegToRad(360);
 
-var DrawPieceMask = function (graphics, width, height, indent, edgeMode) {
+var DrawPieceMask = function (graphics, width, height, edgeWidth, edgeHeight, edgeMode) {
     var centerX = width / 2, centerY = height / 2;
 
     graphics.clear();
     graphics.beginPath();
 
-    graphics.moveTo(indent, indent);
+    graphics.moveTo(edgeWidth, edgeHeight);
 
     switch (edgeMode.top) {
         case 1:
-            graphics.lineTo(centerX - indent, indent);
-            graphics.arc(centerX, indent, indent, RAD180, RAD360, false);
+            graphics.lineTo(centerX - edgeHeight, edgeHeight);
+            graphics.arc(centerX, edgeHeight, edgeHeight, RAD180, RAD360, false);
             break;
         case 2:
-            graphics.lineTo(centerX - indent, indent);
-            graphics.arc(centerX, indent, indent, RAD180, RAD360, true);
+            graphics.lineTo(centerX - edgeHeight, edgeHeight);
+            graphics.arc(centerX, edgeHeight, edgeHeight, RAD180, RAD360, true);
             break;
     }
-    graphics.lineTo(width - indent, indent);
+    graphics.lineTo(width - edgeWidth, edgeHeight);
 
     switch (edgeMode.right) {
         case 1:
-            graphics.arc(width - indent, centerY, indent, RAD270, RAD90, false);
+            graphics.arc(width - edgeWidth, centerY, edgeWidth, RAD270, RAD90, false);
             break;
         case 2:
-            graphics.arc(width - indent, centerY, indent, RAD270, RAD90, true);
+            graphics.arc(width - edgeWidth, centerY, edgeWidth, RAD270, RAD90, true);
             break;
     }
-    graphics.lineTo(width - indent, height - indent);
+    graphics.lineTo(width - edgeWidth, height - edgeHeight);
 
     switch (edgeMode.bottom) {
         case 1:
-            graphics.arc(centerX, height - indent, indent, RAD0, RAD180, false);
+            graphics.arc(centerX, height - edgeHeight, edgeHeight, RAD0, RAD180, false);
             break;
         case 2:
-            graphics.arc(centerX, height - indent, indent, RAD0, RAD180, true);
+            graphics.arc(centerX, height - edgeHeight, edgeHeight, RAD0, RAD180, true);
             break;
     }
-    graphics.lineTo(indent, height - indent);
+    graphics.lineTo(edgeWidth, height - edgeHeight);
 
     switch (edgeMode.left) {
         case 1:
-            graphics.arc(indent, centerY, indent, RAD90, RAD270, false);
+            graphics.arc(edgeWidth, centerY, edgeWidth, RAD90, RAD270, false);
             break;
         case 2:
-            graphics.arc(indent, centerY, indent, RAD90, RAD270, true);
+            graphics.arc(edgeWidth, centerY, edgeWidth, RAD90, RAD270, true);
             break;
     }
-    graphics.lineTo(indent, indent);
+    graphics.lineTo(edgeWidth, edgeHeight);
 
     graphics.closePath();
     graphics.fillPath();

templates/jigsaw/jigsawpiece/JigsawPiece.js

@@ -7,17 +7,21 @@ import DrawPieceMask from './DrawPieceMask.js';
 class JigsawPiece extends Phaser.GameObjects.RenderTexture {
     constructor(scene, {
         width, height,
-        indent,
+        edgeWidth, edgeHeight,
         key,
     }) {
         super(scene, 0, 0, width, height);
 
         this.setBaseKey(key);
 
-        if (indent === undefined) {
-            indent = Math.min(width, height) / 7;
+        if (edgeWidth === undefined) {
+            edgeWidth = width / 7;
         }
-        this.indent = indent;
+        this.edgeWidth = edgeWidth;
+        if (edgeHeight === undefined) {
+            edgeHeight = height / 7;
+        }
+        this.edgeHeight = edgeHeight;
 
         var maskGraphics = scene.make.graphics({ add: false });
         this.setMask(maskGraphics.createGeometryMask());
@@ -68,7 +72,7 @@ class JigsawPiece extends Phaser.GameObjects.RenderTexture {
 
         this.camera.setScroll(0, 0);
 
-        drawMaskCallback(this.maskGraphics, this.width, this.height, this.indent, edgeMode);
+        drawMaskCallback(this.maskGraphics, this.width, this.height, this.edgeWidth, this.edgeHeight, edgeMode);
 
         return this;
     }