The vue3-pixi from hairyf

How to use Pixi UI

I saw Pixi UI in your code but how to use it?

Tiling Sprite Doesn't work when using local files not from a CDN

worked for <sprite/>, but not this.

<template>
    <tiling-sprite
    texture="@/assets/pain.jpeg"
      :anchor="0.5"
      :x="120"
      :y="120"
    />
</template>

however, using a CDN it renders fine.

<template>
    <tiling-sprite
    texture="https://pixijs.com/assets/p2.jpeg"
      :anchor="0.5"
      :x="120"
      :y="120"
    />
</template>

here is the log i would get on render

error.log

this could be me being stupid, or something else. anything's appreciated. Thanks!

(feature request) Component name prefix

Can we have a config option to add a prefix to the name of vue3-pixi vue components?

For example, instead of

<Application>
    <sprite ... />
</Application>

I wish it could be:

<PixiApp>
    <pixi-sprite ... />
</PixiApp>

Motivation: To distinguish pixi components from html tags and custom vue components.

Nuxt3 Example

Any advice for adding this to a nuxt3 project?

optimization of composition-api Based on Injection

When using the component directly, it is not possible to use the PIXI composition API within the current component. The following method solves this problem by obtaining the Application Ref instance.

<script lang="ts" setup>
import { Application, useApplication, useRenderer, useScreen, useStage } from 'vue3-pixi'

const app = useApplication()
const screen = useScreen(app)
const renderer = useRenderer(app)
const stage = useStage(app)
</script>

<template>
  <Application ref="app">
    <!-- ... -->
  </Application>
</template>

If not referenced by ref or not created in child elements, you will receive the following warning:

not found <Application />, you can use ref for referencing or create a new component to be used as a child element of <Application /> with PIXI composition API.

bug: unable to find parent node after dual end comparison

Performing a dual end comparison in Vue's renderer will result in the loss of parents and the inability to add new children

  <!-- scenario 1 -->
  <template v-if="bundle === 'load-screen'">
    <sprite v-bind="center" :texture="textures?.flowerTop" @click="bundle = 'game-screen'" />
  </template>
  <!-- scenario 2 -->
  <template v-if="bundle === 'game-screen'">
    <sprite v-bind="center" :texture="textures?.eggHead" @click="bundle = 'load-screen'" />
  </template>

missing props in Application Component

https://github.com/hairyf/vue3-pixi/blob/main/packages/vue3-pixi/src/components/application/index.ts
There is no resizeTo props declartion pass to new _Application({ view: canvas.value, ...props })

feat(assets): supports more flexible slots

<Assets>
  <template #always="{ textures, progress }">
     <container v-if="textures">
     </container>
     <container v-else>
     </container>
  </template>
</Assets>

Slot name TBD

feat(filter): supports basic filter and custom filters

Baisc Filters

Provided by vue3-pixi-renderer, with type prompt

BlurFilter
AlphaFilter
DisplacementFilter
ColorMatrixFilter
NoiseFilter
FXAAFilter

example

<template>
  <container :position-x="position.x">
    <blur-filter :quality="3" :blur="5" />
     <!-- ... -->
  </container>
</template>

Custom Filters

external filters, such as pixi filters, no type prompt

<script setup>
function renderShockwaveFilter(props: any) {
  return new ShockwaveFilter(
    props.center,
    {
      radius: props.radius,
      wavelength: props.wavelength,
      amplitude: props.amplitude,
      speed: props.speed,
    },
    props.time,
  )
}
const show = ref(true)
</script>

<template>
  <container :position-x="position.x">
     <!-- control the display of filters through v-if -->
    <filter :is="renderShockwaveFilter" v-if="show" :quality="3" :blur="5" />
     <!-- ... -->
  </container>
</template>

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import { compilerOptions, transformAssetUrls } from 'vue3-pixi'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
// support for custom elements and remove the unknown element warnings
compilerOptions,
// support for asset url conversion
transformAssetUrls,
},
}), AutoImport({
imports: [
'vue',
{
'naive-ui': [
'useDialog',
'useMessage',
'useNotification',
'useLoadingBar'
],
},
]
}),
Components({
resolvers: [NaiveUiResolver()]
})],
server: {
open: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})

After adding Vue plugin configuration to support custom elements, prevent parsing exceptions, and support parsing the texture attribute, just like the src attribute of an img.
It shows:
failed to load config from C:\Users\NONAME\Desktop\Vue\apexKvmWeb\vite.config.ts
error when starting dev server:
ReferenceError: Worker is not defined
at file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/@pixi/assets/lib/_virtual/checkImageBitmap.worker.mjs:20:30
at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async loadConfigFromBundledFile (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68383:21)
at async loadConfigFromFile (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68240:28)
at async resolveConfig (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67841:28)
at async _createServer (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:60327:20)
at async CAC. (file:///C:/Users/NONAME/Desktop/Vue/apexKvmWeb/node_modules/vite/dist/node/cli.js:764:24)

bug(event): automatically set event mode after referencing events

bug(composables): `useApplication` passed down is invalid

dev tools

How can i use PixiJS Devtools or any other tools for debug UI?

Error while installing vue3-pixi-nuxt

Hi there,
I just tried installing the nuxt package but got an error while installing:

npm ERR! code 1
npm ERR! path /app/vue/node_modules/vue3-pixi-nuxt
npm ERR! command failed
npm ERR! command sh -c npm run dev:prepare
npm ERR! > [email protected] dev:prepare
npm ERR! > nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground
npm ERR! 
npm ERR! ℹ Stubbing vue3-pixi-nuxt
npm ERR! ℹ Cleaning dist directory: ./dist
npm ERR! ERROR  ENOENT: no such file or directory, open '/app/vue/node_modules/vue3-pixi-nuxt/src/module'

This also happens on a fresh project, tested on [email protected] [email protected] and [email protected] [email protected]. Same thing with yarn, slightly different error:

error /app/vue/node_modules/vue3-pixi-nuxt: Command failed.
Exit code: 127
Command: npm run dev:prepare
Arguments: 
Directory: /app/vue/node_modules/vue3-pixi-nuxt
Output:
> [email protected] dev:prepare

upgrade to vue3.4 gets Vue warn -> Failed to resolve vue3-pixi components

using vue3-pixi-dino

Reproduction steps:

upgrade vue to 3.4.3 and run dev server
press ctrl + s on vite.config.ts to restart vite server
gets Vue Warns in console:

[Vue warn]: Failed to resolve component: Container
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Text
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: Sprite
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Error when trying to run Vite

Hey,

I'm getting the following error when trying to import the vue3-pixi lib in my vite.config file. Is there a fix for this issue?

Error [ERR_REQUIRE_ESM]: require() of ES Module D:....\node_modules\vue3-pixi\node_modules\nanoid\index.js from D:....\node_modules\vue3-pixi\dist\index.cjs not supported.

my current config file:

import { fileURLToPath, URL } from 'node:url'
import path from 'path';

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import { isCustomElement, transformAssetUrls } from 'vue3-pixi'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 8080
  },
  plugins: [
    vue({

    }),
    VueI18nPlugin({
      include: [path.resolve(__dirname, './src/assets/data/translations/**')],
     })
    ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/styles/main.scss";',
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vue: 'vue/dist/vue.esm-bundler.js',
    }
  }
})

