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
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
在 Vue 中，組件是構建應用程式的基本單位，而 props 是組件間傳遞資料的主要方式之一，本文將介紹 Vue 中的 props，並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
Storybook 是一個用來透過獨立元件快速開發 UI 介面的工具，以往要開發元件時，我們可能需要建立一個全新的頁面才能進行開發，但這樣的開發方式可能會有一個狀況：沒有辦法事先開發或是預覽流程中不存在的元件。
透過 Storybook 我們在開發元件時，不需要重新建立複雜的頁面結構⋯⋯
Pixai.art是生成動漫風格的免費工具，基於開源的Stable Diffusion生態，同樣擁有ControlNet、Lora等強大模型工具。
本文介紹了 Django 專案中各個檔案的用途，包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程，以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
Pixverse 是一個免費的 AI 影片生成器，它可以根據您輸入的文字或圖片，生成各種風格和主題的高質量的影片，它有分成網頁版和 Discord 版，今天要介紹的是網頁版的 Pixverse，介面簡單好操作，只需要在輸入框輸入您的想法，選擇相關設定，就可以生成相應的影片，更棒的是，還可以商用呢！
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
※ 視圖模板
視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源
這系列是我在 2023 六角學院 Vue作品實戰班的筆記，筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ，其中包含單筆資料、多筆資料。
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
在 Vue 中，組件是構建應用程式的基本單位，而 props 是組件間傳遞資料的主要方式之一，本文將介紹 Vue 中的 props，並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
Storybook 是一個用來透過獨立元件快速開發 UI 介面的工具，以往要開發元件時，我們可能需要建立一個全新的頁面才能進行開發，但這樣的開發方式可能會有一個狀況：沒有辦法事先開發或是預覽流程中不存在的元件。
透過 Storybook 我們在開發元件時，不需要重新建立複雜的頁面結構⋯⋯
Pixai.art是生成動漫風格的免費工具，基於開源的Stable Diffusion生態，同樣擁有ControlNet、Lora等強大模型工具。
本文介紹了 Django 專案中各個檔案的用途，包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程，以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
Pixverse 是一個免費的 AI 影片生成器，它可以根據您輸入的文字或圖片，生成各種風格和主題的高質量的影片，它有分成網頁版和 Discord 版，今天要介紹的是網頁版的 Pixverse，介面簡單好操作，只需要在輸入框輸入您的想法，選擇相關設定，就可以生成相應的影片，更棒的是，還可以商用呢！