Pixi’VNVue UI
Come integrare Pixi'VN con Vue, inclusi configurazione, modelli ed esempi di interfaccia utente. Create a Vue visual novel or story-driven game.
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
Modelli
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!
If you are interested or available to help, feel free to write in the chat below!
First, you need a Vue application and to install pixi-vn. Is recommended to use Vite to create a new Vue application.
Now you can replace the content of the following files with the code below:
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);
},
);