舞台已经准备好了，下面就该演员们登场了。我们给界面上添加一个提示图片和一个按钮。
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
网友评论