@jjlmoya/utils-games-development 1.55.0 → 1.57.0

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

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'piksel-sanati-palet-degistirici',
+  title: 'Piksel Sanatı Palet Değiştirici',
+  description: 'Sprite ve sprite sayfalarındaki renkleri klasik konsol paletlerine veya özel hex renklerine doğrudan tarayıcınızda dönüştürün.',
+  ui: {
+    uploadTitle: 'Bir sprite veya sprite sayfası bırakın',
+    uploadHint: 'PNG, JPEG veya WebP dosyaları doğrudan cihazınızda işlenir',
+    chooseImage: 'Görsel seç',
+    replaceImage: 'Görseli değiştir',
+    paletteTitle: 'Palet seçin',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES esintili',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Özel renkler',
+    customPaletteHint: 'Hex değerlerini virgül, boşluk veya yeni satır ile ayırın.',
+    applyCustomPalette: 'Paleti uygula',
+    resetCustomPalette: 'Sıfırla',
+    sourcePreview: 'Orijinal',
+    resultPreview: 'Dönüştürülmüş sonuç',
+    waitingForImage: 'Bir görsel bekleniyor',
+    uploadToPreview: 'Önizlemek için bir görsel yükleyin',
+    resultEmpty: 'Orijinal ve palet uygulanmış sürümler yan yana görünecektir.',
+    downloadPng: 'PNG İndir',
+    downloadDisabled: 'Dışa aktarmak için bir görsel yükleyin.',
+    colorCount: 'Kaynak renkler',
+    mappedCount: 'Kullanılan renkler',
+    imageSize: 'Görsel boyutu',
+    paletteCount: 'palet renkleri',
+    preserveAlpha: 'Şeffaflığı koru',
+    zoomLabel: 'Yakınlaştırma',
+    processing: 'Pikseller eşleştiriliyor',
+    invalidPalette: 'En az bir geçerli hex rengi ekleyin',
+    invalidImage: 'Geçerli bir PNG, JPEG veya WebP görseli seçin',
+    readyStatus: 'Hazır',
+    dropActive: 'Yüklemek için bırakın',
+    mappedSummary: '{source} kaynak renk {mapped} palet rengine eşlendi',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Tam Renkli Sprite Görsellerini Planlı Retro Paletlere Dönüştürün',
+    },
+    {
+      type: 'paragraph',
+      html: 'Sınırlı bir palet, teknik bir kısıtlamadan daha fazlasıdır. Sprite görsellerinize tutarlı bir renk dili kazandırır, sahnelerin birbirine ait görünmesini sağlar ve belirli bir konsolun veya hayali donanımın görsel karakterini yansıtır. Tarayıcı tabanlı bu palet değiştirici, Game Boy, NES esintili, PICO-8, Commodore 64, DawnBringer 16 ve özel paletleri denerken orijinal görsel ile indirgenmiş sürümü karşılaştırmanıza olanak tanır.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'En Yakın Renk Eşleme Nasıl Çalışır',
+    },
+    {
+      type: 'paragraph',
+      html: 'Araç, görünür her pikselin kırmızı, yeşil ve mavi kanallarını okur ve bu rengi seçilen paletteki her renkle karşılaştırır. En küçük karesel RGB mesafesine sahip palet girdisini seçer ve yeni bir tuval arabelleğine yazar. Şeffaflığı koru seçeneği etkinleştirildiğinde, şeffaf pikseller şeffaf kalır ve yarı şeffaf kenarlar orijinal opaklığını korur.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Palet Sınırlama',
+          description: 'Her kaynak renk, mevcut en yakın renk örneğiyle değiştirilir.',
+          points: [
+            'Sprite, simge, karo ve arayüz çizimleri için hızlı ve öngörülebilir',
+            'Orijinal boyutları ve piksel konumlarını korur',
+            'Belirli bir renk bütçesini gözden geçirmeyi kolaylaştırır',
+          ],
+        },
+        {
+          title: 'Palet Değiştirme (Palette Swapping)',
+          description: 'Aynı çizim, özenle seçilmiş başka bir renk kümesine yeniden eşlenebilir.',
+          points: [
+            'Alternatif kostümler, biyomlar ve hasar durumları için kullanışlıdır',
+            'Özel hex listeleri mevcut sanat yönünüze uymanızı sağlar',
+            'İndirilen PNG düzenleyicinize aktarılmaya hazırdır',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Piksel Sanatı İçin Palet Seçimi',
+    },
+    {
+      type: 'table',
+      headers: ['Palet', 'Renkler', 'Uygunluk', 'Dikkat Edilmesi Gerekenler'],
+      rows: [
+        ['Game Boy', '4', 'Monokrom el konsolu hissi ve güçlü değer çalışmaları', 'Dar değer aralığı yakın malzemeleri birleştirebilir'],
+        ['NES esintili', '16', 'Hacimli arcade sprite çizimleri, karakterler ve karolar', 'Çok parlak renkler küçük detayları bastırabilir'],
+        ['PICO-8', '16', 'Doygun vurgulara sahip modern piksel sanatı', 'Yüksek doygunluktaki tonlar bilinçli kontrast gerektirir'],
+        ['Commodore 64', '16', 'Yumuşak retro sahneler ve bilgisayar oyunu estetiği', 'Düşük kontrast net siluetlerden faydalanır'],
+        ['DawnBringer 16', '16', 'Genel piksel sanatı için esnek özel palet', 'Rampa renkleri yine de planlı ışık yönü gerektirir'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Sprite Sayfaları İçin Pratik İş Akışı',
+    },
+    {
+      type: 'paragraph',
+      html: 'Rahatça düzenleyebileceğiniz en büyük kaynak çizimle başlayın, ardından dışa aktarılan sprite veya sprite sayfasını buraya yükleyin. Bir yön belirlemek için bir hazır ayar seçin veya palet kitaplığından özel bir liste yapıştırın. İki tuvali daha yüksek yakınlaştırmada inceleyin; kaybolan yüz özelliklerini, birleşmiş hatları ve ana renkten ayrılmayan vurguları arayın. Sonuç mat görünüyorsa, daha güçlü bir değer adımına sahip bir palet deneyin veya özel listeye bilinçli bir vurgu rengi ekleyin.',
+    },
+    {
+      type: 'tip',
+      title: 'Paleti Bilinçli Tutun',
+      html: 'Daha büyük bir liste otomatik olarak daha iyi değildir. Dört ila on altı renkle başlayın, her renge bir görev atayın ve en parlak değerleri odak noktaları veya okunabilir vurgular için saklayın. En yakın renk algoritması konumları korur ancak çiziminizin görsel hiyerarşisini hangi renklerin taşıyacağına karar veremez.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Piksel Sanatı Dışa Aktarım Kontrol Listesi',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'İndirgenmiş PNG Görselini İçe Aktarmadan Önce',
+      html: 'Sonucu yüzde 100 ölçekte ve oyun içi nihai ölçekte kontrol edin, şeffaf kenarların temiz olduğunu doğrulayın, önemli siluetlerin okunabilir kaldığından emin olun ve sıfırdan başlamadan paleti revize edebilmek için orijinal kaynak dosyayı dışa aktarılan dosyanın yanında saklayın.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Renk Kuantizasyonu',
+          definition: 'Geniş bir kaynak renk kümesini daha küçük ve tanımlı bir kümeye indirgeme işlemi.',
+        },
+        {
+          term: 'Palet Rampası',
+          definition: 'Bir malzemeyi veya yüzeyi gölgelendirmek için kullanılan koyu, orta ve açık renklerin ilişkili dizisi.',
+        },
+        {
+          term: 'İndeksli Palet',
+          definition: 'Görüntü piksellerinin tam renkleri tekrar tekrar saklamak yerine ortak bir listedeki girdilere başvurduğu kompakt renk tablosu.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Palet değiştirici görselimi bir sunucuya yüklüyor mu?',
+      answer: 'Hayır. Görsel tarayıcınızda bir tuvale dönüştürülür, JavaScript ile yerel olarak eşlenir ve doğrudan PNG olarak dışa aktarılır. Aracın yükleme adımı yoktur.',
+    },
+    {
+      question: 'Kendi paletimi kullanabilir miyim?',
+      answer: 'Evet. Özel renkler alanına virgül, boşluk veya yeni satırla ayrılmış altı haneli veya üç haneli hex renklerini yapıştırın, ardından Paleti uygula butonunu seçin.',
+    },
+    {
+      question: 'Sprite veya sprite sayfamın boyutunu değiştirir mi?',
+      answer: 'Hayır. Çıktı, Şeffaflığı koru seçeneği etkinleştirildiğinde kaynak genişliği, yüksekliği, piksel konumlarını ve alfa değerlerini korur.',
+    },
+    {
+      question: 'Hangi algoritmayı kullanıyor?',
+      answer: 'Görünür her piksel, RGB uzayında karesel Öklid mesafesi kullanılarak seçilen paletteki en yakın renge atanır. Hızlı, kararlı ve önizlemesi kolaydır ancak tarama (dithering) veya algısal Lab renk düzeltmesi uygulamaz.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Sprite Yükleyin',
+      text: 'Çalışma alanına bir PNG, JPEG veya WebP sprite veya sprite sayfası bırakın ya da Görsel seç butonunu kullanın.',
+    },
+    {
+      name: 'Palet Seçin',
+      text: 'Klasik bir hazır ayar seçin veya kendi hex renklerinizi girin. Palet uygulandığında sonuç hemen güncellenir.',
+    },
+    {
+      name: 'Karşılaştırın ve Dışa Aktarın',
+      text: 'Orijinal ve indirgenmiş tuvalleri inceleyin, önizleme yakınlaştırmasını ayarlayın ve sonucu PNG olarak indirin.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Piksel Sanatı Palet Değiştirici',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Palet değiştirici görselimi bir sunucuya yüklüyor mu?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Hayır. Görsel tarayıcıda işlenir ve doğrudan PNG olarak dışa aktarılır.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Kendi paletimi kullanabilir miyim?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Evet. Özel renkler alanına hex renklerini yapıştırıp paleti uygulayabilirsiniz.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Sprite Görsellerini Retro Palete Dönüştürme',
+      step: [
+        { '@type': 'HowToStep', name: 'Sprite Yükleyin', text: 'Çalışma alanına bir görsel bırakın.' },
+        { '@type': 'HowToStep', name: 'Palet Seçin', text: 'Bir hazır ayar seçin veya hex renklerinizi girin.' },
+        { '@type': 'HowToStep', name: 'Karşılaştırın ve Dışa Aktarın', text: 'Sonucu inceleyin ve PNG olarak indirin.' },
+      ],
+    },
+  ],
+  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/zh.ts

@@ -0,0 +1,225 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-swapper',
+  title: '像素艺术调色板调换工具',
+  description: '在浏览器中将精灵图和精灵图集快速转换为复古主机调色板或自定义 Hex 颜色。',
+  ui: {
+    uploadTitle: '拖放精灵图或精灵图集',
+    uploadHint: 'PNG、JPEG 或 WebP 文件均在本地处理',
+    chooseImage: '选择图片',
+    replaceImage: '替换图片',
+    paletteTitle: '选择调色板',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES 风格',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: '自定义颜色',
+    customPaletteHint: '使用逗号、空格或换行分隔 Hex 颜色代码。',
+    applyCustomPalette: '应用调色板',
+    resetCustomPalette: '重置',
+    sourcePreview: '原图',
+    resultPreview: '转换结果',
+    waitingForImage: '等待加载图片',
+    uploadToPreview: '上传图片以预览效果',
+    resultEmpty: '原图与调色板转换后的效果将并排显示。',
+    downloadPng: '下载 PNG',
+    downloadDisabled: '请先上传图片以启用导出。',
+    colorCount: '原图颜色数',
+    mappedCount: '已用颜色数',
+    imageSize: '图片尺寸',
+    paletteCount: '调色板颜色数',
+    preserveAlpha: '保留透明度',
+    zoomLabel: '缩放',
+    processing: '正在映射像素',
+    invalidPalette: '请至少添加一个有效的 Hex 颜色代码',
+    invalidImage: '请选择 PNG、JPEG 或 WebP 格式图片',
+    readyStatus: '就绪',
+    dropActive: '松开即可加载',
+    mappedSummary: '已将 {source} 种原图颜色映射至 {mapped} 种调色板颜色',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: '将全彩像素图转换为经典的复古主机配色',
+    },
+    {
+      type: 'paragraph',
+      html: '限制色彩数量能赋予像素艺术独特的复古风格。本工具支持转换为 Game Boy、NES、PICO-8 等经典主机的调色板。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '颜色映射计算原理',
+    },
+    {
+      type: 'paragraph',
+      html: '工具会计算每个像素 RGB 值的距离，并将其替换为目标调色板中最接近的颜色，同时完好保留透明通道。',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: '调色板限制',
+          description: '将原有颜色替换为最接近的色块。',
+          points: [
+            '适合像素角色、图标及图块集',
+            '保持原始尺寸与像素位置不变',
+            '便于精确掌控色彩预算',
+          ],
+        },
+        {
+          title: '调色板调换（Palette Swapping）',
+          description: '快速生成不同配色的角色或场景。',
+          points: [
+            '常用于换装、变色或状态变化',
+            '支持自定义 Hex 列表导入',
+            '可直接下载 PNG 导入引擎',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '复古调色板对比',
+    },
+    {
+      type: 'table',
+      headers: ['调色板', '颜色数', '适用场景', '注意事项'],
+      rows: [
+        ['Game Boy', '4', '黑白掌机复古风格', '对比度较低时细节易混淆'],
+        ['NES 风格', '16', '经典街机与平台动作游戏', '高饱和度颜色需注意搭配'],
+        ['PICO-8', '16', '现代鲜艳像素风格', '注意控制高饱和色彩的对比'],
+        ['Commodore 64', '16', '复古电脑端艺术风格', '清晰的轮廓有助于提升识别度'],
+        ['DawnBringer 16', '16', '通用性极高的手绘调色板', '需要明确的光影方向'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '精灵图集工作流建议',
+    },
+    {
+      type: 'paragraph',
+      html: '上传导出好的精灵图集，利用放大功能仔细检查面部细节和轮廓线是否保持清晰。',
+    },
+    {
+      type: 'tip',
+      title: '控制色彩数量',
+      html: '将颜色控制在 4 到 16 色之间通常能获得最干练清晰的效果。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '导出前检查清单',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: '导入游戏前的准备',
+      html: '在 100% 比例下检查画面，确保透明边缘干净无杂色。',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: '色彩量化（Quantization）',
+          definition: '将大量颜色缩减为较小固定颜色集合的过程。',
+        },
+        {
+          term: '色彩阶梯（Ramp）',
+          definition: '用于表现明暗过渡和材质体感的一组同系颜色。',
+        },
+        {
+          term: '索引调色板',
+          definition: '像素通过引用色表序号来确定颜色的存储形式。',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: '我的图片会被上传到服务器吗？',
+      answer: '不会。所有图像处理均在您的浏览器本地进行。',
+    },
+    {
+      question: '支持使用我自己的调色板吗？',
+      answer: '支持。在自定义颜色框中输入 Hex 代码并点击应用调色板即可。',
+    },
+  ],
+  howTo: [
+    {
+      name: '加载图片',
+      text: '拖放 PNG、JPEG 或 WebP 图片到工作区。',
+    },
+    {
+      name: '选择调色板',
+      text: '选择预设或输入自定义 Hex 代码。',
+    },
+    {
+      name: '导出结果',
+      text: '下载转换后的 PNG 格式图片。',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: '像素艺术调色板调换工具',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: '我的图片会被上传到服务器吗？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: '不会。所有图像处理均在您的浏览器本地进行。',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: '支持使用我自己的调色板吗？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: '支持。在自定义颜色框中输入 Hex 代码并点击应用调色板即可。',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: '如何将像素图转换至复古调色板',
+      step: [
+        { '@type': 'HowToStep', name: '加载图片', text: '拖放图片到工作区。' },
+        { '@type': 'HowToStep', name: '选择调色板', text: '选择预设或输入自定义 Hex 代码。' },
+        { '@type': 'HowToStep', name: '导出结果', text: '下载转换后的 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/',
+    },
+  ],
+};

package/src/tool/pixelArtPaletteSwapper/index.ts

@@ -0,0 +1,12 @@
+import type { ToolDefinition } from '../../types';
+import { pixelArtPaletteSwapper } from './entry';
+
+export * from './entry';
+export * from './logic';
+
+export const PIXEL_ART_PALETTE_SWAPPER_TOOL: ToolDefinition = {
+  entry: pixelArtPaletteSwapper,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/pixelArtPaletteSwapper/logic.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import {
+  PRESET_PALETTES,
+  findNearestColor,
+  hexToRgb,
+  parsePaletteInput,
+  quantizeImageData,
+  rgbToHex,
+} from './logic';
+
+describe('pixel art palette swapper logic', () => {
+  it('parses short and full hex colors into normalized values', () => {
+    expect(hexToRgb('#0f8')).toEqual({ r: 0, g: 255, b: 136 });
+    expect(rgbToHex({ r: 18, g: 52, b: 86 })).toBe('#123456');
+  });
+
+  it('removes invalid and duplicate custom colors', () => {
+    expect(parsePaletteInput('#000, #ffffff, nope, #000000')).toEqual([
+      { r: 0, g: 0, b: 0, hex: '#000000' },
+      { r: 255, g: 255, b: 255, hex: '#ffffff' },
+    ]);
+  });
+
+  it('chooses the closest palette color in RGB space', () => {
+    const palette = parsePaletteInput('#000000 #ffffff');
+    expect(findNearestColor({ r: 220, g: 220, b: 220 }, palette)?.hex).toBe('#ffffff');
+    expect(findNearestColor({ r: 30, g: 30, b: 30 }, palette)?.hex).toBe('#000000');
+  });
+
+  it('maps opaque pixels while preserving transparent pixels and alpha', () => {
+    const source = new Uint8ClampedArray([
+      240, 20, 20, 255,
+      10, 10, 10, 128,
+      255, 255, 255, 0,
+    ]);
+    const result = quantizeImageData(source, PRESET_PALETTES.pico8);
+    expect(Array.from(result.data.slice(0, 4))).toEqual([255, 0, 77, 255]);
+    expect(result.data[7]).toBe(128);
+    expect(Array.from(result.data.slice(8, 12))).toEqual([255, 255, 255, 0]);
+    expect(result.sourceColors).toBe(2);
+    expect(result.mappedColors).toBe(2);
+  });
+});