PixiJS 筆記 - level - 1 建立app

更新於 2024/09/10閱讀時間約 2 分鐘
從原生PIXIjs 的試寫來理解RM MV的一些架構與程式 參照了pixijs的原生網站,先從範例開始建立與學習。 首先先建立 index.php 並建立 assets 資料夾 index 主要只用來include js的部份
這邊我直接引用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
Stage.prototype 其實來自 PIXI.Container.prototype
這樣大概能理解,為什麼每次要顯示一個新的圖片時,除了new 出來後,還必須把它 addChild進去才會顯示了
再來仔細一看, 除了Scene之外,天氣/ 視窗/ 地圖都源自PIXI.Container.prototype, 所以他們在新增顯示上的東西時,都可以使用addChild 來顯示在畫面上,你也可以理解成PIXI.Container可以使用的function 都可以套進去(口水

小結: MV中顯示上的東西大量使用PIXI.Container繼承+模改, 而RMMV的Doc 省略掉很多實用的效果,哪些效果可以快速達到原本PIXI.Container 的功能,還必須花時間查詢才行
為什麼會看到廣告
    記錄了包含開發日誌以及參展的種種心得
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    hihi!大家好我又來了,前陣子在巴哈版上看到有玩家提問如何做出半身圖的對話效果,才留意到雖然是基本功能,但對初學玩家來說也會不知道如何做出來,那這次就來分享一下使用圖片來達到AVG模式效果的方法,順便分享粽子自製的小插件~  這次的教學主要會告訴大家如何使用圖片來達到AVG效果,而粽子提供的插件則
    hihi!大家好我又來了,前陣子在巴哈版上看到有玩家提問如何做出半身圖的對話效果,才留意到雖然是基本功能,但對初學玩家來說也會不知道如何做出來,那這次就來分享一下使用圖片來達到AVG模式效果的方法,順便分享粽子自製的小插件~  這次的教學主要會告訴大家如何使用圖片來達到AVG效果,而粽子提供的插件則
    你可能也想看
    Google News 追蹤
    Thumbnail
    本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
    Thumbnail
    第二篇 | 在英國相遇的筆記本們 在英國念書期間,也順手收集了許多富有生活感的小物。
    Thumbnail
    筆記本控和她的筆記本們 | 來寫寫我的筆記本兒們 第一篇 | 那些我自己做封面的筆記本們
    前言 最近在研究GAT,在網路上看到使用torch和DGL實作的GAT模型的程式碼,就想說下載下來自己跑跑看,這篇文章:Understand Graph Attention Network。途中遇到問題,把找到的解法記錄下來,給也有一樣問題的朋友參考。 正文 在Colab直接使用: !p
    Thumbnail
    在數位筆記管理中,標籤混亂是一個常見問題,尤其是當出現許多重複標籤時。例如,“#人力資源”和“#人力資源管理”,“#旅行”和“#旅遊”,“#啟發”和“#啟示”這些類似的標籤會導致分類繁複而臃腫,長期下來不僅無益反而有害。
    Thumbnail
    第一次看到有人可以把黃金葛用得這麼美,蓬鬆感加上點綴的黃葉,像是一叢美麗的果樹,加上門口可愛樸實的手寫字,看到這種店面,完全無法不進去阿阿阿。 結帳時,忍不住問了老闆娘,店面的植物究竟是如何打造的。 老闆娘說他們沒有刻意打造,那片美麗的黃金葛屋簷,是之前二樓房客種的,他們只是幫忙維護
    Thumbnail
    筆記-財經皓角-24.06.13 *美國5月CPI與4月相比持平(低於預期的0.1%),年增率為3.3%(低於預期的3.4%)。 核心CPI月增0.2%(低於預期的0.3%)、年增3.4%(低於預期的3.5%), 僵固性的通膨也有放緩跡象,顯示通膨問題即將消除。 *FOMC點陣圖預估2024
    Thumbnail
    筆記-股癌-24.06.08 *達哥是聯發科生成式AI服務平台,原先看法是用來coding、問問題。 -RIG(加強功能),給更多公司內部資料,減少幻覺問題,讓回答更佳精準。 -RIG就是open book,直接開答案來看。 -Embedded是讓模型重新學習一個新技能。 -RIG與Emb
    Thumbnail
    本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
    Thumbnail
    第二篇 | 在英國相遇的筆記本們 在英國念書期間,也順手收集了許多富有生活感的小物。
    Thumbnail
    筆記本控和她的筆記本們 | 來寫寫我的筆記本兒們 第一篇 | 那些我自己做封面的筆記本們
    前言 最近在研究GAT,在網路上看到使用torch和DGL實作的GAT模型的程式碼,就想說下載下來自己跑跑看,這篇文章:Understand Graph Attention Network。途中遇到問題,把找到的解法記錄下來,給也有一樣問題的朋友參考。 正文 在Colab直接使用: !p
    Thumbnail
    在數位筆記管理中,標籤混亂是一個常見問題,尤其是當出現許多重複標籤時。例如,“#人力資源”和“#人力資源管理”,“#旅行”和“#旅遊”,“#啟發”和“#啟示”這些類似的標籤會導致分類繁複而臃腫,長期下來不僅無益反而有害。
    Thumbnail
    第一次看到有人可以把黃金葛用得這麼美,蓬鬆感加上點綴的黃葉,像是一叢美麗的果樹,加上門口可愛樸實的手寫字,看到這種店面,完全無法不進去阿阿阿。 結帳時,忍不住問了老闆娘,店面的植物究竟是如何打造的。 老闆娘說他們沒有刻意打造,那片美麗的黃金葛屋簷,是之前二樓房客種的,他們只是幫忙維護
    Thumbnail
    筆記-財經皓角-24.06.13 *美國5月CPI與4月相比持平(低於預期的0.1%),年增率為3.3%(低於預期的3.4%)。 核心CPI月增0.2%(低於預期的0.3%)、年增3.4%(低於預期的3.5%), 僵固性的通膨也有放緩跡象,顯示通膨問題即將消除。 *FOMC點陣圖預估2024
    Thumbnail
    筆記-股癌-24.06.08 *達哥是聯發科生成式AI服務平台,原先看法是用來coding、問問題。 -RIG(加強功能),給更多公司內部資料,減少幻覺問題,讓回答更佳精準。 -RIG就是open book,直接開答案來看。 -Embedded是讓模型重新學習一個新技能。 -RIG與Emb