Vue UI
Comment intégrer Pixi’VN avec Vue, y compris la configuration, les modèles et des exemples d'UI. Créez un visual novel ou un jeu narratif avec Vue.
Qu'est-ce que Vue ? Vue est un framework progressif pour créer des interfaces utilisateur. Il est conçu pour être adopté de manière incrémentale et peut facilement évoluer entre une bibliothèque et un framework complet.
Vous pouvez en savoir plus sur Vue sur le site Web de Vue.
Comment ajouter Pixi’VN à une application Vue
Modèles
Je cherche quelqu'un pour m'aider à développer des modèles Vue. Êtes-vous disponible pour aider ?Si vous êtes intéressé(e) ou disponible pour aider, n'hésitez pas à écrire dans le chat ci-dessous !
Si vous êtes intéressé(e) ou disponible pour aider, n'hésitez pas à écrire dans le chat ci-dessous !
Tout d'abord, vous avez besoin d'une application Vue et de installer pixi-vn. Il est recommandé d'utiliser Vite pour créer une nouvelle application Vue.
Vous pouvez maintenant remplacer le contenu des fichiers suivants par le code ci-dessous :
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.layers.add("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.tickers.add("juliette", new RotateTicker({ speed: 1 }));
// Vue setup
const app = document.getElementById("app");
if (!app) {
throw new Error("app element not found");
}
const htmlLayer = canvas.htmlLayers.add("ui", app, {
position: "absolute",
pointerEvents: "none",
});
if (!htmlLayer) {
throw new Error("htmlLayer not found");
}
createApp(App).mount(htmlLayer);
},
);