Un juego Pixi.js que puede jugar

Ya escribí cuándo elegiría Pixi.js frente a Three.js, y por qué un canvas en una URL de negocio es una factura, no un adorno. Luego entregué el objeto 3D que se puede orbitar. Esta página es la otra superficie: un escenario 2D que debe sostener 60 fps mientras juega. El juego encima de este párrafo es el patrón que entregaría para un drop de lanzamiento, un stand o un bucle de fidelidad: una isla, perezosa, desechable. La frase que está leyendo sigue en el documento.

Mueva la cesta. Atrape manzanas, peras, rodajas. Evite las podridas. Calma, arcade, tormenta. Ese es el trabajo comercial: unas docenas de sprites, un ticker, partículas que mueren cuando deben. Sin atlas. Sin pila de escenas de Phaser. Gráficos procedurales, un HUD en HTML, un bucle que cede cuando deja el viewport.

1. Qué está mirando de verdad

Pixi.js es un renderer 2D. Una display list, primitivas Graphics, un ticker. Las manzanas, peras y rodajas no son PNG. Son polígonos en la GPU, agrupados, girados en el bucle. El huerto detrás es un objeto Graphics — cielo, colinas, árboles — más unas nubes que derivan. Atrape una fruta y un puñado de chispas nace y muere. Ese es el trabajo en el que Pixi es fuerte: muchos objetos 2D baratos, cada frame, sin un nodo DOM por sprite.

No hay motor de física. La gravedad es un número que sumo a vy. La colisión es una caja alrededor del colector. El combo es un temporizador en el mismo tick. Phaser daría escenas, física arcade, audio. Este producto no necesitaba esa factura. Necesitaba un escenario caliente dentro de un artículo Next.js. Limito devicePixelRatio. Bajo el recuento de estrellas si hardwareConcurrency es bajo. Tormenta es más sprites, no un shader más pesado. Esa es la diferencia entre un minijuego que sobrevive al portátil de un recruiter y uno que cocina un Android de gama media en el metro.

2. La isla, no la home

En el servidor no hay WebGL. Esta página es un static export. El HTML del artículo está en el first paint. El escenario es una isla cliente: IntersectionObserver con root margin, luego un import dinámico de pixi.js, luego Application.init. Si nunca llega hasta aquí, no descarga el renderer. Si se va, el ticker salta el frame. En el unmount destruyo la application, el canvas y el contexto GPU. Navegue a otro lado en esta app y el artículo siguiente no hereda una sesión WebGL viva.

No puse esto en la home. Un hero de canvas ansioso pelea con LCP y luego roba INP. Un recruiter puede esperar un scroll. Un cliente en la URL de lanzamiento puede esperar el juego que vino a jugar. No puede esperar un escenario que bloqueó el título. El marcador, las vidas, el «otra vez» viven en HTML al lado del canvas — no pintados en una textura. Reduced motion frena el ticker y recorta las chispas; el escenario sigue jugándose, porque es una elección, no una animación.

• Texto, marcador y título en el HTML de servidor. El canvas no es superficie para el crawler.
• Arranque en intersection, no al cargar la ruta.
• Destroy en el unmount. Saltar ticks fuera de pantalla. Respetar prefers-reduced-motion.

3. Aquí Pixi.js crudo. En la app de producto, @pixi/react

En esta página cableé el renderer yo para que la isla sea un chunk y el bucle sea obvio: init, tick, destroy. En una app Next.js donde el escenario debe hablar con un carrito, un flag de campaña o una wallet, usaría @pixi/react. Misma GPU, una display list en el árbol de React, menos trampas en el unmount. El error es adoptar el wrapper para girar un círculo, o evitarlo cuando veinte sprites deben seguir a Redux. Tome el wrapper cuando el producto ya piensa en componentes.

4. Cuándo lo entregaría a un cliente

Un minijuego de marca en el drop de un producto. Un stand que debe correr en un portátil barato. Un tablero infantil, un catch de fidelidad, un rodillo de monedas que CSS no sostiene. Una mini app de Telegram que ya es un webview y no debe criar un segundo motor. No una home de marketing que debía «sentirse premium» — ese brief sigue siendo CSS y GSAP. No un SKU de joyería para orbitar: eso es Three.js. No un plataformas con niveles y un mundo físico: empiece con Phaser o un motor de juego de verdad. Si WebGL no inicia, la página sigue teniendo las reglas en HTML. El canvas es el mejor camino al juego, nunca el único.

Conclusión: juegue en la GPU, conserve el documento

Los equipos eligen Pixi.js cuando el cliente se queda porque el escenario es fluido, no porque el título sea ingenioso. Aun así deben elegir un documento: título, reglas, marcador, una frase de respaldo. Entrego esa separación como ingeniera web senior — islas Next.js, presupuesto GPU topeado, GSAP donde la página sigue siendo página. Si el brief es un escenario 2D que debe sostener 60 fps en una URL de negocio, escriba por el formulario el recuento de sprites, si es un juego de verdad o un bucle de marca, y si la misma URL debe posicionar. No empezaremos tirando un canvas a la home «para que el portfolio juegue».