PixiJS V5 教學 (35) - 優化細節

前言

最後這一篇來抓一下這個寶藏獵人還可以優化那些細節。

寶藏獵人

目前來講寶藏獵人已經趨近一個 ok 的狀態,但是遊戲總是會時續優化,所以概略列一下可以優化那些細節

  • 重新開始就隨機速率。
    • 目前是固定速率,只會抓取第一次加載的速率。
  • 碰到史萊姆身體呈現半透明。
  • 碰撞隨機傷害
    • 目前傷害都是固定扣血量。

但是以上絕大部分都已經介紹過載入的方式,所以這邊就不在詳細介紹,只介紹幾個地方而已。

隨機速率

目前速率的設置是

1
blob.vy = blobOptions.speeds + randomInt(0, 3);

只是當我們重新開始遊戲的時候要將速率重新調整,目前怪物都是採用陣列去生成,所以應這樣改

1
2
3
4
5
6
7
8
function gameReset() {
...
// 重新調整怪物速率
blobs.forEach((item) => {
item.vy = blobOptions.speeds + randomInt(0, 3);
});
...
}

半透明

半透明的作法很簡單,只需要將冒險者的物件 alpha 改一下就可以了

1
2
3
4
5
6
7
8
9
if(boxesIntersect(explorer, item)) {
// 碰撞後扣除血量
gameHP -= 20;
// 碰撞後往後退避免一直扣血
explorer.x -= 10;
explorer.alpha = 0.5;
} else {
explorer.alpha = 1;
}

但是這邊要注意如果你是將上面這一個判斷式寫在 blobs.forEach 中那麼你會發現只有最後一個史萊姆才會造成半透明效果,所以建議修改成以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let hitStatus = false;

blobs.forEach((item) => {
item.y += item.vy;
const blobsHit = contain(item, {x: 28, y: 10, width: 488, height: 480})
if(blobsHit === 'top' || blobsHit === 'bottom') {
item.vy *= -1;
}
if(boxesIntersect(explorer, item)) {
hitStatus = true;
}
})

if(hitStatus) {
// 碰撞後扣除血量
gameHP -= 1;
explorer.alpha = 0.1;
} else {
explorer.alpha = 1;
}

這樣子才可以正常的碰撞每一個史萊姆就變成半透明。

碰撞後往後退的效果我就移除,因為會產生一些奇怪的問題,先讓遊戲簡單一點即可。

隨機碰撞傷害

相信聰明的你應該很快就知道隨機碰撞傷害該如何使用,只需要使用 randomInt() 即可。

1
2
3
4
5
6
7
if(hitStatus) {
// 碰撞後扣除血量
gameHP -= randomInt(1, 5);
explorer.alpha = 0.1;
} else {
explorer.alpha = 1;
}

只是這邊不建議數字拉太高避免變成秒殺的狀況,最後我還有加入一些效果,當碰到史萊姆時會跳出傷害,剩下的就留給你看囉~

參考文獻