diff --git a/docs/docs/rendertexture.md b/docs/docs/rendertexture.md index feb16ecd2b..d3c0e9ce77 100644 --- 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 index 7089a66877..74ef90a3f0 100644 --- 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 new file mode 100644 index 0000000000..7c59331fc1 --- /dev/null +++ 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 \ No newline at end of file diff --git a/examples/projects/jigsaw/JigsawPiece.js b/examples/projects/jigsaw/JigsawPiece.js new file mode 100644 index 0000000000..717bb2aaf4 --- /dev/null +++ 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; \ No newline at end of file diff --git a/examples/projects/jigsaw/test-JigsawPiece.bat b/examples/projects/jigsaw/test-JigsawPiece.bat new file mode 100644 index 0000000000..98dbeaf94d --- /dev/null +++ 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 \ No newline at end of file diff --git a/examples/projects/jigsaw/test-JigsawPiece.js b/examples/projects/jigsaw/test-JigsawPiece.js new file mode 100644 index 0000000000..9db912b43e --- /dev/null +++ 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); \ No newline at end of file