官方教程示例 http://phaser.io/examples

按钮 Buttons

1. 点击事件

添加按钮 button = game.add.button(X, Y, ‘按钮图片名’, 函数名, this, 2, 1, 0);

最后的2，1，0是针对按钮悬停、离开、按下三种状态（还有一种弹起状态）的背景图片ID标识，也可以用文本进行命名图片​

鼠标悬停 button.onInputOver.add(over, this);

鼠标离开 button.onInputOut.add(out, this);

按钮弹起 button.onInputUp.add(up, this);

以上三种响应事件中的over/out/up均为函数名

2. 加入群组

按钮加入到群组中的方式与其他元素没什么区别，创建群组之后再加入按钮即可

1
2
group = game.add.group();​
group.add(button);​

3. 按钮属性

主要是示范了如何调整按钮的角度、​固定宽高、缩放

角度：button.angle = 32

固定宽高：button.width(height) = 300

按比例缩放（1为原始比例）：button.scale.setTo(0.5, 0.5)​；

4. 按钮背景变化（图集）​

根据按钮不同状态（按下、悬停等）改变按钮的背景图片，首先需要准备好图集资源（集合了多张按钮背景的图片）​，然后在生成按钮时标注上不同状态对应的图片名称

1
button = game.add.button(x, y, 'button', actionOnClick, this, 'over', 'out', 'down');

5. ​按钮的取消功能

​示例中主要的意思是实现了一个带有取消功能的按钮，特别之处在于如果鼠标点击这个取消按钮之后，然后又将鼠标移出按钮之后再放开，将认为用户后悔了，不想再进行取消。

​主要实现步骤是在回调函数中添加对鼠标行为的监视：

1
2
3
4
5
6
function onUp(button, pointer, isOver) {
    if (isOver)
    {
        background.visible =! background.visible;
    }
}

​6. 改变按钮背景

可以通过button.setFrames(0,1,2,3)来重新设定按钮不同状态的背景图片

7. 按钮旋转

主要是展示了，即时按钮在旋转状态也是可以点击的，旋转的实现方法是在update()保留函数中实时增加button.angle的值

在按钮的教程中，用到了spritesheet和​atlas两种方式来加载按钮背景图片。一般来看，固定宽高的图片用spritesheet更加方便，而atlas更加灵活也稍微麻烦一些。