舞臺已經準備好了，下面就該演員們登場了。我們給界面上添加一個提示圖片和一個按鈕。

    this.create = function() {
        this.add.sprite(0, 0, 'day');
        var menu = this.add.sprite(0,0, 'message');
        menu.x = (game.width - menu.width) / 2;
        menu.y = (game.height - menu.height) / 2;
        var button = this.add.button(0, 0, 'button', this.startGame);
        button.x = menu.x + (menu.width - button.width) / 2;
        button.y = menu.y + menu.height - button.height + 30;
    },
    this.startGame = function() {
    }

5.gif

哈哈，出來了。我們在添加按鈕的時候使用了 this.add.button，第三個參數指定了點擊按鈕的觸發的方法。接下來我們創建一個新的舞臺，在這個新舞臺上讓演員們表演。

game.states.start = function() {
    this.preload = function() {
        this.add.sprite(0, 0, 'day'); // 添加背景圖片
        bang = this.add.audio('bang'); // 添加撞擊音樂
        music = this.add.audio('music'); // 添加背景音樂
        this.input.maxPointers = 1; // 只能單指點擊屏幕或鼠標（非多人游戲）
        game.physics.startSystem(Phaser.Physics.ARCADE); // 啟動物理引擎
    },
    this.create = function() {
        music.play('', 0, 1, true); // 一直播放背景音樂
    },
    this.update = function() {
        
    }
}
game.state.add('start', game.states.start);

我們添加了一個新的舞臺，用來讓演員表演的舞臺，并添加了一些“后臺”默默工作的演員，同時開啟了物理引擎。
首先來說下坐標系。坐標用兩個數字表示（x，y），通常用x來表示行坐標，y表示列坐標。左上角是（0，0），右上角是（600，0），左下角是（0，600），右下角是（600，600），如果出了游戲界面，比如在左側，那么x是個負值，右側超過部分x大于600，上邊超出邊界則y是個負值，下邊超了邊界則y大于600。

坐標系.png

一個演員的默認錨點（坐標（x，y））默認在這個演員的左上角，我們給它改到它的中心位置。

        var moon = this.add.sprite(0, 0, "1");
        var x = game.width - moon.width / 2;
        var y = -moon.height / 2;
        moon.x = x;
        moon.y = y;

在create方法種添加上面的代碼，我們的一個月餅上臺了。為了讓這個舞臺顯示出來，需要在前一個舞臺中切換它。我們給menu舞臺中的startGame添加如下代碼，這樣就可以在點擊開始游戲的按鈕的時候切換到這個新舞臺。

    this.startGame = function() {
        game.state.start('start');
    }

第一個演員.png

啊，可憐的演員，沒有找準自己的位置，我們幫幫它，先來分析下。

分析坐標.png

我們要讓演員到圖上所示的位置，我們給演員設置錨點（即它的中心點）到它的中心，那么它的坐標應該是（600-演員寬度的一半，演員高度的一半）。

        var moon = this.add.sprite(0, 0, "1");
        moon.anchor.set(0.5); // 設置演員錨點為中心點
        var x = game.width - moon.width / 2;
        var y = moon.height / 2;
        moon.x = x;
        moon.y = y;

再次運行看看效果。

演員找準位置.png