Phaser 3 添加按钮 - JavaScript

在 Phaser 3 中，添加按钮可以让你的游戏更加交互和用户友好。本文将会介绍如何使用 Phaser 3 添加按钮。

准备工作

在添加按钮之前，你需要做以下准备工作：

1. 创建一个游戏对象。以下是创建一个基本的 Phaser 3 游戏对象的示例代码：

   const config = {
     type: Phaser.AUTO,
     width: 800,
     height: 600,
     scene: {
       preload: preload,
       create: create,
       update: update
     }
   };
   
   const game = new Phaser.Game(config);
   

2. 在 create 函数中创建一个按钮容器，并且将它加入到场景中：

   function create() {
     // 创建按钮容器
     const buttonContainer = this.add.container();
   
     // 将容器加入到场景中
     this.add.existing(buttonContainer);
   }
   

添加按钮

添加按钮最重要的是定义按钮的样式、位置和交互行为。以下是一个示例代码，演示如何创建一个简单的按钮：

function create() {
  // 创建按钮容器
  const buttonContainer = this.add.container();

  // 创建按钮
  const button = this.add.text(100, 100, '点击我', {
    fontSize: '32px',
    fill: '#000',
    backgroundColor: '#fff',
    padding: {
      x: 20,
      y: 10
    },
    borderWidth: 1,
    borderColor: '#000'
  });

  // 开启按钮交互行为，并注册点击事件
  button.setInteractive();
  button.on('pointerdown', function() {
    console.log('按钮被点击了！');
  });

  // 将按钮加入到容器中
  buttonContainer.add(button);

  // 将容器加入到场景中
  this.add.existing(buttonContainer);
}

上面的代码中，add.text 方法创建了一个简单的文本按钮，setInteractive 方法开启了按钮的交互行为，on 方法注册了按钮的点击事件。将按钮加入到按钮容器中，然后将容器加入到场景中，最后你就可以看到一个简单的按钮了。

总结

本文介绍了如何使用 Phaser 3 添加按钮，包括创建按钮，定义样式和位置，以及注册交互行为和点击事件。通过添加按钮，你的游戏将会变得更加交互和用户友好。