入门3|入门3 该演员们出场了入门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
【入门3|入门3 该演员们出场了】我们要让演员到图上所示的位置，我们给演员设置锚点（即它的中心点）到它的中心，那么它的坐标应该是（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;

再次运行看看效果。