国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

有沒有其他辦法可以追蹤Phaser中擦除像素的進(jìn)度?
P粉928591383
P粉928591383 2023-08-14 20:29:20
0
1
829
<p>所以我正在嘗試創(chuàng)建一個(gè)刮刮卡遊戲,用戶需要刮開卡片來揭示下面的內(nèi)容。我想要檢查用戶是否刮開了畫布的70%來全部揭示。我正在嘗試使用phaser來實(shí)現(xiàn)這個(gè)功能,但是它不起作用。 </p> <p>我嘗試計(jì)算imagedata以獲得像素?cái)?shù)組,但它會(huì)傳回一個(gè)全為零的數(shù)組。我在下面的程式碼中使用了calculateScratchRatio函數(shù)。</p>
從「./BaseScene」匯入BaseScene;

const SKY_IMAGE = "天空";
const SKY_IMAGE_BLACK = "天黑";
const BOARD =「板」;
const HEADER_ACT = "header_act";
const KEY_BRUSH = "畫筆";
const BGGAME = "bg 遊戲";

匯出預(yù)設(shè)類別 Scratch 擴(kuò)充功能 BaseScene {
  構(gòu)造函數(shù)(配置){
    超級(jí)(“刮痕”,{...配置});
    this.config = 配置;
    this.isDown = false;
    this.renderTexture = null;
    this.brush = null;
    this.erasedPixels = 0;
    this.screenCenter = [config.width / 2, config.height / 2];
  }

  創(chuàng)造() {
    超級(jí).create();
    this.cover = this.make.image({
      鍵:SKY_IMAGE_BLACK,
      添加:假,
    });
    this.board = this.make.image({
      鍵盤,
      添加:假,
    });
    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 宋體")
      .setColor("#ffffff");

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

  刮掉(){
    這個(gè).add
      .image(this.screenCenter[0] - 160, this.screenCenter[1], SKY_IMAGE)
      .setScale(0.7);

    this.cover.setOrigin(0, 0);

    const 寬度 = this.cover.width;
    const height = this.cover.height;
    控制臺(tái).log(寬度,高度);

    const rt = this.add.renderTexture(
      this.screenCenter[0] - 160,
      這個(gè).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,
      添加:假,
    });

    this.renderTexture = rt;
  }

  處理指針向下(指針){
    this.isDown = true;
    this.handlePointerMove(指針);
  }

  處理指針移動(dòng)(指針){
    if (!this.isDown) {
      返回;
    }
    const x = 指標(biāo).x - this.renderTexture.x this.renderTexture.width * 0.5;
    常數(shù) y =
      指標(biāo).y - this.renderTexture.y this.renderTexture.height * 0.5;
    this.renderTexture.erase(this.brush, x, y);
    const 結(jié)果 = this.calculateScratchRatio(x, y);
    console.log(“結(jié)果”, 結(jié)果);
  }計(jì)算刮痕比(x,y){
    const 紋理 = this.textures.get(SKY_IMAGE_BLACK);
    控制臺(tái).log(紋理);
    如果(!紋理){
      console.error(`未找到帶有鍵“${SKY_IMAGE_BLACK}”的紋理。`);
      返回0;
    }

    控制臺(tái).log(紋理);
    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 像素 = imageData.data;
    console.log(imageData, 像素);
    讓擦除計(jì)數(shù) = 0;

    for (令 i = 3; i ></p>            
P粉928591383
P粉928591383

全部回覆(1)
P粉207483087

你的程式碼中有很多內(nèi)容,很難讓它正常運(yùn)作。
最好的做法是發(fā)布一個(gè)迷你可運(yùn)行程式碼,就像這裡提到的這裡。

不過,一個(gè)簡單快速的解決方案是使用canvasTexture來建立封面紋理,這樣你就可以直接從這個(gè)物件存取上下文。

這是一個(gè)我會(huì)這樣做的簡短示範(fàn):
(基於這個(gè)答案的概念)

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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板