入门3 该演员们出场了

舞台已经准备好了，下面就该演员们登场了。我们给界面上添加一个提示图片和一个按钮。

    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

这个游戏里我们要让演员从舞台外面滑进来，所以演员一开始的位置应该在舞台边缘，紧贴着舞台，那么它的坐标应该是多少呢？思考下算算看。本文的最终代码已经把演员放到舞台边缘还未上场的地方了。
本文最终代码地址：
码云
github