Interfaccia utente (UI)
Come creare e integrare schermate dell'interfaccia utente in Pixi'VN utilizzando framework JavaScript esterni come React, Vue e PixiJS.
Pixi’VN does not provide built-in components to create the game UI, and it does not reinvent what already exists in the JavaScript ecosystem. Instead of locking you into a specific framework, it lets you use any external JavaScript framework you prefer to build your UI, so you can leverage systems such as React, Vue, etc., to create complex and high-performance UI screens.
This flexibility also makes Pixi’VN a great fit for AI-assisted development: because the UI is built with standard, widely-used frameworks rather than a proprietary system, AI coding assistants already know these tools well and can generate, understand, and modify UI code very effectively.
React
Integrate Pixi’VN with React, including setup, templates, and the best UI libraries.
Vue
Integrate Pixi’VN with Vue, including setup, templates, and UI examples.
PixiJS
Use PixiJS layers and components to build custom UI screens, and combine them with HTML UI.
Pixi’VN offre funzionalità per migliorare la compatibilità con altri framework JavaScript:
Differenze tra l'interfaccia utente e il canvas
Così come è stato progettato e concepito Pixi’VN, l’interfaccia utente e la tela sono due elementi distinti e indipendenti. L'interfaccia utente si trova sopra la tela e viene utilizzata per creare pulsanti, moduli, ecc. La tela viene utilizzata per visualizzare immagini, video, ecc.
Tutte le informazioni sullo stato attuale del canvas sono incluse nel salvataggio ed è possibile ripristinare lo stato di un passaggio precedente. Lo stato attuale dell'interfaccia utente non verrà inclusa nei salvataggi. Quindi devi gestirlo tu stesso salvando le informazioni di cui hai bisogno nella memoria di gioco o nella memoria del browser.
Nel canvas è possibile aggiungere componenti durante ogni step. Nell'interfaccia utente non è possibile farlo, è possibile creare diverse "schermate" e navigare tra di esse.
Nella canvas è possibile aggiungere solo componenti Pixi'VN. Nell'interfaccia utente è possibile aggiungere qualsiasi componente HTML/PixiJS o utilizzare qualsiasi libreria di componenti UI, in modo da creare interfacce molto più complesse.