PixiJS 筆記 – level – 2 基本圖片操控

閱讀時間約 2 分鐘
從原生PIXIjs 的試寫來理解RM MV的一些架構與程式 這次看到的範例是pixijs官方網站上的 Container Pivot pivot 到google 翻譯上是樞紐的意思。 這次的效果是要讓PIXI.Sprite在畫面上旋轉。 首先在上次的程式碼中追加了兩行,新增了一張叫做Evil.png 的圖片,並把它add 到stage中
還記得上篇看到RM中的Sprite其實擴充自 PIXI.Sprite , 在Doc中可以看到 PIXI.Sprite其實擴充自 PIXI.Container。
可以想像成, RMMV的畫面其實是一個PIXI.Coneainer(Stage)中塞了滿滿的PIXI.Coneainer (真的是塞暴)
接著是使用pivot來設定樞紐點,這邊把樞紐點設定在stage的中間,
最後,是要讓他轉的部份。 還記得RM中的Sprite有個屬性 rotation嗎?要讓他選轉就是利用這個屬性。
比較特別的是,我們不使用RM中的update 來做這件事情 這次使用 PIXI.Application 中的 ticker, 他可以幫我們建立一個監聽來進行update,
所以只要使用 app.tiker.add 即可
這樣就可以看到圖片在畫面中旋轉了

小結: 在RMMV中, Scene_Base的原形鏈連接了Stage.prototype 再鏈接了 PIXI.Container。
所以理論上任何的Scene都可以使用PIXI.Container的屬性跟方法,至於使app.ticker的部分看起來RM原生架構是沒有把它整合成可以直接使用的內容。
# RM中需要一直刷新的內容,基本上都塞再prototype.update 這個接口了。 如果要event接口,其實大部分也有覆寫,也可以直接用PIXI.Container中的事件監聽
為什麼會看到廣告
    記錄了包含開發日誌以及參展的種種心得
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    從原生PIXIjs 的試寫來理解RM MV的一些架構與程式    參照了pixijs的原生網站,先從範例開始建立與學習。  首先先建立 index.php 並建立 assets 資料夾  index 主要只用來include js的部份    這邊我直接引用cdnjs上的pixi.min.js來使
    hihi!大家好我又來了,前陣子在巴哈版上看到有玩家提問如何做出半身圖的對話效果,才留意到雖然是基本功能,但對初學玩家來說也會不知道如何做出來,那這次就來分享一下使用圖片來達到AVG模式效果的方法,順便分享粽子自製的小插件~  這次的教學主要會告訴大家如何使用圖片來達到AVG效果,而粽子提供的插件則
    從原生PIXIjs 的試寫來理解RM MV的一些架構與程式    參照了pixijs的原生網站,先從範例開始建立與學習。  首先先建立 index.php 並建立 assets 資料夾  index 主要只用來include js的部份    這邊我直接引用cdnjs上的pixi.min.js來使
    hihi!大家好我又來了,前陣子在巴哈版上看到有玩家提問如何做出半身圖的對話效果,才留意到雖然是基本功能,但對初學玩家來說也會不知道如何做出來,那這次就來分享一下使用圖片來達到AVG模式效果的方法,順便分享粽子自製的小插件~  這次的教學主要會告訴大家如何使用圖片來達到AVG效果,而粽子提供的插件則
    你可能也想看
    Google News 追蹤
    Thumbnail
    在這篇文章中,我們將探討如何製作章節轉場動畫,讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟,適合初學者進行學習和操作。我們提供了必要的資源和範例,讓您能輕鬆上手。期待透過這篇教學,能讓您在創作中達到更高的境界!
    Thumbnail
    這篇內容,將透過實戰教學,介紹GameMaker中的Sprite。包括建立新的Sprite、重新命名及刪除、建議的命名方式、編輯圖像、調整圖像大小、動畫的概述、原點設置、碰撞遮罩的概述。
    Thumbnail
    這是關於在 Renpy 中如何自訂 Frame 的教學,包括了建立畫面、在畫面裡面加入 frame、加入造型、加入內容、修正畫面、使用自訂 Frame 等內容。
    分享下最近製作 RM 上用到的一些 MZ 事件腳本 // 設定此事件的自開關 A 為 OFF $gameSelfSwitches.setValue('A', false) // 設定第 1 個地圖的第 3 個事件的自開關 A 為 OFF $gameSelfSwitches.setValue([1
    Thumbnail
    PixVerse是一款AI工具,推出了全新的〝魔術刷〞功能,讓使用者能夠輕鬆生成動態圖像。同時,PixVerse每天還會贈送免費的20積分,歡迎透過本文提供的連結前往官方網站體驗。
    Thumbnail
    在程式任何地方都能修改各種react組件狀態的做法分享
    Thumbnail
    這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
    Thumbnail
    本篇文章介紹在Renpy引擎中,翻轉圖片的三種方式:事先定義翻轉、事先定義圖片、需要時加入翻轉。透過不同方式,讓您可以更靈活地在劇情中使用翻轉效果。
    Thumbnail
    Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成,此篇文章將介紹 Options API 的撰寫方式,以及如何做樣式客製化。
    Thumbnail
    在這篇文章中,我們將探討如何製作章節轉場動畫,讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟,適合初學者進行學習和操作。我們提供了必要的資源和範例,讓您能輕鬆上手。期待透過這篇教學,能讓您在創作中達到更高的境界!
    Thumbnail
    這篇內容,將透過實戰教學,介紹GameMaker中的Sprite。包括建立新的Sprite、重新命名及刪除、建議的命名方式、編輯圖像、調整圖像大小、動畫的概述、原點設置、碰撞遮罩的概述。
    Thumbnail
    這是關於在 Renpy 中如何自訂 Frame 的教學,包括了建立畫面、在畫面裡面加入 frame、加入造型、加入內容、修正畫面、使用自訂 Frame 等內容。
    分享下最近製作 RM 上用到的一些 MZ 事件腳本 // 設定此事件的自開關 A 為 OFF $gameSelfSwitches.setValue('A', false) // 設定第 1 個地圖的第 3 個事件的自開關 A 為 OFF $gameSelfSwitches.setValue([1
    Thumbnail
    PixVerse是一款AI工具,推出了全新的〝魔術刷〞功能,讓使用者能夠輕鬆生成動態圖像。同時,PixVerse每天還會贈送免費的20積分,歡迎透過本文提供的連結前往官方網站體驗。
    Thumbnail
    在程式任何地方都能修改各種react組件狀態的做法分享
    Thumbnail
    這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
    Thumbnail
    本篇文章介紹在Renpy引擎中,翻轉圖片的三種方式:事先定義翻轉、事先定義圖片、需要時加入翻轉。透過不同方式,讓您可以更靈活地在劇情中使用翻轉效果。
    Thumbnail
    Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成,此篇文章將介紹 Options API 的撰寫方式,以及如何做樣式客製化。