MetsuOS

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

Implementación de interacción de usuario (clics, toques, arrastres) en PixiJS 🔴②

Curso de PixiJS ⚫①

En PixiJS, la implementación de interacciones de usuario como clics, toques y arrastres es fundamental para crear experiencias de usuario interactivas y atractivas. En este artículo, te mostraremos cómo implementar estas interacciones de manera sencilla y efectiva.

Manejo de clics

Para manejar clics en objetos visuales, debes crear los elementos visuales usando las clases proporcionadas por PixiJS, como PIXI.Sprite o PIXI.Graphics. Luego, puedes agregar un evento de clic a estos elementos visuales usando el método on y especificando el evento 'click' y la función que manejará ese clic.

// Crear un sprite
const sprite = PIXI.Sprite.from('imagen.png');
sprite.interactive = true; // Esto es importante para habilitar la interactividad
sprite.buttonMode = true; // Cambia el cursor cuando se coloca sobre el sprite

// Manejar el evento de clic
sprite.on('click', () => {
    console.log('Haz hecho clic en el sprite');
});

// Agregar el sprite al escenario
app.stage.addChild(sprite);

Manejo de toques (táctil)

Para manejar toques en dispositivos táctiles, puedes usar el evento 'touchstart' en lugar de 'click'. Es importante tener en cuenta que para que los elementos sean interactivos en dispositivos táctiles, debes establecer la propiedad interactive en true.

sprite.on('touchstart', () => {
    console.log('Has tocado el sprite');
});

Manejo de arrastre

PixiJS también admite la funcionalidad de arrastre de objetos visuales. Para habilitar el arrastre, establece la propiedad draggable en true.

sprite.interactive = true;
sprite.buttonMode = true;
sprite.draggable = true;

sprite.on('pointerdown', (event) => {
    // Guardar la posición inicial del mouse
    event.currentTarget.data = event.data;
    event.currentTarget.alpha = 0.5; // Cambiar la opacidad del objeto al inicio del arrastre
});

sprite.on('pointermove', (event) => {
    if (event.currentTarget.draggable && event.currentTarget.data) {
        const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
        event.currentTarget.position.set(newPosition.x, newPosition.y);
    }
});

sprite.on('pointerup', (event) => {
    event.currentTarget.alpha = 1; // Restaurar la opacidad del objeto al final del arrastre
    event.currentTarget.data = null;
});

Ventajas de la implementación de interacciones de usuario en PixiJS

La implementación de interacciones de usuario en PixiJS ofrece varias ventajas, como:

Referencias bibliográficas

Referencias que refutan

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