Pixi’VNVue UI
Come integrare Pixi'VN con Vue, inclusi configurazione, modelli ed esempi di interfaccia utente.
Cos'è Vue? Vue è un framework progressivo per la creazione di interfacce utente. È progettato per essere adottabile in modo incrementale e può essere facilmente scalato tra una libreria e un framework completo.
Puoi scoprire di più su Vue sul sito web di Vue.
Come aggiungere Pixi'VN a un'applicazione Vue
Vue template
Sto cerco qualcuno che mi aiuti a sviluppare i template di Vue. Sei disponibile ad aiutare?
Puoi seguire lo sviluppo e mostrare il tuo interesse nel seguente thread discussion#432.
Per prima cosa, hai bisogno di un'applicazione Vue e di installare pixi-vn. Si consiglia di utilizzare Vite per creare una nuova applicazione Vue.
Ora puoi sostituire il contenuto dei seguenti file con il codice seguente:
import { canvas, Container, Game, RotateTicker, showImage } from '@drincs/pixi-vn'
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
const body = document.body;
if (!body) {
throw new Error("body element not found");
}
Game.init(body, {
height: 1080,
width: 1920,
backgroundColor: "#303030",
})
.then(() => {
// Pixi.JS UI Layer
canvas.addLayer("ui", new Container());
showImage(
"juliette",
"https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e",
{ xAlign: 0.9, yAlign: 0.1, anchor: 0.5 }
);
canvas.addTicker("juliette", new RotateTicker({ speed: 1 }));
// Vue setup
const app = document.getElementById("app");
if (!app) {
throw new Error("app element not found");
}
const htmlLayer = canvas.addHtmlLayer("ui", app, {
position: "absolute",
pointerEvents: "none"
});
if (!htmlLayer) {
throw new Error("htmlLayer not found");
}
createApp(App).mount(htmlLayer)
}
)