PixiJS 筆記 – level – 2 基本圖片操控

從原生PIXIjs 的試寫來理解RM MV的一些架構與程式


這次看到的範例是pixijs官方網站上的 Container Pivot

pivot 到google 翻譯上是樞紐的意思。

這次的效果是要讓PIXI.Sprite在畫面上旋轉。

首先在上次的程式碼中追加了兩行,新增了一張叫做Evil.png 的圖片,並把它add 到stage中
RMMV

還記得上篇看到RM中的Sprite其實擴充自 PIXI.Sprite ,
在Doc中可以看到 PIXI.Sprite其實擴充自 PIXI.Container。

可以想像成, RMMV的畫面其實是一個PIXI.Coneainer(Stage)中塞了滿滿的PIXI.Coneainer
(真的是塞暴)
pixijs

接著是使用pivot來設定樞紐點,這邊把樞紐點設定在stage的中間,
rmmv

最後,是要讓他轉的部份。

還記得RM中的Sprite有個屬性 rotation嗎?要讓他選轉就是利用這個屬性。

比較特別的是,我們不使用RM中的update 來做這件事情

這次使用 PIXI.Application 中的 ticker,

他可以幫我們建立一個監聽來進行update,
RMMV

所以只要使用 app.tiker.add 即可
RMMV

這樣就可以看到圖片在畫面中旋轉了
RMMV


小結:
在RMMV中, Scene_Base的原形鏈連接了Stage.prototype 再鏈接了 PIXI.Container。 所以理論上任何的Scene都可以使用PIXI.Container的屬性跟方法,至於使用 app.ticker的部分看起來RM原生架構是沒有把它整合成可以直接使用的內容。

# RM中需要一直刷新的內容,基本上都塞再prototype.update 這個接口了。 如果要event接口,其實大部分也有覆寫,也可以直接用PIXI.Container中的事件監聽

發表迴響