在 Phaser 3 中设置快照的位置

问题描述

我正在使用 this Phaser 3 example，我需要在预定义的位置显示快照。目前，每个快照都显示在带有 document.body.appendChild(image);

的正文下方

我尝试了 this.add.sprite(0,image).setorigin(0.5,0); 但它返回一个错误：

未捕获的类型错误：无法读取 null 的属性“add”

代码：

  this.input.on('pointerdown',function (pointer) {

    var textureManager = this.textures;

    this.game.renderer.snapshotArea(pointer.x,pointer.y,128,function (image)
    {
        document.body.appendChild(image);

        if (textureManager.exists('area'))
        {
            textureManager.remove('area');
        }

        textureManager.addImage('area',image);

        particles.setTexture('area');
    });

},this);

解决方法

我留下了在正文末尾附加图像的部分，但可以根据需要随意编辑。

var snapshot
var lastpointer = {x: 100,y: 100} 
this.input.on('pointerdown',(pointer) => {
    var textureManager = this.textures;
    this.game.renderer.snapshotArea(pointer.x,pointer.y,128,(image) => {
        lastpointer.x = pointer.x
        lastpointer.y = pointer.y
        document.body.appendChild(image);
       
        if (textureManager.exists('area'))
        {
            textureManager.remove('area');
        }

        textureManager.addImage('area',image);

        particles.setTexture('area');

        // Add the snapshot to the texture cache
        if (textureManager.exists('snapshot'))
        {
            textureManager.remove('snapshot');
            snapshot.destroy();
            snapshot = null;
        }
        textureManager.addBase64('snapshot',image.src);
    });

},this);

// When the snapshot is actually loaded,add it to the pointer coordinates (or simply fixed ones)
this.textures.on('addtexture',function (texture) {
    if('snapshot' === texture) {
        snapshot = this.add.image(lastpointer.x,lastpointer.y,'snapshot');
    }
},this);