Add test code

rexrainbow · Sep 13, 2023 · 385558e · 385558e
1 parent e95695c
commit 385558e
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 5 deletions.
diff --git a/docs/docs/rendertexture.md b/docs/docs/rendertexture.md
@@ -80,6 +80,26 @@ var rt = scene.make.renderTexture({
     rt.draw(scene.children, x, y);
     // rt.draw(scene.children, x, y, alpha, tint);
     ```
+- Stamp texture
+    ```javascript
+    rt.stamp(key, frame, x, y, {
+        originX: 0.5,
+        originY: 0.5,
+
+        scale: 1,
+        scaleX: 1, 
+        scaleY: 1,
+        
+        rotation: 0,
+        angle: 0,
+        
+        alpha: 1,
+        tint: 0xffffff,
+        blendMode: 0,
+
+        erase: false,
+    })
+    ```
 - Paste texture
     ```javascript
     rt.draw(key, x, y);
@@ -92,6 +112,7 @@ var rt = scene.make.renderTexture({
     ```
     - `key` : The key of the texture to be used, as stored in the Texture Manager.
 
+
 #### Global alpha
 
 ```javascript

diff --git a/examples/framemanager/paste-graphics.js b/examples/framemanager/paste-graphics.js
@@ -38,14 +38,22 @@ class Demo extends Phaser.Scene {
         var rt = this.add.renderTexture(0, 0, cellSize, cellSize);
         // Can't paste graphics to FrameManager directly, because that graphics does not have size
 
-        DrawPiece(graphics, cellSize, cellSize, indent, 2, 2, 2, 2);
-
         var topEdgeMode, leftEdgeMode, bottomEdgeMode, rightEdgeMode;
         for (topEdgeMode = 0; topEdgeMode < 3; topEdgeMode++) {
             for (leftEdgeMode = 0; leftEdgeMode < 3; leftEdgeMode++) {
                 for (bottomEdgeMode = 0; bottomEdgeMode < 3; bottomEdgeMode++) {
                     for (rightEdgeMode = 0; rightEdgeMode < 3; rightEdgeMode++) {
-                        DrawPiece(graphics, cellSize, cellSize, indent, rightEdgeMode, bottomEdgeMode, leftEdgeMode, topEdgeMode);
+                        DrawPieceMask(graphics, {
+                            width: cellSize,
+                            height: cellSize,
+                            indent: indent,
+                            edgeModes: {
+                                right: rightEdgeMode,
+                                left: leftEdgeMode,
+                                top: topEdgeMode,
+                                bottom: bottomEdgeMode
+                            }
+                        });
                         rt.clear().draw(graphics);
                         var frameName = `${rightEdgeMode}${bottomEdgeMode}${leftEdgeMode}${topEdgeMode}`;
                         frameManager.paste(frameName, rt);
@@ -65,13 +73,21 @@ class Demo extends Phaser.Scene {
 }
 
 const DegToRad = Phaser.Math.DegToRad;
-var DrawPiece = function (graphics, width, height, indent, rightEdgeMode, bottomEdgeMode, leftEdgeMode, topEdgeMode) {
+var DrawPieceMask = function (graphics, config) {
+    var width = config.width;
+    var height = config.height;
+    var indent = config.indent;
+    var edgeModes = config.edgeModes;
+    var rightEdgeMode = edgeModes.right;
+    var bottomEdgeMode = edgeModes.bottom;
+    var leftEdgeMode = edgeModes.left;
+    var topEdgeMode = edgeModes.top;
+
     var centerX = width / 2, centerY = height / 2;
 
     graphics.clear();
     graphics.beginPath();
 
-
     graphics.moveTo(indent, indent);
 
     switch (topEdgeMode) {

diff --git a/examples/projects/jigsaw/DrawPieceMask.js b/examples/projects/jigsaw/DrawPieceMask.js
@@ -0,0 +1,72 @@
+const DegToRad = Phaser.Math.DegToRad;
+var DrawPieceMask = function (graphics, config) {
+    var width = config.width;
+    var height = config.height;
+    var indent = config.indent;
+
+    var edgeModes = config.edgeModes;
+    var rightEdgeMode, bottomEdgeMode, leftEdgeMode, topEdgeMode;
+    if (typeof (edgeModes) === 'string') {
+        [rightEdgeMode, bottomEdgeMode, leftEdgeMode, topEdgeMode] =
+            edgeModes.split('').map(function (x) { return parseInt(x) });
+    } else {
+        rightEdgeMode = edgeModes.right;
+        bottomEdgeMode = edgeModes.bottom;
+        leftEdgeMode = edgeModes.left;
+        topEdgeMode = edgeModes.top;
+    }
+
+    var centerX = width / 2, centerY = height / 2;
+
+    graphics.clear();
+    graphics.beginPath();
+
+    graphics.moveTo(indent, indent);
+
+    switch (topEdgeMode) {
+        case 1:
+            graphics.lineTo(centerX - indent, indent);
+            graphics.arc(centerX, indent, indent, DegToRad(180), DegToRad(360), false);
+            break;
+        case 2:
+            graphics.lineTo(centerX - indent, indent);
+            graphics.arc(centerX, indent, indent, DegToRad(180), DegToRad(360), true);
+            break;
+    }
+    graphics.lineTo(width - indent, indent);
+
+    switch (rightEdgeMode) {
+        case 1:
+            graphics.arc(width - indent, centerY, indent, DegToRad(270), DegToRad(90), false);
+            break;
+        case 2:
+            graphics.arc(width - indent, centerY, indent, DegToRad(270), DegToRad(90), true);
+            break;
+    }
+    graphics.lineTo(width - indent, height - indent);
+
+    switch (bottomEdgeMode) {
+        case 1:
+            graphics.arc(centerX, height - indent, indent, DegToRad(0), DegToRad(180), false);
+            break;
+        case 2:
+            graphics.arc(centerX, height - indent, indent, DegToRad(0), DegToRad(180), true);
+            break;
+    }
+    graphics.lineTo(indent, height - indent);
+
+    switch (leftEdgeMode) {
+        case 1:
+            graphics.arc(indent, centerY, indent, DegToRad(90), DegToRad(270), false);
+            break;
+        case 2:
+            graphics.arc(indent, centerY, indent, DegToRad(90), DegToRad(270), true);
+            break;
+    }
+    graphics.lineTo(indent, indent);
+
+    graphics.closePath();
+    graphics.fillPath();
+}
+
+export default DrawPieceMask
diff --git a/examples/projects/jigsaw/JigsawPiece.js b/examples/projects/jigsaw/JigsawPiece.js
@@ -0,0 +1,60 @@
+import DrawPieceMask from './DrawPieceMask.js';
+
+class JigsawPiece extends Phaser.GameObjects.RenderTexture {
+    constructor(scene, {
+        width,
+        height,
+        indent,
+    }) {
+        super(scene, 0, 0, width, height);
+
+        if (indent === undefined) {
+            indent = Math.min(width, height) / 7;
+        }
+        this.indent = indent;
+
+        var maskGraphics = scene.make.graphics({ add: false });
+        this.setMask(maskGraphics.createGeometryMask());
+        this.maskGraphics = maskGraphics;
+    }
+
+    destroy(fromScene) {
+        //  This Game Object has already been destroyed
+        if (!this.scene || this.ignoreDestroy) {
+            return;
+        }
+
+        this.maskGraphics.destroy();
+        this.maskGraphics = undefined;
+
+        super.destroy();
+    }
+
+    drawPiece({
+        key,
+        scrollX,
+        scrollY,
+        edgeModes
+    }) {
+        this.clear().fill(0x333333)
+
+        this.camera.setScroll(scrollX, scrollY);
+
+        this.stamp(key, undefined, 0, 0, {
+            originX: 0, originY: 0,
+        });
+
+        this.camera.setScroll(0, 0);
+
+        DrawPieceMask(this.maskGraphics, {
+            width: this.width,
+            height: this.height,
+            indent: this.indent,
+            edgeModes: edgeModes
+        })
+
+        return this;
+    }
+}
+
+export default JigsawPiece;
diff --git a/examples/projects/jigsaw/test-JigsawPiece.bat b/examples/projects/jigsaw/test-JigsawPiece.bat
@@ -0,0 +1,5 @@
+@echo off
+set main=./examples/projects/jigsaw/test-JigsawPiece.js
+cd ..
+cd ..
+npm run watch
diff --git a/examples/projects/jigsaw/test-JigsawPiece.js b/examples/projects/jigsaw/test-JigsawPiece.js
@@ -0,0 +1,50 @@
+import phaser from 'phaser/src/phaser.js';
+import JigsawPiece from './JigsawPiece.js';
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() {
+        this.load.image('classroom', 'assets/images/backgrounds/classroom.png');
+    }
+
+    create() {
+        var piece = new JigsawPiece(this, {
+            width: 115, height: 115,
+        })
+        this.add.existing(piece);
+
+        piece.setOrigin(0);
+
+        piece.drawPiece({
+            key: 'classroom',
+            scrollX: -15,
+            scrollY: -15,
+            edgeModes: '2200'
+        })
+
+        this.add.graphics()
+            .lineStyle(3, 0xff0000)
+            .strokeRectShape(piece.getBounds())
+    }
+
+    update() { }
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+};
+
+var game = new Phaser.Game(config);