@jjlmoya/utils-games-development 1.47.0 → 1.50.0

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

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'pembuat-dan-ekstraktor-sprite-sheet',
+  title: 'Pembuat dan Ekstraktor Sprite Sheet',
+  description:
+    'Optimalkan performa game 2D dengan menggabungkan frame animasi ke atlas tekstur atau mengekstrak sprite dari sprite sheet.',
+  ui: {
+    packerTab: 'Studio Pembuat Atlas',
+    extractorTab: 'Ekstraktor Sprite',
+    dropZoneTitle: 'Tarik dan Lepas Gambar Frame',
+    dropZoneSubtitle: 'Unggah gambar PNG atau WebP untuk membuat atlas tekstur teroptimasi',
+    selectFilesButton: 'Pilih File Gambar',
+    clearAllButton: 'Bersihkan Ruang Kerja',
+    downloadZipButton: 'Unduh Paket (ZIP)',
+    copyJsonButton: 'Salin JSON Atlas',
+    downloadSheetPngButton: 'Unduh Tekstur PNG',
+    paddingLabel: 'Jarak Antar Frame (px)',
+    borderExtrusionLabel: 'Ekstrusi Tepi (px)',
+    maxTextureSizeLabel: 'Dimensi Maksimal Tekstur',
+    powerOfTwoLabel: 'Paksa Pangkat 2 (POT)',
+    trimTransparencyLabel: 'Potong Area Transparan',
+    exportFormatLabel: 'Format Engine Tujuan',
+    presetPixelArt: 'Preset Pixel Art 16x16',
+    presetHdUi: 'Preset Atlas HD UI 1024',
+    presetMobile: 'Preset Mobile WebGL 2048',
+    formatGenericHash: 'JSON Generik (Hash)',
+    formatGenericArray: 'JSON Generik (Array)',
+    formatUnity: 'Engine Unity 2D',
+    formatGodot: 'Engine Godot 2D',
+    formatPhaser: 'Engine Phaser / PixiJS',
+    formatCss: 'CSS Web Frontend',
+    previewTitle: 'Pratinjau Atlas Tekstur',
+    efficiencyBadge: 'Efisiensi Tekstur',
+    drawCallsBadge: 'Pengurangan Draw Call',
+    totalFramesBadge: 'Frame Tergabung',
+    textureSizeBadge: 'Dimensi Atlas',
+    flipbookTitle: 'Pemutar Animasi Flipbook',
+    flipbookFpsLabel: 'Kecepatan Animasi (FPS)',
+    playAnimation: 'Putar Animasi',
+    pauseAnimation: 'Hentikan Animasi',
+    extractorModeGrid: 'Pemotongan Grid Tetap',
+    extractorModeAlpha: 'Pemotongan Saluran Alfa Otomatis',
+    frameWidthLabel: 'Lebar Frame (px)',
+    frameHeightLabel: 'Tinggi Frame (px)',
+    marginLabel: 'Batas Margin (px)',
+    spacingLabel: 'Jarak Antar Grid (px)',
+    extractFramesButton: 'Ekstrak Gambar Frame',
+    extractedCountLabel: 'Sprite Terekstrak',
+    codeSnippetTitle: 'Kode Integrasi Engine',
+    copySnippetButton: 'Salin Kode',
+    copiedToast: 'Tersalin ke Papan Klip',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Optimasi Performa Game 2D dan Perintah Draw Call',
+    },
+    {
+      type: 'paragraph',
+      html: 'Dalam arsitektur kartu grafis modern, menggabungkan gambar frame menjadi satu atlas tekstur mengurangi jumlah perintah penggambaran draw call yang dikirimkan oleh prosesor CPU ke GPU.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'Pengurangan Draw Call' },
+        { value: '4x', label: 'Proses GPU Lebih Cepat' },
+        { value: '60 FPS', label: 'Target Stabil di Seluler' },
+        { value: '100%', label: 'Pemrosesan Lokal Browser' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Perbandingan Gambar Terpisah vs Atlas Tekstur Tergabung',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'File Frame Terpisah',
+          description: 'File PNG atau WebP disimpan terpisah',
+          points: [
+            'Membuat perintah gambar terpisah untuk setiap frame di layar',
+            'Menyebabkan alih konteks yang sering pada kartu grafis GPU',
+            'Meningkatkan jumlah permintaan HTTP untuk game berbasis web',
+            'Penurunan kecepatan frame pada perangkat seluler',
+          ],
+        },
+        {
+          title: 'Atlas Tekstur Tergabung',
+          description: 'Gambar tunggal dibundel dengan data JSON',
+          points: [
+            'Menggabungkan ratusan sprite dalam satu perintah draw call GPU',
+            'Memaksimalkan bandwidth memori dan throughput rendering grafis',
+            'Mengurangi permintaan file dengan membundel tekstur dan data',
+            'Memastikan kecepatan frame yang mulus di semua platform',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Pencegahan Kebocoran Piksel dan Ekstrusi Tepi',
+    },
+    {
+      type: 'paragraph',
+      html: 'Menambahkan ekstrusi tepi 1 hingga 2 piksel menduplikasi warna piksel terluar untuk mencegah garis keretakan saat kamera bergerak.',
+    },
+    {
+      type: 'tip',
+      title: 'Strategi Ekstrusi Tepi Tekstur',
+      html: 'Gunakan ekstrusi tepi saat memproses sprite sheet agar pemfilteran tekstur berjalan mulus tanpa cacat visual.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Panduan Ukuran Tekstur untuk Berbagai Platform',
+    },
+    {
+      type: 'table',
+      headers: ['Platform Tujuan', 'Ukuran Maksimal Disarankan', 'Kebutuhan Pangkat 2', 'Profil Memori'],
+      rows: [
+        ['Browser Seluler', '2048 x 2048 px', 'Wajib di WebGL 1.0', 'Bandwidth Rendah'],
+        ['PC / Konsol', '4096 x 4096 px', 'Disarankan', 'Kapasitas GPU Tinggi'],
+        ['Konsol Genggam Retro', '1024 x 1024 px', 'Wajib', 'Batas VRAM Ketat'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: 'Menjamin kompatibilitas penuh dengan driver grafis lama dan WebGL 1.0',
+          con: 'Dapat meninggalkan area transparan kosong jika jumlah sprite sedikit',
+        },
+        {
+          pro: 'Mendukung mipmapping otomatis untuk pemfilteran tekstur keras',
+          con: 'Membutuhkan pengaturan jarak yang cermat pada frame tidak teratur',
+        },
+        {
+          pro: 'Mengoptimalkan alokasi memori VRAM pada kartu grafis GPU',
+          con: 'Sedikit meningkatkan alokasi area tekstur awal',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Glosari Istilah Teknis',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Draw Call',
+          definition: 'Perintah yang dikirimkan prosesor CPU ke kartu grafis GPU untuk merender tekstur.',
+        },
+        {
+          term: 'Bin Packing',
+          definition: 'Teknik algoritma untuk mengatur elemen persegi dalam kontainer berukuran minimal.',
+        },
+        {
+          term: 'Border Extrusion',
+          definition: 'Penduplikasian piksel tepi luar untuk mencegah timbulnya garis keretakan saat kamera bergerak.',
+        },
+        {
+          term: 'Flipbook Animation',
+          definition: 'Pemutaran urutan gambar cepat untuk mensimulasikan gerakan kontinu dalam game 2D.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Daftar Periksa Performa',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Aturan Produksi',
+      html: 'Gabungkan animasi karakter ke dalam atlas bersama dan gunakan dimensi pangkat dua untuk ekspor WebGL.',
+    },
+  ],
+  faq: [
+    {
+      question: 'Apa itu sprite sheet dan mengapa penting untuk game 2D?',
+      answer:
+        'Sprite sheet adalah file gambar komposit yang berisi banyak frame animasi. Penggabungan ini memungkinkan game engine merender banyak objek dalam satu perintah gambar GPU.',
+    },
+    {
+      question: 'Bagaimana cara kerja pemrosesan lokal dalam alat ini?',
+      answer:
+        'Gambar Anda diproses secara lokal di browser Anda melalui HTML5 Canvas API tanpa mengirim data ke server luar.',
+    },
+    {
+      question: 'Apakah saya bisa mengekstrak gambar dari sprite sheet yang ada?',
+      answer:
+        'Ya. Beralihlah ke mode Ekstraktor, unggah sprite sheet Anda, dan atur ukuran grid pemotongan.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Unggah Gambar Frame',
+      text: 'Tarik dan lepas file PNG atau WebP ke area unggah.',
+    },
+    {
+      name: 'Atur Pengaturan Penggabungan',
+      text: 'Sesuaikan jarak, ekstrusi tepi, dan ukuran maksimal tekstur.',
+    },
+    {
+      name: 'Pratinjau dan Unduh',
+      text: 'Uji animasi pada pemutar flipbook lalu unduh paket ZIP.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Pembuat dan Ekstraktor Sprite Sheet',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Apa itu sprite sheet dan mengapa penting untuk game 2D?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Sprite sheet adalah file gambar komposit yang berisi banyak frame animasi untuk merender banyak objek dalam satu perintah GPU.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Cara Menggabungkan dan Mengekstrak Sprite Sheet',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Unggah Gambar Frame',
+          text: 'Tarik dan lepas file PNG atau WebP ke area unggah.',
+        },
+      ],
+    },
+  ],
+  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/it.ts

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'impacchettatore-ed-estruttore-di-sprite-sheet',
+  title: 'Impacchettatore ed Estrattore di Sprite Sheet',
+  description:
+    'Ottimizza le prestazioni dei giochi 2D unendo fotogrammi di animazione singoli in atlas di texture o estraendo sprite da fogli esistenti.',
+  ui: {
+    packerTab: 'Studio di Impacchettamento',
+    extractorTab: 'Estrattore di Sprite',
+    dropZoneTitle: 'Trascina e Rilascia i Fotogrammi',
+    dropZoneSubtitle: 'Carica immagini PNG o WebP per generare il tuo atlas di texture ottimizzato',
+    selectFilesButton: 'Seleziona Immagini',
+    clearAllButton: 'Svuota Area di Lavoro',
+    downloadZipButton: 'Scarica Pacchetto (ZIP)',
+    copyJsonButton: 'Copia JSON dell Atlas',
+    downloadSheetPngButton: 'Scarica Texture PNG',
+    paddingLabel: 'Spaziatura Fotogrammi (px)',
+    borderExtrusionLabel: 'Estrusione del Bordo (px)',
+    maxTextureSizeLabel: 'Dimensione Massima Texture',
+    powerOfTwoLabel: 'Forza Potenza di 2 (POT)',
+    trimTransparencyLabel: 'Ritaglia Trasparenza',
+    exportFormatLabel: 'Formato del Motore Target',
+    presetPixelArt: 'Preset Pixel Art 16x16',
+    presetHdUi: 'Preset Atlas HD UI 1024',
+    presetMobile: 'Preset Mobile WebGL 2048',
+    formatGenericHash: 'JSON Generico (Hash)',
+    formatGenericArray: 'JSON Generico (Array)',
+    formatUnity: 'Motore Unity 2D',
+    formatGodot: 'Motore Godot 2D',
+    formatPhaser: 'Motore Phaser / PixiJS',
+    formatCss: 'CSS Web Frontend',
+    previewTitle: 'Anteprima dell Atlas di Texture',
+    efficiencyBadge: 'Efficienza Texture',
+    drawCallsBadge: 'Chiamate di Disegno Ridotte',
+    totalFramesBadge: 'Fotogrammi Impacchettati',
+    textureSizeBadge: 'Dimensione dell Atlas',
+    flipbookTitle: 'Lettore Animazione Flipbook',
+    flipbookFpsLabel: 'Velocità Animazione (FPS)',
+    playAnimation: 'Avvia Sequenza',
+    pauseAnimation: 'Metti in Pausa',
+    extractorModeGrid: 'Taglio a Griglia Fissa',
+    extractorModeAlpha: 'Taglio Automatico Canale Alfa',
+    frameWidthLabel: 'Larghezza Fotogramma (px)',
+    frameHeightLabel: 'Altezza Fotogramma (px)',
+    marginLabel: 'Margine Esterno (px)',
+    spacingLabel: 'Spaziatura Griglia (px)',
+    extractFramesButton: 'Estrai Fotogrammi',
+    extractedCountLabel: 'Sprite Estratti',
+    codeSnippetTitle: 'Codice di Integrazione Motore',
+    copySnippetButton: 'Copia Codice',
+    copiedToast: 'Copiato negli Appunti',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Comprensione del Batching GPU e Ottimizzazione Chiamate di Disegno',
+    },
+    {
+      type: 'paragraph',
+      html: 'Nelle moderne pipeline grafiche 2D, raggruppare i fotogrammi di animazione singoli in un unico atlas di texture consente alla GPU di disegnare tutti gli oggetti in un unica chiamata di disegno.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'Riduzione Chiamate di Disegno' },
+        { value: '4x', label: 'Elaborazione GPU più Rapida' },
+        { value: '60 FPS', label: 'Target Stabile su Mobile' },
+        { value: '100%', label: 'Elaborazione Locale Browser' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Confronto tra File Fotogrammi Singoli e Atlas di Texture',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'File di Fotogrammi Separati',
+          description: 'File PNG o WebP salvati singolarmente',
+          points: [
+            'Genera una chiamata di disegno distinta per ogni singolo fotogramma a schermo',
+            'Provoca frequenti cambi di contesto sulla scheda grafica GPU',
+            'Aumenta il numero di richieste HTTP nei giochi web',
+            'Prestazioni inferiori sui dispositivi mobili',
+          ],
+        },
+        {
+          title: 'Atlas di Texture Unito',
+          description: 'Unica immagine PNG abbinata a metadati JSON',
+          points: [
+            'Raggruppa centinaia di sprite in un unica chiamata di disegno GPU',
+            'Massimizza la larghezza di banda della memoria e la velocità di rendering',
+            'Riduce le richieste di file raggruppando texture e dati',
+            'Garantisce una frequenza di fotogrammi fluida su tutte le piattaforme',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Matematica dell Estrusione dei Bordi e Movimento Subpixel',
+    },
+    {
+      type: 'paragraph',
+      html: 'Applicare un estrusione di bordo da 1 a 2 pixel duplica i pixel esterni evitando imperfezioni visive durante i movimenti di fotocamera.',
+    },
+    {
+      type: 'tip',
+      title: 'Strategia di Estrusione dei Bordi',
+      html: 'Utilizza l estrusione dei bordi per evitare che i pixel adiacenti sfumino tra loro nei movimenti di fotocamera.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Guida alle Dimensioni delle Texture',
+    },
+    {
+      type: 'table',
+      headers: ['Piattaforma Target', 'Dimensione Massima Consigliata', 'Requisito Potenza di 2', 'Profilo Memoria'],
+      rows: [
+        ['Browser Mobile', '2048 x 2048 px', 'Obbligatorio in WebGL 1.0', 'Bassa Larghezza di Banda'],
+        ['PC / Console', '4096 x 4096 px', 'Consigliato', 'Alta Capacità GPU'],
+        ['Console Portatili Retro', '1024 x 1024 px', 'Requisito Rigido', 'Limiti VRAM Rigidi'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: 'Garantisce piena compatibilità con driver grafici datati e WebGL 1.0',
+          con: 'Può lasciare spazio trasparente inutilizzato con pochi sprite',
+        },
+        {
+          pro: 'Abilita il supporto automatico al mipmapping',
+          con: 'Richiede un attenta regolazione della spaziatura per forme irregolari',
+        },
+        {
+          pro: 'Ottimizza l allocazione di memoria VRAM sulla GPU',
+          con: 'Aumenta leggermente l area di texture iniziale',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Termini Chiave nell Impacchettamento',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Draw Call',
+          definition: 'Comando inviato dal processore alla scheda grafica per il rendering di geometria e texture.',
+        },
+        {
+          term: 'Bin Packing',
+          definition: 'Tecnica algoritmica per disporre elementi rettangolari di varie dimensioni in un contenitore minimo.',
+        },
+        {
+          term: 'Border Extrusion',
+          definition: 'Duplicazione dei pixel del bordo verso l esterno per evitare imperfezioni visive.',
+        },
+        {
+          term: 'Flipbook Animation',
+          definition: 'Riproduzione sequenziale rapida di immagini per simulare il movimento continuo nei giochi 2D.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Lista di Controllo delle Prestazioni',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Regole di Produzione',
+      html: 'Raggruppa le animazioni in atlas condivisi e forza dimensioni in potenza di due per WebGL.',
+    },
+  ],
+  faq: [
+    {
+      question: 'Cos è uno sprite sheet e perché è essenziale per i giochi 2D?',
+      answer:
+        'Uno sprite sheet è un unico file immagine contenente più grafiche o fotogrammi. Questo permette al motore di gioco di disegnare molti oggetti in un unica chiamata GPU.',
+    },
+    {
+      question: 'Come funziona l elaborazione locale in questo strumento?',
+      answer:
+        'Le tue immagini vengono elaborate localmente nel tuo browser tramite l API Canvas HTML5 senza inviare dati a server esterni.',
+    },
+    {
+      question: 'Posso estrarre i fotogrammi da uno sprite sheet esistente?',
+      answer:
+        'Sì. Passa alla modalità Estrattore, carica lo foglio e imposta le dimensioni della griglia di taglio.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Carica le Immagini',
+      text: 'Trascina e rilascia i tuoi file PNG o WebP nell area di caricamento.',
+    },
+    {
+      name: 'Configura le Impostazioni',
+      text: 'Regola la spaziatura, l estrusione dei bordi e la dimensione massima della texture.',
+    },
+    {
+      name: 'Anteprima e Download',
+      text: 'Verifica l animazione nel lettore flipbook e scarica il pacchetto ZIP.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Impacchettatore ed Estrattore di Sprite Sheet',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Cos è uno sprite sheet e perché è essenziale per i giochi 2D?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Uno sprite sheet è un unico file immagine contenente più grafiche che permette di disegnare più oggetti in un unica chiamata GPU.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Come impacchettare ed estrarre sprite sheet',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Carica le Immagini',
+          text: 'Trascina e rilascia i tuoi file PNG o WebP nell area di caricamento.',
+        },
+      ],
+    },
+  ],
+  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',
+    },
+  ],
+};