入门2 搭建神圣的舞台

这一节我们来搭建一个舞台。在Phaser引擎中，一个舞台应该要有三个功能（preload, create，update）。这三个功能不是必须的，你也可以添加其它的功能，但是这三个功能如果有的话，引擎会按照preload，create，update的顺序来调用。接下来我们添加一个舞台。

game.states = {};
game.states.menu = function() {
    this.preload = function() {
    },
    this.create = function() {
    }
}

随着第一个舞台的诞生，我们又做了一件伟大又充满意义的事，虽然这个舞台什么事情都没有做。其中game是我们前面创建的，states是game的一个属性，menu是我们自定义的一个对象，在这里是states的一个属性，不理解没关系。

---

接下来我们给preload里填充些代码，把我们的演员们请上场。

game.states.menu = function() {
    this.preload = function() {
        this.load.image('day', 'assets/bg/day.png');
        this.load.image('night', 'assets/bg/night.png');
        this.load.image('player', 'assets/b.png');
        this.load.image('s1', 'assets/mooncake/11.png');
        this.load.image('s2', 'assets/mooncake/22.png');
        this.load.image('1', 'assets/mooncake/1.png');
        this.load.image('2', 'assets/mooncake/2.png');
        this.load.image('3', 'assets/mooncake/3.png');
        this.load.image('4', 'assets/mooncake/4.png');
        this.load.image('5', 'assets/mooncake/5.png');
        this.load.image('6', 'assets/mooncake/6.png');
        this.load.image('7', 'assets/mooncake/7.png');
        this.load.image('message', 'assets/menu/message.png')
        this.load.image('button', 'assets/button.png');
        this.load.audio('bang', 'assets/music/bang.wav');
        this.load.audio('music', 'assets/music/675.mp3');
    },
    this.create = function() {
        this.add.sprite(0, 0, 'day');
    }
}

load.image是加载图片资源，load.audio是加载音频资源，第一个参数如"day"是个名称，后面加载的时候要使用这个名称，如create里做的事，把我们名称为"day"的演员请上舞台，并且指定了她的位置为左上角。关于坐标系我们后面在演员那一节来讲。

---

要把我们的舞台展示出来，我们还需要做些工作。

game.state.add('menu', game.states.menu);
game.state.start('menu');

运行一下看看结果。

4.gif

欢呼吧，我们的舞台起作用了。