Pixi'VN - Vue UI

Pixi’VNをVueと統合する方法。セットアップ、テンプレート、UIの例を含みます。 Vueでビジュアルノベルやストーリー主導のゲームを作成。

Vueとは？ Vueは、ユーザーインターフェースを構築するためのプログレッシブフレームワークです。段階的に採用できるように設計されており、ライブラリからフル機能のフレームワークまで簡単に拡張できます。

Vueについての詳細は、Vueウェブサイトをご覧ください。

Pixi’VNをVueアプリケーションに追加する方法

テンプレート

Vueテンプレートの開発を手伝ってくれる人を探しています。手伝っていただけますか？興味がある方、協力いただける方は、下記のチャットへお気軽にご記入ください！

興味がある方、協力いただける方は、下記のチャットへお気軽にご記入ください！

まず、Vueアプリケーションと、pixi-vnのインストールが必要です。新しいVueアプリケーションを作成するには、Viteの使用をお勧めします。

次に、以下のファイルの内容を、下記のコードに置き換えることができます:

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); 
        }, 
    );

Vue UI

Pixi’VNをVueアプリケーションに追加する方法

このページの内容