@jjlmoya/utils-games-development 1.47.0 → 1.49.0

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

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'empacotador-e-extrator-de-sprite-sheet',
+  title: 'Empacotador e Extrator de Sprite Sheet',
+  description:
+    'Otimize o desempenho de jogos 2D alinhando frames de animação em atlas de textura ou extraindo sprites de folhas existentes.',
+  ui: {
+    packerTab: 'Estúdio de Empacotamento',
+    extractorTab: 'Extrator de Sprites',
+    dropZoneTitle: 'Arraste e Solte os Frames',
+    dropZoneSubtitle: 'Envie imagens PNG ou WebP para gerar seu atlas de textura otimizado',
+    selectFilesButton: 'Selecionar Imagens',
+    clearAllButton: 'Limpar Área de Trabalho',
+    downloadZipButton: 'Baixar Pacote (ZIP)',
+    copyJsonButton: 'Copiar JSON do Atlas',
+    downloadSheetPngButton: 'Baixar Textura PNG',
+    paddingLabel: 'Espaçamento de Frames (px)',
+    borderExtrusionLabel: 'Extrusão de Borda (px)',
+    maxTextureSizeLabel: 'Dimensão Máxima da Textura',
+    powerOfTwoLabel: 'Forçar Potência de 2 (POT)',
+    trimTransparencyLabel: 'Cortar Transparência',
+    exportFormatLabel: 'Formato do Motor Alvo',
+    presetPixelArt: 'Preset Pixel Art 16x16',
+    presetHdUi: 'Preset Atlas HD UI 1024',
+    presetMobile: 'Preset Mobile WebGL 2048',
+    formatGenericHash: 'JSON Genérico (Hash)',
+    formatGenericArray: 'JSON Genérico (Array)',
+    formatUnity: 'Motor Unity 2D',
+    formatGodot: 'Motor Godot 2D',
+    formatPhaser: 'Motor Phaser / PixiJS',
+    formatCss: 'CSS Web Frontend',
+    previewTitle: 'Pré-visualização do Atlas de Textura',
+    efficiencyBadge: 'Eficiência da Textura',
+    drawCallsBadge: 'Redução de Draw Calls',
+    totalFramesBadge: 'Frames Empacotados',
+    textureSizeBadge: 'Dimensão do Atlas',
+    flipbookTitle: 'Reprodutor Flipbook de Animação',
+    flipbookFpsLabel: 'Velocidade da Animação (FPS)',
+    playAnimation: 'Iniciar Sequência',
+    pauseAnimation: 'Pausar Sequência',
+    extractorModeGrid: 'Corte por Grade Fixa',
+    extractorModeAlpha: 'Corte Automático por Canal Alfa',
+    frameWidthLabel: 'Largura do Frame (px)',
+    frameHeightLabel: 'Altura do Frame (px)',
+    marginLabel: 'Margem Externa (px)',
+    spacingLabel: 'Espaçamento da Grade (px)',
+    extractFramesButton: 'Extrair Imagens',
+    extractedCountLabel: 'Sprites Extraídos',
+    codeSnippetTitle: 'Código de Integração do Motor',
+    copySnippetButton: 'Copiar Código',
+    copiedToast: 'Copiado para a Área de Transferência',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Otimização de Renderização e Draw Calls em Motores de Jogos 2D',
+    },
+    {
+      type: 'paragraph',
+      html: 'Agrupar múltiplos frames individuais em um único atlas de textura reduz drasticamente o número de instruções draw calls enviadas do processador para a placa gráfica GPU.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'Redução de Draw Calls' },
+        { value: '4x', label: 'Processamento GPU Mais Rápido' },
+        { value: '60 FPS', label: 'Meta Estável em Dispositivos Móveis' },
+        { value: '100%', label: 'Processamento Local no Navegador' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Comparativo entre Imagens Avulsas e Atlas de Textura',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Arquivos de Frames Avulsos',
+          description: 'Arquivos PNG ou WebP armazenados separadamente',
+          points: [
+            'Gera uma instrução draw call separada para cada frame exibido na tela',
+            'Provoca trocas frequentes de contexto na placa de vídeo GPU',
+            'Aumenta o número de requisições HTTP em jogos para web',
+            'Queda de taxa de quadros em dispositivos móveis',
+          ],
+        },
+        {
+          title: 'Atlas de Textura Empacotado',
+          description: 'Imagem PNG única combinada com dados de coordenadas JSON',
+          points: [
+            'Agrupa centenas de sprites em uma única instrução draw call da GPU',
+            'Maximiza a largura de banda da memória VRAM e a velocidade de renderização',
+            'Reduz requisições agrupando textura e dados em um único download',
+            'Garante 60 FPS fluídos em todas as plataformas',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Matemática da Extrusão de Bordas e Movimento Subpixel',
+    },
+    {
+      type: 'paragraph',
+      html: 'Aplicar 1 a 2 pixels de extrusão de borda duplica os pixels externos da imagem, evitando linhas visíveis quando a câmera se move em subpixels.',
+    },
+    {
+      type: 'tip',
+      title: 'Estratégia de Extrusão de Bordas',
+      html: 'Utilize extrusão de bordas para impedir que pixels vizinhos vazem ao movimentar a câmera 2D.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Dimensões Recomendadas de Textura por Plataforma',
+    },
+    {
+      type: 'table',
+      headers: ['Plataforma Alvo', 'Tamanho Máximo Recomendado', 'Requisito Potência de 2', 'Perfil de Memória'],
+      rows: [
+        ['Navegadores Móveis', '2048 x 2048 px', 'Obrigatório em WebGL 1.0', 'Baixa Largura de Banda'],
+        ['PC / Consoles', '4096 x 4096 px', 'Recomendado', 'Alta Capacidade de GPU'],
+        ['Consoles Portáteis Retro', '1024 x 1024 px', 'Requisito Estrito', 'Limites de VRAM Rigorosos'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: 'Garante 100% de compatibilidade com drivers antigos e WebGL 1.0',
+          con: 'Pode deixar espaço transparente não utilizado com poucos sprites',
+        },
+        {
+          pro: 'Suporta geração automática de mipmaps por hardware',
+          con: 'Exige ajuste fino de margem em formatos irregulares',
+        },
+        {
+          pro: 'Otimiza a alocação de memória VRAM na placa gráfica',
+          con: 'Aumenta ligeiramente a área de textura inicial',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Termos Chave no Empacotamento de Sprites',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Draw Call',
+          definition: 'Instrução enviada pelo processador para a placa gráfica desenhar geometrias e texturas.',
+        },
+        {
+          term: 'Bin Packing',
+          definition: 'Técnica algorítmica para organizar elementos retangulares de forma otimizada em espaço mínimo.',
+        },
+        {
+          term: 'Border Extrusion',
+          definition: 'Duplicação dos pixels da borda para fora evitando imperfeições ao mover a câmera.',
+        },
+        {
+          term: 'Flipbook Animation',
+          definition: 'Reprodução sequencial rápida de quadros estáticos para simular movimento contínuo.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Lista de Controle de Desempenho',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Regras de Produção',
+      html: 'Agrupe animações em atlas compartilhados e utilize potências de dois para builds em WebGL.',
+    },
+  ],
+  faq: [
+    {
+      question: 'O que é um sprite sheet e por que é essencial em jogos 2D?',
+      answer:
+        'Um sprite sheet é um arquivo de imagem composto contendo múltiplos frames de animação. Isso permite desenhar vários elementos em uma única instrução da GPU.',
+    },
+    {
+      question: 'Como funciona o processamento local nesta ferramenta?',
+      answer:
+        'Suas imagens são processadas localmente no seu navegador através da API Canvas HTML5 sem enviar dados a servidores externos.',
+    },
+    {
+      question: 'Posso extrair frames de uma folha de sprites existente?',
+      answer:
+        'Sim. Mude para o modo Extrator, envie sua folha e ajuste o tamanho da grade para recortar cada imagem.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Enviar Imagens',
+      text: 'Arraste e solte seus arquivos PNG ou WebP na área de carregamento.',
+    },
+    {
+      name: 'Ajustar Configurações',
+      text: 'Configure o espaçamento, a extrusão de borda e a dimensão máxima da textura.',
+    },
+    {
+      name: 'Pré-visualizar e Baixar',
+      text: 'Verifique a animação no reprodutor flipbook e baixe seu arquivo ZIP.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Empacotador e Extrator de Sprite Sheet',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'O que é um sprite sheet e por que é essencial em jogos 2D?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Um sprite sheet é um arquivo de imagem composto contendo múltiplos frames de animação que permite desenhar vários elementos em uma única instrução da GPU.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Como empacotar e extrair sprite sheets',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Enviar Imagens',
+          text: 'Arraste e solte seus arquivos PNG ou WebP na área de carregamento.',
+        },
+      ],
+    },
+  ],
+  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/ru.ts

@@ -0,0 +1,266 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'upakovshchik-i-ekstraktor-sprajt-shitov',
+  title: 'Упаковщик и Экстрактор Спрайт Шитов',
+  description:
+    'Оптимизируйте производительность 2D игр объединяя отдельные кадры анимации в атласы текстур или извлекая спрайты из готовых листов.',
+  ui: {
+    packerTab: 'Студия Упаковки',
+    extractorTab: 'Экстрактор Спрайтов',
+    dropZoneTitle: 'Перетащите Кадры Сюда',
+    dropZoneSubtitle: 'Загрузите изображения PNG или WebP для создания оптимизированного атласа текстур',
+    selectFilesButton: 'Выбрать Файлы Изображений',
+    clearAllButton: 'Очистить Рабочую Область',
+    downloadZipButton: 'Скачать Архив (ZIP)',
+    copyJsonButton: 'Копировать JSON Атласа',
+    downloadSheetPngButton: 'Скачать Текстуру PNG',
+    paddingLabel: 'Отступ Кадров (px)',
+    borderExtrusionLabel: 'Экструзия Краев (px)',
+    maxTextureSizeLabel: 'Максимальный Размер Текстуры',
+    powerOfTwoLabel: 'Степень Двойки (POT)',
+    exportFormatLabel: 'Формат Игрового Движка',
+    presetPixelArt: 'Пресет Пиксель Арт 16x16',
+    presetHdUi: 'Пресет HD UI Atlas 1024',
+    presetMobile: 'Пресет Mobile WebGL 2048',
+    formatGenericHash: 'Общий JSON (Hash)',
+    formatGenericArray: 'Общий JSON (Array)',
+    formatUnity: 'Движок Unity 2D',
+    formatGodot: 'Движок Godot 2D',
+    formatPhaser: 'Движок Phaser / PixiJS',
+    formatCss: 'CSS Web Frontend',
+    previewTitle: 'Предпросмотр Атласа Текстур',
+    efficiencyBadge: 'Эффективность Упаковки',
+    drawCallsBadge: 'Сокращение Draw Calls',
+    totalFramesBadge: 'Упаковано Кадров',
+    textureSizeBadge: 'Разрешение Атласа',
+    flipbookTitle: 'Анимационный Плеер Флипбук',
+    flipbookFpsLabel: 'Скорость Анимации (FPS)',
+    playAnimation: 'Запустить',
+    pauseAnimation: 'Пауза',
+    frameWidthLabel: 'Ширина Кадра (px)',
+    frameHeightLabel: 'Высота Кадра (px)',
+    marginLabel: 'Внешний Отступ (px)',
+    spacingLabel: 'Шаг Сетки (px)',
+    extractedCountLabel: 'Извлечено Спрайтов',
+    codeSnippetTitle: 'Код Интеграции с Движком',
+    copySnippetButton: 'Копировать Код',
+    copiedToast: 'Скопировано в Буфер Обмена',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Оптимизация Вызовов Отрисовки Draw Calls и Батчинг GPU в 2D Движках',
+    },
+    {
+      type: 'paragraph',
+      html: 'Объединение отдельных изображений кадров в единый атлас текстур уменьшает количество команд отрисовки draw calls отправляемых процессором на видеокарту.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'Сокращение Draw Calls' },
+        { value: '4x', label: 'Ускорение Обработки GPU' },
+        { value: '60 FPS', label: 'Стабильная Цель на Мобильных' },
+        { value: '100%', label: 'Локальная Обработка в Браузере' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Сравнение Отдельных Файлов и Упакованных Атласов Текстур',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Отдельные Файлы Кадров',
+          description: 'Отдельно сохраненные файлы PNG или WebP',
+          points: [
+            'Генерирует отдельный вызов отрисовки для каждого кадра на экране',
+            'Вызывает частые переключения контекста на видеокарте GPU',
+            'Увеличивает количество HTTP запросов в браузерных играх',
+            'Падение производительности на мобильных устройствах',
+          ],
+        },
+        {
+          title: 'Упакованный Атлас Текстур',
+          description: 'Единое PNG изображение с JSON метаданными',
+          points: [
+            'Объединяет сотни спрайтов в один вызов отрисовки GPU',
+            'Максимизирует пропускную способность видеопамяти',
+            'Уменьшает количество сетевых запросов',
+            'Обеспечивает плавные 60 FPS на любых платформах',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Математика Экструзии Краев и Субпиксельное Движение',
+    },
+    {
+      type: 'paragraph',
+      html: 'Применение экструзии краев от 1 до 2 пикселей дублирует крайние пиксели кадров наружу исключая появление видимых швов при движении камеры.',
+    },
+    {
+      type: 'tip',
+      title: 'Стратегия Экструзии Краев',
+      html: 'Используйте экструзию краев для полного устранения артефактов на границах спрайтов при движении камеры.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Рекомендуемые Размеры Текстур для Различных Платформ',
+    },
+    {
+      type: 'table',
+      headers: ['Целевая Платформа', 'Рекомендуемый Макс Размер', 'Требование Степени 2', 'Профиль Памяти'],
+      rows: [
+        ['Мобильные Браузеры', '2048 x 2048 px', 'Обязательно для WebGL 1.0', 'Низкая Пропускная Способность'],
+        ['ПК / Консоли', '4096 x 4096 px', 'Рекомендуется', 'Высокая Емкость GPU'],
+        ['Ретро Портативные Консоли', '1024 x 1024 px', 'Строгое Требование', 'Строгие Лимиты VRAM'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: 'Гарантирует 100% совместимость со старыми драйверами и WebGL 1.0',
+          con: 'Может оставлять неиспользуемое прозрачное пространство при малом числе спрайтов',
+        },
+        {
+          pro: 'Поддерживает автоматическую генерацию мипмапов',
+          con: 'Требует точной настройки отступов при нестандартных размерах',
+        },
+        {
+          pro: 'Оптимизирует распределение видеопамяти VRAM на GPU',
+          con: 'Незначительно увеличивает начальную площадь текстуры',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Ключевые Термины Упаковки Спрайтов',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Draw Call',
+          definition: 'Команда от процессора видеокарте на отрисовку геометрии и текстур.',
+        },
+        {
+          term: 'Bin Packing',
+          definition: 'Алгоритм оптимальной упаковки прямоугольников разного размера в минимальную область.',
+        },
+        {
+          term: 'Border Extrusion',
+          definition: 'Дублирование крайних пикселей наружу для предотвращения визуальных швов при движении.',
+        },
+        {
+          term: 'Flipbook Animation',
+          definition: 'Быстрое последовательное воспроизведение кадров для имитации движения в 2D играх.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Чек Лист Оптимизации Производительности',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Правила Разработки',
+      html: 'Группируйте анимации в общие атласы и используйте размеры степеней двойки для WebGL сборки.',
+    },
+  ],
+  faq: [
+    {
+      question: 'Что такое спрайт шит и почему он важен для 2D игр?',
+      answer:
+        'Спрайт шит это единое изображение содержащее множество кадров анимации. Это позволяет движку рисовать объекты за один вызов GPU.',
+    },
+    {
+      question: 'Как работает локальная обработка в этом инструменте?',
+      answer:
+        'Все операции выполняются локально в вашем браузере через HTML5 Canvas API без отправки файлов на сервера.',
+    },
+    {
+      question: 'Могу ли я нарезать готовый спрайт шит на отдельные кадры?',
+      answer:
+        'Да. Переключитесь в режим Экстрактора, загрузите лист и настройте параметры сетки.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Загрузите Кадры',
+      text: 'Перетащите файлы PNG или WebP в рабочую область.',
+    },
+    {
+      name: 'Настройте Параметры',
+      text: 'Установите отступы, экструзию краев и формат игрового движка.',
+    },
+    {
+      name: 'Проверьте и Скачайте',
+      text: 'Просмотрите анимацию в плеере флипбук и скачайте ZIP архив.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Упаковщик и Экстрактор Спрайт Шитов',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Что такое спрайт шит и почему он важен для 2D игр?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Спрайт шит это единое изображение содержащее множество кадров анимации.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Как упаковать и нарезать спрайт шиты',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Загрузите Кадры',
+          text: 'Перетащите файлы PNG или WebP в рабочую область.',
+        },
+      ],
+    },
+  ],
+  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',
+    },
+  ],
+};