├── .eslintignore ├── docs ├── examples │ ├── index.md │ ├── sprite │ │ ├── svg.md │ │ ├── texture_swap.md │ │ ├── video_texture.md │ │ ├── mask_animation.md │ │ ├── svg_custom_data.md │ │ ├── transform_rotation.md │ │ ├── gif_animation_loading.md │ │ └── demo │ │ │ ├── svg.vue │ │ │ ├── svg_custom_data.vue │ │ │ ├── gif_animation_loading.vue │ │ │ ├── transform_rotation.vue │ │ │ ├── gif_animation_loading.ts │ │ │ ├── texture_swap.vue │ │ │ ├── video_texture.vue │ │ │ ├── svg.ts │ │ │ └── svg_custom-data.ts │ ├── graphics │ │ ├── dynamic.md │ │ ├── svg_file.md │ │ ├── basic_shapes.md │ │ ├── texture-fill.md │ │ ├── mask_animation.md │ │ ├── fill_stroke_gradient.md │ │ ├── pixel-line_antialiasing.md │ │ ├── curves_arcs_holes_textures.md │ │ ├── svg_string-parsing.md │ │ └── demo │ │ │ ├── svg_file.vue │ │ │ ├── svg_string-parsing.vue │ │ │ └── texture-fill.vue │ ├── mesh │ │ ├── plane.md │ │ ├── mouse_trail.md │ │ ├── shader_toy.md │ │ ├── perspective_3d.md │ │ ├── rope_textured.md │ │ ├── shared_shader.md │ │ ├── shared_geometry.md │ │ ├── custom_texture_uv.md │ │ ├── custom_color_attributes.md │ │ ├── rope_texture_vertices.md │ │ ├── custom_shader_geometry.md │ │ ├── multipass_shader_effects.md │ │ ├── custom_instanced_geometry.md │ │ └── demo │ │ │ ├── triangleColor.frag │ │ │ ├── sharedGeometry.frag │ │ │ ├── sharedShader.frag │ │ │ ├── triangle.frag │ │ │ ├── plane.vue │ │ │ ├── shader_toy.vue │ │ │ ├── instancedGeometry.frag │ │ │ ├── mouse_trail.vue │ │ │ ├── perspective_3d.vue │ │ │ ├── rope_textured.vue │ │ │ ├── shared_geometry.vue │ │ │ ├── shared_shader.vue │ │ │ ├── custom_texture_uv.vue │ │ │ ├── custom_color_attributes.vue │ │ │ ├── custom_shader_geometry.vue │ │ │ ├── rope_texture_vertices.vue │ │ │ ├── custom_instanced_geometry.vue │ │ │ ├── multipass_shader_effects.vue │ │ │ ├── noise.frag │ │ │ ├── sharedShader.vert │ │ │ ├── sharedGeometry.vert │ │ │ ├── combine.frag │ │ │ ├── triangleColor.vert │ │ │ ├── multipassMesh.vert │ │ │ ├── shaderToy.vert │ │ │ ├── ripple.frag │ │ │ ├── instancedGeometry.vert │ │ │ ├── triangle.vert │ │ │ ├── grid.frag │ │ │ ├── wave.frag │ │ │ ├── triangleColor.wgsl │ │ │ ├── plane.ts │ │ │ └── custom_texture_uv.ts │ ├── misc │ │ ├── slots.md │ │ ├── spinners.md │ │ ├── star_warp.md │ │ ├── screen_shot.md │ │ ├── physics_aabb.md │ │ └── demo │ │ │ ├── slots.vue │ │ │ ├── spinners.vue │ │ │ ├── star_warp.vue │ │ │ ├── physics_aabb.vue │ │ │ └── screen_shot.vue │ ├── gsap │ │ ├── physics.md │ │ ├── animation_keyframe.md │ │ ├── animation_timeline.md │ │ ├── interaction_inertia.md │ │ ├── interaction_moveto.md │ │ ├── animation_basic.md │ │ ├── animation_confetti.md │ │ ├── animation_physics_particles.md │ │ └── demo │ │ │ └── interaction_moveto.ts │ ├── filters │ │ ├── displacement.md │ │ ├── blur.md │ │ ├── color-matrix.md │ │ ├── displacement_interactive.md │ │ ├── custom_interactive_blending.md │ │ ├── custom-shader_glsl.md │ │ └── demo │ │ │ └── blur.vue │ ├── nine-slice-sprite │ │ ├── basic.md │ │ ├── transform_anchor.md │ │ └── demo │ │ │ ├── basic.vue │ │ │ ├── transform_anchor.vue │ │ │ └── transform_anchor.ts │ ├── offscreen-canvas │ │ ├── basic.md │ │ └── demo │ │ │ └── basic.vue │ ├── text │ │ ├── bitmap_xml.md │ │ ├── trim_bounds.md │ │ ├── fill_gradient.md │ │ ├── webfont_google.md │ │ ├── filters_cartoon.md │ │ ├── bitmap_split_text.md │ │ ├── bitmap_webfont_loading.md │ │ ├── texture_style_scale_mode.md │ │ ├── basic.md │ │ ├── bitmap_word_wrap_break_words.md │ │ ├── from-font.md │ │ └── demo │ │ │ ├── bitmap_xml.vue │ │ │ ├── trim_bounds.vue │ │ │ ├── fill_gradient.vue │ │ │ ├── filters_cartoon.vue │ │ │ ├── webfont_google.vue │ │ │ ├── bitmap_split_text.vue │ │ │ ├── bitmap_webfont_loading.vue │ │ │ ├── texture_style_scale_mode.vue │ │ │ ├── bitmap_word_wrap_break_words.vue │ │ │ ├── bitmap_xml.ts │ │ │ ├── bitmap_word_wrap_break_words.ts │ │ │ ├── filters_cartoon.ts │ │ │ ├── from-font.vue │ │ │ └── webfont_google.ts │ ├── events │ │ ├── move.md │ │ ├── buttons.md │ │ ├── click.md │ │ ├── order.md │ │ ├── slider.md │ │ ├── dragging.md │ │ ├── custom-hitarea.md │ │ ├── custom-pointer.md │ │ └── demo │ │ │ ├── click.vue │ │ │ └── move.vue │ ├── particle-container │ │ ├── basic.md │ │ └── demo │ │ │ └── basic.vue │ ├── assets │ │ ├── async.md │ │ ├── multi-loading.md │ │ ├── manifest_bundles.md │ │ ├── background-loading.md │ │ └── demo │ │ │ ├── async.vue │ │ │ ├── multi-loading.vue │ │ │ ├── background-loading.vue │ │ │ └── manifest_bundles.vue │ ├── rendering │ │ ├── render_group.md │ │ ├── render_layer.md │ │ ├── render_texture_basic.md │ │ ├── render_texture_buffer.md │ │ ├── render_texture_scratch_card.md │ │ └── demo │ │ │ ├── render_group.vue │ │ │ ├── render_layer.vue │ │ │ ├── texture_rotation.vue │ │ │ ├── render_texture_basic.vue │ │ │ ├── render_texture_buffer.vue │ │ │ └── render_texture_scratch_card.vue │ ├── container │ │ ├── mask_filters_blur.md │ │ ├── tinting.md │ │ ├── inverse-mask.md │ │ ├── transform_origin.md │ │ ├── blend-modes_comparison.md │ │ ├── transform_pivot_basic.md │ │ ├── cache-as-texture_optimization.md │ │ └── demo │ │ │ ├── inverse-mask.vue │ │ │ └── transform_pivot_basic.vue │ ├── masks │ │ ├── filter.md │ │ ├── sprite.md │ │ ├── graphics.md │ │ └── demo │ │ │ └── sprite.vue │ ├── three │ │ ├── basic_integration.md │ │ └── demo │ │ │ ├── basic_integration.vue │ │ │ └── basic_integration.ts │ ├── animated-sprite │ │ ├── animation.md │ │ ├── particles.md │ │ ├── spritesheet.md │ │ └── demo │ │ │ ├── spritesheet.vue │ │ │ ├── particles.vue │ │ │ └── animation.vue │ ├── tiling-sprite │ │ ├── transform_animation.md │ │ └── demo │ │ │ └── transform_animation.vue │ ├── basic │ │ ├── tinting.md │ │ ├── container.md │ │ ├── blend-modes.md │ │ ├── container-origin.md │ │ ├── cache-as-bitmap.md │ │ ├── particle-container.md │ │ ├── transparent-background.md │ │ └── demo │ │ │ ├── transparent-background.vue │ │ │ └── container.vue │ ├── dom-container │ │ ├── html_text-area.md │ │ └── demo │ │ │ └── html_text-area.vue │ └── app │ │ ├── transparent-background.md │ │ └── demo │ │ └── transparent-background.vue ├── public │ ├── bg.jpg │ ├── psc.jpg │ ├── cursor.png │ ├── assets │ │ ├── snake.png │ │ ├── star.png │ │ ├── bg_mesh.jpg │ │ ├── desyrel.png │ │ ├── adventurer.png │ │ ├── bg_grass.jpg │ │ ├── food │ │ │ ├── bacon.png │ │ │ ├── bagel.png │ │ │ ├── bowl.png │ │ │ ├── bread.png │ │ │ ├── bun.png │ │ │ ├── curry.png │ │ │ ├── dish.png │ │ │ ├── donut.png │ │ │ ├── jam.png │ │ │ ├── jelly.png │ │ │ ├── nacho.png │ │ │ ├── omlet.png │ │ │ ├── pizza.png │ │ │ ├── ramen.png │ │ │ ├── steak.png │ │ │ ├── sushi.png │ │ │ ├── taco.png │ │ │ ├── burger.png │ │ │ ├── burrito.png │ │ │ ├── cookies.png │ │ │ ├── dish_2.png │ │ │ ├── eggtart.png │ │ │ ├── hotdog.png │ │ │ ├── popcorn.png │ │ │ ├── pudding.png │ │ │ ├── salmon.png │ │ │ ├── waffle.png │ │ │ ├── apple_pie.png │ │ │ ├── bacon_dish.png │ │ │ ├── bagel_dish.png │ │ │ ├── baguette.png │ │ │ ├── bread_dish.png │ │ │ ├── bun_dish.png │ │ │ ├── cheesecake.png │ │ │ ├── cheesepuff.png │ │ │ ├── chocolate.png │ │ │ ├── curry_dish.png │ │ │ ├── dish_pile.png │ │ │ ├── donut_dish.png │ │ │ ├── dumplings.png │ │ │ ├── eggsalad.png │ │ │ ├── friedegg.png │ │ │ ├── fruitcake.png │ │ │ ├── icecream.png │ │ │ ├── jam_dish.png │ │ │ ├── jelly_dish.png │ │ │ ├── lemonpie.png │ │ │ ├── loafbread.png │ │ │ ├── macncheese.png │ │ │ ├── meatball.png │ │ │ ├── nacho_dish.png │ │ │ ├── omlet_dish.png │ │ │ ├── pancakes.png │ │ │ ├── pizza_dish.png │ │ │ ├── sandwich.png │ │ │ ├── spaghetti.png │ │ │ ├── steak_dish.png │ │ │ ├── sushi_dish.png │ │ │ ├── taco_dish.png │ │ │ ├── burger_dish.png │ │ │ ├── burrito_dish.png │ │ │ ├── cookies_dish.png │ │ │ ├── eggtart_dish.png │ │ │ ├── frenchfries.png │ │ │ ├── garlicbread.png │ │ │ ├── hotdog_dish.png │ │ │ ├── hotdog_sauce.png │ │ │ ├── popcorn_bowl.png │ │ │ ├── potatochips.png │ │ │ ├── pudding_dish.png │ │ │ ├── salmon_dish.png │ │ │ ├── waffle_dish.png │ │ │ ├── apple_pie_dish.png │ │ │ ├── baguette_dish.png │ │ │ ├── burger_napkin.png │ │ │ ├── cheesecake_dish.png │ │ │ ├── cheesepuff_bowl.png │ │ │ ├── chocolate_dish.png │ │ │ ├── chocolatecake.png │ │ │ ├── dumplings_dish.png │ │ │ ├── eggsalad_bowl.png │ │ │ ├── friedegg_dish.png │ │ │ ├── fruitcake_dish.png │ │ │ ├── giantgummybear.png │ │ │ ├── gingerbreadman.png │ │ │ ├── icecream_bowl.png │ │ │ ├── lemonpie_dish.png │ │ │ ├── loafbread_dish.png │ │ │ ├── macncheese_dish.png │ │ │ ├── meatball_dish.png │ │ │ ├── pancakes_dish.png │ │ │ ├── roastedchicken.png │ │ │ ├── sandwich_dish.png │ │ │ ├── strawberrycake.png │ │ │ ├── frenchfries_dish.png │ │ │ ├── garlicbread_dish.png │ │ │ ├── potatochips_bowl.png │ │ │ ├── chocolatecake_dish.png │ │ │ ├── giantgummybear_dish.png │ │ │ ├── gingerbreadman_dish.png │ │ │ ├── roastedchicken_dish.png │ │ │ └── strawberrycake_dish.png │ │ ├── metal_slug.png │ │ ├── mushroom.png │ │ ├── maggot_tiny.png │ │ ├── nine-slice-blue.png │ │ ├── tiling-sprite.jpeg │ │ └── adventurer-spritesheet.png │ ├── displacement.jpg │ └── vue.svg ├── .vitepress │ ├── theme │ │ ├── components │ │ │ ├── Markdown │ │ │ │ ├── ApiDrawMode.md │ │ │ │ ├── ApiPoint.md │ │ │ │ ├── ApiBlendMode.md │ │ │ │ └── ApiColor.md │ │ │ ├── PixiJSContainer │ │ │ │ └── components │ │ │ │ │ └── Editor.vue │ │ │ ├── MountProvider │ │ │ │ └── index.vue │ │ │ ├── ApiTyping │ │ │ │ └── index.vue │ │ │ └── StackBlitzEmbed │ │ │ │ └── index.vue │ │ └── main.ts │ └── plugin │ │ ├── index.ts │ │ └── tooltip.ts ├── guide │ ├── demo │ │ ├── custom-instance.vue │ │ ├── basic.vue │ │ ├── render-event.vue │ │ ├── refs.vue │ │ ├── filter.vue │ │ ├── sprite.vue │ │ ├── ticker.vue │ │ └── assets.vue │ ├── elements │ │ ├── demo │ │ │ ├── text.vue │ │ │ ├── sprite.vue │ │ │ ├── bitmap-text.vue │ │ │ ├── spritesheet.vue │ │ │ ├── graphics.vue │ │ │ ├── container.vue │ │ │ ├── nine-slice-plane.vue │ │ │ ├── tiling-sprite.vue │ │ │ ├── mesh-rope.vue │ │ │ ├── simple-plane.vue │ │ │ └── multiple-animations.vue │ │ ├── mesh-rope.md │ │ ├── simple-plane.md │ │ └── sprite.md │ ├── composition-api │ │ ├── on-tick.md │ │ ├── use-renderer.md │ │ ├── use-stage.md │ │ ├── use-screen.md │ │ ├── use-application.md │ │ ├── demo │ │ │ └── on-tick.vue │ │ └── use-track.md │ ├── components │ │ ├── demo │ │ │ ├── application.vue │ │ │ ├── application-render.vue │ │ │ ├── assets.vue │ │ │ ├── assets-slots.vue │ │ │ ├── transition-ease-presets.vue │ │ │ ├── transition-properties.vue │ │ │ ├── transition-ticker.vue │ │ │ └── transition-ease-custom.vue │ │ └── external.md │ ├── api-reference │ │ ├── events.md │ │ ├── props.md │ │ └── demo │ │ │ └── events.vue │ └── nuxtjs.md ├── uno.config.ts ├── shims.d.ts └── package.json ├── .vscode └── settings.json ├── packages ├── nuxt │ ├── .nuxtrc │ ├── src │ │ ├── runtime │ │ │ └── Application.server.vue │ │ └── module.ts │ └── tsconfig.json └── core │ ├── src │ ├── renderer │ │ ├── utils │ │ │ ├── index.ts │ │ │ └── util.ts │ │ ├── internal │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ ├── custom.ts │ │ │ └── hooks.ts │ │ ├── index.ts │ │ └── renderer.ts │ ├── components │ │ ├── transition │ │ │ ├── utils │ │ │ │ ├── index.ts │ │ │ │ ├── easing.ts │ │ │ │ └── util.ts │ │ │ ├── index.ts │ │ │ └── presets.ts │ │ ├── index.ts │ │ └── assets │ │ │ └── types.ts │ ├── types │ │ ├── index.ts │ │ ├── attribute.ts │ │ ├── events.ts │ │ ├── utils.ts │ │ └── renderer.ts │ ├── index.ts │ ├── composables │ │ ├── internal │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── useRenderer.ts │ │ ├── onReady.ts │ │ ├── onTick.ts │ │ ├── useStage.ts │ │ ├── useApplication.ts │ │ └── useScreen.ts │ ├── elements │ │ ├── container.ts │ │ ├── graphics.ts │ │ ├── particle.ts │ │ ├── filter-alpha.ts │ │ ├── filter-blur.ts │ │ ├── filter-mask.ts │ │ ├── filter-noise.ts │ │ ├── container-dom.ts │ │ ├── mesh-rope.ts │ │ ├── filter-blur-pass.ts │ │ ├── container-render.ts │ │ ├── filter-color-matrix.ts │ │ ├── perspective-mesh.ts │ │ ├── graphics-bitmap-text.ts │ │ ├── filter-displacement.ts │ │ ├── sprite.ts │ │ ├── sprite-nine-slice.ts │ │ ├── filter.ts │ │ ├── index.ts │ │ ├── text-html.ts │ │ ├── text.ts │ │ ├── mesh.ts │ │ ├── text-bitmap.ts │ │ ├── text-split.ts │ │ ├── particle-container.ts │ │ ├── text-bitmap-split.ts │ │ └── sprite-tiling.ts │ ├── utils │ │ └── index.ts │ ├── global.ts │ └── compiler.ts │ └── tsup.config.ts ├── .npmrc ├── renovate.json ├── vitest.config.ts ├── eslint.config.js ├── .github └── workflows │ ├── release.yml │ └── ci.yml ├── tsconfig.json ├── package.json ├── LICENSE └── pnpm-workspace.yaml /.eslintignore: -------------------------------------------------------------------------------- 1 | cache 2 | -------------------------------------------------------------------------------- /docs/examples/index.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } 3 | -------------------------------------------------------------------------------- /packages/nuxt/.nuxtrc: -------------------------------------------------------------------------------- 1 | typescript.includeWorkspace=true -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-manager-strict=false 2 | link-workspace-packages=true -------------------------------------------------------------------------------- /docs/examples/sprite/svg.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/graphics/dynamic.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/plane.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/misc/slots.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/graphics/svg_file.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/gsap/physics.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/misc/spinners.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/misc/star_warp.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/bg.jpg -------------------------------------------------------------------------------- /docs/examples/filters/displacement.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/graphics/basic_shapes.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/graphics/texture-fill.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/mouse_trail.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/mesh/shader_toy.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/misc/screen_shot.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/nine-slice-sprite/basic.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/offscreen-canvas/basic.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/bitmap_xml.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/trim_bounds.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/psc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/psc.jpg -------------------------------------------------------------------------------- /docs/examples/events/move.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/filters/blur.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/graphics/mask_animation.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/perspective_3d.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/mesh/rope_textured.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/mesh/shared_shader.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/misc/physics_aabb.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/particle-container/basic.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/sprite/texture_swap.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/sprite/video_texture.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/fill_gradient.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/webfont_google.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/cursor.png -------------------------------------------------------------------------------- /docs/examples/assets/async.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/buttons.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/click.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/order.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/slider.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/shared_geometry.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/rendering/render_group.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/rendering/render_layer.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/sprite/mask_animation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/sprite/svg_custom_data.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/filters_cartoon.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/container/mask_filters_blur.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/container/tinting.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/dragging.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/gsap/animation_keyframe.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/gsap/animation_timeline.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/gsap/interaction_inertia.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/gsap/interaction_moveto.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/masks/filter.md: -------------------------------------------------------------------------------- 1 | # Filter 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/mesh/custom_texture_uv.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/sprite/transform_rotation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/bitmap_split_text.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/three/basic_integration.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/assets/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/snake.png -------------------------------------------------------------------------------- /docs/public/assets/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/star.png -------------------------------------------------------------------------------- /docs/public/displacement.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/displacement.jpg -------------------------------------------------------------------------------- /docs/examples/graphics/fill_stroke_gradient.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/custom_color_attributes.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/rope_texture_vertices.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/assets/bg_mesh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/bg_mesh.jpg -------------------------------------------------------------------------------- /docs/public/assets/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/desyrel.png -------------------------------------------------------------------------------- /docs/examples/animated-sprite/animation.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/animated-sprite/particles.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/assets/multi-loading.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/container/inverse-mask.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/custom-hitarea.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/events/custom-pointer.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/filters/color-matrix.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/filters/displacement_interactive.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/graphics/pixel-line_antialiasing.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/mesh/custom_shader_geometry.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/mesh/multipass_shader_effects.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/nine-slice-sprite/transform_anchor.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/rendering/render_texture_basic.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/rendering/render_texture_buffer.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/sprite/gif_animation_loading.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/bitmap_webfont_loading.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/texture_style_scale_mode.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/tiling-sprite/transform_animation.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/assets/adventurer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/adventurer.png -------------------------------------------------------------------------------- /docs/public/assets/bg_grass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/bg_grass.jpg -------------------------------------------------------------------------------- /docs/public/assets/food/bacon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bacon.png -------------------------------------------------------------------------------- /docs/public/assets/food/bagel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bagel.png -------------------------------------------------------------------------------- /docs/public/assets/food/bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bowl.png -------------------------------------------------------------------------------- /docs/public/assets/food/bread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bread.png -------------------------------------------------------------------------------- /docs/public/assets/food/bun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bun.png -------------------------------------------------------------------------------- /docs/public/assets/food/curry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/curry.png -------------------------------------------------------------------------------- /docs/public/assets/food/dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/donut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/donut.png -------------------------------------------------------------------------------- /docs/public/assets/food/jam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/jam.png -------------------------------------------------------------------------------- /docs/public/assets/food/jelly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/jelly.png -------------------------------------------------------------------------------- /docs/public/assets/food/nacho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/nacho.png -------------------------------------------------------------------------------- /docs/public/assets/food/omlet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/omlet.png -------------------------------------------------------------------------------- /docs/public/assets/food/pizza.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/pizza.png -------------------------------------------------------------------------------- /docs/public/assets/food/ramen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/ramen.png -------------------------------------------------------------------------------- /docs/public/assets/food/steak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/steak.png -------------------------------------------------------------------------------- /docs/public/assets/food/sushi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/sushi.png -------------------------------------------------------------------------------- /docs/public/assets/food/taco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/taco.png -------------------------------------------------------------------------------- /docs/public/assets/metal_slug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/metal_slug.png -------------------------------------------------------------------------------- /docs/public/assets/mushroom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/mushroom.png -------------------------------------------------------------------------------- /docs/examples/animated-sprite/spritesheet.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/assets/manifest_bundles.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/basic/tinting.md: -------------------------------------------------------------------------------- 1 | # Container 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/filters/custom_interactive_blending.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/graphics/curves_arcs_holes_textures.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/gsap/animation_basic.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/mesh/custom_instanced_geometry.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/text/basic.md: -------------------------------------------------------------------------------- 1 | # Text 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/public/assets/food/burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/burger.png -------------------------------------------------------------------------------- /docs/public/assets/food/burrito.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/burrito.png -------------------------------------------------------------------------------- /docs/public/assets/food/cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/cookies.png -------------------------------------------------------------------------------- /docs/public/assets/food/dish_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/dish_2.png -------------------------------------------------------------------------------- /docs/public/assets/food/eggtart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/eggtart.png -------------------------------------------------------------------------------- /docs/public/assets/food/hotdog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/hotdog.png -------------------------------------------------------------------------------- /docs/public/assets/food/popcorn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/popcorn.png -------------------------------------------------------------------------------- /docs/public/assets/food/pudding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/pudding.png -------------------------------------------------------------------------------- /docs/public/assets/food/salmon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/salmon.png -------------------------------------------------------------------------------- /docs/public/assets/food/waffle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/waffle.png -------------------------------------------------------------------------------- /docs/public/assets/maggot_tiny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/maggot_tiny.png -------------------------------------------------------------------------------- /docs/examples/assets/background-loading.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/basic/container.md: -------------------------------------------------------------------------------- 1 | # Container 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/container/transform_origin.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/dom-container/html_text-area.md: -------------------------------------------------------------------------------- 1 | # HTML Text Area 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/filters/custom-shader_glsl.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/graphics/svg_string-parsing.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/gsap/animation_confetti.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/gsap/animation_physics_particles.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/masks/sprite.md: -------------------------------------------------------------------------------- 1 | # Sprite 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/triangleColor.frag: -------------------------------------------------------------------------------- 1 | in vec3 vColor; 2 | 3 | void main() { 4 | gl_FragColor = vec4(vColor, 1.0); 5 | } -------------------------------------------------------------------------------- /docs/examples/text/bitmap_word_wrap_break_words.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/assets/food/apple_pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/apple_pie.png -------------------------------------------------------------------------------- /docs/public/assets/food/bacon_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bacon_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/bagel_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bagel_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/baguette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/baguette.png -------------------------------------------------------------------------------- /docs/public/assets/food/bread_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bread_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/bun_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/bun_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/cheesecake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/cheesecake.png -------------------------------------------------------------------------------- /docs/public/assets/food/cheesepuff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/cheesepuff.png -------------------------------------------------------------------------------- /docs/public/assets/food/chocolate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/chocolate.png -------------------------------------------------------------------------------- /docs/public/assets/food/curry_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/curry_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/dish_pile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/dish_pile.png -------------------------------------------------------------------------------- /docs/public/assets/food/donut_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/donut_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/dumplings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/dumplings.png -------------------------------------------------------------------------------- /docs/public/assets/food/eggsalad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/eggsalad.png -------------------------------------------------------------------------------- /docs/public/assets/food/friedegg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/friedegg.png -------------------------------------------------------------------------------- /docs/public/assets/food/fruitcake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/fruitcake.png -------------------------------------------------------------------------------- /docs/public/assets/food/icecream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/icecream.png -------------------------------------------------------------------------------- /docs/public/assets/food/jam_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/jam_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/jelly_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/jelly_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/lemonpie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/lemonpie.png -------------------------------------------------------------------------------- /docs/public/assets/food/loafbread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/loafbread.png -------------------------------------------------------------------------------- /docs/public/assets/food/macncheese.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/macncheese.png -------------------------------------------------------------------------------- /docs/public/assets/food/meatball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/meatball.png -------------------------------------------------------------------------------- /docs/public/assets/food/nacho_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/nacho_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/omlet_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/omlet_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/pancakes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/pancakes.png -------------------------------------------------------------------------------- /docs/public/assets/food/pizza_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/pizza_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/sandwich.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/sandwich.png -------------------------------------------------------------------------------- /docs/public/assets/food/spaghetti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/spaghetti.png -------------------------------------------------------------------------------- /docs/public/assets/food/steak_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/steak_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/sushi_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/sushi_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/taco_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/taco_dish.png -------------------------------------------------------------------------------- /docs/public/assets/nine-slice-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/nine-slice-blue.png -------------------------------------------------------------------------------- /docs/public/assets/tiling-sprite.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/tiling-sprite.jpeg -------------------------------------------------------------------------------- /packages/core/src/renderer/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './patchs' 2 | export * from './setters' 3 | export * from './util' 4 | -------------------------------------------------------------------------------- /docs/examples/masks/graphics.md: -------------------------------------------------------------------------------- 1 | # Graphics 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/rendering/render_texture_scratch_card.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/public/assets/food/burger_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/burger_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/burrito_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/burrito_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/cookies_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/cookies_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/eggtart_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/eggtart_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/frenchfries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/frenchfries.png -------------------------------------------------------------------------------- /docs/public/assets/food/garlicbread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/garlicbread.png -------------------------------------------------------------------------------- /docs/public/assets/food/hotdog_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/hotdog_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/hotdog_sauce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/hotdog_sauce.png -------------------------------------------------------------------------------- /docs/public/assets/food/popcorn_bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/popcorn_bowl.png -------------------------------------------------------------------------------- /docs/public/assets/food/potatochips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/potatochips.png -------------------------------------------------------------------------------- /docs/public/assets/food/pudding_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/pudding_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/salmon_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/salmon_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/waffle_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/waffle_dish.png -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Markdown/ApiDrawMode.md: -------------------------------------------------------------------------------- 1 | ^[number] [Topology](https://pixijs.download/release/docs/PIXI.html#Topology) 2 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Markdown/ApiPoint.md: -------------------------------------------------------------------------------- 1 | ^[number] ^[array]`[x: number, y: number]` ^[object]`{ x?:number; y?: number }` 2 | -------------------------------------------------------------------------------- /docs/examples/container/blend-modes_comparison.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/container/transform_pivot_basic.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/text/from-font.md: -------------------------------------------------------------------------------- 1 | # From Font 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/public/assets/food/apple_pie_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/apple_pie_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/baguette_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/baguette_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/burger_napkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/burger_napkin.png -------------------------------------------------------------------------------- /docs/public/assets/food/cheesecake_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/cheesecake_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/cheesepuff_bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/cheesepuff_bowl.png -------------------------------------------------------------------------------- /docs/public/assets/food/chocolate_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/chocolate_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/chocolatecake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/chocolatecake.png -------------------------------------------------------------------------------- /docs/public/assets/food/dumplings_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/dumplings_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/eggsalad_bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/eggsalad_bowl.png -------------------------------------------------------------------------------- /docs/public/assets/food/friedegg_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/friedegg_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/fruitcake_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/fruitcake_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/giantgummybear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/giantgummybear.png -------------------------------------------------------------------------------- /docs/public/assets/food/gingerbreadman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/gingerbreadman.png -------------------------------------------------------------------------------- /docs/public/assets/food/icecream_bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/icecream_bowl.png -------------------------------------------------------------------------------- /docs/public/assets/food/lemonpie_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/lemonpie_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/loafbread_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/loafbread_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/macncheese_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/macncheese_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/meatball_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/meatball_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/pancakes_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/pancakes_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/roastedchicken.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/roastedchicken.png -------------------------------------------------------------------------------- /docs/public/assets/food/sandwich_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/sandwich_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/strawberrycake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/strawberrycake.png -------------------------------------------------------------------------------- /packages/core/src/components/transition/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './easing' 2 | export * from './util' 3 | export * from './value' 4 | -------------------------------------------------------------------------------- /docs/examples/app/transparent-background.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/examples/basic/blend-modes.md: -------------------------------------------------------------------------------- 1 | # Blend Modes 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/guide/demo/custom-instance.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /docs/public/assets/adventurer-spritesheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/adventurer-spritesheet.png -------------------------------------------------------------------------------- /docs/public/assets/food/frenchfries_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/frenchfries_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/garlicbread_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/garlicbread_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/potatochips_bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/potatochips_bowl.png -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Markdown/ApiBlendMode.md: -------------------------------------------------------------------------------- 1 | ^[number] [BLEND_MODES](https://pixijs.download/release/docs/PIXI.html#BLEND_MODES) 2 | -------------------------------------------------------------------------------- /docs/examples/basic/container-origin.md: -------------------------------------------------------------------------------- 1 | # Container Origin 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/public/assets/food/chocolatecake_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/chocolatecake_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/giantgummybear_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/giantgummybear_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/gingerbreadman_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/gingerbreadman_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/roastedchicken_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/roastedchicken_dish.png -------------------------------------------------------------------------------- /docs/public/assets/food/strawberrycake_dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hairyf/vue3-pixi/HEAD/docs/public/assets/food/strawberrycake_dish.png -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /docs/examples/container/cache-as-texture_optimization.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/core/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './define' 2 | export * from './events' 3 | export * from './props' 4 | export * from './renderer' 5 | -------------------------------------------------------------------------------- /packages/nuxt/src/runtime/Application.server.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "compilerOptions": { 4 | "isolatedModules": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /docs/examples/basic/cache-as-bitmap.md: -------------------------------------------------------------------------------- 1 | # Cache As Bitmap 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/core/src/renderer/internal/constants.ts: -------------------------------------------------------------------------------- 1 | import type { RendererStacks } from '../../types' 2 | 3 | export const renderers: RendererStacks = {} 4 | -------------------------------------------------------------------------------- /docs/examples/basic/particle-container.md: -------------------------------------------------------------------------------- 1 | # Particle Container 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/basic/transparent-background.md: -------------------------------------------------------------------------------- 1 | # Transparent Background 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/sharedGeometry.frag: -------------------------------------------------------------------------------- 1 | in vec2 vUV; 2 | 3 | uniform sampler2D uTexture; 4 | 5 | void main() { 6 | gl_FragColor = texture2D(uTexture, vUV); 7 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/sharedShader.frag: -------------------------------------------------------------------------------- 1 | in vec2 vUV; 2 | 3 | uniform sampler2D uTexture; 4 | 5 | void main() { 6 | gl_FragColor = texture2D(uTexture, vUV).bgra; 7 | } -------------------------------------------------------------------------------- /docs/guide/elements/demo/text.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/core/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './application' 2 | export * from './assets' 3 | export * from './external' 4 | export * from './loader' 5 | export * from './transition' 6 | -------------------------------------------------------------------------------- /packages/core/src/renderer/index.ts: -------------------------------------------------------------------------------- 1 | export { nodeOps, patchProp } from './nodeOps' 2 | export * from './renderer' 3 | export { patchs, setters } from './utils' 4 | export * from './utils' 5 | -------------------------------------------------------------------------------- /packages/core/src/renderer/internal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './constants' 2 | export * from './custom' 3 | export * from './hooks' 4 | export * from './options' 5 | export * from './utils' 6 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/triangle.frag: -------------------------------------------------------------------------------- 1 | in vec3 vColor; 2 | in vec2 vUV; 3 | 4 | uniform sampler2D uTexture; 5 | 6 | void main() { 7 | gl_FragColor = texture2D(uTexture, vUV) * vec4(vColor, 1.0); 8 | } -------------------------------------------------------------------------------- /docs/uno.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, presetIcons, presetUno } from 'unocss' 2 | 3 | const config = defineConfig({ 4 | presets: [presetUno(), presetIcons()], 5 | }) 6 | 7 | export default config 8 | -------------------------------------------------------------------------------- /packages/core/src/index.ts: -------------------------------------------------------------------------------- 1 | import './elements' 2 | import './global' 3 | 4 | export * from './compiler' 5 | export * from './components' 6 | export * from './composables' 7 | export * from './renderer' 8 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | 3 | const config = defineConfig({ 4 | test: { 5 | environment: 'jsdom', 6 | }, 7 | }) 8 | 9 | export default config 10 | -------------------------------------------------------------------------------- /docs/examples/misc/demo/slots.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/guide/composition-api/on-tick.md: -------------------------------------------------------------------------------- 1 | # onTick 2 | 3 | use `onTick` to add a callback to the ticker. It will automatically remove itself on unmount. 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/plane.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/misc/demo/spinners.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/svg.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /packages/core/src/types/attribute.ts: -------------------------------------------------------------------------------- 1 | import type { Texture } from 'pixi.js' 2 | 3 | export interface PointAttribute { 4 | x: number 5 | y: number 6 | } 7 | 8 | export type NormalizeTexture = Texture | string 9 | -------------------------------------------------------------------------------- /docs/examples/misc/demo/star_warp.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/shader_toy.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/misc/demo/physics_aabb.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/misc/demo/screen_shot.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/instancedGeometry.frag: -------------------------------------------------------------------------------- 1 | in vec2 vUV; 2 | uniform sampler2D uTexture; 3 | uniform float time; 4 | 5 | void main() { 6 | gl_FragColor = texture(uTexture, vUV + sin( (time + (vUV.x) * 14.) ) * 0.1 ); 7 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/mouse_trail.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/bitmap_xml.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/trim_bounds.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/perspective_3d.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/rope_textured.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/shared_geometry.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/shared_shader.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/rendering/demo/render_group.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/rendering/demo/render_layer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/fill_gradient.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Markdown/ApiColor.md: -------------------------------------------------------------------------------- 1 | ^[string|number|array|object]`string | number | number[] | Float32Array | Uint8Array | Uint8ClampedArray | HslColor | HslaColor | HsvColor | HsvaColor | RgbColor | RgbaColor | Color` 2 | -------------------------------------------------------------------------------- /docs/examples/offscreen-canvas/demo/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/rendering/demo/texture_rotation.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/svg_custom_data.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/filters_cartoon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/webfont_google.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/custom_texture_uv.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/bitmap_split_text.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/custom_color_attributes.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/examples/nine-slice-sprite/demo/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/particle-container/demo/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/three/demo/basic_integration.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/custom_shader_geometry.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/rope_texture_vertices.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/rendering/demo/render_texture_basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/rendering/demo/render_texture_buffer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/gif_animation_loading.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/bitmap_webfont_loading.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/texture_style_scale_mode.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /packages/core/src/composables/internal/index.ts: -------------------------------------------------------------------------------- 1 | import type { Application } from 'pixi.js' 2 | import type { InjectionKey, Ref } from 'vue-demi' 3 | 4 | export const appInjectKey: InjectionKey> = Symbol('pixi_application') 5 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/custom_instanced_geometry.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/multipass_shader_effects.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/text/demo/bitmap_word_wrap_break_words.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/sprite.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/examples/nine-slice-sprite/demo/transform_anchor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/examples/rendering/demo/render_texture_scratch_card.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /docs/guide/composition-api/use-renderer.md: -------------------------------------------------------------------------------- 1 | # useRenderer 2 | 3 | Returns the context of the parent [Renderer](https://pixijs.download/release/docs/PIXI.Renderer.html) 4 | 5 | ```ts 6 | import { useRenderer } from 'vue3-pixi' 7 | 8 | const renderer = useRenderer() 9 | ``` 10 | -------------------------------------------------------------------------------- /docs/.vitepress/plugin/index.ts: -------------------------------------------------------------------------------- 1 | import type { MarkdownRenderer } from 'vitepress' 2 | import { demoMdPlugin } from 'vitepress-plugin-demo' 3 | import tooltip from './tooltip' 4 | 5 | export function mdPlugin(md: MarkdownRenderer) { 6 | md.use(demoMdPlugin) 7 | md.use(tooltip) 8 | } 9 | -------------------------------------------------------------------------------- /docs/guide/composition-api/use-stage.md: -------------------------------------------------------------------------------- 1 | # useStage 2 | 3 | Returns the context of the parent [Stage](https://pixijs.download/release/docs/PIXI.Application.html#stage) Container 4 | 5 | ```ts 6 | import { useStage } from 'vue3-pixi' 7 | 8 | const stage = useStage() 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/core/src/composables/index.ts: -------------------------------------------------------------------------------- 1 | export * from './internal' 2 | export * from './onReady' 3 | export * from './onTick' 4 | export * from './useApplication' 5 | export * from './useRenderer' 6 | export * from './useScreen' 7 | export * from './useStage' 8 | export * from './useTrack' 9 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | // eslint.config.js 2 | import antfu from '@antfu/eslint-config' 3 | 4 | export default antfu({ 5 | vue: true, 6 | typescript: true, 7 | rules: { 8 | 'ts/no-empty-object-type': 'off', 9 | 'vue/no-deprecated-html-element-is': 'off', 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /packages/core/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import type { Options } from 'tsup' 2 | 3 | export default { 4 | entryPoints: [ 5 | 'src/*.ts', 6 | ], 7 | external: ['vue-demi', 'vue', '@vue/runtime-core'], 8 | clean: true, 9 | format: ['cjs', 'esm'], 10 | dts: true, 11 | } 12 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/noise.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec2 vUvs; 3 | uniform float limit; 4 | uniform sampler2D noise; 5 | 6 | void main() 7 | { 8 | float color = texture2D(noise, vUvs).r; 9 | color = step(limit, color); 10 | gl_FragColor = vec4(color); 11 | } -------------------------------------------------------------------------------- /docs/guide/demo/basic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /docs/guide/composition-api/use-screen.md: -------------------------------------------------------------------------------- 1 | # useScreen 2 | 3 | obtain responsive `screen` information of `pixiApp.screen` 4 | 5 | ```html 6 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/guide/components/demo/application.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /docs/guide/demo/render-event.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | -------------------------------------------------------------------------------- /docs/public/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { ComponentOptions } from 'vue' 3 | 4 | const Component: ComponentOptions 5 | export default Component 6 | } 7 | 8 | declare module '*.md' { 9 | import type { ComponentOptions } from 'vue' 10 | 11 | const Component: ComponentOptions 12 | export default Component 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/renderer/internal/custom.ts: -------------------------------------------------------------------------------- 1 | import type { ContainerOptions } from 'pixi.js' 2 | import { Container } from 'pixi.js' 3 | 4 | export class Empty extends Container { 5 | constructor(options?: ContainerOptions) { 6 | super(options) 7 | this.visible = false 8 | this.renderable = false 9 | } 10 | 11 | _vp_empty = true 12 | } 13 | -------------------------------------------------------------------------------- /docs/guide/demo/refs.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/bitmap-text.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /docs/guide/demo/filter.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /docs/guide/demo/sprite.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /docs/examples/assets/demo/async.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /packages/core/src/composables/useRenderer.ts: -------------------------------------------------------------------------------- 1 | import type { Application, Renderer } from 'pixi.js' 2 | import type { Ref } from 'vue-demi' 3 | import { computed, unref } from 'vue-demi' 4 | 5 | import { useApplication } from './useApplication' 6 | 7 | export function useRenderer(app?: Ref): Ref { 8 | const useApp = app || useApplication() 9 | return computed(() => unref(useApp)?.renderer) 10 | } 11 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/sharedShader.vert: -------------------------------------------------------------------------------- 1 | in vec2 aPosition; 2 | in vec2 aUV; 3 | 4 | out vec2 vUV; 5 | 6 | uniform mat3 uProjectionMatrix; 7 | uniform mat3 uWorldTransformMatrix; 8 | 9 | uniform mat3 uTransformMatrix; 10 | 11 | 12 | void main() { 13 | 14 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 15 | gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0); 16 | 17 | vUV = aUV; 18 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/sharedGeometry.vert: -------------------------------------------------------------------------------- 1 | in vec2 aPosition; 2 | in vec2 aUV; 3 | 4 | out vec2 vUV; 5 | 6 | uniform mat3 uProjectionMatrix; 7 | uniform mat3 uWorldTransformMatrix; 8 | 9 | uniform mat3 uTransformMatrix; 10 | 11 | 12 | void main() { 13 | 14 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 15 | gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0); 16 | 17 | vUV = aUV; 18 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/combine.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec2 vUvs; 3 | 4 | uniform sampler2D texRipple; 5 | uniform sampler2D texNoise; 6 | uniform sampler2D texWave; 7 | 8 | void main() 9 | { 10 | //Read color from all 11 | vec4 ripple = texture2D(texRipple, vUvs); 12 | vec4 noise = texture2D(texNoise, vUvs); 13 | vec4 wave = texture2D(texWave, vUvs); 14 | 15 | gl_FragColor = mix(ripple, wave,noise.r); 16 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/triangleColor.vert: -------------------------------------------------------------------------------- 1 | in vec2 aPosition; 2 | in vec3 aColor; 3 | 4 | out vec3 vColor; 5 | uniform mat3 uProjectionMatrix; 6 | uniform mat3 uWorldTransformMatrix; 7 | 8 | uniform mat3 uTransformMatrix; 9 | 10 | 11 | void main() { 12 | 13 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 14 | gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0); 15 | 16 | vColor = aColor; 17 | } -------------------------------------------------------------------------------- /docs/guide/composition-api/use-application.md: -------------------------------------------------------------------------------- 1 | # useApplication 2 | 3 | This composable hook is used to obtain the current Pixi [Application](https://svelte-pixi.com/docs/components/application) instance. 4 | 5 | ```html 6 | 14 | ``` 15 | -------------------------------------------------------------------------------- /docs/guide/composition-api/demo/on-tick.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/multipassMesh.vert: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | attribute vec2 aPosition; 4 | attribute vec2 aUV; 5 | 6 | uniform mat3 uProjectionMatrix; 7 | uniform mat3 uWorldTransformMatrix; 8 | uniform mat3 uTransformMatrix; 9 | 10 | varying vec2 vUvs; 11 | 12 | void main() { 13 | vUvs = aUV; 14 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 15 | gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0); 16 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/shaderToy.vert: -------------------------------------------------------------------------------- 1 | // code copied from here https://www.shadertoy.com/view/XcS3zK Created by liamegan 2 | #version 300 es 3 | in vec2 aPosition; 4 | 5 | uniform mat3 uProjectionMatrix; 6 | uniform mat3 uWorldTransformMatrix; 7 | 8 | uniform mat3 uTransformMatrix; 9 | 10 | void main() { 11 | 12 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 13 | gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0); 14 | } -------------------------------------------------------------------------------- /docs/guide/elements/demo/spritesheet.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /packages/core/src/composables/onReady.ts: -------------------------------------------------------------------------------- 1 | import type { Application } from 'pixi.js' 2 | import { onMounted } from 'vue-demi' 3 | import { useApplication } from './useApplication' 4 | 5 | export function onReady(callback: (app: Application) => void) { 6 | const app = useApplication() 7 | if (app.value) { 8 | callback(app.value) 9 | } 10 | else { 11 | onMounted(() => { 12 | if (app.value) 13 | callback(app.value) 14 | }) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/composables/onTick.ts: -------------------------------------------------------------------------------- 1 | import type { TickerCallback } from 'pixi.js' 2 | import { tryOnBeforeUnmount } from '@vueuse/core' 3 | import { Ticker } from 'pixi.js' 4 | 5 | export function onTick(fn: TickerCallback): () => void { 6 | function insert() { 7 | Ticker.shared.add(fn) 8 | } 9 | function remove() { 10 | Ticker.shared.remove(fn) 11 | } 12 | 13 | insert() 14 | tryOnBeforeUnmount(remove) 15 | 16 | return remove 17 | } 18 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/ripple.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec2 vUvs; 3 | uniform float amount; 4 | uniform float phase; 5 | uniform sampler2D texIn; 6 | 7 | void main() 8 | { 9 | //Generate a simple grid. 10 | vec2 uv = vUvs; 11 | //Calculate distance from center 12 | float distance = length( uv - vec2(0.5)); 13 | vec4 color = texture2D(texIn, uv); 14 | color.rgb *= sin(distance*25.0+phase) * amount+1.; 15 | finalColor = color; 16 | } -------------------------------------------------------------------------------- /packages/core/src/types/events.ts: -------------------------------------------------------------------------------- 1 | import type { ContainerChild, ContainerEvents, Renderer } from 'pixi.js' 2 | import type { Overwrite } from './utils' 3 | 4 | export interface AllowedContainerEvents extends ContainerEvents { } 5 | 6 | export type ExtractContainerEvents = Overwrite 7 | export type ExtractFilterEvents = Overwrite<{ effect: [T] }, U> 8 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v4 13 | with: 14 | fetch-depth: 0 15 | 16 | - uses: actions/setup-node@v4 17 | with: 18 | node-version: 18.x 19 | 20 | - run: npx changelogithub 21 | env: 22 | GITHUB_TOKEN: ${{secrets.ACCESS_TOKEN}} 23 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/instancedGeometry.vert: -------------------------------------------------------------------------------- 1 | in vec2 aPosition; 2 | in vec2 aUV; 3 | in vec2 aPositionOffset; 4 | 5 | out vec2 vUV; 6 | 7 | uniform mat3 uProjectionMatrix; 8 | uniform mat3 uWorldTransformMatrix; 9 | uniform mat3 uTransformMatrix; 10 | 11 | 12 | void main() { 13 | 14 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 15 | gl_Position = vec4((mvp * vec3(aPosition + aPositionOffset, 1.0)).xy, 0.0, 1.0); 16 | 17 | vUV = aUV; 18 | } -------------------------------------------------------------------------------- /packages/core/src/components/transition/index.ts: -------------------------------------------------------------------------------- 1 | export { type TransitionProps } from './components/Transition' 2 | export { AnimatedTransition } from './components/Transition' 3 | export { AnimatedTransitionGroup } from './components/TransitionGroup' 4 | 5 | export { 6 | EasePresets, 7 | } from './presets' 8 | 9 | export type { 10 | CubicBezierPoints, 11 | EasingFunction, 12 | PixiMatrix, 13 | PixiVars, 14 | TransitionTicker, 15 | TransitionVars, 16 | } from './types' 17 | -------------------------------------------------------------------------------- /packages/core/src/composables/useStage.ts: -------------------------------------------------------------------------------- 1 | import type { Application, Container, Renderer } from 'pixi.js' 2 | import type { Ref } from 'vue-demi' 3 | import { computed, unref } from 'vue-demi' 4 | 5 | import { useApplication } from './useApplication' 6 | 7 | export type Stage = Container & EventTarget 8 | 9 | export function useStage(app?: Ref>): Ref { 10 | const useApp = app || useApplication() 11 | return computed(() => unref(useApp)?.stage as any) 12 | } 13 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/triangle.vert: -------------------------------------------------------------------------------- 1 | in vec2 aPosition; 2 | in vec3 aColor; 3 | in vec2 aUV; 4 | 5 | out vec3 vColor; 6 | out vec2 vUV; 7 | 8 | uniform mat3 uProjectionMatrix; 9 | uniform mat3 uWorldTransformMatrix; 10 | 11 | uniform mat3 uTransformMatrix; 12 | 13 | 14 | void main() { 15 | 16 | mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix; 17 | gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0); 18 | 19 | vColor = aColor; 20 | vUV = aUV; 21 | } -------------------------------------------------------------------------------- /docs/examples/mesh/demo/grid.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec2 vUvs; 3 | uniform float zoom; 4 | 5 | void main() 6 | { 7 | //Generate a simple grid. 8 | //Offset uv so that center is 0,0 and edges are -1,1 9 | vec2 uv = (vUvs-vec2(0.5))*2.0; 10 | vec2 gUv = floor(uv*zoom); 11 | vec4 color1 = vec4(0.8, 0.8, 0.8, 1.0); 12 | vec4 color2 = vec4(0.4, 0.4, 0.4, 1.0); 13 | vec4 outColor = mod(gUv.x + gUv.y, 2.) < 0.5 ? color1 : color2; 14 | finalColor = outColor; 15 | 16 | } -------------------------------------------------------------------------------- /packages/core/src/types/utils.ts: -------------------------------------------------------------------------------- 1 | import type { PointData } from 'pixi.js' 2 | 3 | export type Overwrite = Pick> & U 4 | 5 | export type OmitBy = { 6 | [K in keyof T as T[K] extends U ? never : K]: T[K] 7 | } 8 | 9 | export type PickBy = { 10 | [K in keyof T as T[K] extends U ? K : never]: T[K] 11 | } 12 | 13 | export type Point 14 | = { [K in Key]?: Partial | number | [number, number]; } 15 | & { [K in `${Key}X`]?: number; } 16 | & { [K in `${Key}Y`]?: number } 17 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/transform_rotation.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /packages/core/src/elements/container.ts: -------------------------------------------------------------------------------- 1 | import type { AllowedContainerProps, DefineElement, ExtractContainerEvents } from '../types' 2 | import { Container } from 'pixi.js' 3 | import { renderer } from '../renderer' 4 | 5 | export type ContainerElement = DefineElement> 6 | 7 | declare module '@vue/runtime-core' { 8 | export interface GlobalComponents { 9 | Container: ContainerElement 10 | PixiContainer: ContainerElement 11 | } 12 | } 13 | 14 | renderer.use({ name: 'Container', createElement: () => new Container() }) 15 | -------------------------------------------------------------------------------- /packages/core/src/elements/graphics.ts: -------------------------------------------------------------------------------- 1 | import type { GraphicsOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { Graphics } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type GraphicsElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | Graphics: GraphicsElement 11 | PixiGraphics: GraphicsElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'Graphics', 17 | createElement: props => new Graphics(props), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/particle.ts: -------------------------------------------------------------------------------- 1 | import type { ParticleOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { Particle } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type ParticleElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | Particle: ParticleElement 11 | PixiParticle: ParticleElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'Particle', 17 | createElement: props => new Particle(props), 18 | }) 19 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/graphics.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /docs/guide/components/demo/application-render.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | -------------------------------------------------------------------------------- /docs/guide/components/demo/assets.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-alpha.ts: -------------------------------------------------------------------------------- 1 | import type { AlphaFilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { AlphaFilter } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type AlphaFilterElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | AlphaFilter: AlphaFilterElement 11 | PixiAlphaFilter: AlphaFilterElement 12 | } 13 | } 14 | 15 | renderer.use({ name: 'AlphaFilter', createElement: props => new AlphaFilter(props.alpha) }) 16 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/PixiJSContainer/components/Editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/main.ts: -------------------------------------------------------------------------------- 1 | import FloatingVue from 'floating-vue' 2 | import { Text } from 'pixi.js' 3 | import { renderer } from 'vue3-pixi' 4 | 5 | import 'floating-vue/dist/style.css' 6 | import 'uno.css' 7 | import './style.css' 8 | 9 | class YellowText extends Text { 10 | constructor(text, style) { 11 | super(text, style) 12 | this.style.fill = 'yellow' 13 | } 14 | } 15 | 16 | renderer.use({ 17 | name: 'YellowText', 18 | createElement: props => new YellowText(props.text, props.style), 19 | }) 20 | 21 | FloatingVue.options.distance = 28 22 | FloatingVue.options.themes.tooltip.delay.show = 100 23 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-blur.ts: -------------------------------------------------------------------------------- 1 | import type { BlurFilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { BlurFilter } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type BlurFilterElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | BlurFilter: BlurFilterElement 11 | PixiBlurFilter: BlurFilterElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'BlurFilter', 17 | createElement: props => new BlurFilter(props.alpha), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-mask.ts: -------------------------------------------------------------------------------- 1 | import type { MaskFilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { MaskFilter } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type MaskFilterElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | MaskFilter: MaskFilterElement 11 | PixiMaskFilter: MaskFilterElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'MaskFilter', 17 | createElement: props => new MaskFilter(props.alpha), 18 | }) 19 | -------------------------------------------------------------------------------- /docs/guide/demo/ticker.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-noise.ts: -------------------------------------------------------------------------------- 1 | import type { NoiseFilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { NoiseFilter } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type NoiseFilterElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | NoiseFilter: NoiseFilterElement 11 | PixiNoiseFilter: NoiseFilterElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'NoiseFilter', 17 | createElement: props => new NoiseFilter(props.alpha), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/types/renderer.ts: -------------------------------------------------------------------------------- 1 | import type { Container, ContainerChild } from 'pixi.js' 2 | 3 | import type { RendererOptions as _RendererOptions, Renderer } from 'vue-demi' 4 | 5 | export interface VuePIXIRenderer> extends Renderer { 6 | use: (options: RendererOptions | RendererOptions[]) => void 7 | } 8 | 9 | export interface RendererStacks { 10 | [key: string]: Omit 11 | } 12 | 13 | export interface RendererOptions extends Partial, 'createText' | 'createElement'>> { 14 | name: string 15 | createElement: (props: any) => any 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/elements/container-dom.ts: -------------------------------------------------------------------------------- 1 | import type { DOMContainerOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { DOMContainer } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type DOMContainerElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | DomContainer: DOMContainerElement 11 | PixiDomContainer: DOMContainerElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'DomContainer', 17 | createElement: props => new DOMContainer(props), 18 | }) 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "jsx": "preserve", 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "useDefineForClassFields": true, 7 | "module": "ESNext", 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "node", 11 | "resolveJsonModule": true, 12 | 13 | /* Linting */ 14 | "strict": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "noEmit": true, 19 | "isolatedModules": true, 20 | "skipLibCheck": true 21 | }, 22 | "exclude": [ 23 | "packages/nuxt" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /docs/examples/events/demo/click.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/container.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 25 | -------------------------------------------------------------------------------- /docs/examples/basic/demo/transparent-background.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /packages/core/src/elements/mesh-rope.ts: -------------------------------------------------------------------------------- 1 | import type { MeshRopeOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { MeshRope } from 'pixi.js' 4 | import { normalizeTexture, renderer } from '../renderer' 5 | 6 | export type MeshRopeElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | MeshRope: MeshRopeElement 11 | PixiMeshRope: MeshRopeElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'MeshRope', 17 | createElement: props => new MeshRope({ ...props, texture: normalizeTexture(props.texture) }), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-blur-pass.ts: -------------------------------------------------------------------------------- 1 | import type { BlurFilterPassOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { BlurFilterPass } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type BlurFilterPassElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | BlurFilterPass: BlurFilterPassElement 11 | PixiBlurFilterPass: BlurFilterPassElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'BlurFilterPass', 17 | createElement: props => new BlurFilterPass(props.alpha), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/container-render.ts: -------------------------------------------------------------------------------- 1 | import type { RenderContainerOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { RenderContainer } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type RenderContainerElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | RenderContainer: RenderContainerElement 11 | PixiRenderContainer: RenderContainerElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'RenderContainer', 17 | createElement: props => new RenderContainer(props), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-color-matrix.ts: -------------------------------------------------------------------------------- 1 | import type { FilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { ColorMatrixFilter } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type ColorMatrixFilterElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | ColorMatrixFilter: ColorMatrixFilterElement 11 | PixiColorMatrixFilter: ColorMatrixFilterElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'ColorMatrixFilter', 17 | createElement: props => new ColorMatrixFilter(props.alpha), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/perspective-mesh.ts: -------------------------------------------------------------------------------- 1 | import type { PerspectivePlaneOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { PerspectiveMesh } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type PerspectiveMeshElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | PerspectiveMesh: PerspectiveMeshElement 11 | PixiPerspectiveMesh: PerspectiveMeshElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'PerspectiveMesh', 17 | createElement: props => new PerspectiveMesh(props), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import type { App, AppContext } from 'vue-demi' 2 | 3 | export function inheritParent(app: App, appContext?: AppContext) { 4 | const parent = appContext?.app 5 | if (parent) { 6 | app.config.globalProperties = parent.config.globalProperties 7 | Object.assign(app._context, parent._context) 8 | 9 | // Detach registries so this app's registrations are local 10 | app._context.components = { ...app._context.components } 11 | app._context.directives = { ...app._context.directives } 12 | // Keep provides as a prototype chain so inject() still works 13 | app._context.provides = Object.create(app._context.provides) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/src/elements/graphics-bitmap-text.ts: -------------------------------------------------------------------------------- 1 | import type { GraphicsOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { BitmapTextGraphics } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type BitmapTextGraphicsElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | BitmapTextGraphics: BitmapTextGraphicsElement 11 | PixiBitmapTextGraphics: BitmapTextGraphicsElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'BitmapTextGraphics', 17 | createElement: props => new BitmapTextGraphics(props), 18 | }) 19 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MountProvider/index.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter-displacement.ts: -------------------------------------------------------------------------------- 1 | import type { DisplacementFilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { DisplacementFilter } from 'pixi.js' 4 | import { renderer } from '../renderer' 5 | 6 | export type DisplacementFilterElement = DefineFilterElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | DisplacementFilter: DisplacementFilterElement 11 | PixiDisplacementFilter: DisplacementFilterElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'DisplacementFilter', 17 | createElement: props => new DisplacementFilter(props), 18 | }) 19 | -------------------------------------------------------------------------------- /packages/core/src/elements/sprite.ts: -------------------------------------------------------------------------------- 1 | import type { SpriteOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { Sprite } from 'pixi.js' 4 | import { normalizeTexture, renderer } from '../renderer' 5 | 6 | export type SpriteElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | Sprite: SpriteElement 11 | PixiSprite: SpriteElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'Sprite', 17 | createElement: props => new Sprite({ 18 | ...props, 19 | texture: normalizeTexture(props.texture), 20 | }), 21 | remove: (node: Sprite) => node.destroy(), 22 | }) 23 | -------------------------------------------------------------------------------- /docs/examples/dom-container/demo/html_text-area.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 28 | -------------------------------------------------------------------------------- /docs/guide/api-reference/events.md: -------------------------------------------------------------------------------- 1 | # Events 2 | 3 | All events emitted by pixi objects are supported. Some of vue's event modifiers will work, like `@click.left`. 4 | 5 | > adding an event listener to an element will currently automatically set the element's `eventMode` to `static`. 6 | 7 | 8 | 9 | ## Render Events 10 | 11 | all elements support render event, which allows for flexible manipulation of elements, For example, using on `` and `` 12 | 13 | This will set up a `watchEffect` internally that will automatically call the event handler again if any dependencies on the render method have changed. 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/guide/components/external.md: -------------------------------------------------------------------------------- 1 | # External 2 | 3 | Insert external elements in any Pixi Application, and they will be added below the canvas. 4 | 5 | ::: warning 6 | You may not need this component, as you can simply insert DOM elements below ``. This component is usually used for document debugging, such as debugging display counts. 7 | ::: 8 | 9 | 10 | 11 | ## API 12 | 13 | ### External Props 14 | 15 | | Name | Type | Default | Description | 16 | | ---- | ---- | ---- | ---- | 17 | | tag | ^[string] | `div` | The tag of the external element | 18 | 19 | ## External Slots 20 | 21 | | Name | Types | Description | 22 | | ---- | ---- | ---- | 23 | -------------------------------------------------------------------------------- /packages/core/src/global.ts: -------------------------------------------------------------------------------- 1 | import '@vue/runtime-core' 2 | import 'pixi.js' 3 | 4 | declare module 'pixi.js' { 5 | interface Filter { 6 | parent: Container 7 | _vp_name: string 8 | _vp_filter: boolean 9 | } 10 | interface Container { 11 | _vp_name: string 12 | } 13 | } 14 | 15 | declare module '@vue/runtime-core' { 16 | export interface GlobalComponents { 17 | Assets: typeof import('./components').Assets 18 | AssetsBundle: typeof import('./components').AssetsBundle 19 | AnimatedTransition: typeof import('./components').AnimatedTransition 20 | AnimatedTransitionGroup: typeof import('./components').AnimatedTransitionGroup 21 | External: typeof import('./components').External 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/examples/app/demo/transparent-background.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/wave.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec2 vUvs; 3 | uniform float amplitude; 4 | uniform float time; 5 | 6 | void main() 7 | { 8 | //Offset uv so that center is 0,0 and edges are -1,1 9 | vec2 uv = (vUvs-vec2(0.5))*2.0; 10 | 11 | vec3 outColor = vec3(0.); 12 | 13 | //Simple wavefunctions inversed and with small offsets. 14 | outColor += 5./length(uv.y*200. - 50.0*sin( uv.x*0.25+ time*0.25)*amplitude); 15 | outColor += 4./length(uv.y*300. - 100.0*sin(uv.x*0.5+time*0.5)*amplitude*1.2); 16 | outColor += 3./length(uv.y*400. - 150.0*sin(uv.x*0.75+time*0.75)*amplitude*1.4); 17 | outColor += 2./length(uv.y*500. - 200.0*sin(uv.x+time)*amplitude*1.6); 18 | 19 | gl_FragColor = vec4(outColor,1.0); 20 | } -------------------------------------------------------------------------------- /docs/examples/sprite/demo/gif_animation_loading.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets } from 'pixi.js' 2 | import { GifSprite } from 'pixi.js/gif'; 3 | 4 | (async () => { 5 | // Create a new application 6 | const app = new Application() 7 | 8 | // Initialize the application 9 | await app.init({ background: '#1099bb', resizeTo: window }) 10 | 11 | // Append the application canvas to the document body 12 | document.body.appendChild(app.canvas) 13 | 14 | const source = await Assets.load( 15 | 'https://userland.pixijs.io/gif/examples/chew.gif', 16 | ) 17 | const gif = new GifSprite({ 18 | source, 19 | x: window.innerWidth / 2, 20 | y: window.innerHeight / 2, 21 | anchor: 0.5, 22 | }) 23 | 24 | app.stage.addChild(gif) 25 | })() 26 | -------------------------------------------------------------------------------- /docs/examples/assets/demo/multi-loading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | -------------------------------------------------------------------------------- /docs/guide/composition-api/use-track.md: -------------------------------------------------------------------------------- 1 | # useTrack 2 | 3 | Return a responsive writable store updated during low-priority, which is useful for observing properties on PixiJS instances that are updated outside of the component, such as physical systems. 4 | 5 | ```vue 6 | 17 | 18 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/elements/sprite-nine-slice.ts: -------------------------------------------------------------------------------- 1 | import type { NineSliceSpriteOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { NineSliceSprite } from 'pixi.js' 4 | import { normalizeTexture, renderer } from '../renderer' 5 | 6 | export type NineSliceSpriteElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | NineSliceSprite: NineSliceSpriteElement 11 | PixiNineSliceSprite: NineSliceSpriteElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'NineSliceSprite', 17 | createElement: props => new NineSliceSprite({ 18 | ...props, 19 | texture: normalizeTexture(props.texture), 20 | }), 21 | }) 22 | -------------------------------------------------------------------------------- /packages/core/src/renderer/internal/hooks.ts: -------------------------------------------------------------------------------- 1 | import type { RendererOptions } from '../../types' 2 | import { renderers } from './constants' 3 | 4 | export function baseUse(options: RendererOptions) { 5 | const { createElement: _createElement, name } = options 6 | function createElement(...args: any) { 7 | // eslint-disable-next-line ts/ban-ts-comment 8 | // @ts-expect-error 9 | const element = _createElement(...args) 10 | element._vp_name = name 11 | return element 12 | } 13 | options.createElement = createElement 14 | renderers[name] = options 15 | } 16 | 17 | export function use(options: RendererOptions | RendererOptions[]) { 18 | if (Array.isArray(options)) 19 | options.forEach(baseUse) 20 | else 21 | baseUse(options) 22 | } 23 | -------------------------------------------------------------------------------- /packages/core/src/elements/filter.ts: -------------------------------------------------------------------------------- 1 | import type { FilterOptions } from 'pixi.js' 2 | import type { DefineFilterElement } from '../types' 3 | import { Filter } from 'pixi.js' 4 | 5 | import { renderer } from '../renderer' 6 | 7 | export type FilterElement = DefineFilterElement 8 | 9 | declare module '@vue/runtime-core' { 10 | export interface GlobalComponents { 11 | Filter: FilterElement 12 | PixiFilter: FilterElement 13 | } 14 | } 15 | 16 | renderer.use({ 17 | name: 'Filter', 18 | createElement: (props) => { 19 | if (props?.is) 20 | return typeof props.is === 'function' ? props.is(props) : props.is 21 | props.glProgram = props['gl-program'] 22 | delete props['gl-program'] 23 | return new Filter(props) 24 | }, 25 | }) 26 | -------------------------------------------------------------------------------- /packages/core/src/elements/index.ts: -------------------------------------------------------------------------------- 1 | import './container-dom' 2 | import './container-render' 3 | import './container' 4 | import './particle' 5 | import './perspective-mesh' 6 | import './particle-container' 7 | import './filter' 8 | import './filter-alpha' 9 | import './filter-blur' 10 | import './filter-blur-pass' 11 | import './filter-color-matrix' 12 | import './filter-displacement' 13 | import './filter-mask' 14 | import './filter-noise' 15 | import './graphics-bitmap-text' 16 | import './graphics' 17 | import './mesh' 18 | import './mesh-rope' 19 | import './sprite' 20 | import './sprite-animated' 21 | import './sprite-nine-slice' 22 | import './sprite-tiling' 23 | import './text' 24 | import './text-split' 25 | import './text-bitmap' 26 | import './text-bitmap-split' 27 | import './text-html' 28 | -------------------------------------------------------------------------------- /packages/core/src/composables/useApplication.ts: -------------------------------------------------------------------------------- 1 | import type { Application } from 'pixi.js' 2 | import type { Ref } from 'vue-demi' 3 | import { computed, inject, onMounted, ref } from 'vue-demi' 4 | import { appInjectKey } from './internal' 5 | 6 | export function useApplication(): Ref { 7 | const app = ref(inject(appInjectKey, undefined)) 8 | const appComputed = computed({ 9 | get: () => (app.value as any)?.app || app.value, 10 | set: (value: any) => app.value = value, 11 | }) 12 | 13 | onMounted(() => { 14 | if (!app.value) 15 | console.warn('not found , you can use ref for referencing or create a new component to be used as a child element of with PIXI composition API.') 16 | }) 17 | 18 | return appComputed as any 19 | } 20 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/nine-slice-plane.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 31 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/tiling-sprite.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /docs/examples/tiling-sprite/demo/transform_animation.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | -------------------------------------------------------------------------------- /docs/guide/components/demo/assets-slots.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/mesh-rope.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 33 | -------------------------------------------------------------------------------- /packages/core/src/composables/useScreen.ts: -------------------------------------------------------------------------------- 1 | import type { Application } from 'pixi.js' 2 | import type { Ref } from 'vue-demi' 3 | 4 | import { computedWithControl, useResizeObserver } from '@vueuse/core' 5 | import { Rectangle } from 'pixi.js' 6 | 7 | import { computed, unref } from 'vue-demi' 8 | 9 | import { useApplication } from './useApplication' 10 | 11 | export function useScreen(app?: Ref): Ref { 12 | const useApp = app || useApplication() 13 | const view = computed(() => unref(useApp)?.canvas) 14 | const defaultRectangle = new Rectangle() 15 | 16 | const screen = computedWithControl( 17 | () => view.value, 18 | () => useApp.value?.screen || defaultRectangle, 19 | ) 20 | 21 | if (view?.value instanceof HTMLCanvasElement) 22 | useResizeObserver(view, screen.trigger) 23 | 24 | return screen 25 | } 26 | -------------------------------------------------------------------------------- /docs/examples/text/demo/bitmap_xml.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, BitmapText } from 'pixi.js'; 2 | 3 | (async () => { 4 | // Create a new application 5 | const app = new Application() 6 | 7 | // Initialize the application 8 | await app.init({ background: '#1099bb', resizeTo: window }) 9 | 10 | // Append the application canvas to the document body 11 | document.body.appendChild(app.canvas) 12 | 13 | // Load bitmap font 14 | await Assets.load('https://pixijs.com/assets/bitmap-font/desyrel.xml') 15 | 16 | const bitmapFontText = new BitmapText({ 17 | text: 'bitmap fonts are supported!\nWoo yay!', 18 | style: { 19 | fontFamily: 'Desyrel', 20 | fontSize: 55, 21 | align: 'left', 22 | }, 23 | }) 24 | 25 | bitmapFontText.x = 50 26 | bitmapFontText.y = 200 27 | 28 | app.stage.addChild(bitmapFontText) 29 | })() 30 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/simple-plane.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 28 | -------------------------------------------------------------------------------- /docs/guide/api-reference/props.md: -------------------------------------------------------------------------------- 1 | # Props 2 | 3 | By default, the props of custom elements will be mapped to PIXI elements, while some special attributes will be handled separately. 4 | 5 | ## Set 6 | 7 | Most props will work just like the properties on the corresponding PixiJS objects. In addition, they can also be used with the `x/y` suffix. 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | Furthermore, you can also set properties in the form of arrays/objects: 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | ## Scalar 20 | 21 | Another shortcut you can use is to pass a scalar value to a property that expects an object, using the same value for the rest of the properties: 22 | 23 | ```html 24 | ✅ 25 | ✅ 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/examples/assets/demo/background-loading.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 31 | -------------------------------------------------------------------------------- /docs/guide/api-reference/demo/events.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /docs/examples/container/demo/inverse-mask.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 33 | -------------------------------------------------------------------------------- /docs/guide/components/demo/transition-ease-presets.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/texture_swap.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 34 | -------------------------------------------------------------------------------- /docs/guide/components/demo/transition-properties.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | -------------------------------------------------------------------------------- /docs/examples/basic/demo/container.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-pixi-monorepo", 3 | "type": "module", 4 | "version": "1.0.0-beta.7", 5 | "private": true, 6 | "packageManager": "pnpm@9.15.9", 7 | "description": "Vue createRenderer for PixiJS", 8 | "license": "MIT", 9 | "scripts": { 10 | "lint": "eslint .", 11 | "release": "bumpp -r && pnpm -r publish", 12 | "test:run": "vitest", 13 | "test:coverage": "vitest run --coverage", 14 | "docs:dev": "npm -C docs run docs:dev", 15 | "docs:build": "npm -C docs run docs:build", 16 | "docs:preview": "npm -C docs run docs:preview" 17 | }, 18 | "devDependencies": { 19 | "@antfu/eslint-config": "catalog:cli", 20 | "@types/node": "catalog:types", 21 | "@vue/test-utils": "catalog:cli", 22 | "bumpp": "catalog:cli", 23 | "eslint": "catalog:cli", 24 | "jsdom": "catalog:cli", 25 | "tsup": "catalog:cli", 26 | "typescript": "catalog:cli", 27 | "vitest": "catalog:cli" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/video_texture.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 39 | -------------------------------------------------------------------------------- /docs/examples/container/demo/transform_pivot_basic.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | -------------------------------------------------------------------------------- /packages/core/src/renderer/utils/util.ts: -------------------------------------------------------------------------------- 1 | import type { TextureOptions } from 'pixi.js' 2 | 3 | import { Texture } from 'pixi.js' 4 | 5 | export function setTextureOptions(texture: Texture, options: TextureOptions = {}) { 6 | for (const key in options) 7 | // eslint-disable-next-line ts/ban-ts-comment 8 | // @ts-expect-error 9 | texture.baseTexture[key] = options[key] 10 | } 11 | 12 | export function normalizeTexture(value: Texture | string): Texture { 13 | if (typeof value === 'string') 14 | return Texture.from(value) 15 | return value 16 | } 17 | 18 | export function isOn(props?: any) { 19 | return Object.keys(props || {}).some(p => p.startsWith('on')) 20 | } 21 | 22 | export function withThisRender(props: any) { 23 | if (!props.onRender) 24 | return 25 | const source = props.onRender 26 | // eslint-disable-next-line style/max-statements-per-line 27 | props.onRender = function (this, renderer: any) { source(this, renderer) } 28 | } 29 | -------------------------------------------------------------------------------- /docs/examples/animated-sprite/demo/spritesheet.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 36 | -------------------------------------------------------------------------------- /docs/guide/components/demo/transition-ticker.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 36 | -------------------------------------------------------------------------------- /docs/guide/demo/assets.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 34 | -------------------------------------------------------------------------------- /packages/core/src/elements/text-html.ts: -------------------------------------------------------------------------------- 1 | import type { HTMLTextOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { HTMLText } from 'pixi.js' 4 | import { patchProp, renderer, setters } from '../renderer' 5 | 6 | export type HTMLTextElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | HTMLText: HTMLTextElement 11 | PixiHTMLText: HTMLTextElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'HtmlText', 17 | createElement: props => new HTMLText(props), 18 | patchProp(el: HTMLText, key, prev, next) { 19 | switch (key) { 20 | case 'text': 21 | setters.unfirst(el, key, () => el.text = next) 22 | break 23 | case 'style': 24 | setters.unfirst(el, key, () => setters.object(el, key, prev, next)) 25 | break 26 | default: 27 | patchProp(el, key, prev, next) 28 | } 29 | }, 30 | }) 31 | -------------------------------------------------------------------------------- /packages/core/src/elements/text.ts: -------------------------------------------------------------------------------- 1 | import type { TextOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { Text } from 'pixi.js' 4 | import { patchProp, renderer, setters } from '../renderer' 5 | 6 | export type TextElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | Text: TextElement 11 | PixiText: TextElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'Text', 17 | createElement: props => new Text({ 18 | text: props.text, 19 | style: props.style, 20 | }), 21 | patchProp(el: Text, key, prev, next) { 22 | switch (key) { 23 | case 'text': 24 | setters.unfirst(el, key, () => el.text = next) 25 | break 26 | case 'style': 27 | setters.unfirst(el, key, () => setters.object(el, key, prev, next)) 28 | break 29 | default: 30 | patchProp(el, key, prev, next) 31 | } 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /packages/core/src/elements/mesh.ts: -------------------------------------------------------------------------------- 1 | import type { Geometry, MeshOptions, Shader } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { Mesh } from 'pixi.js' 4 | import { patchProp, renderer, setters } from '../renderer' 5 | 6 | export type MeshElement = DefineContainerElement> 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | Mesh: MeshElement 11 | PixiMesh: MeshElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'Mesh', 17 | createElement: props => new Mesh(props), 18 | patchProp(el: Mesh, key, prev, next) { 19 | switch (key) { 20 | case 'geometry': 21 | case 'shader': 22 | case 'state': 23 | setters.unfirst(el, key, () => el[key] = next) 24 | break 25 | case 'roundPixels': 26 | setters.boolean(el, key, prev, next) 27 | break 28 | default: 29 | patchProp(el, key, prev, next) 30 | } 31 | }, 32 | }) 33 | -------------------------------------------------------------------------------- /docs/examples/text/demo/bitmap_word_wrap_break_words.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, BitmapText } from 'pixi.js'; 2 | 3 | (async () => { 4 | const app = new Application() 5 | await app.init({ background: '#1099bb', resizeTo: window }) 6 | document.body.appendChild(app.canvas) 7 | 8 | // Load a bitmap font 9 | await Assets.load('https://pixijs.com/assets/bitmap-font/desyrel.xml') 10 | 11 | // Create BitmapText with long, unbroken string 12 | const text = new BitmapText({ 13 | text: 'This_Is_A_Really_Long_Word_That_Would_Normally_Overflow_But_With_BreakWords_It_Wraps!', 14 | style: { 15 | fontFamily: 'Desyrel', 16 | wordWrapWidth: app.screen.width - 100, // Set a width for wrapping 17 | wordWrap: true, 18 | fontSize: 50, 19 | letterSpacing: 10, 20 | breakWords: true, // This forces the long word to wrap 21 | }, 22 | anchor: 0.5, 23 | }) 24 | 25 | text.position.set(app.screen.width / 2, app.screen.height / 2) 26 | 27 | app.stage.addChild(text) 28 | })() 29 | -------------------------------------------------------------------------------- /docs/.vitepress/plugin/tooltip.ts: -------------------------------------------------------------------------------- 1 | import type { MarkdownRenderer } from 'vitepress' 2 | 3 | export default (md: MarkdownRenderer): void => { 4 | md.renderer.rules.tooltip = (tokens, idx) => { 5 | const token = tokens[idx] 6 | 7 | return `` 8 | } 9 | 10 | md.inline.ruler.before('emphasis', 'tooltip', (state, silent) => { 11 | const tooltipRegExp = /^\^\[([^\]]*)\](`[^`]*`)?/ 12 | const str = state.src.slice(state.pos, state.posMax) 13 | 14 | if (!tooltipRegExp.test(str)) 15 | return false 16 | if (silent) 17 | return true 18 | 19 | const result = str.match(tooltipRegExp) 20 | 21 | if (!result) 22 | return false 23 | 24 | const token = state.push('tooltip', 'tooltip', 0) 25 | token.content = result[1].replace(/\\\|/g, '|') 26 | token.info = (result[2] || '').replace(/^`(.*)`$/, '$1') 27 | token.level = state.level 28 | state.pos += result[0].length 29 | 30 | return true 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/svg.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, Sprite } from 'pixi.js'; 2 | 3 | (async () => { 4 | // Create a new application 5 | const app = new Application() 6 | 7 | // Initialize the application 8 | await app.init({ antialias: true, resizeTo: window }) 9 | 10 | // Append the application canvas to the document body 11 | document.body.appendChild(app.canvas) 12 | 13 | const tigerTexture = await Assets.load({ 14 | src: 'https://pixijs.com/assets/tiger.svg', 15 | }) 16 | 17 | const sprite = new Sprite(tigerTexture) 18 | 19 | // line it up as this svg is not centered 20 | const bounds = sprite.getLocalBounds() 21 | 22 | sprite.pivot.set( 23 | (bounds.x + bounds.width) / 2, 24 | (bounds.y + bounds.height) / 2, 25 | ) 26 | 27 | sprite.position.set(app.screen.width / 2, app.screen.height / 2) 28 | 29 | app.stage.addChild(sprite) 30 | 31 | app.ticker.add(() => { 32 | sprite.rotation += 0.01 33 | sprite.scale.set(2 + Math.sin(sprite.rotation)) 34 | }) 35 | })() 36 | -------------------------------------------------------------------------------- /docs/examples/text/demo/filters_cartoon.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, Text } from 'pixi.js' 2 | import { CartoonTextFilter } from './CartoonTextFilter'; 3 | 4 | (async () => { 5 | const app = new Application() 6 | 7 | await app.init({ 8 | resizeTo: window, 9 | backgroundColor: '#1099bb', 10 | autoDensity: true, 11 | antialias: true, 12 | }) 13 | document.body.appendChild(app.canvas) 14 | 15 | await Assets.load( 16 | 'https://pixijs.com/assets/webfont-loader/Grandstander-ExtraBold.ttf', 17 | ) 18 | 19 | const filter = new CartoonTextFilter({ 20 | thickness: 7, 21 | }) 22 | 23 | const text = new Text({ 24 | text: 'Hello World!', 25 | style: { 26 | fontFamily: 'Grandstander ExtraBold', 27 | fontSize: 70, 28 | fill: 0xFFFFFF, 29 | padding: 0, 30 | filters: [filter], 31 | fontWeight: '800', 32 | }, 33 | x: app.screen.width / 2, 34 | y: app.screen.height / 2, 35 | anchor: 0.5, 36 | }) 37 | 38 | app.stage.addChild(text) 39 | })() 40 | -------------------------------------------------------------------------------- /packages/core/src/renderer/renderer.ts: -------------------------------------------------------------------------------- 1 | import type { Container } from 'pixi.js' 2 | import type { VuePIXIRenderer } from '../types' 3 | import { createRenderer as _createRenderer } from 'vue-demi' 4 | import { rendererWithActions, rendererWithCapture } from './internal' 5 | import { nodeOps as _nodeOps } from './nodeOps' 6 | 7 | export function createRenderer(options: { prefix?: string } = {}) { 8 | const { createElement, setText, ...nodeOps } = _nodeOps 9 | const { prefix = 'pixi' } = options 10 | const rendererOptions = rendererWithCapture({ 11 | createElement: (...args) => createElement(prefix, ...args), 12 | setElementText: (...args) => setText(prefix, ...args), 13 | setText: (...args) => setText(prefix, ...args), 14 | ...nodeOps, 15 | }) 16 | return _createRenderer(rendererOptions) 17 | } 18 | 19 | export const renderer = createRenderer() as VuePIXIRenderer 20 | 21 | rendererWithActions(renderer) 22 | 23 | export const createApp = renderer.createApp 24 | export const render = renderer.render 25 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-pixi-docs", 3 | "type": "module", 4 | "version": "1.0.0-beta.7", 5 | "private": true, 6 | "description": "Vue createRenderer for PixiJS", 7 | "license": "MIT", 8 | "scripts": { 9 | "docs:dev": "vitepress dev", 10 | "docs:build": "vitepress build", 11 | "docs:preview": "vitepress preview" 12 | }, 13 | "dependencies": { 14 | "@antfu/utils": "catalog:share", 15 | "@stackblitz/sdk": "catalog:docs", 16 | "@vueuse/core": "catalog:share", 17 | "gsap": "catalog:docs", 18 | "naive-ui": "catalog:docs", 19 | "nanoid": "catalog:share", 20 | "pixi-filters": "catalog:share", 21 | "pixi.js": "catalog:share", 22 | "unocss": "catalog:docs", 23 | "vue": "catalog:share", 24 | "vue3-pixi": "workspace:^" 25 | }, 26 | "devDependencies": { 27 | "@iconify/json": "catalog:docs", 28 | "codesandbox": "catalog:docs", 29 | "floating-vue": "catalog:docs", 30 | "vitepress": "catalog:docs", 31 | "vitepress-plugin-demo": "catalog:docs" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /docs/examples/text/demo/from-font.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | -------------------------------------------------------------------------------- /packages/core/src/elements/text-bitmap.ts: -------------------------------------------------------------------------------- 1 | import type { TextOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { BitmapText } from 'pixi.js' 4 | import { patchProp, renderer, setters } from '../renderer' 5 | 6 | export type BitmapTextElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | BitmapText: BitmapTextElement 11 | PixiBitmapText: BitmapTextElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'BitmapText', 17 | createElement: props => new BitmapText(props), 18 | patchProp(el: BitmapText, key, prev, next) { 19 | switch (key) { 20 | case 'text': 21 | setters.unfirst(el, key, () => el.text = next) 22 | break 23 | case 'style': 24 | break 25 | case 'sortDirty': 26 | case 'roundPixels': 27 | setters.boolean(el, key, prev, next) 28 | break 29 | default: 30 | patchProp(el, key, prev, next) 31 | } 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /packages/core/src/elements/text-split.ts: -------------------------------------------------------------------------------- 1 | import type { SplitTextOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { SplitText } from 'pixi.js' 4 | import { patchProp, renderer, setters } from '../renderer' 5 | 6 | export type SplitTextElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | SplitText: SplitTextElement 11 | PixiSplitText: SplitTextElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'SplitText', 17 | createElement: props => new SplitText(props), 18 | patchProp(el: SplitText, key, prev, next) { 19 | switch (key) { 20 | case 'text': 21 | setters.unfirst(el, key, () => el.text = next) 22 | break 23 | case 'style': 24 | break 25 | case 'sortDirty': 26 | case 'roundPixels': 27 | setters.boolean(el, key, prev, next) 28 | break 29 | default: 30 | patchProp(el, key, prev, next) 31 | } 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /docs/examples/animated-sprite/demo/particles.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 36 | -------------------------------------------------------------------------------- /docs/guide/elements/mesh-rope.md: -------------------------------------------------------------------------------- 1 | # MeshRope 2 | 3 | Creates a [MeshRope](https://pixijs.download/release/docs/PIXI.MeshRope.html) 4 | 5 | The rope allows you to draw a texture across several points and then manipulate these points 6 | 7 | 8 | 9 | ## API 10 | 11 | ### MeshRope Attributes 12 | 13 | | Name | Type | Default | Description | 14 | | --- | --- | --- | --- | 15 | | texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the MeshRope. | 16 | | points | ^[Array]`PIXI.IPoint[]` | `undefined` | An array of points or point-like objects to construct this rope. | 17 | 18 | > more props in [Container Props](/guide/elements/container#container-props) and [PIXI.MeshRope](https://pixijs.download/release/docs/PIXI.MeshRope.html) 19 | 20 | ### MeshRope Events 21 | 22 | | Name | Type | Description | 23 | | --- | --- | --- | 24 | | render | ^[function]`(el: MeshRope): void` | custom render function | 25 | 26 | > more events in [Container Events](/guide/elements/container#container-events) 27 | -------------------------------------------------------------------------------- /packages/core/src/elements/particle-container.ts: -------------------------------------------------------------------------------- 1 | import type { ParticleContainerOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { ParticleContainer } from 'pixi.js' 4 | import { nodeOps, patchProp, renderer } from '../renderer' 5 | 6 | export type ParticleContainerElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | ParticleContainer: ParticleContainerElement 11 | PixiParticleContainer: ParticleContainerElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'ParticleContainer', 17 | createElement: props => new ParticleContainer(props), 18 | patchProp(el: ParticleContainer, key, prev, next) { 19 | switch (key) { 20 | case 'max-size': 21 | case 'properties': 22 | break 23 | default: 24 | patchProp(el, key, prev, next) 25 | } 26 | }, 27 | remove(el) { 28 | el.removeParticle(...el.particleChildren) 29 | nodeOps.remove(el) 30 | }, 31 | }) 32 | -------------------------------------------------------------------------------- /docs/examples/graphics/demo/svg_file.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | -------------------------------------------------------------------------------- /docs/examples/events/demo/move.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /docs/examples/sprite/demo/svg_custom-data.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, Sprite } from 'pixi.js'; 2 | 3 | (async () => { 4 | // Create a new application 5 | const app = new Application() 6 | 7 | // Initialize the application 8 | await app.init({ antialias: true, resizeTo: window }) 9 | 10 | // Append the application canvas to the document body 11 | document.body.appendChild(app.canvas) 12 | 13 | const tigerTexture = await Assets.load({ 14 | src: 'https://pixijs.com/assets/tiger.svg', 15 | data: { 16 | resolution: 4, 17 | }, 18 | }) 19 | 20 | const sprite = new Sprite(tigerTexture) 21 | 22 | // line it up as this svg is not centered 23 | const bounds = sprite.getLocalBounds() 24 | 25 | sprite.pivot.set( 26 | (bounds.x + bounds.width) / 2, 27 | (bounds.y + bounds.height) / 2, 28 | ) 29 | 30 | sprite.position.set(app.screen.width / 2, app.screen.height / 2) 31 | 32 | app.stage.addChild(sprite) 33 | 34 | app.ticker.add(() => { 35 | sprite.rotation += 0.01 36 | sprite.scale.set(2 + Math.sin(sprite.rotation)) 37 | }) 38 | })() 39 | -------------------------------------------------------------------------------- /docs/guide/elements/demo/multiple-animations.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 36 | -------------------------------------------------------------------------------- /packages/core/src/elements/text-bitmap-split.ts: -------------------------------------------------------------------------------- 1 | import type { SplitBitmapTextOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { SplitBitmapText } from 'pixi.js' 4 | import { patchProp, renderer, setters } from '../renderer' 5 | 6 | export type SplitBitmapTextElement = DefineContainerElement 7 | 8 | declare module '@vue/runtime-core' { 9 | export interface GlobalComponents { 10 | SplitBitmapText: SplitBitmapTextElement 11 | PixiSplitBitmapText: SplitBitmapTextElement 12 | } 13 | } 14 | 15 | renderer.use({ 16 | name: 'SplitBitmapText', 17 | createElement: props => new SplitBitmapText(props), 18 | patchProp(el: SplitBitmapText, key, prev, next) { 19 | switch (key) { 20 | case 'text': 21 | setters.unfirst(el, key, () => el.text = next) 22 | break 23 | case 'style': 24 | break 25 | case 'sortDirty': 26 | case 'roundPixels': 27 | setters.boolean(el, key, prev, next) 28 | break 29 | default: 30 | patchProp(el, key, prev, next) 31 | } 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023-PRESENT hairyf 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/core/src/components/transition/utils/easing.ts: -------------------------------------------------------------------------------- 1 | import type { CubicBezierPoints, EasingFunction } from '../types' 2 | 3 | /** 4 | * Create an easing function from cubic bezier points. 5 | */ 6 | export function createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction { 7 | const a = (a1: number, a2: number) => 1 - 3 * a2 + 3 * a1 8 | const b = (a1: number, a2: number) => 3 * a2 - 6 * a1 9 | const c = (a1: number) => 3 * a1 10 | 11 | const calcBezier = (t: number, a1: number, a2: number) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t 12 | 13 | const getSlope = (t: number, a1: number, a2: number) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1) 14 | 15 | const getTforX = (x: number) => { 16 | let aGuessT = x 17 | 18 | for (let i = 0; i < 4; ++i) { 19 | const currentSlope = getSlope(aGuessT, p0, p2) 20 | if (currentSlope === 0) 21 | return aGuessT 22 | const currentX = calcBezier(aGuessT, p0, p2) - x 23 | aGuessT -= currentX / currentSlope 24 | } 25 | 26 | return aGuessT 27 | } 28 | 29 | return (x: number) => (p0 === p1 && p2 === p3) ? x : calcBezier(getTforX(x), p1, p3) 30 | } 31 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - playground 3 | - docs 4 | - packages/**/* 5 | - examples/**/* 6 | catalogs: 7 | cli: 8 | '@antfu/eslint-config': ^4.16.2 9 | '@vue/test-utils': ^2.4.6 10 | bumpp: ^9.11.1 11 | eslint: ^9.31.0 12 | jsdom: ^24.1.3 13 | tsup: 6.6.2 14 | typescript: ^5.8.3 15 | vitest: ^1.6.1 16 | docs: 17 | '@iconify/json': ^2.2.357 18 | '@stackblitz/sdk': ^1.11.0 19 | codesandbox: ^2.2.3 20 | floating-vue: ^5.2.2 21 | gsap: ^3.14.2 22 | naive-ui: ^2.42.0 23 | unocss: ^0.60.4 24 | vitepress: ^1.6.3 25 | vitepress-plugin-demo: ^0.8.1 26 | nuxt: 27 | '@nuxt/kit': ^3.17.6 28 | '@nuxt/module-builder': ^0.7.1 29 | '@nuxt/schema': ^3.17.6 30 | '@xmldom/xmldom': ^0.8.10 31 | mlly: ^1.7.4 32 | nuxi: ^3.25.1 33 | nuxt: ^3.17.6 34 | pkg-types: ^1.3.1 35 | sirv: ^2.0.4 36 | share: 37 | '@antfu/utils': ^0.7.10 38 | '@vue/runtime-core': ^3.5.17 39 | '@vueuse/core': ^10.11.1 40 | nanoid: ^4.0.2 41 | pixi-filters: 6.1.5 42 | pixi.js: 8.14.3 43 | vue: ^3.5.17 44 | vue-demi: ^0.14.10 45 | types: 46 | '@types/node': ^20.19.7 47 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/triangleColor.wgsl: -------------------------------------------------------------------------------- 1 | struct GlobalUniforms { 2 | projectionMatrix:mat3x3, 3 | worldTransformMatrix:mat3x3, 4 | worldColorAlpha: vec4, 5 | uResolution: vec2, 6 | } 7 | 8 | struct LocalUniforms { 9 | uTransformMatrix:mat3x3, 10 | uColor:vec4, 11 | uRound:f32, 12 | } 13 | 14 | @group(0) @binding(0) var globalUniforms : GlobalUniforms; 15 | @group(1) @binding(0) var localUniforms : LocalUniforms; 16 | 17 | struct VertexOutput { 18 | @builtin(position) position : vec4, 19 | @location(0) vColor : vec3, 20 | } 21 | 22 | @vertex 23 | fn mainVert( 24 | @location(0) aPosition : vec2, 25 | @location(1) aColor : vec3, 26 | ) -> VertexOutput { 27 | var mvp = globalUniforms.projectionMatrix 28 | * globalUniforms.worldTransformMatrix 29 | * localUniforms.uTransformMatrix; 30 | 31 | return VertexOutput( 32 | vec4(mvp * vec3(aPosition, 1.0), 1.0), 33 | aColor, 34 | ); 35 | }; 36 | 37 | @fragment 38 | fn mainFrag(input: VertexOutput) -> @location(0) vec4{ 39 | return vec4(input.vColor, 1.0); 40 | } -------------------------------------------------------------------------------- /docs/guide/components/demo/transition-ease-custom.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 38 | -------------------------------------------------------------------------------- /docs/examples/graphics/demo/svg_string-parsing.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/plane.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, MeshPlane } from 'pixi.js'; 2 | 3 | (async () => { 4 | // Create a new application 5 | const app = new Application() 6 | 7 | // Initialize the application 8 | await app.init({ background: '#1099bb', resizeTo: window }) 9 | 10 | // Append the application canvas to the document body 11 | document.body.appendChild(app.canvas) 12 | 13 | // Load the grass texture 14 | const texture = await Assets.load('https://pixijs.com/assets/bg_grass.jpg') 15 | 16 | // Create a simple grass plane and add it to the stage 17 | const plane = new MeshPlane({ texture, verticesX: 10, verticesY: 10 }) 18 | 19 | plane.x = 100 20 | plane.y = 100 21 | 22 | app.stage.addChild(plane) 23 | 24 | // Get the buffer for vertex positions. 25 | const { buffer } = plane.geometry.getAttribute('aPosition') 26 | 27 | // Listen for animate update 28 | let timer = 0 29 | 30 | app.ticker.add(() => { 31 | // Randomize the vertice positions a bit to create movement. 32 | for (let i = 0; i < buffer.data.length; i++) { 33 | buffer.data[i] += Math.sin(timer / 10 + i) * 0.5 34 | } 35 | buffer.update() 36 | timer++ 37 | }) 38 | })() 39 | -------------------------------------------------------------------------------- /packages/core/src/elements/sprite-tiling.ts: -------------------------------------------------------------------------------- 1 | import type { TilingSpriteOptions } from 'pixi.js' 2 | import type { DefineContainerElement } from '../types' 3 | import { TilingSprite } from 'pixi.js' 4 | import { normalizeTexture, renderer, setters } from '../renderer' 5 | import { patchProp } from '../renderer/nodeOps' 6 | 7 | export type TilingSpriteElement = DefineContainerElement 8 | 9 | declare module '@vue/runtime-core' { 10 | export interface GlobalComponents { 11 | TilingSprite: TilingSpriteElement 12 | PixiTilingSprite: TilingSpriteElement 13 | } 14 | } 15 | 16 | renderer.use({ 17 | name: 'TilingSprite', 18 | createElement: props => new TilingSprite({ 19 | texture: normalizeTexture(props!.texture), 20 | width: props.width, 21 | height: props.height, 22 | }), 23 | patchProp(el: TilingSprite, key, prev, next) { 24 | switch (key) { 25 | case 'width': 26 | case 'height': 27 | setters.unfirst(el, key, () => el[key] = next) 28 | break 29 | case 'uvRespectAnchor': 30 | setters.boolean(el, key, prev, next) 31 | break 32 | default: 33 | patchProp(el, key, prev, next) 34 | } 35 | }, 36 | }) 37 | -------------------------------------------------------------------------------- /docs/guide/elements/simple-plane.md: -------------------------------------------------------------------------------- 1 | # SimplePlane 2 | 3 | Creates a [SimplePlane](https://pixijs.download/release/docs/PIXI.SimplePlane.html) 4 | 5 | The SimplePlane allows you to draw a texture across several points and then manipulate these points 6 | 7 | 8 | 9 | ## API 10 | 11 | ### SimplePlane Attributes 12 | 13 | | Name | Type | Default | Description | 14 | | --- | --- | --- | --- | 15 | | draw-mode | | `Topology` | The draw mode to be used. | 16 | | texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the NineSlicePlane. | 17 | | geometry | ^[object]`PIXI.Geometry` | `undefined` | The geometry to use on the SimplePlane. | 18 | | vertices | ^[number]`number` | `10` | The number of vertices in the axis | 19 | 20 | > more props in [Container Props](/guide/elements/container#container-props) and [PIXI.SimplePlane](https://pixijs.download/release/docs/PIXI.SimplePlane.html) 21 | 22 | ### SimplePlane Events 23 | 24 | | Name | Type | Description | 25 | | --- | --- | --- | 26 | | render | ^[function]`(el: SimplePlane): void` | custom render function | 27 | 28 | > more events in [Container Events](/guide/elements/container#container-events) 29 | -------------------------------------------------------------------------------- /docs/guide/elements/sprite.md: -------------------------------------------------------------------------------- 1 | # Sprite 2 | 3 | Creates a [Sprite](https://svelte-pixi.com/docs/components/sprite) 4 | 5 | Sprites are the base for all textured objects that are rendered to the screen 6 | 7 | 8 | 9 | ## API 10 | 11 | ### Sprite Attributes 12 | 13 | | Name | Type | Default | Description | 14 | | --- | --- | --- | --- | 15 | | blend-mode | | `BLEND_MODES.NORMAL` | The blend mode to be applied to the sprite. | 16 | | texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the Sprite. | 17 | | anchor | | `0` | The anchor sets the origin point of the text. | 18 | | anchor-x | ^[number] | `0` | The x anchor sets the origin point of the text. | 19 | | anchor-y | ^[number] | `0` | The y anchor sets the origin point of the text. | 20 | 21 | > more props in [Container Props](/guide/elements/container#container-props) and [PIXI.Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html) 22 | 23 | ### Sprite Events 24 | 25 | | Name | Type | Description | 26 | | --- | --- | --- | 27 | | render | ^[function]`(el: Sprite): void` | custom render function | 28 | 29 | > more events in [Container Events](/guide/elements/container#container-events) 30 | -------------------------------------------------------------------------------- /packages/core/src/components/assets/types.ts: -------------------------------------------------------------------------------- 1 | import type { ArrayOr, AssetsBundle, ResolvedAsset } from 'pixi.js' 2 | 3 | /** 4 | * A fully resolved src, Glob patterns will not work here, and the src will be resolved to a single file. 5 | * @memberof assets 6 | * @property {string} src - The URL or relative path to the asset 7 | * @property {string} format - Format, usually the file extension 8 | * @property {string} loadParser - An override that will ensure that the asset is loaded with a specific parser 9 | * @property {any} data - Optional data 10 | */ 11 | export interface ResolvedSrc { 12 | src: string 13 | format: string 14 | loadParser: string 15 | data: any 16 | } 17 | 18 | /** 19 | * A valid asset src. This can be a string, or a [ResolvedSrc]{@link assets.ResolvedSrc}, 20 | * or an array of either. 21 | * @memberof assets 22 | */ 23 | export type AssetSrc = ArrayOr | (ArrayOr) 24 | 25 | export interface UnresolvedAsset extends Pick, 'data' | 'format' | 'loadParser'> { 26 | /** Aliases associated with asset */ 27 | alias?: ArrayOr 28 | /** The URL or relative path to the asset */ 29 | src?: AssetSrc 30 | } 31 | 32 | export type AssetsBundleSrc = AssetsBundle['assets'] 33 | -------------------------------------------------------------------------------- /packages/core/src/compiler.ts: -------------------------------------------------------------------------------- 1 | const elementNames = [ 2 | 'container', 3 | 'sprite', 4 | 'graphics', 5 | 'text', 6 | 'html-text', 7 | 'bitmap-text', 8 | 'bitmap-text-graphics', 9 | 'split-bitmap-text', 10 | 'tiling-sprite', 11 | 'animated-sprite', 12 | 'mesh', 13 | 'simple-plane', 14 | 'nine-slice-sprite', 15 | 'mesh-rope', 16 | 'particle', 17 | 'perspective-mesh', 18 | 'filter', 19 | 'blur-filter', 20 | 'blur-filter-pass', 21 | 'alpha-filter', 22 | 'displacement-filter', 23 | 'color-matrix-filter', 24 | 'mask-filter', 25 | 'noise-filter', 26 | 'particle-container', 27 | 'dom-container', 28 | 'render-container', 29 | ] 30 | 31 | export const compilerOptions = { 32 | isCustomElement(name: string) { 33 | let normalizedName = name.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`) 34 | if (normalizedName.startsWith('-')) 35 | normalizedName = normalizedName.slice(1) 36 | 37 | const isPixiElement = elementNames.includes(normalizedName) 38 | const isPrefixElement = normalizedName.startsWith(compilerOptions.prefix) 39 | && elementNames.includes(normalizedName.slice(compilerOptions.prefix.length)) 40 | 41 | return isPixiElement || isPrefixElement 42 | }, 43 | prefix: 'pixi-', 44 | } 45 | -------------------------------------------------------------------------------- /docs/guide/nuxtjs.md: -------------------------------------------------------------------------------- 1 | # Using in Nuxtjs 2 | 3 | Repository is [here](https://github.com/hairyf/vue3-pixi/tree/main/packages/vue3-pixi-nuxt) 4 | 5 | If you want to use it in Nuxtjs, install the following modules: 6 | 7 | ## Install 8 | 9 | ::: code-group 10 | 11 | ```bash [npm] 12 | npm install vue3-pixi vue3-pixi-nuxt 13 | ``` 14 | 15 | ```bash [yarn] 16 | yarn add vue3-pixi vue3-pixi-nuxt 17 | ``` 18 | 19 | ```bash [pnpm] 20 | pnpm add vue3-pixi vue3-pixi-nuxt 21 | ``` 22 | 23 | ::: 24 | 25 | ## Features 26 | 27 | - Auto-import components and composable from the vue3-pixi 28 | - `` client only, you don't need to add `` 29 | - Automatically configures `isCustomElement` for vue compiler 30 | 31 | ## Usage 32 | 33 | Add `vue3-pixi-nuxt` to the `modules` section of `nuxt.config.ts` 34 | 35 | ```ts 36 | export default defineNuxtConfig({ 37 | modules: ['vue3-pixi-nuxt'], 38 | }) 39 | ``` 40 | 41 | now, you can use `vue3-pixi` in your Nuxt app 42 | 43 | ```vue 44 | 46 | 47 | 54 | ``` 55 | -------------------------------------------------------------------------------- /packages/core/src/components/transition/utils/util.ts: -------------------------------------------------------------------------------- 1 | import type { Fn } from '@antfu/utils' 2 | import type { AnyFn } from '@vueuse/core' 3 | import { camelize } from 'vue-demi' 4 | 5 | export function delay(ms: number) { 6 | return new Promise(resolve => setTimeout(resolve, ms)) 7 | } 8 | 9 | export function linear(p: number) { 10 | return p 11 | } 12 | 13 | export function lerp(a: number, b: number, alpha: number) { 14 | return a + alpha * (b - a) 15 | } 16 | 17 | export function ignore(fn: Fn) { 18 | try { 19 | return fn() 20 | } 21 | catch {} 22 | } 23 | 24 | export type Deferred = Promise & { 25 | resolve: (value: T) => void 26 | reject: AnyFn 27 | } 28 | 29 | export function createDeferred(): Deferred { 30 | let resolve: any, reject: any 31 | const promise = new Promise((_resolve, _reject) => { 32 | resolve = _resolve 33 | reject = _reject 34 | }) as unknown as any 35 | promise.resolve = (v: any) => { 36 | resolve(v) 37 | } 38 | promise.reject = reject 39 | return promise 40 | } 41 | 42 | export function resolveProps(props: T) { 43 | const baseProps: any = {} 44 | for (const key in props) 45 | baseProps[camelize(key)] = props[key] 46 | return baseProps as T 47 | } 48 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/ApiTyping/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 41 | -------------------------------------------------------------------------------- /docs/examples/assets/demo/manifest_bundles.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 52 | -------------------------------------------------------------------------------- /docs/examples/gsap/demo/interaction_moveto.ts: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { Application, Assets, Sprite, TextureSource } from 'pixi.js'; 3 | 4 | (async () => { 5 | // Create a new application 6 | const app = new Application(); 7 | 8 | // Initialize the application 9 | await app.init({ background: '#1099bb', resizeTo: window }); 10 | 11 | // Append the application canvas to the document body 12 | document.body.appendChild(app.canvas); 13 | 14 | TextureSource.defaultOptions.scaleMode = 'nearest'; 15 | const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); 16 | 17 | const logo = new Sprite({ 18 | texture, 19 | anchor: 0.5, 20 | x: app.screen.width / 2, 21 | y: app.screen.height / 2, 22 | }); 23 | 24 | logo.width = 100; 25 | logo.scale.y = logo.scale.x; 26 | logo.eventMode = 'static'; 27 | 28 | const xTo = gsap.quickTo(logo, 'x', { duration: 0.6, ease: 'power3' }); 29 | const yTo = gsap.quickTo(logo, 'y', { duration: 0.6, ease: 'power3' }); 30 | 31 | logo.on('globalpointermove', (event) => { 32 | // Use quickTo to move the logo to the pointer position 33 | xTo(event.global.x); 34 | yTo(event.global.y); 35 | }); 36 | 37 | // Add the logo to the stage 38 | app.stage.addChild(logo); 39 | })(); 40 | -------------------------------------------------------------------------------- /docs/examples/masks/demo/sprite.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 40 | -------------------------------------------------------------------------------- /docs/examples/animated-sprite/demo/animation.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 47 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/StackBlitzEmbed/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 35 | 36 | 43 | 44 | 53 | -------------------------------------------------------------------------------- /docs/examples/graphics/demo/texture-fill.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 48 | -------------------------------------------------------------------------------- /docs/examples/filters/demo/blur.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 40 | -------------------------------------------------------------------------------- /packages/nuxt/src/module.ts: -------------------------------------------------------------------------------- 1 | import { addComponent, addImports, createResolver, defineNuxtModule } from '@nuxt/kit' 2 | import * as core from 'vue3-pixi' 3 | import { compilerOptions } from 'vue3-pixi' 4 | 5 | const components = [ 6 | 'Application', 7 | 'AnimatedTransition', 8 | 'AnimatedTransitionGroup', 9 | 'AnimatedTransition', 10 | 'AnimatedTransitionGroup', 11 | 'External', 12 | 'Assets', 13 | ] 14 | 15 | export interface ModuleOptions {} 16 | 17 | export default defineNuxtModule({ 18 | meta: { name: 'vue3-pixi-nuxt' }, 19 | async setup(options, nuxt) { 20 | const resolver = createResolver(import.meta.url) 21 | for (const name of components) { 22 | addComponent({ 23 | name, 24 | filePath: 'vue3-pixi', 25 | export: name, 26 | }) 27 | } 28 | 29 | addComponent({ 30 | name: 'Application', 31 | filePath: resolver.resolve('./runtime/Application.server.vue'), 32 | mode: 'server', 33 | }) 34 | 35 | for (const name in core) { 36 | if (name.match(/^use/) || name.match(/^on[A-Z]/)) { 37 | addImports({ 38 | from: 'vue3-pixi', 39 | name, 40 | }) 41 | } 42 | } 43 | 44 | nuxt.options.build.transpile.push(/vue3-pixi/) 45 | nuxt.options.vue.compilerOptions.isCustomElement = compilerOptions.isCustomElement 46 | }, 47 | }) 48 | -------------------------------------------------------------------------------- /docs/examples/nine-slice-sprite/demo/transform_anchor.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, NineSliceSprite } from 'pixi.js'; 2 | 3 | (async () => { 4 | // Create a new application 5 | const app = new Application() 6 | 7 | // Initialize the application 8 | await app.init({ background: '#1099bb', resizeTo: window }) 9 | 10 | // Append the application canvas to the document body 11 | document.body.appendChild(app.canvas) 12 | 13 | // Load the bunny texture 14 | const texture = await Assets.load( 15 | 'https://pixijs.com/assets/nine-slice/panel-031.png', 16 | ) 17 | 18 | // Create a NineSliceSprite 19 | const bunny = new NineSliceSprite({ 20 | texture, 21 | leftWidth: 30, // Width of the left edge 22 | rightWidth: 30, // Width of the right edge 23 | topHeight: 30, // Height of the top edge 24 | bottomHeight: 30, // Height of the bottom edge 25 | 26 | anchor: 0.5, // Center the sprite's anchor point 27 | 28 | x: app.screen.width / 2, // Move the sprite to the center of the screen 29 | y: app.screen.height / 2, 30 | }) 31 | 32 | bunny.width = app.screen.width / 2 // Set the width of the sprite 33 | bunny.height = app.screen.height / 2 // Set the height of the sprite 34 | 35 | app.stage.addChild(bunny) 36 | 37 | app.ticker.add(() => { 38 | bunny.rotation += 0.01 // Rotate the sprite over time from the center 39 | }) 40 | })() 41 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | pull_request: 9 | branches: 10 | - main 11 | 12 | jobs: 13 | lint: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v4 17 | 18 | - name: Install pnpm 19 | uses: pnpm/action-setup@v2 20 | 21 | - name: Set node 22 | uses: actions/setup-node@v4 23 | with: 24 | node-version: 18.x 25 | cache: pnpm 26 | 27 | - name: Setup 28 | run: npm i -g pnpm 29 | 30 | - name: Install 31 | run: pnpm install 32 | 33 | - name: Lint 34 | run: pnpm lint 35 | 36 | test: 37 | runs-on: ubuntu-latest 38 | 39 | strategy: 40 | matrix: 41 | node: [18.x] 42 | fail-fast: false 43 | 44 | steps: 45 | - uses: actions/checkout@v4 46 | 47 | - name: Install pnpm 48 | uses: pnpm/action-setup@v2 49 | 50 | - name: Set node version to ${{ matrix.node }} 51 | uses: actions/setup-node@v4 52 | with: 53 | node-version: ${{ matrix.node }} 54 | cache: pnpm 55 | 56 | - name: Setup 57 | run: npm i -g pnpm 58 | 59 | - name: Install 60 | run: pnpm install 61 | 62 | - name: Build 63 | run: pnpm -r build 64 | 65 | # - name: Test 66 | # run: pnpm run test:run 67 | -------------------------------------------------------------------------------- /packages/core/src/components/transition/presets.ts: -------------------------------------------------------------------------------- 1 | import type { CubicBezierPoints, EasingFunction } from './types' 2 | import { linear } from './utils' 3 | 4 | const _EasePresets = { 5 | easeInSine: [0.12, 0, 0.39, 0], 6 | easeOutSine: [0.61, 1, 0.88, 1], 7 | easeInOutSine: [0.37, 0, 0.63, 1], 8 | easeInQuad: [0.11, 0, 0.5, 0], 9 | easeOutQuad: [0.5, 1, 0.89, 1], 10 | easeInOutQuad: [0.45, 0, 0.55, 1], 11 | easeInCubic: [0.32, 0, 0.67, 0], 12 | easeOutCubic: [0.33, 1, 0.68, 1], 13 | easeInOutCubic: [0.65, 0, 0.35, 1], 14 | easeInQuart: [0.5, 0, 0.75, 0], 15 | easeOutQuart: [0.25, 1, 0.5, 1], 16 | easeInOutQuart: [0.76, 0, 0.24, 1], 17 | easeInQuint: [0.64, 0, 0.78, 0], 18 | easeOutQuint: [0.22, 1, 0.36, 1], 19 | easeInOutQuint: [0.83, 0, 0.17, 1], 20 | easeInExpo: [0.7, 0, 0.84, 0], 21 | easeOutExpo: [0.16, 1, 0.3, 1], 22 | easeInOutExpo: [0.87, 0, 0.13, 1], 23 | easeInCirc: [0.55, 0, 1, 0.45], 24 | easeOutCirc: [0, 0.55, 0.45, 1], 25 | easeInOutCirc: [0.85, 0, 0.15, 1], 26 | easeInBack: [0.36, 0, 0.66, -0.56], 27 | easeOutBack: [0.34, 1.56, 0.64, 1], 28 | easeInOutBack: [0.68, -0.6, 0.32, 1.6], 29 | } as const 30 | 31 | /** 32 | * Common transitions 33 | * 34 | * @see https://easings.net 35 | */ 36 | export const EasePresets = /* #__PURE__ */ Object.assign({}, { linear }, _EasePresets) as Record & { linear: EasingFunction } 37 | -------------------------------------------------------------------------------- /docs/examples/text/demo/webfont_google.ts: -------------------------------------------------------------------------------- 1 | import { Application, Text } from 'pixi.js' 2 | 3 | // Load them google fonts before starting... 4 | window.WebFontConfig = { 5 | google: { 6 | families: ['Snippet'], 7 | }, 8 | active() { 9 | init() 10 | }, 11 | }; 12 | 13 | // include the web-font loader script 14 | (function () { 15 | const wf = document.createElement('script') 16 | wf.src = `${ 17 | document.location.protocol === 'https:' ? 'https' : 'http' 18 | }://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js` 19 | wf.type = 'text/javascript' 20 | wf.async = 'true' 21 | const s = document.getElementsByTagName('script')[0] 22 | s.parentNode.insertBefore(wf, s) 23 | })() 24 | /* eslint-enabled */ 25 | 26 | async function init() { 27 | // Create a new application 28 | const app = new Application() 29 | 30 | // Initialize the application 31 | await app.init({ background: '#1099bb', resizeTo: window }) 32 | 33 | // Append the application canvas to the document body 34 | document.body.appendChild(app.canvas) 35 | 36 | // create some white text using the Snippet webfont 37 | const textSample = new Text( 38 | 'PixiJS text using the\ncustom "Snippet" Webfont', 39 | { 40 | fontFamily: 'Snippet', 41 | fontSize: 50, 42 | fill: 'white', 43 | align: 'left', 44 | }, 45 | ) 46 | textSample.position.set(50, 200) 47 | app.stage.addChild(textSample) 48 | } 49 | -------------------------------------------------------------------------------- /docs/examples/three/demo/basic_integration.ts: -------------------------------------------------------------------------------- 1 | import { Application, Text } from 'pixi.js' 2 | 3 | // Load them google fonts before starting... 4 | window.WebFontConfig = { 5 | google: { 6 | families: ['Snippet'], 7 | }, 8 | active() { 9 | init() 10 | }, 11 | }; 12 | 13 | // include the web-font loader script 14 | (function () { 15 | const wf = document.createElement('script') 16 | wf.src = `${ 17 | document.location.protocol === 'https:' ? 'https' : 'http' 18 | }://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js` 19 | wf.type = 'text/javascript' 20 | wf.async = 'true' 21 | const s = document.getElementsByTagName('script')[0] 22 | s.parentNode.insertBefore(wf, s) 23 | })() 24 | /* eslint-enabled */ 25 | 26 | async function init() { 27 | // Create a new application 28 | const app = new Application() 29 | 30 | // Initialize the application 31 | await app.init({ background: '#1099bb', resizeTo: window }) 32 | 33 | // Append the application canvas to the document body 34 | document.body.appendChild(app.canvas) 35 | 36 | // create some white text using the Snippet webfont 37 | const textSample = new Text( 38 | 'PixiJS text using the\ncustom "Snippet" Webfont', 39 | { 40 | fontFamily: 'Snippet', 41 | fontSize: 50, 42 | fill: 'white', 43 | align: 'left', 44 | }, 45 | ) 46 | textSample.position.set(50, 200) 47 | app.stage.addChild(textSample) 48 | } 49 | -------------------------------------------------------------------------------- /docs/examples/mesh/demo/custom_texture_uv.ts: -------------------------------------------------------------------------------- 1 | import { Application, Assets, Geometry, Mesh, Shader } from 'pixi.js' 2 | import fragment from './triangleTextured.frag' 3 | import vertex from './triangleTextured.vert'; 4 | 5 | (async () => { 6 | const texture = await Assets.load( 7 | 'https://pixijs.com/assets/bg_scene_rotate.jpg', 8 | ) 9 | 10 | // Create a new application 11 | const app = new Application() 12 | 13 | // Initialize the application 14 | await app.init({ 15 | resizeTo: window, 16 | preference: 'webgl', 17 | }) 18 | 19 | // Append the application canvas to the document body 20 | document.body.appendChild(app.canvas) 21 | 22 | const geometry = new Geometry({ 23 | attributes: { 24 | aPosition: [ 25 | -100, 26 | -100, // x, y 27 | 100, 28 | -100, // x, y 29 | 100, 30 | 100, 31 | ], // x, y,, 32 | aColor: [1, 0, 0, 0, 1, 0, 0, 0, 1], 33 | aUV: [0, 0, 1, 0, 1, 1], 34 | }, 35 | }) 36 | 37 | const shader = Shader.from({ 38 | gl: { 39 | vertex, 40 | fragment, 41 | }, 42 | resources: { 43 | uTexture: texture.source, 44 | }, 45 | }) 46 | 47 | const triangle = new Mesh({ 48 | geometry, 49 | shader, 50 | }) 51 | 52 | triangle.position.set(400, 300) 53 | 54 | app.stage.addChild(triangle) 55 | 56 | app.ticker.add(() => { 57 | triangle.rotation += 0.01 58 | }) 59 | })() 60 | --------------------------------------------------------------------------------