@jjlmoya/utils-games-development 1.47.0 → 1.50.0

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

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'sprite-sheet-packer',
+  title: 'スプライトシートパッカー & エクストラクター',
+  description:
+    '個別のアニメーションフレームをテクスチャアトラスにパッキング、または既存のスプライトシートから画像を抽出して2Dゲームの描画負荷を最適化します。',
+  ui: {
+    packerTab: 'パッカースタジオ',
+    extractorTab: 'スプライト抽出器',
+    dropZoneTitle: 'フレーム画像をドラッグ＆ドロップ',
+    dropZoneSubtitle: 'PNGまたはWebP画像をアップロードして最適なテクスチャアトラスを生成',
+    selectFilesButton: '画像ファイルを選択',
+    clearAllButton: 'ワークスペースをクリア',
+    downloadZipButton: 'パッケージをダウンロード (ZIP)',
+    copyJsonButton: 'アトラスJSONをコピー',
+    downloadSheetPngButton: 'テクスチャPNGをダウンロード',
+    paddingLabel: 'フレーム間隔 (px)',
+    borderExtrusionLabel: '境界パディング (px)',
+    maxTextureSizeLabel: '最大テクスチャサイズ',
+    powerOfTwoLabel: '2の累乗サイズを強制 (POT)',
+    trimTransparencyLabel: '透明領域をトリミング',
+    exportFormatLabel: '出力エンジンフォーマット',
+    presetPixelArt: 'ドット絵 16x16 プリセット',
+    presetHdUi: 'HD UI アトラス 1024 プリセット',
+    presetMobile: 'モバイル WebGL 2048 プリセット',
+    formatGenericHash: '汎用 JSON (Hash)',
+    formatGenericArray: '汎用 JSON (Array)',
+    formatUnity: 'Unity 2D エンジン',
+    formatGodot: 'Godot 2D エンジン',
+    formatPhaser: 'Phaser / PixiJS エンジン',
+    formatCss: 'Web フロントエンド CSS',
+    previewTitle: 'テクスチャアトラス プレビュー',
+    efficiencyBadge: 'テクスチャ充填率',
+    drawCallsBadge: 'ドローコール削減数',
+    totalFramesBadge: 'パッキング済フレーム数',
+    textureSizeBadge: 'アトラス解像度',
+    flipbookTitle: 'アニメーションパラパラマンガ',
+    flipbookFpsLabel: '再生速度 (FPS)',
+    playAnimation: '再生開始',
+    pauseAnimation: '一時停止',
+    extractorModeGrid: '固定グリッド分割',
+    extractorModeAlpha: '自動アルファチャンネル分割',
+    frameWidthLabel: 'フレーム幅 (px)',
+    frameHeightLabel: 'フレーム高さ (px)',
+    marginLabel: 'マージンオフセット (px)',
+    spacingLabel: 'グリッド間隔 (px)',
+    extractFramesButton: '画像を抽出',
+    extractedCountLabel: '抽出されたスプライト数',
+    codeSnippetTitle: 'エンジン組み込みコード',
+    copySnippetButton: 'コードをコピー',
+    copiedToast: 'クリップボードにコピーしました',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: '2Dゲームエンジンにおけるドローコール最適化とGPUバッチ処理',
+    },
+    {
+      type: 'paragraph',
+      html: '現代の2Dグラフィックス描画処理では、個別の画像ファイルを1枚のテクスチャアトラスにパッキングすることで、CPUからGPUへ送られる描画命令（ドローコール）を大幅に削減できます。',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: 'ドローコール削減率' },
+        { 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: [
+            '画面上の各フレームごとに個別の描画命令が発生する',
+            'グラフィックカードのコンテキストスイッチが頻繁に起こる',
+            'Webゲームにおいて通信リクエスト数が増加する',
+            'モバイル端末でのフレームレートが低下しやすい',
+          ],
+        },
+        {
+          title: '結合済みテクスチャアトラス',
+          description: 'メタデータJSONが付属する単一のテクスチャ画像',
+          points: [
+            '数百個のスプライトを単一のドローコールでまとめて描写できる',
+            'GPUのメモリ帯域幅とレンダリング速度を最大限に活用できる',
+            '画像とメタデータをまとめることでファイル取得処理を高速化する',
+            'あらゆるゲームエンジンで滑らかな動作を実現する',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'サブピクセルカメラ移動と境界拡張パディング',
+    },
+    {
+      type: 'paragraph',
+      html: 'カメラ移動時の境界滲みを防ぐため、境界ピクセルを外側に1〜2ピクセル拡張複製する処理（Border Extrusion）が極めて有効です。',
+    },
+    {
+      type: 'tip',
+      title: '境界拡張パディングの最適化戦略',
+      html: 'カメラ移動やズーム時の視覚的ノイズを完全に防止するため、パッキング時に1〜2ピクセルの境界拡張を設定してください。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'モバイルおよびPC向けテクスチャ解像度ガイドライン',
+    },
+    {
+      type: 'table',
+      headers: ['対象プラットフォーム', '推奨最大サイズ', '2の累乗要件', 'メモリプロファイル'],
+      rows: [
+        ['モバイルブラウザ', '2048 x 2048 px', 'WebGL 1.0で必須', '低メモリ帯域'],
+        ['デスクトップPC / コンソール', '4096 x 4096 px', '推奨', '高GPU容量'],
+        ['レトロ小型ゲーム機', '1024 x 1024 px', '必須', '厳格なVRAM制限'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: '旧世代のグラフィックドライバやWebGL 1.0との完全な互換性を保証する',
+          con: '画像枚数が少ない場合に余白が残る可能性がある',
+        },
+        {
+          pro: 'ハードウェアによる自動ミップマップ生成をサポートする',
+          con: '複雑な形状の画像では余白設定に微調整が必要',
+        },
+        {
+          pro: 'GPUのVRAM割り当てを効率化できる',
+          con: '初期テクスチャ領域がわずかに増加する',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'スプライトパッキングの主要用語解説',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'ドローコール (Draw Call)',
+          definition: 'CPUがGPUに対して画像やポリゴンを描画するよう送る指示のこと。',
+        },
+        {
+          term: 'ビンパッキング (Bin Packing)',
+          definition: '様々なサイズの長方形を最小限の領域に詰める計算手法のこと。',
+        },
+        {
+          term: '境界パディング (Border Extrusion)',
+          definition: 'テクスチャの端のピクセルを外側に伸ばし境界ノイズを防ぐ処理。',
+        },
+        {
+          term: 'パラパラマンガ (Flipbook Animation)',
+          definition: '静止画を高速で切り替えて滑らかな動きを表現するアニメーション手法。',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'パフォーマンス点検リスト',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: '開発運用ルール',
+      html: 'アニメーションは共通アトラスにまとめ、WebGL出力時は2の累乗サイズを選択してください。',
+    },
+  ],
+  faq: [
+    {
+      question: 'スプライトシートとは何ですか？なぜ2Dゲームに必要なのですか？',
+      answer:
+        'スプライトシートは複数のアニメーション画像を1枚にまとめたテクスチャファイルです。まとめにすることでGPUへの描画命令数を削減し、ゲームを高速化できます。',
+    },
+    {
+      question: 'このツールの処理はどのように行われますか？',
+      answer:
+        'すべての画像処理はお使いのブラウザ内部のHTML5 Canvas機能で行われます。外部サーバーに画像データが送信されることは一切ありません。',
+    },
+    {
+      question: '既存のスプライトシートから画像を分割できますか？',
+      answer:
+        'はい。抽出モードに切り替えて画像をアップロードし、分割サイズを指定することで個別画像を一括抽出できます。',
+    },
+  ],
+  howTo: [
+    {
+      name: '画像をアップロード',
+      text: 'ドロップエリアにアニメーションフレーム画像を追加します。',
+    },
+    {
+      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: 'スプライトシートとは何ですか？',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'スプライトシートは複数のアニメーション画像を1枚にまとめたテクスチャファイルです。',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'スプライトシートの作成と分割方法',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: '画像をアップロード',
+          text: 'ドロップエリアにアニメーションフレーム画像を追加します。',
+        },
+      ],
+    },
+  ],
+  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/ko.ts

