pixice

PixiJS: el motor de creación HTML5

Este proyecto tiene como objetivo proporcionar una biblioteca 2D rápida y liviana que funcione en todos los dispositivos. El renderizador PixiJS permite a todos disfrutar del poder de la aceleración de hardware sin conocimientos previos de WebGL. Además, es rápido. Realmente rápido.

Si desea mantenerse actualizado con las últimas novedades de PixiJS, no dude en seguirnos en Twitter @PixiJS y lo mantendremos informado. ¡También puede volver a consultar nuestro sitio, ya que cualquier avance se publicará allí también!

Ahora somos parte del Open Collective y con tu apoyo puedes ayudarnos a hacer PixiJS aún mejor. Para hacer una donación, simplemente haz clic en el botón a continuación y ¡te amaremos por siempre!

Para qué usar PixiJS y cuándo usarlo

PixiJS es una biblioteca de renderizado que le permitirá crear gráficos ricos e interactivos y aplicaciones y juegos multiplataforma sin tener que sumergirse en la API WebGL ni lidiar con la compatibilidad del navegador y el dispositivo.

PixiJS es compatible con WebGPU con soporte alternativo para WebGL. Como biblioteca, PixiJS es una herramienta fantástica para crear contenido interactivo. Úselo para sus sitios web, aplicaciones y juegos HTML5 interactivos y ricos en gráficos. La compatibilidad multiplataforma lista para usar y la degradación elegante significan que tienes menos trabajo que hacer y más diversión al hacerlo. Si desea crear experiencias pulidas y refinadas con relativa rapidez sin profundizar en código denso y de bajo nivel, y al mismo tiempo evitar los dolores de cabeza de las inconsistencias del navegador, ¡rocíe su próximo proyecto con un poco de magia de PixiJS!

¡Impulsa tu desarrollo y siéntete libre de usar tu imaginación!

Características actuales

• Renderizador WebGL (con procesamiento por lotes inteligente automático, lo que permite un rendimiento REALMENTE rápido)

• Renderizador WebGPU (¡nuevo en los navegadores más recientes!)

• Renderizador de lienzos (¡el más rápido de la ciudad!)

• Gráfico de escena completo

• API súper fácil de usar (similar a la API de lista de visualización flash)

• Soporte para atlas de texturas.

• Cargador de activos/cargador de hojas de sprites

• Detectar automáticamente qué renderizador se debe utilizar

• Ratón completo e interacción multitáctil

• Texto

• Texto de fuente de mapa de bits

• Texto multilínea

• Renderizar textura

• Dibujo Primitivo

• enmascaramiento

• Filtros

• Complementos compatibles con la comunidad

• Reaccionar

• Columna vertebral

• Filtros

• Animar

• Luces

• interfaz de usuario

• Disposición

• GIF

• ¡Y más!

Configuración

¡Es fácil comenzar con PixiJS! ¡Simplemente descargue una compilación prediseñadas!

Alternativamente, PixiJS se puede instalar con npm o simplemente usando una URL de red de entrega de contenido (CDN) para incrustar PixiJS directamente en su página HTML.

Instalación de NPM

 npm instala pixi.js

No hay exportación predeterminada. La forma correcta de importar PixiJS es:

 importar * como PIXI desde 'pixi.js';

Instalación de CDN

A través de jsDelivr:

O mediante unpkg:

Ejemplo de uso básico

 import {Aplicación, Sprite, Activos} de 'pixi.js';// La aplicación creará un renderizador usando WebGL, si es posible,// con un respaldo a un renderizado de lienzo. También configurará el ticker// y la etapa raíz PIXI.Containerconst app = new Application();// Espere a que el renderizador esté disponibleawait app.init();// La aplicación creará un elemento de lienzo para usted que // luego podemos insertar en DOMdocument.body.appendChild(app.canvas);// cargar la textura que necesitamosconst textura = await Assets.load('bunny.png');// Esto crea una textura a partir de un 'conejito. png' imageconst bunny = new Sprite(texture);// Configura la posición de bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// Gira alrededor del centerbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// Agrega el conejito a la escena que estamos construyendoapp.stage.addChild(bunny);// Escucha las actualizaciones del cuadroapp.ticker.add(() => { // en cada cuadro hacemos girar el conejito un poco bunny.rotation += 0.01;});

Aprender

• Sitio web: Obtenga más información sobre PixiJS en el sitio web oficial.

• Empezando:

• Consulte la guía de introducción.

• Además, consulte los tutoriales de PixiJS de @miltoncandelero dirigidos a videojuegos con recetas y mejores prácticas aquí.

• Ejemplos: ¡Quédese atrapado y juegue con el código y las funciones de PixiJS aquí mismo!

• Documentación de la API: conozca la API de PixiJS consultando los documentos.

• Guía: Guías de uso complementarias de la documentación API aquí.

Población

• Demostración de filtros

• Demostración de conejito

• Demostración de enmascaramiento

• Demostración de interacción

• Más ejemplos

Comunidad

• Foros: consulte las discusiones y Stackoverflow, ambos lugares amigables para hacer sus preguntas sobre PixiJS.

• Chat: puedes unirte a nosotros en Discord para charlar sobre PixiJS.

como construir

Tenga en cuenta que para la mayoría de los usuarios no es necesario crear este proyecto. Si todo lo que desea es utilizar PixiJS, simplemente descargue una de nuestras versiones prediseñadas. El único momento en el que deberías necesitar construir PixiJS es si lo estás desarrollando.

Si aún no tiene Node.js y NPM, instálelos. Luego, en la carpeta donde clonaste el repositorio, instala las dependencias de compilación usando npm:

 instalación npm

Luego, para construir la fuente, ejecute:

 npm ejecutar compilación

Cómo generar la documentación.

Los documentos se pueden generar usando npm:

 npm ejecutar documentos

Contribuir

¿Quieres ser parte del proyecto PixiJS? ¡Excelente! ¡Todos son bienvenidos! Juntos llegaremos más rápido :) Ya sea que encuentres un error, tengas una solicitud de función excelente o te apetezca ser dueño de una tarea de la hoja de ruta anterior, no dudes en ponerte en contacto.

Asegúrese de leer la Guía de contribución antes de enviar cambios.

Licencia

Este contenido se publica bajo la licencia MIT.