Editor de Skins de Minecraft

1. Introducción

Este editor produce archivos PNG de 64×64 píxeles con canal alfa (RGBA), el formato que aceptan Minecraft: Java Edition (1.8 en adelante) y Minecraft: Bedrock Edition. Puedes empezar desde una plantilla, desde cero o abriendo una skin que ya tengas.

• Edición en 3D y 2DPinta directamente sobre el personaje o sobre la textura plana, con guías de cada zona.
• Cámara libreGira, desplaza y acerca con el mouse, el teclado o gestos táctiles.
• 8 herramientasLápiz, borrador, cubeta, cuentagotas, aclarar, oscurecer, ruido y reemplazar color.
• Teoría del colorArmonías con círculo cromático, escala tonal estilo pixel art, valores HEX/RGB/HSL/OKLCH y exportación de paletas.
• Modo espejoPinta los dos lados del cuerpo a la vez, calculado geométricamente.
• Vista previa animadaMira tu personaje caminar, correr o saludar, y gíralo a tu gusto.
• CompatibilidadConvierte skins antiguas de 64×32, detecta el modelo delgado y verifica problemas antes de descargar.
• Tema claro y oscuroSigue la preferencia del sistema o elígelo manualmente.
• Guardado automáticoTu trabajo se guarda en el navegador mientras editas.

2. Inicio rápido

