接下來加入我們的星星,加入步驟爲: create 出星星物件 -> 爲星星加上相對的物理特性(相對於地板與相對於主角)
//create()
//設定星星要重複幾次與每個星星的間隔
stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: {
x: 12,
y: 0,
stepX: 70
}
});
//遍歷每個星星,並每個星星加上亂數的反彈重力
stars.children.iterate(function(child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
//對星星加上相對的物理特性
this.physics.add.collider(stars, platforms);
//當主角與星星重疊時,呼叫collectStar函式
this.physics.add.overlap(player, stars, collectStar, null, this);
function collectStar(player, star) {
star.disableBody(true, true);
}
最後加上分數,就完成一個簡單的小遊戲啦
//在全域宣告兩個變數
var score = 0
var scoreText;
//在create裡將文字顯示在畫面上
//依序的參數爲(x軸位置,y軸位置,文字內容,文字的相關樣式)
scoreText = this.add.text(16, 16, 'Score: ' + score, {
fontSize: '32px',
fill: '#000'
});
//最後當碰撞事件發生的時候去修改分數
function collectStar(player, star) {
star.disableBody(true, true);
score += 10;
scoreText.setText('Score: ' + score)
}
而接下來就可以開始延伸你想要的遊戲內容了,以官方範例來說,他增加了遊戲難度,新增碰到會死掉到炸彈,你也可以把遊戲做成小朋友上下樓梯,更甚至加入怪物讓主角挑戰,這些的是可以做到的,在之後的天數,會儘量多介紹 phaser 好用的地方與做一些遊戲讓大家認識phaser的強大之處
總結:
從這邊我們可以看到如果想要加入一個遊戲元素需要的步驟:
載入 -> 創造 -> 相關的物理特性 -> 相關的事件
掌握每個元素之間的關係就可以打造出一個自己想要的遊戲
在接下來的天數,會有更多實作遊戲與 phaser 使用方式的解析介紹,請大家拭目以待
這四天的參考資料:
phaser官方網站
phaser教學
phaser小站