是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2020-04-06 JavaScript

PixiJS V5 教學 (9) - speeds

#JavaScript #PixiJS V5 教學 #PixiJS #w3HexSchool #Canvas

前言

接下來也是與圖片移動相關，但是這一次要介紹的是速度。

速度

在前面章節，我們是使用了以下語法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
app.ticker.add((delta) => {
  tickerLoop();
})
function tickerLoop() {
  if(status) {
    container.x += 5;
    container.y += 1;
    if(container.x > 400) {
      status = 0;
    }
  } else {
    container.x -= 5;
    container.y -= 1;
    if(container.x < 0) {
      status = 1;
    }
  }
}

但是其實透過這種方式去移動的靈活性並沒有那麼高，所以 PIXI 中還有兩個速度的屬性，也就是 vx、vy，顧名思義就是在控制你 x 軸(水平)與 y 軸(垂直)的速度與方向，透過 vx、vy 可以直接更新移動的速度，所以比較好的寫法是這樣子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
app.ticker.add((delta) => {
  tickerLoop();
})

function tickerLoop() {
  container.vx = 5;
  container.vy = 1;
  if(status) {
    container.x += container.vx;
    container.y += container.vy;
    if(container.x > 400) {
      status = 0;
    }
  } else {
    container.x -= container.vx;
    container.y -= container.vy;
    if(container.x < 0) {
      status = 1;
    }
  }
}

透過 vx、vy 的屬性，我們可以更靈活的操控動畫移動的速度，也可以知道目前移動多少。

此外我們也可以透過傳參數的方式來改變 vx、vy 的屬性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let status = 0;
let speedX = 5;
let speedY = 0;

app.ticker.add((delta) => {
  tickerLoop(speedX, speedY);
})

function tickerLoop(X,Y) {
  container.vx = X;
  container.vy = Y;
  if(status) {
    container.x += container.vx;
    container.y += container.vy;
    if(container.x > 400) {
      status = 0;
    }
  } else {
    container.x -= container.vx;
    container.y -= container.vy;
    if(container.x < 0) {
      status = 1;
    }
  }
}

最後總結一下，你只要將 vx 設為負值，那麼就會向左移動，而 vy 設為負值則是向上移動，如果想要讓移動更快一點，那麼就將值設大一點就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let status = 1;
let speedX = 5;
let speedY = 0;

app.ticker.add((delta) => {
  tickerLoop(speedX, speedY);
})

function tickerLoop(X,Y) {
  container.vx = X;
  container.vy = Y;
  if(status) {
    container.x += container.vx;
    container.y += container.vy;
    if(container.x > 400) {
      status = 0;
      speedX = 20;
    }
  } else {
    container.x -= container.vx;
    container.y -= container.vy;
    if(container.x < 0) {
      status = 1;
      speedX = 5;
    }
  }
}

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

Buy Me A Coffee | Portaly

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

2020-11-11

PixiJS V5 教學 (39) - 音樂

2020-11-02

PixiJS V5 教學 (38) - TexturePacker

2020-10-31

PixiJS V5 教學 (37) - 加入 stats.js

2020-10-21

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme