0.1.0 β’ Published 1 year ago
vue-runtime-pixi v0.1.0
π News!
- Full Vue3 support including Vue RouterγPiniaγVueUse
- Typescript friendly
π DEMO
- exmaple-animation1
- exmaple-animation2
- exmaple-animation3
- exmaple-animation4
- exmaple-snake π
- exmaple-plane-fights π
βοΈ Installation
npm i -S vue-runtime-pixi vue pixi.js
π¦ Use
<template>
<h1>vue-runtime-pixi</h1>
<Stage>
<Text text="πtestβ¦β¦" style="fill: red" />
</Stage>
</template>
<script setup lang="ts">
import { Stage } from 'vue-runtime-pixi'
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { isPIXITag } from 'vue-runtime-pixi'
export default defineConfig({
plugins: [vue({ template: { compilerOptions: { isCustomElement: isPIXITag } } })]
})
π¦ Used with VueRouter
<template>
<h1>vue-runtime-pixi</h1>
<Stage :uses="[router]">
<router-view />
</Stage>
</template>
<script setup lang="ts">
import { h } from 'vue'
import { Stage } from 'vue-runtime-pixi'
import { createRouter, createWebHashHistory, RouterView } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', redirect: '/aaa' },
{ path: '/aaa', component: { render: () => h('Text', { text: 'aaaβ¦β¦', style: 'fill: red' }) } },
{ path: '/bbb', component: { render: () => h('Text', { text: 'bbbβ¦β¦', style: 'fill: red' }) } }
]
})
</script>
π Components
Vue Runtime Pixi currently supports following components out of the box (but read Custom Components section if you need more):
<Stage />
Renders Root Container of any PIXI.Application
.
uses
- pass your ownVue.Plugins
instance,options
- pass only thePIXI.Application
options.
<Container />
<AnimatedSprite />
<Graphics />
<Mesh />
<SimpleMesh />
<SimpleRope />
<TilingSprite />
π Custom Components
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { CusomtPIXIComponent } from 'vue-runtime-pixi'
import { Sprite, Texture } from 'pixi.js'
// Must be before mount('#app')
CustomPIXIComponent({
name: 'MyLogo',
createElement(props) {
return new Sprite(Texture.from('logo.png'))
},
patchProp(el, key, oldProp, newProp) {
el[key] = newProp
},
onMounted(el) {
//
},
onBeforeUnmount(el) {
//
}
})
createApp(App).mount('#app')
<template>
<Stage>
<MyLogo />
</Stage>
</template>
<script setup lang="ts">
import { Stage } from 'vue-runtime-pixi'
</script>
βοΈ Show Your Support
Please give a βοΈ if this project helped you!
π Contributing
If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.
0.1.0
1 year ago
0.1.0-alpha.7
1 year ago
0.1.0-alpha.6
1 year ago
0.1.0-alpha.5
1 year ago
0.1.0-alpha.4
1 year ago
0.1.0-alpha.3
1 year ago
0.1.0-alpha.2
1 year ago
0.1.0-alpha.1
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2-3
1 year ago
0.0.2-2
1 year ago
0.0.2-1
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago
0.0.0
1 year ago