My current tsconfig.json:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "compilerOptions": {
    "composite": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "baseUrl": ".",
    "types": ["node", "vite/client", "@intlify/unplugin-vue-i18n/messages"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "env.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

Thank you!

Does it support gif image?

Hello,

Nice to see your project, and found below demo which supports video, does it support gif image as well? Something like below. Thanks!

<sprite
    v-if="play"
    texture="https://pixijs.com/assets/funny.gif"
    :width="screen.width"
    :height="screen.height"
  />

video demo:

https://vue3-pixi.vercel.app/examples/sprite/video.html

<sprite
    v-if="play"
    texture="https://pixijs.com/assets/video.mp4"
    :width="screen.width"
    :height="screen.height"
  />

Alot isn't working with Nuxt, for example useScreen()

Hey! I want to create a simple game with the server and client sharing the same code base so I thought I would try to create it in Nuxt and learn along side with it.

Is there any example of someone using vue3-pixi-nuxt ? Because on GitHub I am not able to find anyone using it.

Now I can draw simple images etc. but as soon as I want to use something else for example useScreen I immedietly get errored:

Code:

<template>
  <Application :width="1240" :height="1240" :resolution="1" :resize-to="getWindow()" :auto-density="true">
  <container>
    <sprite
    texture="/1.jpg"
    :x="100"
    />
  </container>
  </Application>
</template>

<style>
body,html{
  padding: 0;
  margin: 0; 
}
canvas{
  position:absolute;
}
</style>

<script setup>
import { Application } from 'vue3-pixi';
const screen = useScreen()

function getWindow(){
  if(window)
    return window;
}

const props = defineProps({
  x: 0,
  y: 0
})
</script>

gl.getInternalformatParameter is not a function.

gl.getInternalformatParameter is not a function. (In 'gl.getInternalformatParameter(gl.RENDERBUFFER, gl.RGBA8, gl.SAMPLES)',
When I use ios 12,13,14 safri, I got this error, is there any solution to fix it?

could you include pixi-ui ?

i hope i can use to make ui....

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Errored

These updates encountered an error and will be retried. Click on a checkbox below to force a retry now.

chore(deps): update dependency vitest to v1.5.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

pnpm/action-setup v2

actions/setup-node v4

actions/checkout v4

pnpm/action-setup v2

actions/setup-node v4

.github/workflows/release.yml

actions/checkout v4

actions/setup-node v4

npm

docs/package.json

@antfu/utils ^0.7.2

@stackblitz/sdk ^1.9.0

@vueuse/core ^10.1.2

gsap ^3.11.5

naive-ui ^2.34.4

nanoid ^4.0.2

pixi.js ^7.3.2

unocss ^0.58.3

vue ^3.3.4

@iconify/json ^2.2.73

codesandbox ^2.2.3

floating-vue 2.0.0-beta.24

markdown-it-vitepress-demo ^0.1.8

vitepress 1.0.0-rc.40

pnpm 8.15.1

package.json

@antfu/utils ^0.7.2

@antfu/eslint-config ^0.33.1

@types/node ^20.0.0

@vue/test-utils ^2.3.2

bumpp ^9.0.0

eslint ^8.29.0

jsdom ^22.1.0

tsup 6.6.2

typescript ^5.0.0

vitest ^1.0.0

pnpm 8.15.1

packages/vue3-pixi-nuxt/package.json

@antfu/utils ^0.7.2

@nuxt/kit ^3.8.2

mlly ^1.4.2

pkg-types ^1.0.3

sirv ^2.0.3

vue-demi ^0.14.1

vue3-pixi ^0.8.5

@nuxt/module-builder ^0.5.4

@nuxt/schema ^3.8.2

@vue/runtime-core ^3

nuxt ^3.8.2

packages/vue3-pixi-projection/package.json

@antfu/utils ^0.7.2

pixi-projection ^1.0.0

vue-demi ^0.14.1

@vue/runtime-core ^3

packages/vue3-pixi-ui/package.json

@pixi/ui ^0.10.0

pixi.js ^7.3.2

vue-demi ^0.14.1

@vue/runtime-core ^3

packages/vue3-pixi/package.json

@antfu/utils ^0.7.2

@vueuse/core ^10.1.2

nanoid ^4.0.2

pixi.js ^7.3.2

vue-demi ^0.14.1

@vue/runtime-core ^3

Check this box to trigger a request for Renovate to run again on this repository

Using vuex on children components of Application

I'm trying to setup vue-pixi for an existing project where we use vuex. For some reason I cannot use the useStore composable provided by vuex. A code like this:

// MyComponent.vue
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore();

const text = computed(() => store.state.myModule.text)

leads to:

[Vue warn]: injection "store" not found.

and it prevents the store from being properly injected into the using component.

I created a small repro with stackblitz: https://stackblitz.com/~/github.com/hriverahdez/vue-pixi-demo

PIXI.js 8 version with WebGPU

Hi, is it possible to use new beta version of PIXI.js 8 with WebGPU, if not, will it be supported in the future?

No PIXI Application found

Fresh Laravel project with InertiaJS.

I get the following error when trying to get a Pixi Application instance (or useStage and etc., but onTick works).

vue3-pixi/packages/vue3-pixi/src/composables/useApplication.ts

Line 9 in 59a466f

    
           throw new Error('No PIXI Application found. Make sure to create one before using any other composable.')

Code

<template>
    <div>
        <Application :width="240" :height="240">
            <text :anchor="0.5" :x="120" :y="120" :style="{ fill: 'white' }">
                Hello World
            </text>
        </Application>
    </div>
</template>

<script setup>
import { Application } from 'vue3-pixi';
import { useApplication } from "vue3-pixi";

const app = useApplication();
</script>

Without const app = useApplication(); code works.

Env

"@inertiajs/vue3": "^1.0.0",
"vite": "^4.0.0",
"vue": "^3.2.41"
"pixi.js": "^7.3.2",
"vue3-pixi": "^0.8.4"

feat: support `AnimatedSprite` play prop controls

Many documentation links broken

Many links from one page of the documentation to another are returning "Access Denied" errors. One example is the "Graphics" link at the top of this page, but there are multiple examples on most every page of the docs.

repeated loading of loader component

The following image is two examples of the official website. I have written these two examples in one application. The text value eventName of the text component is responsive by using ref of vue. Changing the value of eventName in the script setup resulted in repeated loading of the loader component.

my code:

<!-- eslint-disable no-unused-vars -->
<script setup lang="ts">
import { Application, Loader } from 'vue3-pixi'
import { ref } from 'vue'

const eventName = ref('none')
const evtHandler = (name: string, evt: any) => {
  eventName.value = name
  // console.log('name: ', name, 'evt: ', evt)
}

const onResolved = (sheet: any) => {
  // console.log('sheet: ', sheet)
}
</script>

<template>
  <Application
    :width="640"
    :height="480"
    :antialias="true"
  >
    <Container>
      <Sprite
        texture="/textures/mushroom.png"
        :position="[320, 60]"
        :anchor="0.5"
        event-mode="dynamic"
        @pointermove="(evt) => evtHandler('pointermove', evt)"
        @pointerleave="(evt) => evtHandler('pointerleave', evt)"
        @click="(evt) => evtHandler('click', evt)"
      ></Sprite>
      <text
        ref="textRef"
        :position="[320, 110]"
        :anchor="0.5"
        :style="{ fill: '#1e9f', fontSize: 28 }"
        >{{ eventName }}</text
      >
    </Container>
    <Container :position="[0, 160]">
      <Loader
        :resources="{ spritesheet: '/textures/adventurer-spritesheet.json' }"
        @resolved="onResolved($event.spritesheet)"
        @progress="(progress) => console.log(progress)"
      >
        <AnimatedSprite
          :textures="['adventurer-idle-00.png', 'adventurer-idle-01.png', 'adventurer-idle-02.png']"
          playing
          :animation-speed="0.1"
          :scale="2"
        ></AnimatedSprite>
      </Loader>
    </Container>
  </Application>
</template>

Types don't seem to work with Pixi >= 7.3.0

It seems all props on vue3-pixi components are defaulted to (...args: any) => any when using pixi.js version >= 7.3.0. All events like @render| are untyped as well. When using pixi version 7.2.4, it seems to be works fine.

Steps to reproduce:

initiate a new vite project with npm create vite@latest and pick a vue + typescript preset.
run npm install pixi.js vue3-pixi and setup the vite config as indicated in vue3-pixi's docs
try to use some pixi-components in a .vue file

Note that this is not a VSCode or volar bug. Running vue-tsc will also throw the compile errors.

demo can't be viewed

hairyf / vue3-pixi Goto Github PK

vue3-pixi's People

Stargazers

Watchers

Forkers

vue3-pixi's Issues