@jjlmoya/utils-games-development 1.55.0 → 1.56.0

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

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-tauscher',
+  title: 'Pixel Art Palette Tauscher',
+  description: 'Reduzieren Sie Sprites und Spritesheets auf klassische Konsolenpaletten oder eigene Hex-Farben direkt in Ihrem Browser.',
+  ui: {
+    uploadTitle: 'Sprite oder Spritesheet ablegen',
+    uploadHint: 'PNG, JPEG oder WebP bleiben auf Ihrem Gerät',
+    chooseImage: 'Bild auswählen',
+    replaceImage: 'Bild ersetzen',
+    paletteTitle: 'Palette wählen',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES inspiriert',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Benutzerdefinierte Farben',
+    customPaletteHint: 'Trennen Sie Hex-Werte durch Kommas, Leerzeichen oder Zeilenumbrüche.',
+    applyCustomPalette: 'Palette anwenden',
+    resetCustomPalette: 'Zurücksetzen',
+    sourcePreview: 'Original',
+    resultPreview: 'Reduziertes Ergebnis',
+    waitingForImage: 'Warten auf ein Bild',
+    uploadToPreview: 'Laden Sie ein Bild hoch, um es vorzuschauen',
+    resultEmpty: 'Original und reduzierte Version erscheinen nebeneinander.',
+    downloadPng: 'PNG herunterladen',
+    downloadDisabled: 'Bild hochladen zum Exportieren.',
+    colorCount: 'Quellfarben',
+    mappedCount: 'Verwendete Farben',
+    imageSize: 'Bildgröße',
+    paletteCount: 'Palettenfarben',
+    preserveAlpha: 'Transparenz erhalten',
+    zoomLabel: 'Zoom',
+    processing: 'Pixel werden zugeordnet',
+    invalidPalette: 'Mindestens eine gültige Hex-Farbe eingeben',
+    invalidImage: 'Wählen Sie ein PNG-, JPEG- oder WebP-Bild',
+    readyStatus: 'Bereit',
+    dropActive: 'Zum Laden loslassen',
+    mappedSummary: '{source} Quellfarben auf {mapped} Palettenfarben abgebildet',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Verwandeln Sie Vollfarb-Sprites in Gezielte Retro-Paletten',
+    },
+    {
+      type: 'paragraph',
+      html: 'Eine begrenzte Palette ist mehr als eine technische Einschränkung. Sie verleiht einem Sprite eine wiedererkennbare Farbsprache, lässt Szenen wie aus einem Guss wirken und erinnert an den visuellen Charakter einer bestimmten Konsole oder Fantasie-Hardware. Dieser browserbasierte Palette-Swapper ermöglicht es Ihnen, das Quellbild mit einer reduzierten Version zu vergleichen, während Sie mit Game Boy, NES-inspirierten, PICO-8, Commodore 64, DawnBringer 16 und eigenen Paletten experimentieren.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Funktionsweise der Nächstgelegenen Farbreduktion',
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Werkzeug liest die Rot-, Grün- und Blaukanäle für jeden sichtbaren Pixel und vergleicht diese Farbe mit jeder Farbe der ausgewählten Palette. Es wählt den Paletteneintrag mit dem geringsten quadratischen RGB-Abstand aus und schreibt die Ersatzfarbe in einen neuen Canvas-Puffer. Der Alphakanal bleibt getrennt, sodass transparente Pixel transparent bleiben und halbtransparente Kanten ihre ursprüngliche Deckkraft behalten, wenn Transparenz erhalten aktiviert ist.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Palettenbegrenzung',
+          description: 'Jede Quellfarbe wird durch den nächstgelegenen verfügbaren Farbton ersetzt.',
+          points: [
+            'Schnell und vorhersehbar für Sprites, Icons, Tilesets und UI-Grafiken',
+            'Behält ursprüngliche Maße und Pixelpositionen exakt bei',
+            'Ermöglicht eine übersichtliche Kontrolle des festgelegten Farbbudgets',
+          ],
+        },
+        {
+          title: 'Palette Swapping',
+          description: 'Das gleiche Artwork kann auf ein anderes sorgfältig gewähltes Farbset neu abgebildet werden.',
+          points: [
+            'Nützlich für alternative Kostüme, Biome und Schadenszustände',
+            'Benutzerdefinierte Hex-Listen passen sich Ihrer eigenen Art-Direction an',
+            'Das heruntergeladene PNG kann direkt in Ihren Editor importiert werden',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Wahl Einer Palette für Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Palette', 'Farben', 'Eignung', 'Beachten'],
+      rows: [
+        ['Game Boy', '4', 'Monochromer Handheld-Stil und starke Tonwertstudien', 'Geringer Kontrast kann nahe beieinander liegende Materialien verschmelzen'],
+        ['NES inspiriert', '16', 'Markante Arcade-Sprites, Charaktere und Tilesets', 'Sehr helle Töne können kleine Details überdecken'],
+        ['PICO-8', '16', 'Modernes Pixel Art mit kräftigen Farb-Akzenten', 'Hohe Sättigung erfordert gezielt eingesetzten Kontrast'],
+        ['Commodore 64', '16', 'Dezente Retro-Szenen und Computergame-Ästhetik', 'Niedriger Kontrast profitiert von klaren Silhouetten'],
+        ['DawnBringer 16', '16', 'Vielseitige handverlesene Palette für allgemeine Pixel-Grafik', 'Farbrampen benötigen weiterhin eine bewusste Lichtrichtung'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Praktischer Workflow für Spritesheets',
+    },
+    {
+      type: 'paragraph',
+      html: 'Beginnen Sie mit der größten Quellgrafik, die Sie komfortabel bearbeiten können, und laden Sie das exportierte Sprite oder Spritesheet hier hoch. Wählen Sie eine Voreinstellung, um eine Stilrichtung festzulegen, oder fügen Sie eine eigene Hex-Liste ein. Prüfen Sie beide Bildflächen bei höherem Zoom auf verlorene Gesichtszüge, verschmolzene Konturen oder Highlights. Wenn das Ergebnis matschig wirkt, versuchen Sie eine Palette mit stärkeren Tonwertstufen oder fügen Sie eine gezielte Akzentfarbe hinzu.',
+    },
+    {
+      type: 'tip',
+      title: 'Palette Bewusst Wählen',
+      html: 'Eine größere Farbliste ist nicht automatisch besser. Beginnen Sie mit vier bis sechzehn Farben, weisen Sie jeder Farbe eine klare Aufgabe zu und reservieren Sie die hellsten Werte für Fokusspunkte oder gut lesbare Highlights. Der Algorithmus behält die Pixelpositionen bei, kann aber nicht entscheiden, welche Farben die visuelle Hierarchie Ihres Sprites tragen sollen.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Export-Checkliste für Pixel Art',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Vor dem Import der reduzierten PNG Datei',
+      html: 'Überprüfen Sie das Ergebnis bei 100 Prozent sowie im finalen Spielmaßstab, stellen Sie sicher, dass transparente Ränder sauber bleiben, prüfen Sie die Lesbarkeit wichtiger Silhouetten und bewahren Sie die ursprüngliche Quelldatei neben dem Export auf, um die Palette anzupassen ohne von vorn beginnen zu müssen.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Farbquantisierung',
+          definition: 'Der Prozess der Reduzierung einer großen Menge an Quellfarben auf ein kleineres, fest definiertes Farbset.',
+        },
+        {
+          term: 'Farbrampe',
+          definition: 'Eine zusammenhängende Folge von dunklen, mittleren und hellen Farben zur Schattierung einer Oberfläche.',
+        },
+        {
+          term: 'Indizierte Palette',
+          definition: 'Eine kompakte Farbtabelle, bei der Bildpixel auf Einträge in einer gemeinsamen Liste verweisen, anstatt vollständige Farbwerte zu speichern.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Werden meine Bilder auf einen Server hochgeladen?',
+      answer: 'Nein. Das Bild wird in Ihrem Browser auf einem Canvas decodiert, lokal mit JavaScript verarbeitet und direkt als PNG exportiert. Das Werkzeug enthält keinen Hochladevorgang.',
+    },
+    {
+      question: 'Kann ich meine eigene Palette verwenden?',
+      answer: 'Ja. Füge 6-stellige oder 3-stellige Hex-Farbcodes durch Kommas, Leerzeichen oder Zeilenumbrüche getrennt in das Feld für benutzerdefinierte Farben ein und wähle Palette anwenden.',
+    },
+    {
+      question: 'Wird die Größe meines Sprites oder Spritesheets verändert?',
+      answer: 'Nein. Die Ausgabedatei behält die ursprüngliche Breite, Höhe, Pixelpositionen und Alpha-Werte bei, wenn Transparenz erhalten aktiviert ist.',
+    },
+    {
+      question: 'Welcher Algorithmus wird verwendet?',
+      answer: 'Jeder sichtbare Pixel wird der nächstgelegenen Farbe der ausgewählten Palette mithilfe des quadratischen euklidischen Abstands im RGB-Raum zugewiesen. Es ist schnell, deterministisch und einfach vorzuschauen, wendet jedoch kein Dithering oder eine perzeptive Lab-Farbkorrektur an.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Sprite laden',
+      text: 'Ziehen Sie ein PNG-, JPEG- oder WebP-Sprite oder Spritesheet in den Arbeitsbereich oder nutzen Sie Bild auswählen.',
+    },
+    {
+      name: 'Palette wählen',
+      text: 'Wählen Sie eine klassische Voreinstellung oder geben Sie eigene Hex-Farben ein. Das Ergebnis aktualisiert sich sofort nach dem Anwenden.',
+    },
+    {
+      name: 'Vergleichen und exportieren',
+      text: 'Inspeizieren Sie das Original und das reduzierte Bild, passen Sie den Vorschau-Zoom an und laden Sie das Ergebnis als PNG herunter.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Pixel Art Palette Tauscher',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Werden meine Bilder auf einen Server hochgeladen?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Nein. Das Bild wird lokal im Browser verarbeitet und direkt als PNG exportiert.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Kann ich meine eigene Palette verwenden?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Ja. Füge Hex-Farbcodes in das entsprechende Feld ein und wähle Palette anwenden.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Wie man ein Sprite auf eine Retro-Palette reduziert',
+      step: [
+        { '@type': 'HowToStep', name: 'Sprite laden', text: 'Ziehen Sie ein Bild in den Arbeitsbereich.' },
+        { '@type': 'HowToStep', name: 'Palette wählen', text: 'Wählen Sie ein Preset oder geben Sie Hex-Farben ein.' },
+        { '@type': 'HowToStep', name: 'Vergleichen und exportieren', text: 'Prüfen Sie das Ergebnis und laden Sie das PNG herunter.' },
+      ],
+    },
+  ],
+  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/en.ts

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-swapper',
+  title: 'Pixel Art Palette Swapper',
+  description: 'Reduce sprites and spritesheets to classic console palettes or a custom set of hex colors directly in your browser.',
+  ui: {
+    uploadTitle: 'Drop a sprite or spritesheet',
+    uploadHint: 'PNG, JPEG, or WebP stays on your device',
+    chooseImage: 'Choose image',
+    replaceImage: 'Replace image',
+    paletteTitle: 'Choose palette',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES inspired',
+    pico8Palette: 'PICO 8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Custom colors',
+    customPaletteHint: 'Separate hex values with commas, spaces, or new lines.',
+    applyCustomPalette: 'Apply palette',
+    resetCustomPalette: 'Reset',
+    sourcePreview: 'Original',
+    resultPreview: 'Limited result',
+    waitingForImage: 'Waiting for an image',
+    uploadToPreview: 'Upload an image to preview it',
+    resultEmpty: 'Your original and palette limited versions will appear side by side.',
+    downloadPng: 'Download PNG',
+    downloadDisabled: 'Upload an image to enable export.',
+    colorCount: 'Source colors',
+    mappedCount: 'Colors used',
+    imageSize: 'Image size',
+    paletteCount: 'palette colors',
+    preserveAlpha: 'Preserve transparency',
+    zoomLabel: 'Zoom',
+    processing: 'Mapping pixels',
+    invalidPalette: 'Add at least one valid hex color',
+    invalidImage: 'Choose a PNG, JPEG, or WebP image',
+    readyStatus: 'Ready',
+    dropActive: 'Release to load',
+    mappedSummary: 'Mapped {source} source colors to {mapped} palette colors',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Turn a Full Color Sprite Into a Deliberate Retro Palette',
+    },
+    {
+      type: 'paragraph',
+      html: 'A limited palette is more than a technical restriction. It gives a sprite a repeatable color vocabulary, makes scenes feel like they belong together, and can suggest the visual character of a specific console or fantasy hardware. This browser based palette swapper lets you compare the source image with a reduced version while you experiment with Game Boy, NES inspired, PICO 8, Commodore 64, DawnBringer 16, and custom palettes.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'How Nearest Color Mapping Works',
+    },
+    {
+      type: 'paragraph',
+      html: 'The tool reads the red, green, and blue channels for every visible pixel and compares that color with every color in the selected palette. It chooses the palette entry with the smallest squared RGB distance, then writes the replacement color to a new canvas buffer. The alpha channel is kept separate, so transparent pixels remain transparent and partially transparent edges keep their original opacity when Preserve transparency is enabled.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Palette limitation',
+          description: 'Every source color is replaced by its closest available swatch.',
+          points: [
+            'Fast and predictable for sprites, icons, tiles, and UI art',
+            'Keeps the original dimensions and pixel positions',
+            'Makes a consistent color budget easy to review',
+          ],
+        },
+        {
+          title: 'Palette swapping',
+          description: 'The same artwork can be remapped to another carefully chosen set.',
+          points: [
+            'Useful for alternate costumes, biomes, and damage states',
+            'Custom hex lists let you match an existing art direction',
+            'A downloaded PNG is ready to bring back into your editor',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Choosing a Palette for Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Palette', 'Colors', 'Good fit', 'Watch for'],
+      rows: [
+        ['Game Boy', '4', 'Monochrome handheld mood and strong value studies', 'Small value range can merge nearby materials'],
+        ['NES inspired', '16', 'Chunky arcade sprites, characters, and tiles', 'Very bright colors can overpower small details'],
+        ['PICO 8', '16', 'Compact modern pixel art with saturated accents', 'Highly saturated hues need deliberate contrast'],
+        ['Commodore 64', '16', 'Muted retro scenes and computer game aesthetics', 'Low contrast benefits from clear silhouettes'],
+        ['DawnBringer 16', '16', 'A flexible hand picked palette for general pixel art', 'Ramp colors still need intentional light direction'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'A Practical Workflow for Spritesheets',
+    },
+    {
+      type: 'paragraph',
+      html: 'Start with the largest source art you can comfortably edit, then upload the exported sprite or spritesheet here. Pick a preset to establish a direction, or paste a custom list from a palette library. Inspect the two canvases at a higher zoom and look for lost facial features, merged outlines, and highlights that no longer separate from their base color. If a result feels muddy, try a palette with a stronger value step or add one deliberate accent color to the custom list.',
+    },
+    {
+      type: 'tip',
+      title: 'Keep the palette intentional',
+      html: 'A larger list is not automatically better. Start with four to sixteen colors, assign each color a job, and reserve the brightest values for focal points or readable highlights. The closest color algorithm preserves positions, but it cannot decide which colors should carry the visual hierarchy of your sprite.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Pixel Art Export Checklist',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Before importing the limited PNG',
+      html: 'Check the result at 100 percent and at the final in game scale, confirm that transparent edges are still clean, verify that important silhouettes remain readable, and keep the original source file beside the export so you can revise the palette without starting over.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Color quantization',
+          definition: 'The process of reducing a large set of source colors to a smaller defined set.',
+        },
+        {
+          term: 'Palette ramp',
+          definition: 'A related sequence of dark, mid, and light colors used to shade one material or surface.',
+        },
+        {
+          term: 'Indexed palette',
+          definition: 'A compact color table where image pixels refer to entries in a shared list instead of storing full colors repeatedly.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Does the palette swapper upload my image?',
+      answer: 'No. The image is decoded into a canvas in your browser, mapped locally with JavaScript, and exported directly as a PNG. The utility has no upload step.',
+    },
+    {
+      question: 'Can I use my own palette?',
+      answer: 'Yes. Paste six digit or three digit hex colors into the Custom colors field, separated by commas, spaces, or new lines, then choose Apply palette.',
+    },
+    {
+      question: 'Does it resize my sprite or spritesheet?',
+      answer: 'No. The output keeps the source width, height, pixel positions, and alpha values when Preserve transparency is enabled.',
+    },
+    {
+      question: 'What algorithm does it use?',
+      answer: 'Each visible pixel is assigned to the closest color in the selected palette using squared Euclidean distance in RGB space. It is fast, deterministic, and easy to preview, but it does not apply dithering or perceptual Lab color correction.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Load a sprite',
+      text: 'Drop a PNG, JPEG, or WebP sprite or spritesheet into the workspace, or use Choose image.',
+    },
+    {
+      name: 'Choose a palette',
+      text: 'Select a classic preset or enter your own hex colors. The result updates immediately when a palette is applied.',
+    },
+    {
+      name: 'Compare and export',
+      text: 'Inspect the original and limited canvases, adjust the preview zoom, and download the result as a PNG.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Pixel Art Palette Swapper',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Does the palette swapper upload my image?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'No. The image is decoded and mapped locally in the browser, then exported directly as a PNG.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Can I use my own palette?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Yes. Paste valid hex colors into the Custom colors field and apply the palette.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'How to limit a sprite to a retro palette',
+      step: [
+        { '@type': 'HowToStep', name: 'Load a sprite', text: 'Drop an image into the workspace or choose it from your device.' },
+        { '@type': 'HowToStep', name: 'Choose a palette', text: 'Select a preset or apply a custom list of hex colors.' },
+        { '@type': 'HowToStep', name: 'Compare and export', text: 'Review the result and download the limited 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/',
+    },
+  ],
+};