Pixi’VNVue UI
Come integrare Pixi'VN con Vue, inclusi configurazione, modelli ed esempi di interfaccia utente. Crea una visual novel o un gioco 2D con Vue.
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?
If you are interested or available to help, feel free to write in the chat below!
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)
}
)