MetsuOS

Construyendo la plena inclusión a través del videojuego

Dibujando formas básicas y gráficos (PixiJS) 🟡③

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

Podeis encontrar los ejemplos del curso en este repositorio de Github 🌐🟡③

Dibujando formas básicas con PIXI.Graphics

La clase PIXI.Graphics es ideal para crear formas primitivas como líneas, rectángulos, círculos o polígonos. Aquí tienes ejemplos prácticos para que los pongas en marcha.

Como ya hemos instalado y configurado nuestra base de trabajo, este código lo crearemos directamente en nuestra aplicacion main.ts

Dibujar un rectángulo

Dibujamos un rectángulo rojo en la posición (50, 50) con un tamaño de 100x80 píxeles.

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000, 1); // Relleno rojo, opacidad completa
graphics.drawRect(50, 50, 100, 80); // Posición (x, y), ancho, alto
graphics.endFill();
app.stage.addChild(graphics);

Dibujar un círculo

Creamos un círculo verde centrado en (200, 200) con un radio de 50 píxeles.

const graphics = new PIXI.Graphics();
graphics.beginFill(0x00ff00); // Relleno verde
graphics.drawCircle(200, 200, 50); // Centro (x, y), radio
graphics.endFill();
app.stage.addChild(graphics);

Dibujar una línea

Trazamos una línea azul de 4 píxeles de grosor desde (300, 50) hasta (400, 150).

const graphics = new PIXI.Graphics();
graphics.lineStyle(4, 0x0000ff, 1); // Grosor, color azul, opacidad
graphics.moveTo(300, 50); // Punto inicial
graphics.lineTo(400, 150); // Punto final
app.stage.addChild(graphics);

Dibujar un polígono

Dibujamos un triángulo amarillo definido por tres vértices.

const graphics = new PIXI.Graphics();
graphics.beginFill(0xffff00); // Relleno amarillo
graphics.drawPolygon([500, 50, 550, 150, 450, 150]); // Vértices del triángulo
graphics.endFill();
app.stage.addChild(graphics);

Combinando formas en un solo objeto Graphics

Para mejorar el rendimiento, puedes dibujar varias formas en un único objeto PIXI.Graphics.

const graphics = new PIXI.Graphics();

// Rectángulo
graphics.beginFill(0xff0000);
graphics.drawRect(50, 50, 100, 80);
graphics.endFill();

// Círculo
graphics.beginFill(0x00ff00);
graphics.drawCircle(200, 200, 50);
graphics.endFill();

// Línea
graphics.lineStyle(4, 0x0000ff);
graphics.moveTo(300, 50);
graphics.lineTo(400, 150);

// Polígono
graphics.beginFill(0xffff00);
graphics.drawPolygon([500, 50, 550, 150, 450, 150]);
graphics.endFill();

app.stage.addChild(graphics);

Animando formas básicas

Puedes animar gráficos con el bucle app.ticker. Aquí, un círculo se mueve hacia la derecha y vuelve al inicio al salir del lienzo.

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawCircle(0, 0, 30);
graphics.endFill();
app.stage.addChild(graphics);

// Posición inicial
graphics.x = 100;
graphics.y = 100;

// Animación
app.ticker.add(() => {
    graphics.x += 2; // Mover a la derecha
    if (graphics.x > app.screen.width) graphics.x = 0; // Reiniciar
});

Añadiendo interactividad

Hacemos un rectángulo que cambia de color al hacer clic.

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();

// Habilitar interactividad
graphics.interactive = true;
graphics.cursor = 'pointer'; // Use cursor instead of buttonMode
graphics.on('pointerdown', () => {
    graphics.clear();
    graphics.beginFill(0x00ff00); // Cambiar a verde
    graphics.drawRect(50, 50, 100, 100);
    graphics.endFill();
});

app.stage.addChild(graphics);

El ejemplo en acción

Con la tonteria, y siendo que he implementado lo descrito en un solo ejemplo a mi propio estilo (lo teneis en GitHub), tenemos ya nuestro primer juego (no accesible, no se puede jugar a ciegas, con dificultades motoras, tampoco), pero un juego (mierdijuego) al fin y al cabo :)

Instrucciones: pulse el circulo azul en movimiento para que sea verde, vuelva a pulsar para que retorne al azul ... ¿alguien necesita POKEs? xDD

Hale pues ya está, hasta aquí el curso... no no no jajajjaaj acabamos de empezar, ¡veamos donde nos lleva la madriguera de conejos!

Como ex-maquetador web (tengo unos años me ha dado tiempo a hacer reroll bastantes veces), me chirria el tema del "responsive" dentro del canvas, pero eso creo que tendré que investigarlo a fondo por si existe algo hecho, o acabar implementarndolo personalmente.

Consejos prácticos para gráficos en PixiJS

Referencias bibliográficas

Fuentes que apoyan el contenido

Fuentes que refutan o matizan el contenido

One More Thing

Un escenario de retrocomputación del siglo 24

¡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

Logo 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?

Sobre la categorización de los tipos de conocimiento

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:

Cuando hablamos de un contenido que incluye un texto que hace referencia a otro.

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