Curso de PixiJS ⚫①

Aprender a desarrollar videojuegos ⚫①
Introducción a PixiJS y Gráficos Básicos
--- start-multi-column: AGD2018
Number of Columns: 2
Border: off

Qué es PixiJS y su historia
PixiJS es una potente biblioteca de renderizado 2D en JavaScript diseñada para crear gráficos y animaciones interactivas de alta calidad en navegadores web.
Reconocida por su rendimiento optimizado y facilidad de uso, PixiJS permite a los desarrolladores construir desde juegos hasta visualizaciones dinámicas con gran eficiencia.
Continuar leyendo en ... Qué es PixiJS y su historia 🟡③

Configuración del entorno de desarrollo de PixiJS
PixiJS es una biblioteca potente y ligera para crear gráficos 2D interactivos en la web, ideal para desarrollar juegos y aplicaciones visuales.
Configurar un entorno de desarrollo para PixiJS es sencillo si sigues estos pasos claros y actualizados. ¡Prepárate para dar vida a tus ideas!
Continuar leyendo en ... Configuración del entorno de desarrollo (PixiJS) 🟡③

Creación de un lienzo (canvas) en PixiJS
PixiJS es una biblioteca JavaScript versátil y potente que permite crear gráficos interactivos y experiencias visuales en la web de manera eficiente.
En este artículo, te guiaremos paso a paso para configurar un lienzo (canvas) con PixiJS, preparando el escenario para tus proyectos gráficos.
Continuar leyendo en ... Creación de un lienzo (canvas) en PixiJS 🟡③

Integrando PixiJS con MetsuOS
Incluyo este capítulo intermedio en el flujo previsto originalmente, debido al uso de node y vite en el desarrollo, lo que podría afectar a la inclusión de nuestros proyectos en un entorno vanilla puro html + js, como es MetsuOS en producción.
Aunque trataremos el tema en el capítulo sobre distribución mas adelante, exploraremos como construye PixiJS el proyecto para producciçon y como podemos hacer nuestro propio "build-mos" en que compilemos de forma que se pueda correr sin necesidad node en destino.
Continuar leyendo en ... Integrando PixiJS con MetsuOS I Ejemplo de Inico 🟡③

Dibujando formas básicas y gráficos
PixiJS es una biblioteca de JavaScript para gráficos 2D que aprovecha WebGL para un renderizado rápido y eficiente, con Canvas como alternativa si WebGL no está disponible.
Comenzaremos hoy con el dibujado de formas básicas
Continuar leyendo en ... Dibujando formas básicas y gráficos (PixiJS) 🟡③
Trabajo con Sprites y Texturas

Carga y gestion de imágenes y texturas*
En este capítulo, vamos a sumergirnos de forma exhaustiva y detallada en cómo cargar, crear, gestionar y optimizar estas imágenes y texturas en PixiJS.
Abordaremos el ciclo de vida completo de las texturas, los métodos de carga asíncrona, los tipos de fuentes de datos compatibles, las mejores prácticas para el manejo de la memoria y el rendimiento, junto con ejemplos prácticos de código.
Continuar leyendo en ... Carga y gestión de imágenes y texturas (PixiJS) 🔴②

