如何使用 Phaser 3 中的函数绘制精灵？

Question

这是我的代码：

Create (){
spawn();
}
function spawn(){
var sprite = this.physics.add.sprite(50,50,'spritesheet','red.png');
}

现在，当我运行这段代码时，我收到如下错误：

未捕获类型错误：无法读取未定义的属性'add'

问题出在函数的 sprite 部分，但是当我在 create 函数中直接使用相同的代码时，它就起作用了。那么如何让它在外部函数中工作。

Answer 1

class myScene extends Phaser.Scene {

    constructor (config)
    {
      super(config);
    }

    preload ()
    {
      this.load.image('dude', 'sprites/phaser-dude.png')
    }
   
    create () 
    {
      this.spawn()
    }
    
    spawn()
    {
      var sprite = this.physics.add.sprite(50, 50, 'dude')
    }
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    loader: {
      baseURL: 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/',
      crossOrigin: 'anonymous'
    },
    width: 800,
    height: 600,
    physics: {
      default: 'arcade',
      arcade: {
        gravity: { y: 1 }
      }
  },
};

var game = new Phaser.Game(config);

game.scene.add('myScene', myScene, true);

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

Answer 2

如评论所述：
在 Create() 中，this 与 spawn() 中的 this 不同。
因此需要在这些函数之间正确绑定。一种方法：

Create() {
    spawn.bind(this)
    spawn();
}

如何使用 Phaser 3 中的函数绘制精灵？

How to draw sprites using a function in Phaser 3?

javascript

phaser-framework