MetsuOS

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

Carga y gestión de imágenes y texturas (PixiJS) 🔴②

Imagenes y Texturas en PixiJS

WIP: Revisando Fuentes

PixiJS es una biblioteca de renderizado 2D en JavaScript que brilla por su habilidad para manejar gráficos interactivos con un rendimiento excepcional. En el corazón del desarrollo de juegos y aplicaciones visuales con esta herramienta se encuentra la carga y gestión de imágenes y texturas, elementos clave que sirven de base para sprites, mallas y otros objetos que se renderizan en pantalla.

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. Todo esto se inspira en la documentación oficial de PixiJS versión 8.x, adaptado al entorno de MetsuOS, donde damos prioridad a configuraciones vanilla con HTML y JS puro en producción, sin dependencias como Node.js durante la ejecución.

Introducción a las Texturas en PixiJS

Las texturas en PixiJS son piezas fundamentales en el proceso de renderizado. Ellas definen el contenido visual que se aplica a objetos como los Sprites (para imágenes sencillas) o las Meshes (para gráficos más elaborados). El sistema de texturas gira en torno a dos clases principales:

El flujo habitual en su ciclo de vida es el siguiente:

Archivo de origen (imagen o vídeo) → TextureSource → Texture → Objeto visual (por ejemplo, un Sprite).

Estas texturas aprovechan WebGL para un renderizado rápido y fluido, con un respaldo a Canvas en caso de que WebGL no esté disponible. En el contexto de MetsuOS, esto resulta perfecto para entornos compatibles con tecnología retro, ya que no exige dependencias extra en producción.

Propiedades Comunes de Texture

Propiedades Comunes de TextureSource

Puedes configurar estas propiedades al crear la textura o modificarlas dinámicamente según necesites.

Carga de Imágenes y Texturas

PixiJS emplea el singleton Assets para cargar recursos de manera asíncrona, basado en Promises, con soporte integrado para caché y parsers automáticos. Es una opción más moderna y eficiente que los loaders antiguos. Assets detecta automáticamente el tipo de archivo por su extensión y gestiona imágenes, vídeos, JSON para sprite sheets y texturas comprimidas.

Inicialización de Assets

Antes de empezar a cargar, es recomendable inicializar Assets con opciones globales, especialmente en MetsuOS para definir rutas base sin recurrir a Node.js:

import { Assets } from 'pixi.js';
await Assets.init({
  basePath: './assets/',  // Ruta base para recursos relativos
  defaultSearchParams: 'v=1.0',  // Parámetros URL por defecto (ej. para cache-busting)
  texturePreference: { resolution: 2, format: 'png' }  // Preferencias para texturas (ej. alta resolución)
});

Carga de una Sola Textura

La carga es sencilla: llama a Assets.load() con la URL. Devuelve una Promise que se resuelve con la textura cargada.

import { Assets, Sprite, Texture } from 'pixi.js';

// Carga asíncrona
const texture = await Assets.load<Texture>('assets/bunny.png');  // URL absoluta o relativa

// Crea un Sprite con la textura
const sprite = new Sprite(texture); app.stage.addChild(sprite);

Para usar alias (nombres cortos en vez de URLs largas):

await Assets.load<Texture>({ alias: 'bunny', src: 'assets/bunny.png' });
const bunnyTexture = Assets.get('bunny');  // Recupera por alias

Carga de Múltiples Texturas

Puedes cargar un array de URLs o un objeto con alias. Devuelve un objeto con las texturas indexadas por URL o alias.

const textures = await Assets.load<Texture>([
  'assets/bunny.png',
  'assets/cat.png'
]);

const bunnySprite = new Sprite(textures['assets/bunny.png']);
const catSprite = new Sprite(textures['assets/cat.png']);
app.stage.addChild(bunnySprite, catSprite);

O con alias para varios:

const assetsToLoad = [
  { alias: 'bunny', src: 'assets/bunny.png' },
  { alias: 'cat', src: 'assets/cat.png' }
];
await Assets.load(assetsToLoad);
const bunny = Assets.get('bunny');

