PixiJS 筆記 – level – 1 建立app

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




參照了pixijs的原生網站,先從範例開始建立與學習。

首先先建立 index.php 並建立 assets 資料夾

index 主要只用來include js的部份
RMMV

這邊我直接引用cdnjs上的pixi.min.js來使用

範例中會先 new 出一個 PIXI.Application, doc上面試這樣寫的

Convenience class to create a new PIXI application. This class automatically creates the renderer, ticker and root container.

PIXI.Application 可以new 出可以渲染的容器,你不用自己去requestAnimationFrame讓畫布做update 的動作

一般要建立一個新的 Sprite是使用 PIXI.Spritee(texture)
PIXI.Sprite.fromImage(‘path’)則簡化了你在new PIXI.Texture的動作,讓你直接讓Sprite有Texture使用。

最後是
app.stage.addChild(bg);
我將圖片add進去讓app進行繪製

回推stage,在Doc中可以看到
PIXI.Application 的stage 屬性其實是一個 PIXI.Container

在PIXI 中也就是一個顯示物件的容器。


那在MV裡面的關聯性是?
可以看到Scene_Base.prototype 是來自Stage.prototype

RMMV

Stage.prototype 其實來自 PIXI.Container.prototype
RMMV

這樣大概能理解,為什麼每次要顯示一個新的圖片時,除了new 出來後,還必須把它 addChild進去才會顯示了

再來仔細一看, 除了Scene之外,天氣/ 視窗/ 地圖都源自PIXI.Container.prototype,
所以他們在新增顯示上的東西時,都可以使用addChild 來顯示在畫面上,你也可以理解成PIXI.Container可以使用的function 都可以套進去(口水


小結:
MV中顯示上的東西大量使用PIXI.Container繼承+模改, 而RMMV的Doc 省略掉很多實用的效果,哪些效果可以快速達到原本PIXI.Container 的功能,還必須花時間查詢才行

範例效果網址

Author: chimaki

作者粽子,2007年初次接觸RM2K3後便與遊戲製作結下不解之緣。2010年開始踏入遊戲業,任職研發企劃。2016年開始轉職Server工程師,喜愛並支持獨立製作。2016年開始正式推廣RPG MAKER MV。

2 thoughts on “PixiJS 筆記 – level – 1 建立app

  1. 感谢您对知识的分享,我是一个js新手,有一个问题要请教一下。
    为了写插件,我正在努力阅读mv的源码,但是mv源码内有很多部分是由pixi继承来的,请问单纯为了mv的学习有必要先学习pixi吗?

    1. 單純為了MV學習的話,可以不用先看PIXI, 我是因為MV的物件已經看很多後,才想開始看pixi的源碼

      我建議可以先自己改簡單的UI開始學習。

發表迴響