2018-09-12|閱讀時間 ‧ 約 3 分鐘

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

    從原生PIXIjs 的試寫來理解RM MV的一些架構與程式 這次看到的範例是pixijs官方網站上的 Container Pivot pivot 到google 翻譯上是樞紐的意思。 這次的效果是要讓PIXI.Sprite在畫面上旋轉。 首先在上次的程式碼中追加了兩行,新增了一張叫做Evil.png 的圖片,並把它add 到stage中
    還記得上篇看到RM中的Sprite其實擴充自 PIXI.Sprite , 在Doc中可以看到 PIXI.Sprite其實擴充自 PIXI.Container。
    可以想像成, RMMV的畫面其實是一個PIXI.Coneainer(Stage)中塞了滿滿的PIXI.Coneainer (真的是塞暴)
    接著是使用pivot來設定樞紐點,這邊把樞紐點設定在stage的中間,
    最後,是要讓他轉的部份。 還記得RM中的Sprite有個屬性 rotation嗎?要讓他選轉就是利用這個屬性。
    比較特別的是,我們不使用RM中的update 來做這件事情 這次使用 PIXI.Application 中的 ticker, 他可以幫我們建立一個監聽來進行update,
    所以只要使用 app.tiker.add 即可
    這樣就可以看到圖片在畫面中旋轉了
    小結: 在RMMV中, Scene_Base的原形鏈連接了Stage.prototype 再鏈接了 PIXI.Container。
    所以理論上任何的Scene都可以使用PIXI.Container的屬性跟方法,至於使app.ticker的部分看起來RM原生架構是沒有把它整合成可以直接使用的內容。
    # RM中需要一直刷新的內容,基本上都塞再prototype.update 這個接口了。 如果要event接口,其實大部分也有覆寫,也可以直接用PIXI.Container中的事件監聽
    分享至
    成為作者繼續創作的動力吧!
    作者Chimaki,從遊戲企劃開始到自學成為後端工程師。持續在遊戲業深耕,上班為遊戲工程師 / 下班則為獨立遊戲製作人。目前自製代表作「眼中的世界」已於Steam上架。
    從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

    發表回應

    成為會員 後即可發表留言