有没有其他办法来跟踪Phaser中擦除像素的进度？
<p>所以我正在尝试创建一个刮刮卡游戏，用户需要刮开卡片来揭示下面的内容。我想要检查用户是否刮开了画布的70％来全部揭示。我正在尝试使用phaser来实现这个功能，但是它不起作用。</p>
<p>我尝试计算imagedata以获取像素数组，但是它返回一个全为零的数组。我在下面的代码中使用了calculateScratchRatio函数。</p>
<pre class="brush:php;toolbar:false;">import BaseScene from "./BaseScene";
const SKY_IMAGE = "sky";
const SKY_IMAGE_BLACK = "skyblack";
const BOARD = "board";
const HEADER_ACT = "header_act";
const KEY_BRUSH = "brush";
const BGGAME = "bg-game";
export default class Scratch extends BaseScene {
constructor(config) {
super("Scratch", { ...config });
this.config = config;
this.isDown = false;
this.renderTexture = null;
this.brush = null;
this.erasedPixels = 0;
this.screenCenter = [config.width / 2, config.height / 2];
}
create() {
super.create();
this.cover = this.make.image({
key: SKY_IMAGE_BLACK,
add: false,
});
this.board = this.make.image({
key: BOARD,
add: false,
});
this.ScratchOff();
this.add.image(...this.screenCenter, BOARD).setScale(0.7);
console.log(this.board.getBounds());
const headerinfo = this.add
.image(this.screenCenter[0] - 160, 130, "header_act")
.setScale(0.7);
let helloWorld = this.add
.text(0, 0, "Hello World")
.setFont("20px Arial")
.setColor("#ffffff");
const container = this.add.container(headerinfo.x, headerinfo.y);
container.add(helloWorld);
}
ScratchOff() {
this.add
.image(this.screenCenter[0] - 160, this.screenCenter[1], SKY_IMAGE)
.setScale(0.7);
this.cover.setOrigin(0, 0);
const width = this.cover.width;
const height = this.cover.height;
console.log(width, height);
const rt = this.add.renderTexture(
this.screenCenter[0] - 160,
this.screenCenter[1],
width * 0.7,
height * 0.71
);
this.isRenderTextureErased = false;
this.erasureThreshold = 0.99;
rt.setOrigin(0.5, 0.5);
rt.draw(this.cover); //, width * 0.5, height * 0.5)
rt.setInteractive();
rt.on(Phaser.Input.Events.POINTER_DOWN, this.handlePointerDown, this);
rt.on(Phaser.Input.Events.POINTER_MOVE, this.handlePointerMove, this);
rt.on(Phaser.Input.Events.POINTER_UP, () => (this.isDown = false));
this.brush = this.make.image({
key: KEY_BRUSH,
add: false,
});
this.renderTexture = rt;
}
handlePointerDown(pointer) {
this.isDown = true;
this.handlePointerMove(pointer);
}
handlePointerMove(pointer) {
if (!this.isDown) {
return;
}
const x = pointer.x - this.renderTexture.x + this.renderTexture.width * 0.5;
const y =
pointer.y - this.renderTexture.y + this.renderTexture.height * 0.5;
this.renderTexture.erase(this.brush, x, y);
const result = this.calculateScratchRatio(x, y);
console.log("result", result);
}
calculateScratchRatio(x, y) {
const texture = this.textures.get(SKY_IMAGE_BLACK);
console.log(texture);
if (!texture) {
console.error(`Texture with key '${SKY_IMAGE_BLACK}' not found.`);
return 0;
}
console.log(texture);
const canvas = document.createElement("canvas");
canvas.width = texture.source[0].width;
console.log("canvas.width", canvas.width);
canvas.height = texture.source[0].height;
const context = canvas.getContext("2d");
context.drawImage(texture.source[0].image, 0, 0);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
console.log(imageData, pixels);
let erasedCount = 0;
for (let i = 3; i < pixels.length; i += 4) {
const alpha = pixels[i + 3];
if (alpha < 128) {
erasedCount++;
}
}
const totalPixels = canvas.width * canvas.height;
const scratchRatio = (erasedCount / totalPixels) * 100;
return Math.round(scratchRatio);
}
}</pre>
<p><br /></p>
1
1340
收藏
你的代码中有很多内容，很难让它正常工作。
最好的做法是发布一个迷你可运行代码，就像这里提到的这里。
不过，一个简单快速的解决方案是使用
canvasTexture来创建封面纹理，这样你就可以直接从这个对象访问上下文。这是一个我会这样做的简短演示：
(基于这个答案的概念)
document.body.style = 'margin:0;'; class ScratchScene extends Phaser.Scene { constructor() { super('ScratchScene') } create(){ let helperGraphics = this.make.graphics({x:0, y: 0, add: false}); helperGraphics.fillStyle(0xff0000); helperGraphics.fillRect(0, 0, 200, 50 ); helperGraphics.generateTexture('cover', 200, 50); let coverImage = this.textures.get('cover').getSourceImage() this.coverHelperCanvas = this.textures.createCanvas('coverTexture', 200, 50) this.coverHelperCanvas.draw(0, 0, coverImage) this.coverHelperCanvas.context.globalCompositeOperation = 'destination-out' this.precent = this.add.text(10 , 10, '' ); this.add.text( config.width/2, config.height / 2, 'YOU WON') .setOrigin(.5) .setFontSize(20); let cover = this.add.image(config.width/2, config.height / 2, 'coverTexture') .setInteractive(); cover.on('pointermove', this.clearCover, this); this.checkPercent(); } checkPercent(){ let full = 200 * 50; let { data } = this.coverHelperCanvas.context.getImageData(0, 0,200, 50); let current = data.filter((v,i) => ((i + 1) % 4 == 0) && v > 0).length; this.precent.setText(`Cover Percent: ${ (current / full * 100).toFixed(2) }%` ); } clearCover(e, x, y){ let radius = 10; this.coverHelperCanvas.context.beginPath() this.coverHelperCanvas.context.arc(x, y, radius, 0, Math.PI * 2, false) this.coverHelperCanvas.context.fill(); this.coverHelperCanvas.update(); this.checkPercent(); } } var config = { type: Phaser.AUTO, width: 536, height: 163, scene: [ScratchScene] }; new Phaser.Game(config); console.clear();