》深度、變形
深度：當載入很多素材，有時候需要調整它的前後位置，就像 css 的 z-index 一樣
變形：可以想像成 css 3 的 scale、rotate 的效果一樣

》Javascript 內容
先載入 player，再載入 bg，因 bg 圖片比較大，而且載入順序的不同，就疊在 player 上，使得 player 物件看不到，其實它是存在的。這時可以設定 depth 來改變它的顯示深度。

scene.create = function(){
    let player = this.add.sprite(30, 223, 'player')
    player.depth = 1					// 預設 depth 為 0，這裡設定 1

    let bg = this.add.sprite(0, 0, 'bg')
    bg.setOrigin(0, 0)
}

接著我們來嘗試著變形的縮放效果，也可以想像成 css3 的 transform: sacle(x, y)。
方法 1 ) 兩倍大小的圖片物件，可以省略成 setScale(2)

player.setScale(2, 2)

方法 2 ) 直接設定scaleX 或 scaleY

player.scaleX = 2 
player.scaleY = 2

方法 3 ) 直接設定displayWidth 或 displayHeight

player.displayWidth = 168
player.displayHeight = 184

接著我們也來嘗試別種效果，像是 flipX、flipY，跟 css 3 rotateX(180deg)、rotateY(180deg) 一樣效果。
方法 1 ) 用 setFlip 來設定 X 和 Y 翻轉
player.setFlip(true, true)

方法 2 ) 直接用 flipX 和 flipY 來更改

player.flipX = true
player.flipY = true

》結論
今天提到的 depth、scale、flip，可以把 player console 出來，看哪些屬性與方法可以使用，除了今天講到的這些，也可以試試看 rotation 要怎麼使用？試試看吧！

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