Adakah terdapat cara lain untuk menjejaki kemajuan pemadaman piksel dalam Phaser?

Question

Jadi saya cuba mencipta permainan kad gores di mana pengguna perlu menconteng kad untuk mendedahkan apa yang ada di bawahnya. Saya ingin menyemak sama ada pengguna telah menconteng 70% daripada kanvas untuk mendedahkan semuanya. Saya cuba menggunakan phaser untuk melaksanakan fungsi ini, tetapi ia tidak berfungsi.

Saya cuba mengira data imej untuk mendapatkan tatasusunan piksel, tetapi ia mengembalikan tatasusunan semua sifar. Saya menggunakan fungsi calculateScratchRatio dalam kod di bawah.

import BaseScene daripada "./BaseScene";

const SKY_IMAGE = "langit";
const SKY_IMAGE_BLACK = "skyblack";
const BOARD = "papan";
const HEADER_ACT = "header_act";
const KEY_BRUSH = "berus";
const BGGAME = "bg-game";

eksport kelas lalai Scratch memanjangkan BaseScene {
  pembina(config) {
    super("Calar", { ...config });
    this.config = konfigurasi;
    this.isDown = palsu;
    this.renderTexture = null;
    this.brush = null;
    this.erasedPixels = 0;
    this.screenCenter = [config.width / 2, config.height / 2];
  }

  cipta() {
    super.create();
    this.cover = this.make.image({
      kunci: SKY_IMAGE_BLACK,
      tambah: palsu,
    });
    this.board = this.make.image({
      kunci: PAPAN,
      tambah: palsu,
    });
    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);
    biarkan helloWorld = ini.tambah
      .text(0, 0, "Hello World")

      .setFont("20px Arial")
      .setColor("#ffffff");

    bekas const = this.add.container(headerinfo.x, headerinfo.y);
    container.add(helloWorld);
  }

  Menggaru() {
    ini.tambah
      .image(this.screenCenter[0] - 160, this.screenCenter[1], SKY_IMAGE)
      .setScale(0.7);

    this.cover.setOrigin(0, 0);

    lebar const = this.cover.width;
    tinggi const = this.cover.height;
    console.log(lebar, tinggi);

    const rt = this.add.renderTexture(
      this.screenCenter[0] - 160,
      this.screenCenter[1],
      lebar * 0.7,
      ketinggian * 0.71
    );
    this.isRenderTextureErased = palsu;
    this.erasureThreshold = 0.99;
    rt.setOrigin(0.5, 0.5);
    rt.draw(this.cover); //, lebar * 0.5, tinggi * 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 = palsu));

    this.brush = this.make.image({
      kunci: KEY_BRUSH,
      tambah: palsu,
    });

    this.renderTexture = rt;
  }

  handlePointerDown(penunjuk) {
    this.isDown = benar;
    this.handlePointerMove(pointer);
  }

  handlePointerMove(penunjuk) {
    jika (!this.isDown) {
      kembali;
    }
    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("hasil", hasil);
  }hitungNisbah Gores(x, y) {
    tekstur const = this.textures.get(SKY_IMAGE_BLACK);
    console.log(tekstur);
    jika (!tekstur) {
      console.error(`Tekstur dengan kunci '${SKY_IMAGE_BLACK}' tidak ditemui.`);
      pulangan 0;
    }

    console.log(tekstur);
    const canvas = document.createElement("kanvas");
    kanvas.lebar = tekstur.sumber[0].lebar;
    console.log("canvas.width", canvas.width);
    canvas.height = tekstur.sumber[0].tinggi;
    konteks const = canvas.getContext("2d");
    context.drawImage(texture.source[0].image, 0, 0);

    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    piksel const = imageData.data;
    console.log(imageData, piksel);
    biarkan erasedCount = 0;

    untuk (biar i = 3; i < pixels.length; i += 4) {
      const alpha = piksel[i + 3];
      jika (alfa < 128) {
        terpadamCount++;
      }
    }

    const totalPixels = canvas.width * canvas.height;
    const scratchNisbah = (terpadamCount / totalPixels) * 100;

    kembalikan Math.round(scratchNisbah);
  }
}

Answer 1

Terdapat banyak dalam kod anda dan sukar untuk membuatnya berfungsi.
Perkara terbaik untuk dilakukan ialah menerbitkan kod mini runnable seperti yang dinyatakan di sini di sini.

Walau bagaimanapun, penyelesaian yang mudah dan pantas ialah menggunakan canvasTexture untuk mencipta Tekstur Sampul supaya anda boleh mengakses konteks terus daripada objek ini.

Berikut ialah demonstrasi ringkas tentang cara saya melakukannya:
(Berdasarkan konsep ini jawapan)

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();

<script src="https://cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>