iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0

》旋轉、更新
旋轉:將物件以角度或弧度,進行旋轉。如 css 3 的 rotate(n deg)
更新:update 生命週期

》Javascript 內容
旋轉設定轉的方式有使用「角度」或「弧度」,正為順時針轉動,負為逆時針轉動。

scene.create = function() {     
    let bg = this.add.sprite(0, 0, 'bg')
    bg.setOrigin(0, 0)

    let player = this.add.sprite(30, 223, 'player')

    // 旋轉角度的設定,使用「角度」,等同 player.angle = 45
    player.setAngle(45)

    // 旋轉角度的設定,使用「弧度」,等同 player.rotation = Math.PI / 4
    player.setRotation(Math.PI / 4)
}

接著我們要使用到 Phaser 的生命週期 update,因為 player 是在 create 宣告的,我們在 update 生命週期是無法直接使用到,所以這邊我們改寫一下。

scene.create = function() {
    .....
    this.player = this.add.sprite(30, 223, 'player')
    this.player.setAngle(45)
}

scene.update = function() {
    this.player.angle += 0.5
}

》結論
今天提到的旋轉,可以用角度或者弧度來設定;生命週期 update,很常用到需要計算動畫位置以及操作。經由兩天下來,大家可以試著在 update 做些操作,像是放大的 scale,或者位置的移動 X,都可以嘗做看看!


今天就先到這裡,我們明天見。


上一篇
Day 4:基本變形
下一篇
Day 6:使用者互動
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言