El editor usa módulos de JavaScript (<script type="module">). Por seguridad, los navegadores no cargan módulos si abres el archivo con doble clic (file://), así que necesitas un servidor local. Cualquiera de estas opciones funciona:

# Opción 1: Python (viene instalado en macOS y la mayoría de Linux)
cd minecraft-skins-editor
python3 -m http.server 8080

# Opción 2: Node.js
npx serve .

# Opción 3: Visual Studio Code
#   Instala la extensión "Live Server" y elige "Open with Live Server" en index.html

Luego abre http://localhost:8080 en tu navegador.

Tu primera skin en 5 pasos

1. Elige Nuevo → Desde plantilla (o Abrir para cargar tu PNG).
2. Selecciona un color en el panel Color y pinta con el Lápiz (P) sobre el modelo.
3. Gira la cámara con clic derecho y arrastrar; acerca con la rueda del mouse.
4. Cambia a la capa externa para añadir sombreros, capuchas o chaquetas con volumen.
5. Escribe un nombre y pulsa Descargar (Ctrl+S).

3. La interfaz

Cambiar el ancho del panel lateral

Acerca el mouse al borde izquierdo del panel lateral: aparece una línea de color y el cursor cambia a ↔. Arrastra para ensancharlo o angostarlo. El ancho va de 280 px a 640 px, y nunca supera el 45 % de la ventana para no tapar el lienzo. El editor recuerda el ancho que elijas; con doble clic sobre el borde vuelves al ancho original.

Con teclado: enfoca el borde con Tab y usa ← para ensanchar, → para angostar (con Mayús, pasos más grandes), Inicio / Fin para el mínimo y el máximo, y Enter para restablecer.

4. Herramientas

Todas las herramientas trabajan sobre los píxeles de la textura, por lo que se comportan igual en la vista 3D y en la 2D.

Opciones que ayudan a crear

• Tamaño del pincel ([ y ]): 1, 2 o 3 píxeles. El pincel nunca se "derrama" a otra cara de la textura.
• Espejo (M): lo que pintas en el lado derecho aparece reflejado en el izquierdo y viceversa. El píxel simétrico se resalta con un borde punteado.
• Cuadrícula (G): muestra el borde de cada píxel. Si editas la capa externa, también dibuja los píxeles vacíos para que sepas dónde pintar.
• Atenuar capa inactiva: al editar la base, la capa externa se ve semitransparente para no tapar lo que pintas.
• Colores: selector de tono/saturación/brillo, opacidad, entrada en HEX, RGB, HSL u OKLCH, paletas de piel, cabello y ropa, los colores de tu skin agrupados y los recientes. X intercambia el color principal y el secundario. Todo se detalla en Color y teoría del color.
• Acciones: copiar un lado del cuerpo sobre el otro de forma simétrica y limpiar una capa completa.

5. Color y teoría del color

Elegir y escribir colores

• Selector: cuadro de saturación y brillo, barra de tono y control de opacidad (la opacidad solo tiene sentido en la capa externa).
• Campo de color: muestra el color en el formato elegido (HEX, RGB, HSL u OKLCH) y acepta cualquiera de ellos al escribir: #F54927, rgb(245 73 39), hsl(10 91% 56%), oklch(65% 0.21 33) o un nombre CSS como tomato. El botón de al lado copia el valor.
• Valores: debajo de la opacidad verás el color en los cuatro formatos a la vez. Haz clic en cualquiera para copiarlo.
• Cuentagotas de pantalla: en Chrome y Edge aparece un botón para tomar un color de cualquier parte de la pantalla (API nativa EyeDropper). En otros navegadores el botón no se muestra.

Colores de tu skin

La paleta lee todos los píxeles visibles de la skin y los organiza en tres pasos:

1. Une los tonos casi iguales. Una textura con ruido puede tener decenas de variantes que apenas se distinguen. Se juntan en una sola muestra (la más usada) y una marca en la esquina indica que representa varios tonos. Pasa el cursor para ver cuántos píxeles y tonos agrupa.
2. Los clasifica por familia según su tono: rojos, naranjas y marrones, amarillos, verdes, turquesas, azules, morados, rosas y neutros (grises, blanco y negro). Las familias siguen el orden del círculo cromático.
3. Ordena cada familia de claro a oscuro, así cada fila funciona como una rampa de sombreado.

El control Exacto / Similares / Amplio decide cuánto se agrupa: Exacto muestra cada color distinto, Similares une diferencias casi imperceptibles y Amplio junta tonos parecidos aunque se noten.

Descargar la paleta de tu skin

El botón Paleta de la skin, arriba del panel Color (a la derecha del cuentagotas), descarga o copia todos los colores que usa tu skin, organizados por familia y con el nivel de agrupación elegido en Colores de tu skin (sin el límite de muestras de la pantalla):

Dentro de claude.ai la opción .gpl se oculta, porque ahí solo se pueden descargar algunos tipos de archivo. En tu computadora aparece normalmente.

Escala tonal

En el panel Armonías y tonos se genera una escala de 11 pasos del color principal, del más claro al más oscuro. El punto blanco o negro marca tu color. Tiene dos modos:

• Normal: solo cambia la luminosidad (en OKLCH), con un poco menos de croma en los extremos.
• Pixel art: además desplaza el tono. Las sombras tiran hacia el azul o violeta y las luces hacia el amarillo, la técnica que usan los artistas de pixel art para sombrear con más vida que solo oscurecer.

Armonías y círculo cromático interactivo

Una armonía es un grupo de colores elegidos por su posición en el círculo cromático. Se calculan girando el tono en HSL y conservando la saturación y la luminosidad del color base.

El círculo es un disco de color que puedes manipular directamente:

• El ángulo es el tono (0° arriba, en sentido horario) y la distancia al centro es la saturación: en el borde, el color más vivo; en el centro, gris.
• Arrastra cualquier punto. Si mueves el punto base (el más grande), cambias el color principal; si mueves otro punto, toda la armonía gira con él y conserva sus distancias.
• Haz clic en cualquier lugar del disco para llevar allí el punto base.
• La barra Luminosidad aclara u oscurece todos los colores; el disco se redibuja con esa luminosidad para mostrar exactamente los colores que obtendrás.
• Con teclado: enfoca el disco y usa ← / → para el tono y ↑ / ↓ para la saturación (con Mayús, pasos de 15).

Haz clic en cualquier color de la escala o de la armonía para usarlo como color principal (se conserva la opacidad actual).

Paleta aleatoria y exportar

• Paleta aleatoria elige un color base agradable (sin grises apagados ni saturación extrema) y una armonía al azar.
• Exportar armonía y escala guarda solo los colores de este panel (la armonía y la escala tonal actuales): copiar la lista HEX, copiar variables CSS, o descargar una imagen PNG, una paleta .gpl o un JSON con cada color en HEX, RGB, HSL y OKLCH. Para los colores que usa tu skin, usa Paleta de la skin en el panel Color.

6. Cámara y navegación

Vista 3D

Vista 2D

Se desplaza con clic derecho, clic central o Espacio+arrastrar, y se acerca con la rueda del mouse (el zoom se centra en el cursor). El botón de reinicio ajusta la textura a la pantalla. Las zonas grises son áreas que el juego no usa: ahí no se puede pintar.

7. Capas, partes y modelo

Capas

Cada parte del cuerpo tiene dos capas:

• Base (interna): el cuerpo en sí. En Java se dibuja siempre opaca.
• Externa: una "cáscara" ligeramente más grande (1 píxel más en la cabeza y 0,5 en el resto) para sombreros, capuchas, chaquetas, mangas o pantalones con volumen. Puede tener transparencia.

Elige qué capa editar en la barra de opciones o con C. En 3D solo se pinta sobre la capa activa; así puedes pintar la base aunque la externa esté visible.

Visibilidad por partes

En el panel Capas y partes hay dos muñecos (Base y Externa). Haz clic en una parte para ocultarla o mostrarla; por ejemplo, oculta los brazos para pintar los costados del torso. Debajo de cada muñeco, el botón Ocultar capa esconde todas las partes de esa capa de una vez (y cambia a Mostrar capa para volver a verlas). Mostrar todo hace visibles las dos capas completas, y O alterna la capa externa.

Modelo clásico y delgado

Minecraft tiene dos modelos: Clásico (brazos de 4 px, como "Steve") y Delgado (brazos de 3 px, como "Alex"). Al abrir una skin el editor detecta el modelo automáticamente. Si cambias de modelo con la opción Adaptar la textura de los brazos activada, el diseño de los brazos se reajusta para no quedar desplazado.

8. Vista previa

El panel Vista previa muestra el personaje tal como se verá en el juego: sin cuadrícula, con la base opaca y la capa externa encima.

• Arrastra para girarlo, usa la rueda para acercarte y haz doble clic para reiniciar la cámara.
• Animación: sin animación, en reposo, caminar, correr o saludar.
• Fondo: el color del tema (Predeterminado), una escena al estilo de Minecraft (Pradera de día, Atardecer, Noche estrellada, Cueva con minerales, Nether, El End), una Pantalla verde para recortar el personaje en un editor de video, o una Imagen personalizada. Las escenas se dibujan por código como pixel art, sin usar texturas del juego.
• Para usar tu propia imagen, elige Imagen personalizada… o pulsa el botón con el ícono de imagen junto al selector. La imagen se ajusta para cubrir todo el recuadro sin deformarse, se reduce a 1024 px como máximo y se guarda en tu navegador para la próxima vez (si no cabe, se usa solo en esa sesión).
• Rotación automática y Capa externa se activan o desactivan con sus interruptores.
• Debajo del personaje, a la izquierda, se recuerdan los controles; a la derecha, el botón de cámara descarga una captura PNG de la vista previa, con el fondo elegido.

9. Abrir y descargar

Formas de abrir una skin

• Botón Abrir o Ctrl+O.
• Arrastrar y soltar un PNG en cualquier parte de la ventana.
• Pegar una imagen copiada con Ctrl+V.

Descargar

Descargar (Ctrl+S) genera un PNG RGBA de 8 bits por canal y 64×64 píxeles con el nombre que escribas. El editor incluye su propio codificador y decodificador PNG (basados en CompressionStream y DecompressionStream), así que los colores y la semitransparencia se guardan y se leen exactamente, sin la pérdida de precisión que produce un <canvas>.

Guardado automático

Cada cambio se guarda en el almacenamiento local del navegador. Si cierras la pestaña, al volver se recupera tu último trabajo. Este respaldo es solo de ese navegador y puede borrarse al limpiar los datos del sitio: descarga el PNG para conservarlo.

Historial

Guarda hasta 100 pasos. Deshacer: Ctrl+Z. Rehacer: Ctrl+Y o Ctrl+Mayús+Z. Abrir un archivo, crear una skin nueva o cambiar de modelo también se puede deshacer.

10. Formato de skin de Minecraft

Una skin es una imagen PNG de 64×64 píxeles que se "envuelve" alrededor de 6 cajas (cabeza, torso, dos brazos y dos piernas), cada una con capa base y capa externa. Cada caja ocupa en la imagen una cruz desplegada con sus 6 caras.

Cómo se despliega cada caja

Para una caja de ancho w, alto h y profundidad d cuyo origen en la textura es (u, v):

          u    u+d        u+d+w      u+2d+w     u+2d+2w
     v    ┌────┬──────────┬──────────┐
          │    │  arriba  │  abajo   │
   v+d    ├────┼──────────┼──────────┼──────────┐
          │der.│  frente  │   izq.   │  atrás   │
 v+d+h    └────┴──────────┴──────────┴──────────┘

"Derecha" e "izquierda" son del personaje: al mirarlo de frente, su lado derecho queda a tu izquierda.

Coordenadas de cada parte

Reglas de transparencia

La capa externa es 0,5 px más grande que la base en torso, brazos y piernas, y 1 px más grande en la cabeza.

Formato antiguo (64×32)

Antes de Java 1.8 las skins medían 64×32: no tenían capa externa en el cuerpo y las extremidades izquierdas reutilizaban las derechas reflejadas. Al abrirlas, el editor copia en espejo cada cara del brazo y la pierna derechos hacia su lugar en la mitad inferior, y aplica el ajuste histórico de transparencia del sombrero (si esa zona es totalmente opaca, se vuelve transparente).

Detección del modelo delgado

En el modelo delgado quedan cuatro zonas sin uso junto a los brazos (50,16 2×4, 54,20 2×12, 42,48 2×4 y 46,52 2×12). Si alguno de esos píxeles es transparente, la skin se considera delgada.

Verificar compatibilidad

El botón con el escudo revisa tu skin y avisa si hay píxeles transparentes en la capa base, píxeles semitransparentes o casi invisibles en la capa externa, o píxeles pintados fuera del mapa UV (el juego los ignora).

11. Usar tu skin en el juego

Java Edition

1. Abre el Minecraft Launcher y elige Minecraft: Java Edition.
2. Entra a la pestaña Skins y pulsa Nueva skin.
3. Ponle un nombre, elige el modelo (Clásico o Delgado) y sube el PNG.
4. Pulsa Guardar y usar.

Bedrock Edition

1. En el menú principal, abre el Vestidor.
2. Ve a la pestaña de skins clásicas.
3. Selecciona Elegir nueva skin y busca tu PNG.
4. Elige el tipo de brazos cuando el juego lo pregunte.

Los nombres de los menús pueden cambiar entre versiones del juego o del launcher.

12. Conectar con un agente de IA (MCP)

El editor puede conectarse con un agente de IA para que cree o edite tu skin en vivo: le pides “hazme un caballero con armadura azul” y ves cómo pinta, cara por cara, en la vista 3D. Funciona con cualquier agente compatible con MCP (Model Context Protocol) que admita servidores por HTTP, por ejemplo Claude, ChatGPT, GitHub Copilot en VS Code, Cursor o Gemini CLI. Cada cambio del agente entra al historial, así que puedes deshacerlo con Ctrl+Z.

Preparar tu agente (una sola vez)

Pulsa el botón Agente IA del encabezado y copia la URL del servidor MCP (termina en /mcp; la oficial es https://editor-skins-mcp.vercel.app/mcp). Luego agrégala a tu agente. No hace falta clave ni inicio de sesión.

Usarlo

1. En el diálogo Conectar con un agente de IA, pulsa Conectar. Aparece un código como K7QM-X2PD-9RTA.
2. Copia el mensaje sugerido (o solo el código) y pégalo en tu agente junto con lo que quieres.
3. Mientras el agente trabaja, la barra de estado muestra su última acción ("IA: …") y el diálogo guarda un registro de actividad.
4. Pulsa Desconectar cuando termines. Si no hay órdenes en 30 minutos, el editor se desconecta solo.

Los menús de cada agente pueden cambiar entre versiones. La conexión funciona en la versión publicada del editor (GitHub Pages) y en localhost.

Qué puede hacer el agente

Cómo funciona y privacidad

Las imágenes que recibe el agente con get_skin_image usan siempre el fondo liso del tema, aunque tengas elegido otro fondo, para que pueda juzgar bien los colores.

El servidor MCP (desplegado en Vercel) no pinta nada: guarda por unos segundos las órdenes del agente en una cola; el editor las consulta, las ejecuta con su propio motor y devuelve el resultado. El código identifica tu sesión y el token secreto nunca sale de tu navegador. El servidor no guarda tus skins. En Opciones avanzadas puedes apuntar a otro servidor (por ejemplo, uno propio o local con ?bridge=http://localhost:3000).

13. Atajos de teclado

En macOS puedes usar Cmd en lugar de Ctrl. Los atajos se desactivan mientras escribes en un campo de texto.

14. Arquitectura del código

El proyecto no tiene dependencias ni paso de compilación. Está organizado por responsabilidades:

minecraft-skins-editor/
├── index.html              Estructura de la interfaz (textos vía data-i18n)
├── README.md
├── css/
│   ├── tokens.css          Variables de diseño y temas claro/oscuro
│   ├── base.css            Reinicio y estilos globales
│   ├── layout.css          Cuadrícula principal y diseño responsivo
│   └── components.css      Botones, paneles, diálogos, selector de color…
├── js/
│   ├── main.js             Punto de entrada: crea y conecta los módulos
│   ├── config.js           Constantes (tamaños, límites, claves de almacenamiento)
│   ├── core/               Lógica sin interfaz
│   │   ├── skin-model.js   Mapa UV, geometría 3D, espejo, detección de modelo
│   │   ├── skin-document.js Píxeles + historial + eventos
│   │   ├── history.js      Deshacer / rehacer
│   │   ├── skin-io.js      Leer, convertir, validar y exportar PNG
│   │   ├── png-decoder.js  Decodificador PNG exacto
│   │   ├── transforms.js   Limpiar capas, reflejar lados, adaptar brazos
│   │   ├── color-theory.js Armonías, escala tonal, paleta aleatoria, agrupar colores
│   │   ├── backgrounds.js  Fondos de la vista previa en pixel art (generados por código)
│   │   └── templates.js    Skins iniciales generadas por código
│   ├── render/             WebGL2 sin librerías
│   │   ├── math.js         Matrices y vectores
│   │   ├── camera.js       Cámara orbital (girar, desplazar, zoom)
│   │   ├── renderer.js     Shaders, texturas y dibujo del personaje
│   │   └── picking.js      Rayo → píxel bajo el cursor
│   ├── editor/             Interacción de edición
│   │   ├── editor-state.js Herramienta, colores, capa, visibilidad…
│   │   ├── tools.js        Catálogo de herramientas y controlador de trazos
│   │   ├── viewport-3d.js  Vista 3D editable
│   │   ├── viewport-2d.js  Vista 2D editable
│   │   ├── preview.js      Vista previa animada
│   │   └── shortcuts.js    Atajos de teclado
│   ├── ui/                 Componentes de interfaz
│   │   ├── toolbar.js · color-panel.js · harmony-panel.js · layers-panel.js
│   │   ├── palette-export.js  PNG, .gpl y JSON de paletas
│   │   ├── sidebar-resizer.js Borde arrastrable del panel lateral
│   │   ├── background-picker.js Selector "Fondo" e imagen personalizada
│   │   ├── agent-panel.js     Diálogo "Conectar con un agente de IA" y registro de actividad
│   │   ├── menu.js · dialogs.js · toast.js · theme.js · icons.js
│   ├── remote/             Conexión con un agente de IA (MCP)
│   │   ├── agent-bridge.js Sesión y consulta de órdenes al servidor
│   │   └── commands.js     Órdenes que el agente puede ejecutar en el editor
│   ├── i18n/
│   │   ├── i18n.js         Función t() y traducción del HTML
│   │   └── es-419.js       Textos en español latinoamericano
│   └── utils/              emitter, color (HEX/RGB/HSL/OKLCH), clipboard, storage, keyboard, gestures
├── docs/                   Esta documentación
└── tests/                  Pruebas del núcleo en el navegador

Flujo de datos

Cuando SkinDocument emite change, main.js avisa a las vistas (suben la textura a la GPU), a la paleta de colores de la skin y al autoguardado. Del mismo modo, EditorState emite change cuando cambia la herramienta, un color o la visibilidad. Ningún componente de interfaz modifica los píxeles directamente, lo que mantiene todo sincronizado y el historial siempre correcto.

Decisiones técnicas

• WebGL2 escrito a mano: el modelo son 12 cajas, así que un renderizador propio (unas 300 líneas) es más ligero que cualquier librería. El shader dibuja la cuadrícula y el resaltado del píxel usando derivadas (fwidth).
• Selección en la CPU: la intersección rayo–caja ("slab") identifica la cara y el píxel exactos sin leer la GPU.
• Un solo mapa UV: skin-model.js describe cada cara con su origen y ejes 3D. De ahí salen los vértices, el picking, las guías 2D, el espejo y el diagrama de esta página.
• Espejo geométrico: el píxel simétrico se calcula reflejando el centro 3D del píxel en X = 0. El resultado coincide exactamente con la conversión de skins 64×32 que hace el juego (se verifica en las pruebas).
• Historial por instantáneas: una skin ocupa 16 KB, así que guardar copias completas es simple y fiable.
• Accesibilidad: controles nativos, <dialog>, roles ARIA, foco visible, textos para lectores de pantalla y respeto de prefers-reduced-motion.

15. Guía para desarrolladores

Agregar una herramienta

1. En js/editor/tools.js, añade una entrada a TOOLS:

   { id: 'saturate', icon: 'lighten', key: 's', kind: 'brush', once: true }

2. Si es un pincel, define su transformación en BRUSH_OPS. Recibe el color actual y el estado, y devuelve el nuevo color:

   saturate: (c, s) => aumentarSaturacion(c, s.intensity),

3. Si es de un solo clic (kind: 'click'), implementa su acción en ToolController._click().
4. Agrega los textos en js/i18n/es-419.js: tools.saturate y tools.hints.saturate, y el atajo en help.items.

El botón aparece solo en la barra de herramientas y el atajo se registra automáticamente.

Agregar un idioma

1. Copia js/i18n/es-419.js como, por ejemplo, pt-BR.js y traduce los valores.
2. Regístralo en LOCALES dentro de js/i18n/i18n.js y llama a setLocale('pt-BR').

Agregar una animación a la vista previa

En js/editor/preview.js, añade un caso a computePose() que devuelva una matriz de rotación por parte (alrededor de su pivote) y agrega la opción en el <select id="opt-animation"> y en preview.anim de i18n.

Agregar un fondo a la vista previa

1. En js/core/backgrounds.js, agrega una función a SCENES que dibuje sobre el lienzo de 128×128 (usa block() para bloques de 8×8 con textura, sky(), grassGround(), etc.).
2. Agrega su id a BACKGROUND_IDS y GENERATED_BACKGROUNDS, y el nombre en preview.bg de i18n.

El selector se arma solo con esa lista, y las pruebas comprueban que cada fondo sea opaco y determinista.

Convenciones

• Módulos ES nativos, un archivo por responsabilidad y comentarios JSDoc en español.
• Constantes en config.js; textos visibles solo en i18n/.
• CSS con variables de tokens.css y nombres estilo BEM (.panel__header, .btn--primary).
• Todo acceso a localStorage pasa por utils/storage.js, que nunca lanza errores.

16. Navegadores compatibles

Versiones recomendadas: Chrome / Edge 111+, Firefox 121+ y Safari 16.4+ (escritorio y móvil). Las características que usa el editor son:

17. Preguntas frecuentes

Abrí index.html con doble clic y la página está vacía.

Los módulos de JavaScript no se cargan desde file://. Usa un servidor local como se explica en Inicio rápido.

Mi skin se ve con partes negras en el juego.

Probablemente hay píxeles transparentes en la capa base. Usa Verificar compatibilidad para encontrarlos y rellénalos con color.

Los brazos se ven cortados o con una franja extraña.

El modelo elegido en el juego no coincide con el de la skin. Súbela con el modelo correcto (Clásico o Delgado).

Pinto en 3D pero no pasa nada.

Revisa que la capa activa sea la que quieres y que la parte esté visible en el panel Capas y partes. En 3D solo se pinta sobre la capa activa.

¿Se sube mi skin a algún servidor?

No. Todo ocurre en tu navegador. El editor solo se comunica con un servidor si conectas un agente de IA, y aun así el servidor solo retransmite órdenes por unos segundos: nunca guarda tus skins.

Perdí mi trabajo al borrar los datos del navegador.

El guardado automático vive en el almacenamiento local. Descarga el PNG con frecuencia para tener una copia segura.

18. Referencias

• Minecraft Wiki — Skin: dimensiones, capas, modelos y reglas de transparencia.
• skinview-utils: referencia de la conversión 64×32 → 64×64 y de la detección del modelo delgado.
• Björn Ottosson — OKLab: espacio de color perceptual usado en la escala tonal, OKLCH y la agrupación de colores.
• MDN — EyeDropper API: cuentagotas de pantalla.
• W3C — Especificación PNG: bloques, filtros y compresión usados por el codificador y el decodificador.
• MDN — WebGL y MDN — Compression Streams API.

Proyecto independiente y sin afiliación con Mojang Studios ni Microsoft. "Minecraft" es una marca de sus respectivos dueños.