Pixi’VNCanvas (WebGL)
Panoramica su come Pixi'VN utilizza PixiJS per il rendering, differenze tra Pixi'VN e PixiJS e come interagire con gli strumenti canvas e di debug.
Pixi’VN utilizza PixiJS per il rendering. È possibile utilizzare l'API Pixi'VN per aggiungere immagini, testo e animazioni al canvas PixiJS (o, più precisamente, al motore di rendering 2D WebGL).
ink
È possibile utilizzare questo metodo con la sintassi ink. Scopri di più qui.
Che cos'è PixiJS?
PixiJS è la libreria 2D più veloce e leggera disponibile per il Web, che funziona su tutti i dispositivi e consente di creare grafiche ricche e interattive e applicazioni multipiattaforma utilizzando WebGL e WebGPU. È veloce, flessibile e facile da usare. PixiJS è usato in giochi come Good Pizza, Great Pizza e The Enchanted Cave 2.
Puoi saperne di più su PixiJS sul sito web di PixiJS.
Differenze tra Pixi’VN e PixiJS
PixiJS non è progettato per avere più istanze, quindi non è consigliabile installarlo separatamente nel progetto. Se vuoi usare PixiJS direttamente, puoi usare il sottomodulo @drincs/pixi-vn/pixi.js, che è l'applicazione PixiJS usata da Pixi'VN.
import { Graphics } from "@drincs/pixi-vn/pixi.js";Ciò è utile quando si creano layer dell'interfaccia utente con PixiJS o per creare minigiochi.
Pixi'VN fornisce un oggetto API denominato canvas per interfacciarsi con la sua applicazione PixiJS. Non è necessario installare pixi.js separatamente e le funzionalità di Pixi'VN non sono identiche a quelle di PixiJS. Sebbene non sia consigliato, è possibile utilizzare canvas.app per accedere direttamente all'applicazione PixiJS utilizzata da Pixi'VN.
Il rendering in Pixi'VN è molto simile a PixiJS, con le seguenti differenze:
- Tutti i componenti aggiunti al canvas sono collegati a un alias a tua scelta. Questo alias viene utilizzato per identificare e manipolare il componente.
- Pixi'VN salva lo stato corrente del canvas a ogni
passo. Nota: Vengono salvati solo i componenti collegati a un alias. Se aggiungi componenti direttamente aPixiJS.Application, questi non verranno inclusi nello stato salvato. - Pixi’VN fornisce varie funzioni per aggiungere, rimuovere, trovare e manipolare i componenti nel canvas.
- Pixi’VN offre componenti personalizzati, alcuni dei quali corrispondono ai componenti PixiJS, mentre altri aggiungono nuove funzionalità.
- I ticker sono gestiti da Pixi'VN. Se si utilizza un ticker PixiJS, il suo stato non verrà salvato.
- Per aggiungere listener di eventi e salvarne lo stato nei salvataggi, si consiglia di utilizzare onEvent anziché
on.
Utilizzare PixiJS DevTools con Pixi'VN
PixiJS DevTools è un'estensione di Chrome che consente di ispezionare ed eseguire il debug delle applicazioni PixiJS. Puoi utilizzarlo per visualizzare l'elenco di visualizzazione, ispezionare le texture ed eseguire il debug dell'applicazione PixiJS. PixiJS DevTools funziona con Pixi'VN, consentendo di ispezionare il canvas.
Dopo aver installato PixiJS DevTools, apri Chrome DevTools (F12) e vai alla scheda PixiJS.
