PixiJS 筆記 - level - 1 建立app

更新 發佈閱讀 3 分鐘

從原生PIXIjs 的試寫來理解RM MV的一些架構與程式 參照了pixijs的原生網站,先從範例開始建立與學習。 首先先建立 index.php 並建立 assets 資料夾 index 主要只用來include js的部份

raw-image

這邊我直接引用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

raw-image

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

raw-image

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

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

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

留言
avatar-img
Maker製造機 - Chimaki的沙龍
12會員
17內容數
記錄了包含開發日誌以及參展的種種心得
2020/10/17
這陣子比較有空一些,於是就開始了一些獨立遊戲工作室的參訪。 順手也做個紀錄,讓大家更了解獨立遊戲工作室的生態:)
Thumbnail
2020/10/17
這陣子比較有空一些,於是就開始了一些獨立遊戲工作室的參訪。 順手也做個紀錄,讓大家更了解獨立遊戲工作室的生態:)
Thumbnail
2020/10/16
近期Steamworks 的SDK進行更新了,有許多朋友發生無法上傳depot檔案的問題。 今天這篇很簡單的分享一下修改方式,讓Depot可以正常上傳。
Thumbnail
2020/10/16
近期Steamworks 的SDK進行更新了,有許多朋友發生無法上傳depot檔案的問題。 今天這篇很簡單的分享一下修改方式,讓Depot可以正常上傳。
Thumbnail
2020/10/16
今年到目前為止 (2017/4/21) ,Maker制造機的教學相關文章更新的速度較慢。 在1月的時候,其實就在規劃新的遊戲。 2月到3月 就比較複雜了一點,除了舉辦紙娃娃生產器活動的活動之外,也在協助貓咪學園寫了RM的多語系 / 影子事件 等功能。並在期間有空就寫SLG的系統。現在算有一些些小進度
Thumbnail
2020/10/16
今年到目前為止 (2017/4/21) ,Maker制造機的教學相關文章更新的速度較慢。 在1月的時候,其實就在規劃新的遊戲。 2月到3月 就比較複雜了一點,除了舉辦紙娃娃生產器活動的活動之外,也在協助貓咪學園寫了RM的多語系 / 影子事件 等功能。並在期間有空就寫SLG的系統。現在算有一些些小進度
Thumbnail
看更多
你可能也想看
Thumbnail
由於 MZ 的機制上跟 MV 本身並沒有太大的差別,詳細的一些基本入門都可以直接參考 MV 來使用跟學習,另外關於 MZ 本身的功能已經在大部分的文章跟官方預告都有提過了,因此本篇將會速覽目前已釋出插件的部分。
Thumbnail
由於 MZ 的機制上跟 MV 本身並沒有太大的差別,詳細的一些基本入門都可以直接參考 MV 來使用跟學習,另外關於 MZ 本身的功能已經在大部分的文章跟官方預告都有提過了,因此本篇將會速覽目前已釋出插件的部分。
Thumbnail
在 RMMV 中的功能達不到我要的效果怎麼辦?那麼就來使用插件擴展功能!這篇會跟大家講解「插件」,並且推薦想要了解 RMMV 架構的人一些講座。
Thumbnail
在 RMMV 中的功能達不到我要的效果怎麼辦?那麼就來使用插件擴展功能!這篇會跟大家講解「插件」,並且推薦想要了解 RMMV 架構的人一些講座。
Thumbnail
不是在軟體建置之初就決定所有一切的行為,而是執行時根據配置 (configuration) 或執行時的環境 (例如:特定目錄有什麼 plug-in) 決定有哪些行為,話是這麼說,但要實作一個可以載入 plug-in 的軟體 (以下稱作 host application) 倒是有不少事情要考慮。
Thumbnail
不是在軟體建置之初就決定所有一切的行為,而是執行時根據配置 (configuration) 或執行時的環境 (例如:特定目錄有什麼 plug-in) 決定有哪些行為,話是這麼說,但要實作一個可以載入 plug-in 的軟體 (以下稱作 host application) 倒是有不少事情要考慮。
Thumbnail
打開之後不懂怎麼操作 RMMV ?這裡將詳細講解基本操作以及工具設定!
Thumbnail
打開之後不懂怎麼操作 RMMV ?這裡將詳細講解基本操作以及工具設定!
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
Thumbnail
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
Thumbnail
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News