Creación y manipuilación de sprites en PixiJS*
Vamos a sumergirnos en profundidad y de forma detallada en la creación y manipulación de sprites. PixiJS es una biblioteca de JavaScript muy potente para renderizar gráficos 2D interactivos directamente en el navegador.
Los sprites son uno de sus elementos clave, ya que permiten crear visuales dinámicos en juegos, animaciones o apps interactivas. Básicamente, un sprite es una imagen o textura que puedes posicionar, escalar, rotar y modificar a tu antojo en el escenario (stage).
Continuar leyendo en ... Creación y manipulación de sprites en PixiJS 🔴②
Interacción de Usuario y Eventos
- Captura de eventos de entrada del usuario en PixiJS 🔴②
- Implementación de interacción de usuario (clics, toques, arrastres) en PixiJS 🔴②
- Creación de botones y elementos interactivos en PixiJS 🔴②
- Gestión de eventos y detección de colisiones en PixiJS 🔴②
Accesibilidad en PixiJS
- Conceptos básicos de accesibilidad web (PixiJS)
- Directrices y estándares de accesibilidad (WCAG) en relaciçpn con PixiJS
- Haciendo juegos y aplicaciones accesibles en PixiJS
- Pruebas de accesibilidad y retroalimentación de usuarios (PixiJS)
Gestión de Escenas y Capas
- Creación y gestión de escenas en PixiJS
- Uso de capas y ordenamiento de elementos visuales en PixiJS
- Implementación de fondos parallax en PixiJS
- Transiciones suaves entre escenas en PixiJS
Efectos Visuales y Filtros
- Aplicación de efectos visuales a sprites en PixiJS
- Uso de filtros predefinidos en PixiJS
- Creación de filtros personalizados en PixiJS
- Animación de efectos y transiciones en PixiJS
Carga y Administración de Recursos Externos
- Carga de audio y video en PixiJS
- Uso de sprites de hojas de sprites (spritesheets) en PixiJS
- Optimización de la carga de recursos y gestión de memoria en PixiJS
- Precarga de recursos para una experiencia más fluida en PixiJS
Integración con Herramientas y Bibliotecas Externas
- Integración de PixiJS con frameworks como React o Angular
- Uso de bibliotecas y herramientas de desarrollo de terceros en PixiJS
- Exportación de proyectos PixiJS para su distribución en la web y dispositivos móviles
Depuración y Optimización
- Técnicas de depuración en PixiJS
- Perfil de rendimiento y optimización en PixiJS ⚫①
- Mejores prácticas para lograr un rendimiento óptimo en PixiJS ⚫①
- Pruebas y resolución de problemas comunes en PixiJS ⚫①
Proyecto Final y Desarrollo Avanzado
- Desarrollo de un proyecto completo y accesible utilizando PixiJS ⚫①
- Implementación de características avanzadas (física, partículas, etc.) en PixiJS ⚫①
- Optimización y despliegue del proyecto final en PixiJS ⚫①
- Presentación y revisión del proyecto final (PixiJS) ⚫①
One More Thing

