@jjlmoya/utils-games-development 1.55.0 → 1.56.0

package/src/tool/pixelArtPaletteSwapper/i18n/es.ts

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'cambiador-paleta-pixel-art',
+  title: 'Cambiador de Paleta para Pixel Art',
+  description: 'Reduce sprites y hojas de sprites a paletas clásicas de consola o a un conjunto personalizado de colores hexadecimales directamente en tu navegador.',
+  ui: {
+    uploadTitle: 'Arrastra un sprite o hoja de sprites',
+    uploadHint: 'Los archivos PNG, JPEG o WebP se procesan en tu dispositivo',
+    chooseImage: 'Elegir imagen',
+    replaceImage: 'Reemplazar imagen',
+    paletteTitle: 'Elegir paleta',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'Inspirada en NES',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Colores personalizados',
+    customPaletteHint: 'Separa los valores hexadecimales con comas, espacios o saltos de línea.',
+    applyCustomPalette: 'Aplicar paleta',
+    resetCustomPalette: 'Restablecer',
+    sourcePreview: 'Original',
+    resultPreview: 'Resultado limitado',
+    waitingForImage: 'Esperando una imagen',
+    uploadToPreview: 'Sube una imagen para previsualizarla',
+    resultEmpty: 'Tus versiones original y con paleta limitada aparecerán lado a lado.',
+    downloadPng: 'Descargar PNG',
+    downloadDisabled: 'Sube una imagen para habilitar la exportación.',
+    colorCount: 'Colores de origen',
+    mappedCount: 'Colores usados',
+    imageSize: 'Tamaño de imagen',
+    paletteCount: 'colores de paleta',
+    preserveAlpha: 'Conservar transparencia',
+    zoomLabel: 'Zoom',
+    processing: 'Mapeando píxeles',
+    invalidPalette: 'Añade al menos un color hexadecimal válido',
+    invalidImage: 'Elige una imagen PNG, JPEG o WebP',
+    readyStatus: 'Listo',
+    dropActive: 'Suelta para cargar',
+    mappedSummary: 'Se han mapeado {source} colores de origen a {mapped} colores de la paleta',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Convierte un Sprite a Todo Color en una Paleta Retro Deliberada',
+    },
+    {
+      type: 'paragraph',
+      html: 'Una paleta limitada es mucho más que una restricción técnica. Otorga al sprite un vocabulario de color coherente, ayuda a que los elementos de una escena encajen visualmente y evoca el carácter de una consola o plataforma clásica. Este cambiador de paletas para navegador te permite comparar la imagen original con una versión reducida mientras experimentas con paletas de Game Boy, inspiradas en NES, PICO-8, Commodore 64, DawnBringer 16 y listas personalizadas.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Cómo Funciona el Mapeo al Color Más Cercano',
+    },
+    {
+      type: 'paragraph',
+      html: 'La herramienta lee los canales rojo, verde y azul de cada píxel visible y compara ese color con cada color de la paleta seleccionada. Selecciona la entrada de la paleta con la distancia RGB al cuadrado más pequeña y escribe el color de reemplazo en un nuevo búfer de lienzo. El canal alfa se mantiene independiente para preservar la transparencia original y conservar la opacidad de los bordes suavemente cuando la opción Conservar transparencia está activa.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Limitación de paleta',
+          description: 'Cada color de origen se reemplaza por la muestra disponible más cercana.',
+          points: [
+            'Rápido y predecible para sprites, iconos, baldosas e interfaces',
+            'Conserva las dimensiones y posiciones de los píxeles originales',
+            'Facilita la revisión de un presupuesto de color determinado',
+          ],
+        },
+        {
+          title: 'Cambio de paleta (Palette Swapping)',
+          description: 'La misma imagen se puede remapear a otro conjunto de colores cuidadosamente elegido.',
+          points: [
+            'Útil para trajes alternativos, biomas y estados de daño',
+            'Las listas hexadecimales personalizadas permiten adaptarse a tu dirección artística',
+            'El PNG descargado queda listo para volver a importarse en tu editor',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Cómo Elegir una Paleta para Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Paleta', 'Colores', 'Uso recomendado', 'Aspectos a vigilar'],
+      rows: [
+        ['Game Boy', '4', 'Estilo monocromo portátil y estudios de volumen', 'El rango reducido puede fusionar materiales de tono similar'],
+        ['Inspirada en NES', '16', 'Sprites estilo arcade, personajes y baldosas', 'Los colores muy brillantes pueden eclipsar detalles pequeños'],
+        ['PICO-8', '16', 'Pixel art moderno con acentos saturados', 'Los tonos muy saturados requieren un contraste intencionado'],
+        ['Commodore 64', '16', 'Escenas retro suaves y estética de ordenador', 'El bajo contraste se beneficia de siluetas bien definidas'],
+        ['DawnBringer 16', '16', 'Paleta artesanal versátil para uso general', 'Las rampas de color siguen exigiendo una dirección de luz clara'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Flujo de Trabajo Práctico para Hojas de Sprites',
+    },
+    {
+      type: 'paragraph',
+      html: 'Comienza con la imagen de origen más grande que edites cómodamente y sube aquí el sprite o hoja exportada. Selecciona un preajuste para definir una dirección visual o pega tu propia lista de colores hexadecimales. Inspecciona ambos lienzos a mayor zoom para comprobar si se han perdido detalles en los rostros, contornos o luces clave. Si el resultado parece apagado o confuso, prueba una paleta con saltos de valor más marcados o añade un color de acento deliberado a la lista personalizada.',
+    },
+    {
+      type: 'tip',
+      title: 'Mantén la paleta intencionada',
+      html: 'Una lista de colores más extensa no es automáticamente mejor. Comienza con cuatro a dieciseis colores, asigna una función a cada tono y reserva los brillos máximos para puntos de interés visual. El algoritmo del color más cercano preserva las posiciones de los píxeles, pero no puede decidir qué colores deben estructurar la jerarquía visual de tu sprite.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Lista de Comprobación para Exportar Pixel Art',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Antes de importar el PNG resultante',
+      html: 'Revisa el resultado al 100% y a la escala final del juego, confirma que los bordes transparentes sigan limpios, verifica que las siluetas importantes sigan siendo legibles y conserva la imagen de origen junto con el archivo exportado para poder ajustar la paleta sin empezar desde cero.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Cuantización de color',
+          definition: 'Proceso de reducir un conjunto amplio de colores a uno más reducido y definido.',
+        },
+        {
+          term: 'Rampa de paleta',
+          definition: 'Secuencia ordenada de tonos oscuros, medios y claros para sombrear un material o superficie.',
+        },
+        {
+          term: 'Paleta indexada',
+          definition: 'Tabla de color compacta donde los píxeles hacen referencia a un índice en lugar de almacenar valores de color completos.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: '¿El cambiador de paletas sube mi imagen a algún servidor?',
+      answer: 'No. La imagen se decodifica en un lienzo dentro de tu navegador, se procesa localmente con JavaScript y se exporta directamente como un archivo PNG. La utilidad no tiene ningún paso de carga externa.',
+    },
+    {
+      question: '¿Puedo utilizar mi propia paleta de colores?',
+      answer: 'Sí. Pega valores hexadecimales de 6 o 3 dígitos en el campo de Colores personalizados, separados por comas, espacios o saltos de línea, y selecciona Aplicar paleta.',
+    },
+    {
+      question: '¿Cambia las dimensiones del sprite o hoja de sprites?',
+      answer: 'No. El archivo exportado mantiene el ancho, el alto, la posición de los píxeles y la transparencia original cuando la opción Conservar transparencia está activa.',
+    },
+    {
+      question: '¿Qué algoritmo utiliza para seleccionar los colores?',
+      answer: 'Asigna cada píxel al color más cercano de la paleta seleccionada mediante la distancia Euclídea al cuadrado en el espacio RGB. Es un método rápido, determinista y fácil de previsualizar, aunque no aplica tramado ni corrección perceptiva Lab.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Cargar un sprite',
+      text: 'Arrastra una imagen PNG, JPEG o WebP al espacio de trabajo o usa el botón Elegir imagen.',
+    },
+    {
+      name: 'Elegir una paleta',
+      text: 'Selecciona un preajuste clásico o introduce tus propios colores hexadecimales. El resultado se actualiza al instante al aplicar una paleta.',
+    },
+    {
+      name: 'Comparar y exportar',
+      text: 'Inspecciona los lienzos original y limitado, ajusta el zoom y descarga el resultado en formato PNG.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Cambiador de Paleta para Pixel Art',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '¿El cambiador de paletas sube mi imagen a algún servidor?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'No. La imagen se decodifica y se procesa localmente en el navegador, y luego se exporta directamente en formato PNG.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: '¿Puedo utilizar mi propia paleta de colores?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Sí. Pega valores hexadecimales válidos en el campo Colores personalizados y aplica la paleta.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Cómo limitar un sprite a una paleta retro',
+      step: [
+        { '@type': 'HowToStep', name: 'Cargar un sprite', text: 'Arrastra una imagen al espacio de trabajo o elígela desde tu dispositivo.' },
+        { '@type': 'HowToStep', name: 'Elegir una paleta', text: 'Selecciona un preajuste o aplica una lista personalizada de colores hexadecimales.' },
+        { '@type': 'HowToStep', name: 'Comparar y exportar', text: 'Revisa el resultado y descarga el archivo PNG resultante.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};

package/src/tool/pixelArtPaletteSwapper/i18n/fr.ts

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'changeur-palette-pixel-art',
+  title: 'Changeur de Palette Pixel Art',
+  description: 'Réduisez vos sprites et feuilles de sprites aux palettes de consoles classiques ou à un ensemble personnalisé de couleurs hexadécimales directement dans votre navigateur.',
+  ui: {
+    uploadTitle: 'Déposez un sprite ou une feuille de sprites',
+    uploadHint: 'PNG, JPEG ou WebP traités directement sur votre appareil',
+    chooseImage: 'Choisir une image',
+    replaceImage: 'Remplacer l image',
+    paletteTitle: 'Choisir une palette',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'Inspirée de la NES',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Couleurs personnalisées',
+    customPaletteHint: 'Séparez les valeurs hexadécimales par des virgules, espaces ou sauts de ligne.',
+    applyCustomPalette: 'Appliquer la palette',
+    resetCustomPalette: 'Réinitialiser',
+    sourcePreview: 'Original',
+    resultPreview: 'Résultat réduit',
+    waitingForImage: 'En attente d une image',
+    uploadToPreview: 'Importez une image pour l afficher',
+    resultEmpty: 'Vos versions originale et réduite s afficheront côte à côte.',
+    downloadPng: 'Télécharger le PNG',
+    downloadDisabled: 'Importez une image pour activer l exportation.',
+    colorCount: 'Couleurs d origine',
+    mappedCount: 'Couleurs utilisées',
+    imageSize: 'Taille de l image',
+    paletteCount: 'couleurs de palette',
+    preserveAlpha: 'Conserver la transparence',
+    zoomLabel: 'Zoom',
+    processing: 'Conversion des pixels',
+    invalidPalette: 'Ajoutez au moins une couleur hexadécimale valide',
+    invalidImage: 'Choisissez une image PNG, JPEG ou WebP',
+    readyStatus: 'Prêt',
+    dropActive: 'Relâchez pour charger',
+    mappedSummary: '{source} couleurs d origine réduites à {mapped} couleurs de palette',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Transformez un Sprite Couleur en une Palette Retro Délibérée',
+    },
+    {
+      type: 'paragraph',
+      html: 'Une palette limitée est bien plus qu une contrainte technique. Elle donne au sprite un vocabulaire de couleurs cohérent, permet aux éléments d une scène de former un tout harmonieux et évoque le caractère visuel d une console ou d une plate-forme rétro spécifique. Ce sélecteur de palette en ligne vous permet de comparer l image d origine avec sa version réduite tout en expérimentant les palettes Game Boy, NES, PICO-8, Commodore 64, DawnBringer 16 ou vos propres sélections.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Fonctionnement de la Réduction par Couleur la Plus Proche',
+    },
+    {
+      type: 'paragraph',
+      html: 'L outil analyse les canaux rouge, vert et bleu de chaque pixel visible et compare cette couleur avec chaque entrée de la palette sélectionnée. Il choisit la teinte ayant la plus petite distance RGB au carré, puis écrit la couleur de remplacement dans un nouveau tampon de canevas. Le canal alpha est traité séparément afin que les pixels transparents le restent et que les bords semi-transparents conservent leur opacité d origine lorsque l option Conserver la transparence est activée.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Réduction de palette',
+          description: 'Chaque couleur d origine est remplacée par la nuance disponible la plus proche.',
+          points: [
+            'Rapide et prévisible pour les sprites, icônes, tuiles et éléments d interface',
+            'Conserve scrupuleusement les dimensions et les positions des pixels d origine',
+            'Facilite le contrôle et la révision d un budget de couleurs prédéfini',
+          ],
+        },
+        {
+          title: 'Palette Swapping',
+          description: 'Le même visuel peut être réattribué à un autre ensemble de couleurs soigneusement choisi.',
+          points: [
+            'Utile pour créer des tenues alternatives, des variations de biomes ou des états de dégâts',
+            'Les listes hex personnalisées s adaptent parfaitement à votre propre direction artistique',
+            'Le PNG téléchargé est immédiatement prêt à être réimporté dans votre éditeur',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Choisir une Palette pour le Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Palette', 'Couleurs', 'Utilisation recommandée', 'Points d attention'],
+      rows: [
+        ['Game Boy', '4', 'Style monochrome console portable et études de valeurs', 'La faible plage de valeurs peut fusionner des matériaux proches'],
+        ['Inspirée de la NES', '16', 'Sprites arcade expressifs, personnages et tuiles', 'Les couleurs très vives peuvent écraser les détails fins'],
+        ['PICO-8', '16', 'Pixel art moderne avec des accents saturés', 'Les teintes très saturées nécessitent un contraste délibéré'],
+        ['Commodore 64', '16', 'Scènes rétro douces et esthétique micro-ordinateur', 'Le faible contraste gagne à utiliser des silhouettes claires'],
+        ['DawnBringer 16', '16', 'Palette polyvalente sélectionnée pour le pixel art général', 'Les rampes de couleurs nécessitent toujours une direction de lumière claire'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Flux de Travail Pratique pour Feuilles de Sprites',
+    },
+    {
+      type: 'paragraph',
+      html: 'Commencez par le visuel le plus grand que vous pouvez éditer confortablement, puis importez ici le sprite ou la feuille de sprites exportée. Choisissez un préréglage pour définir une direction visuelle ou collez une liste hex personnalisée. Inspectez les deux canevas à un niveau de zoom élevé pour repérer la perte de traits du visage, les contours fusionnés ou les éclats de lumière qui ne se détachent plus. Si le résultat manque de clarté, essayez une palette avec des écarts de valeur plus marqués ou ajoutez une couleur d accentuation ciblée.',
+    },
+    {
+      type: 'tip',
+      title: 'Garder une Palette Intentionnelle',
+      html: 'Une liste de couleurs plus vaste n est pas automatiquement meilleure. Commencez avec 4 à 16 couleurs, attribuez un rôle précis à chaque teinte et réservez les valeurs les plus lumineuses aux points d intérêt ou aux reflets lisibles. L algorithme de la couleur la plus proche préserve la position des pixels, mais ne peut pas décider des couleurs qui doivent structurer la hiérarchie visuelle de votre sprite.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Liste de Contrôle pour l Exportation en Pixel Art',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Avant d Importer le Fichier PNG Réduit',
+      html: 'Vérifiez le résultat à l échelle 100% ainsi qu à l échelle finale du jeu, confirmez que les contours transparents restent nets, assurez-vous de la lisibilité des silhouettes importantes et conservez le fichier source d origine à côté de l export pour ajuster la palette sans repartir de zéro.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Quantification de couleur',
+          definition: 'Le processus consistant à réduire un large ensemble de couleurs d origine à un jeu restreint et défini.',
+        },
+        {
+          term: 'Rampe de couleur',
+          definition: 'Une suite dégradée et ordonnée de teintes sombres, moyennes et claires servant à ombrer un volume ou une surface.',
+        },
+        {
+          term: 'Palette indexée',
+          definition: 'Une table de couleurs compacte dans laquelle les pixels font référence aux entrées d une liste partagée au lieu de stocker des valeurs complètes.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Mes images sont-elles envoyées sur un serveur ?',
+      answer: 'Non. L image est décodée dans votre navigateur sur un canevas, convertie localement en JavaScript et exportée directement en PNG. L outil ne comporte aucune étape de téléversement.',
+    },
+    {
+      question: 'Puis-je utiliser ma propre palette ?',
+      answer: 'Oui. Collez des codes hexadécimaux à 6 ou 3 chiffres dans le champ Couleurs personnalisées, séparés par des virgules, des espaces ou des sauts de ligne, puis choisissez Appliquer la palette.',
+    },
+    {
+      question: 'La taille de mon sprite est-elle modifiée ?',
+      answer: 'Non. Le fichier généré conserve la largeur, la hauteur, la position des pixels et les valeurs alpha d origine lorsque l option Conserver la transparence est active.',
+    },
+    {
+      question: 'Quel algorithme est utilisé ?',
+      answer: 'Chaque pixel visible est attribué à la couleur la plus proche de la palette sélectionnée selon la distance euclidienne au carré dans l espace RGB. C est une méthode rapide, déterministe et facile à prévisualiser, qui n applique aucun tramage ni correction perceptuelle Lab.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Charger un sprite',
+      text: 'Déposez un sprite ou une feuille de sprites au format PNG, JPEG ou WebP dans l espace de travail ou cliquez sur Choisir une image.',
+    },
+    {
+      name: 'Sélectionner une palette',
+      text: 'Choisissez un préréglage classique ou saisissez vos propres couleurs hexadécimales. Le résultat se met à jour immédiatement.',
+    },
+    {
+      name: 'Comparer et exporter',
+      text: 'Inspectez les canevas original et réduit, ajustez le zoom de prévisualisation et téléchargez le résultat au format PNG.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Changeur de Palette Pixel Art',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Mes images sont-elles envoyées sur un serveur ?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Non. L image est traitée localement dans le navigateur et exportée directement au format PNG.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Puis-je utiliser ma propre palette ?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Oui. Saisissez vos codes hexadécimaux et appliquez la palette.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Comment réduire un sprite à une palette rétro',
+      step: [
+        { '@type': 'HowToStep', name: 'Charger un sprite', text: 'Déposez un fichier dans l espace de travail.' },
+        { '@type': 'HowToStep', name: 'Sélectionner une palette', text: 'Choisissez un préréglage ou saisissez vos couleurs.' },
+        { '@type': 'HowToStep', name: 'Comparer et exporter', text: 'Inspectez le résultat et téléchargez le fichier PNG.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};