@jjlmoya/utils-games-development 1.47.0 → 1.49.0

package/src/tool/spriteSheetPacker/i18n/nl.ts

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'sprite-sheet-packer-en-extractor',
+  title: 'Sprite Sheet Packer en Extractor',
+  description:
+    'Optimaliseer 2D game prestaties door afzonderlijke animatie frames samen te voegen in textuur atlassen of sprites te extraheren uit bestaande sheets.',
+  ui: {
+    packerTab: 'Packer Studio',
+    extractorTab: 'Sprite Extractor',
+    dropZoneTitle: 'Sleep Frames Hierheen',
+    dropZoneSubtitle: 'Upload PNG of WebP afbeeldingen om een geoptimaliseerde textuuratlas te genereren',
+    selectFilesButton: 'Selecteer Afbeeldingen',
+    clearAllButton: 'Werkruimte Wissen',
+    downloadZipButton: 'Pakket Downloaden (ZIP)',
+    copyJsonButton: 'Atlas JSON Kopiëren',
+    downloadSheetPngButton: 'Textuur PNG Downloaden',
+    paddingLabel: 'Frame Afstand (px)',
+    borderExtrusionLabel: 'Rand Extrusie (px)',
+    maxTextureSizeLabel: 'Maximale Textuur Dimensie',
+    powerOfTwoLabel: 'Macht van 2 Forceren (POT)',
+    trimTransparencyLabel: 'Transparantie Bijsnijden',
+    exportFormatLabel: 'Doel Engine Formaat',
+    presetPixelArt: 'Pixel Art 16x16 Preset',
+    presetHdUi: 'HD UI Atlas 1024 Preset',
+    presetMobile: 'Mobiel WebGL 2048 Preset',
+    formatGenericHash: 'Generieke JSON (Hash)',
+    formatGenericArray: 'Generieke JSON (Array)',
+    formatUnity: 'Unity 2D Engine',
+    formatGodot: 'Godot 2D Engine',
+    formatPhaser: 'Phaser / PixiJS Engine',
+    formatCss: 'Web Frontend CSS',
+    previewTitle: 'Textuur Atlas Voorbeeld',
+    efficiencyBadge: 'Textuur Efficiëntie',
+    drawCallsBadge: 'Gereduceerde Draw Calls',
+    totalFramesBadge: 'Gepakte Frames',
+    textureSizeBadge: 'Atlas Afmeting',
+    flipbookTitle: 'Animatie Flipbook Speler',
+    flipbookFpsLabel: 'Animatie Snelheid (FPS)',
+    playAnimation: 'Afspelen',
+    pauseAnimation: 'Pauzeren',
+    extractorModeGrid: 'Vaste Raster Uitsnede',
+    extractorModeAlpha: 'Automatische Alpha Kanaal Uitsnede',
+    frameWidthLabel: 'Frame Breedte (px)',
+    frameHeightLabel: 'Frame Hoogte (px)',
+    marginLabel: 'Marge Offset (px)',
+    spacingLabel: 'Raster Afstand (px)',
+    extractFramesButton: 'Frames Extraheren',
+    extractedCountLabel: 'Geëxtraheerde Sprites',
+    codeSnippetTitle: 'Engine Integratie Code',
+    copySnippetButton: 'Code Kopiëren',
+    copiedToast: 'Gekopieerd naar Klembord',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'GPU Batching en Draw Call Optimalisatie in 2D Game Engines',
+    },
+    {
+      type: 'paragraph',
+      html: 'Het samenvoegen van losse afbeeldingen tot één textuuratlas vermindert het aantal draw calls dat de CPU naar de videokaart stuurt aanzienlijk.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'Reductie van Draw Calls' },
+        { value: '4x', label: 'Snellere GPU Verwerking' },
+        { value: '60 FPS', label: 'Stabiel Doel op Mobiel' },
+        { value: '100%', label: 'Lokale Verwerking in Browser' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Losse Afbeeldingen vs Gecomprimeerde Textuur Atlassen',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Losse Animatie Bestanden',
+          description: 'Afzonderlijk opgeslagen PNG bestanden',
+          points: [
+            'Genereert een afzonderlijke draw call voor elk frame op het scherm',
+            'Veroorzaakt frequente wissels op de grafische kaart GPU',
+            'Verhoogt het aantal netwerkverzoeken bij web games',
+            'Lagere framerates op mobiele apparaten',
+          ],
+        },
+        {
+          title: 'Gepakte Textuur Atlas',
+          description: 'Enkele PNG afbeelding gekoppeld aan JSON metadata',
+          points: [
+            'Bundelt honderden sprites in één enkele GPU draw call',
+            'Optimaliseert het geheugengebruik en de grafische snelheid',
+            'Vermindert bestandsverzoeken door textuur en gegevens te bundelen',
+            'Garanteert vloeiende 60 FPS prestaties op alle platforms',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Subpixel Camerabeweging en Rand Extrusie',
+    },
+    {
+      type: 'paragraph',
+      html: 'Het toepassen van 1 tot 2 pixels rand extrusie kopieert de buitenste randpixels om visuele randfouten bij camerabewegingen te voorkomen.',
+    },
+    {
+      type: 'tip',
+      title: 'Strategie voor Rand Extrusie',
+      html: 'Gebruik rand extrusie om randfouten bij camerabewegingen in 2D games volledig te elimineren.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Aanbevolen Textuur Afmetingen voor Verschillende Platformen',
+    },
+    {
+      type: 'table',
+      headers: ['Doelplatform', 'Aanbevolen Max Grootte', 'Macht van 2 Vereist', 'Geheugenprofiel'],
+      rows: [
+        ['Mobiele Browsers', '2048 x 2048 px', 'Verplicht voor WebGL 1.0', 'Lage Bandbreedte'],
+        ['Desktop PC / Console', '4096 x 4096 px', 'Aanbevolen', 'Hoge GPU Capaciteit'],
+        ['Retro Handhelds', '1024 x 1024 px', 'Strikte Vereiste', 'Strikte VRAM Limieten'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: 'Garanteert volledige compatibiliteit met oudere grafische stuurprogramma s en WebGL 1.0',
+          con: 'Kan ongebruikte transparante ruimte achterlaten bij weinig sprites',
+        },
+        {
+          pro: 'Ondersteunt automatische hardware mipmapping',
+          con: 'Vereist nauwkeurige afstelling bij onregelmatige afmetingen',
+        },
+        {
+          pro: 'Optimaliseert VRAM geheugentoewijzing op de GPU',
+          con: 'Verhoogt de initiële textuuroppervlakte licht',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Kernbegrippen bij Sprite Packing',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Draw Call',
+          definition: 'Een commando van de CPU naar de GPU om een groep textures te renderen.',
+        },
+        {
+          term: 'Bin Packing',
+          definition: 'Een algoritme om rechthoekige vormen efficiënt in een minimale ruimte te schikken.',
+        },
+        {
+          term: 'Border Extrusion',
+          definition: 'Het kopiëren van randpixels naar buiten om visuele naden bij camerabewegingen te voorkomen.',
+        },
+        {
+          term: 'Flipbook Animation',
+          definition: 'Het snel achter elkaar afspelen van opeenvolgende beelden om beweging te simuleren.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Prestatie Controlelijst voor Game Developers',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Productieregels',
+      html: 'Groepeer animaties in gedeelde atlassen en gebruik machten van twee voor WebGL builds.',
+    },
+  ],
+  faq: [
+    {
+      question: 'Wat is een sprite sheet en waarom is het belangrijk?',
+      answer:
+        'Een sprite sheet is één afbeelding die meerdere animatie beelden bevat.',
+    },
+    {
+      question: 'Hoe werkt de lokale verwerking in deze tool?',
+      answer:
+        'Alle verwerking vindt lokaal in uw browser plaats via de HTML5 Canvas API.',
+    },
+    {
+      question: 'Kan ik beelden uit een bestaande sprite sheet halen?',
+      answer:
+        'Ja. Schakel over naar de Extractor modus en stel de rastergrootte in.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Bestanden Uploaden',
+      text: 'Sleep uw PNG of WebP bestanden naar de uploadzone.',
+    },
+    {
+      name: 'Instellingen Aanpassen',
+      text: 'Stel de afstand, rand extrusie en maximale grootte in.',
+    },
+    {
+      name: 'Controleren en Downloaden',
+      text: 'Bekijk de animatie in de speler en download het ZIP pakket.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Sprite Sheet Packer en Extractor',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Wat is een sprite sheet en waarom is het belangrijk?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Een sprite sheet is één afbeelding die meerdere animatie beelden bevat.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Hoe sprite sheets in te pakken en te extraheren',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Bestanden Uploaden',
+          text: 'Sleep uw PNG of WebP bestanden naar de uploadzone.',
+        },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'Godot Engine 2D Sprite Sheets Documentation',
+      url: 'https://docs.godotengine.org/en/stable/tutorials/2d/2d_sprite_animation.html',
+    },
+    {
+      name: 'Unity Sprite Atlas Manual',
+      url: 'https://docs.unity3d.com/Manual/class-SpriteAtlas.html',
+    },
+  ],
+};

package/src/tool/spriteSheetPacker/i18n/pl.ts

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'pakowarka-i-ekstraktor-sprite-sheet',
+  title: 'Pakowarka i Ekstraktor Sprite Sheet',
+  description:
+    'Optymalizuj wydajność gier 2D, pakując pojedyncze klatki animacji w atlasy tekstur lub wyciągając klatki z istniejących arkuszy.',
+  ui: {
+    packerTab: 'Studio Pakowania',
+    extractorTab: 'Ekstraktor Sprite',
+    dropZoneTitle: 'Przeciągnij i Upuść Klatki',
+    dropZoneSubtitle: 'Prześlij obrazy PNG lub WebP, aby wygenerować zoptymalizowany atlas tekstur',
+    selectFilesButton: 'Wybierz Pliki Klatek',
+    clearAllButton: 'Wyczyść Obszar Róboczy',
+    downloadZipButton: 'Pobierz Paczkę (ZIP)',
+    copyJsonButton: 'Kopiuj JSON Atlasu',
+    downloadSheetPngButton: 'Pobierz Teksturę PNG',
+    paddingLabel: 'Odstęp Klatek (px)',
+    borderExtrusionLabel: 'Ekstruzja Krawędzi (px)',
+    maxTextureSizeLabel: 'Maksymalny Wymiar Tekstury',
+    powerOfTwoLabel: 'Wymuś Potęgę 2 (POT)',
+    trimTransparencyLabel: 'Przytnij Przeźroczystość',
+    exportFormatLabel: 'Docelowy Format Silnika',
+    presetPixelArt: 'Ustawienie Pixel Art 16x16',
+    presetHdUi: 'Ustawienie HD UI Atlas 1024',
+    presetMobile: 'Ustawienie Mobile WebGL 2048',
+    formatGenericHash: 'Ogólny JSON (Hash)',
+    formatGenericArray: 'Ogólny JSON (Array)',
+    formatUnity: 'Silnik Unity 2D',
+    formatGodot: 'Silnik Godot 2D',
+    formatPhaser: 'Silnik Phaser / PixiJS',
+    formatCss: 'CSS Web Frontend',
+    previewTitle: 'Podgląd Atlasu Tekstur',
+    efficiencyBadge: 'Wydajność Tekstury',
+    drawCallsBadge: 'Zredukowane Draw Calls',
+    totalFramesBadge: 'Spakowane Klatki',
+    textureSizeBadge: 'Wymiar Atlasu',
+    flipbookTitle: 'Odtwarzacz Animacji Flipbook',
+    flipbookFpsLabel: 'Prędkość Animacji (FPS)',
+    playAnimation: 'Odtwarzaj',
+    pauseAnimation: 'Wstrzymaj',
+    extractorModeGrid: 'Cięcie Według Siatki',
+    extractorModeAlpha: 'Automatyczne Cięcie Kanału Alfa',
+    frameWidthLabel: 'Szerokość Klatki (px)',
+    frameHeightLabel: 'Wysokość Klatki (px)',
+    marginLabel: 'Margines Zewnętrzny (px)',
+    spacingLabel: 'Odstęp Siatki (px)',
+    extractFramesButton: 'Wyciągnij Klatki',
+    extractedCountLabel: 'Wyciągnięte Sprity',
+    codeSnippetTitle: 'Kod Integracji z Silnikiem',
+    copySnippetButton: 'Kopiuj Kod',
+    copiedToast: 'Skopiowano do Schowka',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Zrozumienie Batchingu GPU i Optymalizacja Draw Calls w Silnikach 2D',
+    },
+    {
+      type: 'paragraph',
+      html: 'Łączenie pojedynczych obrazów klatek w jeden atlas tekstury drastycznie zmniejsza liczbę poleceń rysowania przesyłanych z procesora CPU do karty graficznej GPU.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'Redukcja Draw Calls' },
+        { value: '4x', label: 'Szybsze Przetwarzanie GPU' },
+        { value: '60 FPS', label: 'Stabilna Płynność na Smartfonach' },
+        { value: '100%', label: 'Lokalne Przetwarzanie w Przeglądarce' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Porównanie Pojedynczych Plików z Połączonym Atlasem Tekstur',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Pojedyncze Pliki Klatek',
+          description: 'Obrazy PNG lub WebP zapisane osobno',
+          points: [
+            'Generuje osobne polecenie rysowania dla każdej klatki na ekranie',
+            'Powoduje częste przełączanie kontekstu na karcie graficznej GPU',
+            'Zwiększa liczbę żądań HTTP w grach przeglądarkowych',
+            'Spadek płynności na urządzeniach mobilnych',
+          ],
+        },
+        {
+          title: 'Spakowany Atlas Tekstury',
+          description: 'Pojedynczy plik PNG połączony z danymi JSON',
+          points: [
+            'Łączy setki klatek w jedno polecenie rysowania GPU',
+            'Maksymalizuje przepustowość pamięci graficznej VRAM',
+            'Zmniejsza liczbę pobieranych plików',
+            'Gwarantuje płynną animację na wszystkich platformach',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Matematyka Ekstruzji Krawędzi i Ruch Subpikselowy',
+    },
+    {
+      type: 'paragraph',
+      html: 'Dodanie 1 do 2 pikseli ekstruzji krawędzi powiela zewnętrzne piksele klatek, co zapobiega powstawaniu niepożądanych linii i szwów przy ruchu kamery.',
+    },
+    {
+      type: 'tip',
+      title: 'Strategia Ekstruzji Krawędzi',
+      html: 'Używaj ekstruzji krawędzi, aby całkowicie wyeliminować błędy pikselowe przy ruchu i przybliżaniu kamery.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Zalecane Wymiary Tekstur dla Różnych Platform',
+    },
+    {
+      type: 'table',
+      headers: ['Platforma Docelowa', 'Zalecany Maksymalny Wymiar', 'Wymóg Potęgi 2', 'Profil Pamięci'],
+      rows: [
+        ['Przeglądarki Mobilne', '2048 x 2048 px', 'Wymagane w WebGL 1.0', 'Niska Przepustowość'],
+        ['Komputery PC / Konsole', '4096 x 4096 px', 'Zalecane', 'Wysoka Wydajność GPU'],
+        ['Konsolki Retro', '1024 x 1024 px', 'Ścisły Wymóg', 'Ścisłe Limity VRAM'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: 'Gwarantuje pełną kompatybilność ze starszymi sterownikami i WebGL 1.0',
+          con: 'Może pozostawiać pustą przestrzeń przy małej liczbie klatek',
+        },
+        {
+          pro: 'Wspiera automatyczne generowanie mipmap sprzętowych',
+          con: 'Wymaga starannego ustawienia odstępów przy nieregularnych kształtach',
+        },
+        {
+          pro: 'Optymalizuje alokację pamięci VRAM w karcie graficznej',
+          con: 'Niewielki wzrost początkowej powierzchni tekstury',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Kluczowe Pojęcia Pakowania Sprite',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Draw Call',
+          definition: 'Polecenie wysyłane przez procesor CPU do karty graficznej GPU w celu wyrenderowania geometrii.',
+        },
+        {
+          term: 'Bin Packing',
+          definition: 'Algorytm optymalnego rozmieszczania prostokątnych elementów w minimalnym obszarze.',
+        },
+        {
+          term: 'Border Extrusion',
+          definition: 'Powielanie zewnętrznych pikseli krawędzi w celu uniknięcia szwów widocznych przy ruchu kamery.',
+        },
+        {
+          term: 'Flipbook Animation',
+          definition: 'Szybkie sekwencyjne odtwarzanie klatek w celu symulacji ciągłego ruchu w grach 2D.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Lista Kontrolna Optymalizacji',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Zasady Produkcyjne',
+      html: 'Grupuj animacje postaci w pojedyncze atlasy i stosuj potęgi dwójki dla eksportu WebGL.',
+    },
+  ],
+  faq: [
+    {
+      question: 'Czym jest sprite sheet i dlaczego jest ważny w grach 2D?',
+      answer:
+        'Sprite sheet to pojedynczy plik graficzny zawierający wiele klatek animacji. Pozwala silnikowi gry wyrenderować wiele obiektów w jednym poleceniu GPU.',
+    },
+    {
+      question: 'Jak działa przetwarzanie lokalne w tym narzędziu?',
+      answer:
+        'Wszystkie operacje wykonywane są w Twojej przeglądarce przy użyciu HTML5 Canvas API bez przesyłania plików na serwer.',
+    },
+    {
+      question: 'Czy mogę wyciągnąć klatki z istniejącego sprite sheeta?',
+      answer:
+        'Tak. Przejdź do trybu Ekstraktora, prześlij swój obraz i ustaw wymiary siatki cięcia.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Prześlij Klatki',
+      text: 'Przeciągnij pliki PNG lub WebP do obszaru roboczego.',
+    },
+    {
+      name: 'Skonfiguruj Ustawienia',
+      text: 'Dostosuj odstępy, ekstruzję krawędzi oraz format silnika docelowego.',
+    },
+    {
+      name: 'Sprawdź i Pobierz',
+      text: 'Przetestuj animację w odtwarzaczu i pobierz paczkę ZIP.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Pakowarka i Ekstraktor Sprite Sheet',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Czym jest sprite sheet i dlaczego jest ważny w grach 2D?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Sprite sheet to pojedynczy plik graficzny zawierający wiele klatek animacji.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Jak pakować i wyciągać klatki sprite sheet',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Prześlij Klatki',
+          text: 'Przeciągnij pliki PNG lub WebP do obszaru roboczego.',
+        },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'Godot Engine 2D Sprite Sheets Documentation',
+      url: 'https://docs.godotengine.org/en/stable/tutorials/2d/2d_sprite_animation.html',
+    },
+    {
+      name: 'Unity Sprite Atlas Manual',
+      url: 'https://docs.unity3d.com/Manual/class-SpriteAtlas.html',
+    },
+  ],
+};