PixiJS 筆記 - level - 1 建立app

閱讀時間約 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
    查看全部
    發表第一個留言支持創作者!
    hihi!大家好我又來了,前陣子在巴哈版上看到有玩家提問如何做出半身圖的對話效果,才留意到雖然是基本功能,但對初學玩家來說也會不知道如何做出來,那這次就來分享一下使用圖片來達到AVG模式效果的方法,順便分享粽子自製的小插件~  這次的教學主要會告訴大家如何使用圖片來達到AVG效果,而粽子提供的插件則
    hihi!大家好我又來了,前陣子在巴哈版上看到有玩家提問如何做出半身圖的對話效果,才留意到雖然是基本功能,但對初學玩家來說也會不知道如何做出來,那這次就來分享一下使用圖片來達到AVG模式效果的方法,順便分享粽子自製的小插件~  這次的教學主要會告訴大家如何使用圖片來達到AVG效果,而粽子提供的插件則
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    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
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    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