Carga en Segundo Plano (Background Loading)

Para evitar bloquear la interfaz durante cargas pesadas, usa Assets.backgroundLoad(). No espera a que termine, pero puedes verificar el progreso.

Assets.backgroundLoad(['assets/large-image.png', 'assets/another.png']);
// Más tarde, accede cuando esté listo
const texture = await Assets.load('assets/large-image.png');  // Espera si no ha terminado

Tipos de Fuentes de Datos Soportadas

PixiJS soporta una variedad de fuentes para TextureSource, adaptadas a distintos escenarios:

Tipo de TextureSource Descripción Ejemplo de uso
ImageSource HTMLImageElement, ImageBitmap, SVG, VideoFrame, etc. Imágenes estáticas: new ImageSource({ resource: myImageElement })
CanvasSource HTMLCanvasElement o OffscreenCanvas Gráficos generados dinámicamente: dibujar en canvas y usarlo como textura.
VideoSource HTMLVideoElement Texturas de vídeo: new VideoSource({ resource: myVideo, autoPlay: true, updateFPS: 30 })
BufferImageSource TypedArray o ArrayBuffer con width/height/format explícitos Datos raw de píxeles: útil para generación procedural.
CompressedSource Array de mipmaps comprimidos (Uint8Array[]) Texturas optimizadas para GPU: soporta .basis, .dds, .ktx.

Para texturas comprimidas (mejor rendimiento en móviles):

const compressedTexture = await Assets.load('assets/texture.ktx2');

Gestión y Optimización de Texturas

Caché y Reutilización

Assets cachea automáticamente por URL o alias. Las cargas repetidas devuelven la misma instancia, lo que ahorra ancho de banda y memoria.

const tex1 = await Assets.load('bunny.png');
const tex2 = await Assets.load('bunny.png');
console.log(tex1 === tex2);  // true

Descarga y Destrucción

Para liberar memoria (esencial en MetsuOS para entornos con recursos limitados):

Ejemplo:

await Assets.load('temp.png');
const tempTexture = Assets.get('temp.png');
// Usar...
await Assets.unload('temp.png');  // Libera completamente

Preparación de Texturas (Plugin Prepare)

Para evitar picos de lag al subir muchas texturas a la GPU, usa el plugin Prepare para precargar.

import { PrepareSystem } from 'pixi.js';  // Asegúrate de importar si es necesario
app.renderer.addSystem(PrepareSystem, 'prepare');  // Agrega al renderer

// Prepara texturas antes de mostrar
await app.renderer.prepare.upload([texture1, texture2]);

Creación Manual de Texturas

Si prefieres no usar Assets (por ejemplo, para generación dinámica en MetsuOS vanilla):

const myImage = new Image();
myImage.src = 'assets/bunny.png';
myImage.onload = () => {
  const source = new TextureSource({ resource: myImage });
  const texture = new Texture({ source, frame: new Rectangle(0, 0, 100, 100) });  // Sub-región opcional
  const sprite = new Sprite(texture);
};

Para texturas dinámicas (actualizaciones en tiempo de ejecución):

const texture = new Texture({ source: mySource, dynamic: true });
texture.frame = new Rectangle(10, 10, 50, 50);  // Modifica dinámicamente

Manejo de Errores

Assets gestiona errores mediante Promises. Usa try-catch o .catch():

try {
  const texture = await Assets.load('invalid.png');
} catch (error) {
  console.error('Error cargando textura:', error);
  // Fallback: usa una textura placeholder
  const fallback = Texture.EMPTY;  // Textura vacía predeterminada de PixiJS
}

Si una carga falla, Texture.from() crea una textura válida de 1x1 píxel por defecto.

La app de prueba

Un ejemplo cargando texturas de MetsuOS
**

Referencias Bibliográficas que Apoyan el Contenido

WIP: Revisando Fuentes

Referencias Bibliográficas que Refutan el Contenido

WIP: Revisando Fuentes

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