Pixi'VN - Vue UI

介绍如何将 Pixi’VN 与 Vue 集成，包括配置、模板和 UI 示例。使用 Vue 创建视觉小说或 2D 游戏。

什么是 Vue？Vue 是一款用于构建用户界面的渐进式框架。它的设计便于渐进式采用，既可直接作为轻量级库使用，也能轻松扩展为功能完备的框架。

你可以访问 Vue官网，以了解更多信息。

如何将 Pixi’VN 添加到 Vue 应用程序中

Vue template

我们正在寻找协助开发 Vue 模板的伙伴。愿意来帮忙吗？

如果你感兴趣，或是有时间协助，欢迎在下方评论区留言！

首先，你需要准备一个Vue应用，并且要安装pixi-vn。推荐使用Vite来创建新的 Vue 应用。

然后，你可以将以下文件的内容替换为示例代码：

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

Vue UI

如何将 Pixi’VN 添加到 Vue 应用程序中

On this page