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).
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. If you want to use PixiJS directly, you can use the @drincs/pixi-vn/pixi.js submodule, which is the PixiJS application used by 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.
- To add event listeners and save their state in saves, it is recommended to use onEvent instead of
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 works with Pixi’VN, allowing you to inspect the canvas.
Dopo aver installato PixiJS DevTools, apri Chrome DevTools (F12) e vai alla scheda PixiJS.
