Kite的筆記
0%

PIXI JS 超人門學習

發表於 更新於 分類於
520 1 分鐘

1. 基礎結構

1.1. HTML、JS載入

image-20210716151529109

1.2. JS 基礎說明

image-20210716151203957

1.2.1. 初始化設定

image-20210716151434641

2. pixijs container 概念說明

stage 可以想像成是一個body 元素

建議在實作內容的時候都使用container 來包裏相關物件，在移動座標的時候，會比較好管理image-20210716151831794

2.1. container 實作範例

image-20210716152334949

3. 滑鼠監聽實作

image-20210716154419564

4. container add event 實作

image-20210716154548989

如果要有事件記得開啟interactive=true ,

而buttonMode 是cursor變為手指頭符號

5. 遊戲循環說明

app.ticker

這邊可以理解成unity 的update 遊戲循環(個人的理解，還是需要爬文看一下這個套件對於ticker 的詳細說明)

image-20210716154314683

6. GUI 工具

6.1. 載入dat.gui.min.js 套件

image-20210716155239657

6.2. new datGuiData()

image-20210716155306960

6.3. set app.ticker.add()

image-20210716155335874

6.4. 預覽結果畫面

可以即時調整相關坐標，進行調整

image-20210716155358346

7. FPS 偵測外掛

7.1. 載入Stats.min.js

image-20210716160004003

7.2. JS 實作寫法

image-20210716160052516

7.3. 預覽結果

image-20210716160602185

8. 幾何圖形

8.1. 畫圓、畫矩形

image-20210716161720950

9. PIXI chrome plugin 外掛

image-20210716161524141