Phaser でピクセルの消去の進行状況を追跡する他の方法はありますか?

Question

そこで、ユーザーがカードをスクラッチして下にあるものを明らかにする必要があるスクラッチ カード ゲームを作成しようとしています。ユーザーがキャンバスの 70% をスクラッチしてすべてを表示したかどうかを確認したいと考えています。フェイザーを使用してこの機能を実装しようとしていますが、機能しません。

ピクセルの配列を取得するために画像データを計算しようとしましたが、すべて 0 の配列が返されました。以下のコードでは、calculateScratchRatio 関数を使用しています。

「./BaseScene」から BaseScene をインポートします。

const SKY_IMAGE = "空";
const SKY_IMAGE_BLACK = "スカイブラック";
const BOARD = "ボード";
const HEADER_ACT = "ヘッダー_act";
const KEY_BRUSH = "ブラシ";
const BGGAME = "BGM ゲーム";

デフォルト クラス Scratch をエクスポートして BaseScene を拡張 {
  コンストラクター(構成) {
    super("スクラッチ", { ...config });
    this.config = 構成;
    this.isDown = false;
    this.renderTexture = null;
    this.brush = null;
    this.erasedPixels = 0;
    this.screenCenter = [config.width / 2, config.height / 2];
  }

  作成する（） {
    super.create();
    this.cover = this.make.image({
      キー: SKY_IMAGE_BLACK、
      追加: false、
    });
    this.board = this.make.image({
      キー: ボード、
      追加: 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);
    helloWorld = this.add にしましょう
      .text(0, 0, "ハローワールド")

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

    const コンテナ = this.add.container(headerinfo.x, headerinfo.y);
    コンテナ.add(helloWorld);
  }

  掻き毟ります（） {
    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(幅, 高さ);

    const rt = this.add.renderTexture(
      this.screenCenter[0] - 160、
      this.screenCenter[1]、
      幅 * 0.7、
      高さ * 0.71
    );
    this.isRenderTextureErased = false;
    this.erasureThreshold = 0.99;
    rt.setOrigin(0.5, 0.5);
    rt.draw(this.cover); //、幅 * 0.5、高さ * 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_BRUSH、
      追加: false、
    });

    this.renderTexture = rt;
  }

  handlePointerDown(ポインタ) {
    this.isDown = true;
    this.handlePointerMove(ポインタ);
  }

  handlePointerMove(ポインタ) {
    if (!this.isDown) {
      戻る;
    }
    const x = pointer.x - this.renderTexture.x this.renderTexture.width * 0.5;
    定数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("結果", 結果);
  }CalculateScratchRatio(x, y) {
    const texture = this.textures.get(SKY_IMAGE_BLACK);
    コンソール.ログ(テクスチャ);
    if (!テクスチャ) {
      console.error(`キー '${SKY_IMAGE_BLACK}' のテクスチャが見つかりません。`);
      0を返します。
    }

    コンソール.ログ(テクスチャ);
    const Canvas = document.createElement("canvas");
    Canvas.width = テクスチャ.ソース[0].width;
    console.log("canvas.width", Canvas.width);
    Canvas.height = テクスチャ.ソース[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 ピクセル = imageData.data;
    console.log(画像データ, ピクセル);
    消去済みカウント = 0 にします。

    for (let i = 3; i < ピクセル.長さ; i = 4) {
      const alpha = ピクセル[i 3];
      if (アルファ < 128) {
        消去数 ;
      }
    }

    const totalPixels = キャンバスの幅 * キャンバスの高さ;
    constScratchRatio = (erasedCount / totalPixels) * 100;

    Math.round(scratchRatio) を返します。
  }
}

Answer 1

コードには多くのものが含まれており、それを機能させるのは困難です。
最善の方法は、ここここで述べたようなミニ実行可能コードを公開することです。

ただし、シンプルで迅速な解決策は、canvasTexture を使用して cover テクスチャを作成し、このオブジェクトからコンテキストに直接アクセスできるようにすることです。

これは私がそれを行う方法の短いデモンストレーションです:
(この 回答の概念に基づく )

リーリー リーリー