¡Desbloquea el poder de MetsuOS y descubre que la privacidad y la seguridad son la clave para desencadenar tu verdadero potencial en línea!
Contenido registrado en Safe Creative
¡Usa el código de promocional 7ZYM4Z y ahorrate unos eurillos en tu suscripcion de Safe Creative!
MetsuOS Needs You!
Apoyanos en este proyecto difundiendolo en tus redes, o mejor, haznos una donación a la cuenta paypal para poder dedicar más tiempo y recursos a el. No olvides comentarnos que parete te interesa más junto con tu donación.
En este momento, además de mantener los servicios, estoy centrado en crear la siguiente iteración del software que me permite hacer todo esto y creando una biblioteca personal física para poder contrastar contenido.
Sobre el sistema de validez de un contenido en MetsuOS
Empezando a incorporar los niveles de validación de un contenido (también llamada sabiduría o niveles de conocimiento) ⚫🔴 🟡 🟢 🔵⚪ ¿Qué són?
- ⚫① - Dark1 - Conocimiento en Bruto. Modo Cuñao, hablo pero no puedo respaldarlo.
- 🔴② - Rojo2 - Conocimiento Impulsivo, pasional, "lo mio es lo correcto".
- 🟡③ - Yellow3 - Conocimiento Crítico: se comienza a explorar el hecho de que pueda haber otras perspectivas.
- 🟢④ - Green4 - Conocimiento Natural: Surge al comprender la naturaleza de la realidad y del ser humano en una materia.
- 🔵⑤ - Blue5 - Conocimiento Científico: Supone la suma de las fases anteriores aplicando el rigor de lo descubierto por la ciencia hasta ahora, sin caer en la -anticientífica- "opinión científica/opinión de expertos".
- ⚪⑥ - Light6 Conocimiento Consolidado: Se alcanza al integrar todo lo anterior desde una perspectiva empática y asumiendo una verdad probabilística dinámica dependiente del contexto.
Sobre la categorización de los tipos de conocimiento
- Conocimiento Gnoseológico: ⚫① 🔴② 🟡③ 🟢④
- Conocimiento Epistemológico: 🔵⑤
- Conocimiento Metsukeológico: ⚪⑥
La Metsukeología (de Metsuke vision global y logos conocimiento) es la ciencia que estudia el conocimiento como un conjunto potencial de conocimiento del que podemos obtener, procesar o percibir partes concretas dentro de un marco contextual específico, y cuyo contexto general real está muy por encima de lo que somos capaces, como especie, de percibir, procesar e integrar de forma completa (definición en progreso).
La Metsucología (de Metsu aniquilación - en este contexto en forma de colapso - , logos conocimiento) es la ciencia que estudia como extraemos verdades percibidas - colapsadas - como conocimiento desde nuestra perspectiva real (tanto epistemológico como gnoseológico) al tomar una parte específica del conocimiento metsukeológico potencial enmarcado en un contexto concreto, obligando a colapsar el conocimiento potencial en conocimiento específico (definición en progreso).
Mas sobre el contexto
DISCLAIMER: Mi consideración de anticientífico respecto al consenso científico es una hipotesis de trabajo propia, que supone que toda asignación de validez, incluso aquella derivada de la conclusión por acumulación de evidencia NO debe ser supeditada a debate, ni acuerdo, debe ser algo probabilistico sin intervención del ego humano. Podría estar equivocado y, en este punto, es donde se aplicaría entonces ese mismo consenso que ahora considero no valido (incluso dañino)
Existen indicadores para algunas cuestiones adicoinales como los siguientes:
- 🌐 - Contenido Externo sobre cuya validez/validación no tenemos control (usualmente enlaces que salen de #MetsuOS)
- ⚖️ - Analisis
- ⚖️📚 - Análisis Bibligráfico
- ⚖️🔬 - Análisis Científico
- ⚖️🏛️ - Análisis Estructural
- ⚖️🧠 - Análisis Filosófico
- 📖 - Referencia
- 📖📚 - Referencia Bibliográfica / Libro
- 📖🔬- Referencia Científica / Paper
- 📖🏛️ - Referencia Estructural
- 📖🧠 - Referencia Filosófica
- 🔍️- Paradigma
Cuando hablamos de un contenido que incluye un texto que hace referencia a otro.
- 🔴②-🌐🟡③ - Nivel del contenido del documento Rojo2, nivel del contenido externo del que habla el documento Yellow3.
- 🔴②-⚖️📚 🔴② - Nivel del contenido del documento Rojo2, en base a análisis bibliográfico nivel Rojo2
También aplicaremos el Sistema de fiabilidad de fuentes y credibilidad de contenidos de la OTAN 🔴②, este sistema incluye una valoración de la fiabilidad de la fuente de A a F (siendo A la de mayor fiabilidad) y una varloración de credibilidad del contenido de 1 a 6 (siendo 1 la mayor credibilidad).
En MetsuOS la agregaremos al final uniendo amos valores como si fuera una coordenada. Por ejemplo: ⚫①-D4 o 🟡③-B2. Esto ayudarña a contextualizar la información sobre la solidez del conocimiento al que se hace referencia en cada momento.
Hay que tener en cuenta que, cuando hay elementos subjetivos o parcialmente subjetivos, el punto de referencia seré yo mismo. Quizá más adelante pueda objetivizar esto más (seria lo deseable), pero en tanto no tenga herramientas que me lo permitan, debo ceñirme al principio de honestidar intelectual, y esperar que mis sesgos dañen lo menos posible la información (en parte este es el nudo gordiano que pretendo resolver, y por ello es dificil resolverlo a priori).
Así de forma resumida, podríamos decir que esta definición es nivel 🔴② (Rojo2 xD) ¿Crees que me dejo algo? Si es así por favor ayudame a mejorarlo contactándome a través de X (Twitter) en mi cuenta, @metsuke 🌐
Consulta la versión completa de la descripcion en ⚫🔴🟡🟢🔵⚪ (🔴②) Un poco más de detalle
- Información IA: Generado asistido por IA (gpt-3.5-turbo,Grok 3, Raul Carrillo aka metsuke). Supervisado por Humano.
- Ultima Modificación: 2025-10-04 03:05:54.634000+00:00
- Versión Documento: 0.4.122