@@ -0,0 +1,270 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SpriteSheetPackerUI } from '../ui';
+
+export const content: ToolLocaleContent<SpriteSheetPackerUI> = {
+  slug: 'sprite-sheet-packer',
+  title: '스프라이트 시트 패커 및 추출기',
+  description:
+    '낱개 개별 애니메이션 프레임을 텍스처 아틀라스로 패킹하거나 기존 스프라이트 시트에서 이미지를 추출하여 2D 게임 드로우 콜을 최적화하세요.',
+  ui: {
+    packerTab: '패커 스튜디오',
+    extractorTab: '스프라이트 추출기',
+    dropZoneTitle: '프레임 이미지 드래그 앤 드롭',
+    dropZoneSubtitle: 'PNG 또는 WebP 이미지를 업로드하여 최적화된 텍스처 아틀라스 생성',
+    selectFilesButton: '이미지 파일 선택',
+    clearAllButton: '작업 영역 비우기',
+    downloadZipButton: '패키지 다운로드 (ZIP)',
+    copyJsonButton: '아틀라스 JSON 복사',
+    downloadSheetPngButton: '텍스처 PNG 다운로드',
+    paddingLabel: '프레임 간격 (px)',
+    borderExtrusionLabel: '테두리 확장 (px)',
+    maxTextureSizeLabel: '최대 텍스처 해상도',
+    powerOfTwoLabel: '2의 거듭제곱 규격 강제 (POT)',
+    trimTransparencyLabel: '투명 영역 잘라내기',
+    exportFormatLabel: '타깃 엔진 포맷',
+    presetPixelArt: '픽셀 아트 16x16 프리셋',
+    presetHdUi: 'HD UI 아틀라스 1024 프리셋',
+    presetMobile: '모바일 WebGL 2048 프리셋',
+    formatGenericHash: '일반 JSON (Hash)',
+    formatGenericArray: '일반 JSON (Array)',
+    formatUnity: 'Unity 2D 엔진',
+    formatGodot: 'Godot 2D 엔진',
+    formatPhaser: 'Phaser / PixiJS 엔진',
+    formatCss: '웹 프론트엔드 CSS',
+    previewTitle: '텍스처 아틀라스 미리보기',
+    efficiencyBadge: '텍스처 공간 효율',
+    drawCallsBadge: '절감된 드로우 콜',
+    totalFramesBadge: '패킹된 프레임 수',
+    textureSizeBadge: '아틀라스 해상도',
+    flipbookTitle: '애니메이션 플립북 플레이어',
+    flipbookFpsLabel: '애니메이션 속도 (FPS)',
+    playAnimation: '시퀀스 재생',
+    pauseAnimation: '일시 정지',
+    extractorModeGrid: '고정 격자 분할',
+    extractorModeAlpha: '자동 알파 채널 분할',
+    frameWidthLabel: '프레임 가로 (px)',
+    frameHeightLabel: '프레임 세로 (px)',
+    marginLabel: '여백 오프셋 (px)',
+    spacingLabel: '격자 간격 (px)',
+    extractFramesButton: '이미지 추출하기',
+    extractedCountLabel: '추출된 스프라이트 수',
+    codeSnippetTitle: '엔진 연동 코드',
+    copySnippetButton: '코드 복사',
+    copiedToast: '클립보드에 복사되었습니다',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: '2D 게임 엔진의 드로우 콜 최적화 및 GPU 렌더링',
+    },
+    {
+      type: 'paragraph',
+      html: '개별 낱개 프레임 이미지를 단 하나의 텍스처 아틀라스로 패킹하면 CPU에서 GPU로 전송되는 렌더링 드로우 콜 횟수가 획기적으로 줄어듭니다.',
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { value: '95%', label: '드로우 콜 절감률' },
+        { value: '4x', label: 'GPU 일괄 처리 속도 향상' },
+        { value: '60 FPS', label: '모바일 목표 성능' },
+        { value: '100%', label: '브라우저 로컬 처리' },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '개별 프레임 파일 vs 패킹된 텍스처 아틀라스 비교',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: '개별 프레임 파일',
+          description: '독립적으로 저장된 PNG 파일',
+          points: [
+            '화면상의 개별 프레임마다 독립적인 드로우 콜 명령 호출',
+            '그래픽 카드 GPU 렌더링 컨텍스트 스위칭 빈번히 발생',
+            '웹 게임 환경에서 HTTP 요청 수 대폭 증가',
+            '모바일 기기에서 프레임 레이트 저하 유발',
+          ],
+        },
+        {
+          title: '패킹된 텍스처 아틀라스',
+          description: '단일 PNG 이미지와 JSON 좌표 데이터 결합',
+          points: [
+            '수백 개의 스프라이트를 단 하나의 GPU 드로우 콜로 묶어서 처리',
+            '그래픽 메모리 대역폭 및 렌더링 처리량 극대화',
+            '이미지와 메타데이터를 묶어 네트워크 요청 단순화',
+            '모든 플랫폼에서 부드러운 렌더링 성능 보장',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '서브픽셀 카메라 이동 및 테두리 확장 기술',
+    },
+    {
+      type: 'paragraph',
+      html: '외곽 테두리 피셀을 1~2픽셀 외곽으로 확장 복사하는 Border Extrusion을 적용하면 카메라 이동 시 발생하는 픽셀 번짐 현상을 방지할 수 있습니다.',
+    },
+    {
+      type: 'tip',
+      title: '테두리 확장 최적화 전략',
+      html: '카메라 이동 시 발생하는 시각적 경계 간섭을 방지하기 위해 1~2픽셀의 테두리 확장을 설정하세요.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '모바일 및 PC 엔진용 권장 텍스처 규격',
+    },
+    {
+      type: 'table',
+      headers: ['타깃 플랫폼', '권장 최대 크기', '2의 거듭제곱 필수 여부', '메모리 프로필'],
+      rows: [
+        ['모바일 웹 브라우저', '2048 x 2048 px', 'WebGL 1.0 필수', '낮은 대역폭'],
+        ['데스크톱 PC / 콘솔', '4096 x 4096 px', '권장', '높은 GPU 용량'],
+        ['레트로 휴대용 기기', '1024 x 1024 px', '필수', '엄격한 VRAM 제한'],
+      ],
+    },
+    {
+      type: 'proscons',
+      items: [
+        {
+          pro: '구형 그래픽 드라이버 및 WebGL 1.0 환경과의 완벽한 호환성 제공',
+          con: '스프라이트 개수가 적을 때 여백 공간이 남을 수 있음',
+        },
+        {
+          pro: '하드웨어 밉맵 자동 생성 지원',
+          con: '불규칙한 프레임인 경우 정교한 여백 조절 필요',
+        },
+        {
+          pro: 'GPU 메모리 VRAM 할당 최적화',
+          con: '초기 텍스처 할당 영역이 약간 증가함',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '스프라이트 패킹 핵심 용어',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: '드로우 콜 (Draw Call)',
+          definition: 'CPU가 그래픽 카드 GPU에 그래픽 렌더링을 명령하는 지시 횟수.',
+        },
+        {
+          term: '빈 패킹 (Bin Packing)',
+          definition: '다양한 크기의 사각형들을 가장 작은 영역 안에 효율적으로 배치하는 알고리즘.',
+        },
+        {
+          term: '외곽 확장 (Border Extrusion)',
+          definition: '이미지 테두리 피셀을 외곽으로 확장하여 그래픽 경계선 경계 간섭을 막는 기술.',
+        },
+        {
+          term: '플립북 애니메이션 (Flipbook Animation)',
+          definition: '연속된 프레임 이미지를 빠르게 재생하여 움직임을 표현하는 방식.',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '개발 점검 리스트',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: '생산성 규칙',
+      html: '캐릭터 애니메이션은 하나로 패킹하고 WebGL 빌드 시 2의 거듭제곱 해상도를 유지하세요.',
+    },
+  ],
+  faq: [
+    {
+      question: '스프라이트 시트가 무엇이며 왜 2D 게임 개발에 필요한가요?',
+      answer:
+        '스프라이트 시트는 여러 프레임 이미지를 하나로 합친 텍스처 파일입니다. 이를 통해 렌더링 드로우 콜을 줄여 게임 속도를 향상시킵니다.',
+    },
+    {
+      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: '스프라이트 시트가 무엇인가요?',
+          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',
+    },
+  ],
+};