@jjlmoya/utils-games-development 1.61.0 → 1.63.0

package/src/tool/hitboxHurtboxAnimator/i18n/sv.ts

@@ -0,0 +1,195 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { HitboxHurtboxAnimatorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+const slug = 'animera-hitbox-och-hurtbox-sprites';
+const title = 'Animera Hitbox och Hurtbox för Sprites';
+const description = 'Rita kollisionslager på varje bildruta av din sprite, förhandsgranska rörelser med lökpapper (onion skin), redigera exakta pixelkoordinater och exportera JSON.';
+
+const faq = [
+  {
+    question: 'Vad är skillnaden mellan en hitbox och en hurtbox?',
+    answer: 'En hitbox definierar det område som utdelar en attack, medan en hurtbox definierar det område som kan ta emot skada. Pushboxes håller karaktärer på avstånd och grabboxes sätter räckvidden för grepp.',
+  },
+  {
+    question: 'Lämnar mina spritefiler webbläsaren?',
+    answer: 'Nej. Bilderna bearbetas och exporteras helt i din webbläsare. Endast redigeringsinställningar sparas lokalt.',
+  },
+  {
+    question: 'Vilket koordinatsystem använder JSON-exporten?',
+    answer: 'Varje bildruta mäter sina pixelkoordinater från det övre vänstra hörnet. Måtten för bredd och höjd lagrar positiva värden tillsammans med sin egen fästpunkt (pivot).',
+  },
+  {
+    question: 'Kan jag redigera både spritesheets och enskilda bildrutor?',
+    answer: 'Ja. Du kan ladda ett PNG- eller WebP-spritesheet genom att ange rader och kolumner, eller välja flera sorterade filer.',
+  },
+  {
+    question: 'Fungerar exporten direkt i alla spelmotorer?',
+    answer: 'JSON-formatet är neutralt. Det sparar bildruteramarna, fästpunkter och geometriska lager utan att tvinga fram en specifik spelmotorstruktur.',
+  },
+];
+
+const howTo = [
+  { name: 'Ladda grafik', text: 'Välj ett PNG/WebP-spritesheet eller sorterade bildfiler. Bearbetningen sker lokalt på din enhet.' },
+  { name: 'Ställ in bildrutor', text: 'Ange antal rader och kolumner och kontrollera beskärningen i tidslinjen.' },
+  { name: 'Rita kollisionslager', text: 'Välj ett hitbox-, hurtbox-, pushbox- eller sensorlager och rita en rektangel eller cirkel.' },
+  { name: 'Finjustera rörelse', text: 'Redigera exakta koordinater, kopiera former till närliggande bildrutor och använd lökpapper för att jämföra.' },
+  { name: 'Exportera projektet', text: 'Ladda ner den neutrala JSON-filen och en PNG-kontaktkarta. Spara originalbilderna tillsammans med JSON-filen.' },
+];
+
+const softwareApplication: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+};
+
+const faqPage: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
+};
+
+export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
+  slug,
+  title,
+  description,
+  ui: {
+    onboarding: 'Ladda en animering, bekräfta bildrutebeskärningen och rita områden för attack, skada eller fysikkollision.',
+    privacyNote: 'Lokal animeringsarbetsbänk. Bilder laddas inte upp.',
+    loadSprite: 'Placera grafik på arbetsbänken',
+    loadHint: 'Välj ett spritesheet eller flera sorterade PNG/WebP-bilder.',
+    chooseImages: 'Välj bildfiler',
+    slicingTitle: 'Bildrutebeskärning',
+    rowsLabel: 'Rader',
+    columnsLabel: 'Kolumner',
+    applySlicing: 'Beskär',
+    playbackTitle: 'Rörelsevisning',
+    previousFrame: 'Föregående bildruta',
+    play: 'Spela upp',
+    pause: 'Pausa',
+    nextFrame: 'Nästa bildruta',
+    fpsLabel: 'Bildrutor per sekund',
+    onionPrevious: 'Föregående lökpapper',
+    onionNext: 'Nästa lökpapper',
+    layerTitle: 'Kollisionslager',
+    typeHitbox: 'Hitbox',
+    typeHurtbox: 'Hurtbox',
+    typePushbox: 'Pushbox',
+    typeGrabbox: 'Grabbox',
+    typeSensor: 'Sensor',
+    typeCustom: 'Anpassad',
+    shapeRectangle: 'Rektangel',
+    shapeCircle: 'Cirkel',
+    drawShape: 'Rita',
+    selectShape: 'Välj',
+    stageLabel: 'Arbetsyta',
+    emptyStage: 'Ladda bilder för att börja rita kollisionslager.',
+    frameReadout: 'Bildruta {current} av {total}',
+    timelineTitle: 'Bildruterad',
+    inspectorTitle: 'Forminspektör',
+    noSelection: 'Välj en form för att redigera dess exakta koordinater.',
+    nameLabel: 'Lagernamn',
+    xLabel: 'X i pixlar',
+    yLabel: 'Y i pixlar',
+    widthLabel: 'Bredd i pixlar',
+    heightLabel: 'Höjd i pixlar',
+    radiusLabel: 'Radie i pixlar',
+    duplicateShape: 'Duplicera',
+    mirrorShape: 'Spegelvänd horisontellt',
+    deleteShape: 'Ta bort form',
+    copyPrevious: 'Kopiera föregående bildruta hit',
+    copyAll: 'Kopiera denna bildruta till alla',
+    pivotTitle: 'Bildrutefästpunkt (Pivot)',
+    pivotXLabel: 'Fästpunkt X',
+    pivotYLabel: 'Fästpunkt Y',
+    exportTitle: 'Exportera projekt',
+    exportJson: 'Ladda ner JSON',
+    importJson: 'Importera JSON',
+    exportContactSheet: 'Ladda ner kontaktkarta',
+    resetProject: 'Rensa lager',
+    undo: 'Ångra',
+    redo: 'Gör om',
+    statusReady: 'Arbetsbänken är redo.',
+    statusImageLoaded: '{count} bildfiler laddade.',
+    statusShapeCreated: 'Ny kollisionsform tillagd.',
+    statusShapeUpdated: 'Form uppdaterad.',
+    statusImported: 'Projekt importerat.',
+    statusExported: 'Export redo.',
+    statusError: 'Kunde inte läsa filen.',
+    framesBadge: '{count} bildrutor',
+    shapesBadge: '{count} former',
+    coverageBadge: '{percent}% täckt',
+    coordinatesNote: 'Koordinater mäter från det övre vänstra hörnet av varje bildruta (0,0).',
+    localOnlyDisclosure: 'JSON-filen sparar bildnamn, fästpunkter och former utan att innehålla bildpixlar.',
+    limitationDisclosure: 'Lagren definierar geometriska designområden. Testa beteendet i din spelmotor.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Designa hitboxes och hurtboxes anpassade efter rörelsen',
+    },
+    {
+      type: 'paragraph',
+      html: 'Att ställa in kollisioner blir svårt när varje bildruta analyseras separat. Denna redigerare samlar spritens bild, kollisionslager, lökpapper och tidslinjen för att säkerställa att rörelsen flyter jämnt.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Välj varje kollisionslager utefter dess funktion i spelet',
+    },
+    {
+      type: 'table',
+      headers: ['Lager', 'Huvudfunktion', 'Att kontrollera'],
+      rows: [
+        ['Hitbox', 'Område som utdelar en attack eller effekt', 'Visas den endast under de aktiva bildrutorna?'],
+        ['Hurtbox', 'Område som tar emot skada', 'Följer den karaktärens kropp utan onödiga luckor?'],
+        ['Pushbox', 'Fysisk kollisionsyta mellan karaktärer', 'Håller den sig stabil för att undvika hack i rörelsen?'],
+        ['Grabbox', 'Räckvidd för att påbörja ett grepp', 'Stämmer tajmingen med den visuella animeringen?'],
+        ['Sensor', 'Detekteringsyta för interaktioner', 'Är lagernamnet tillräckligt tydligt?'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Förstå och tillämpa koordinatsystemet',
+    },
+    {
+      type: 'paragraph',
+      html: 'Det exporterade projektet mäter X och Y från det övre vänstra hörnet av varje beskuren bildruta. Bredden och höjden anges i positiva pixelvärden.',
+    },
+    {
+      type: 'tip',
+      title: 'Kontrollera hela animeringssekvensen',
+      html: 'Spela upp hela animeringen efter att ha ändrat en bildruta för att säkerställa att rörelsen känns prirodlig.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Använd kontaktkartan i teamets arbete',
+    },
+    {
+      type: 'paragraph',
+      html: 'PNG-kontaktkartan visar alla bildrutor och deras färglager på en och samma bild, vilket underlättar kommunikationen mellan grafiker och programmerare.',
+    },
+  ],
+  faq,
+  bibliographyTitle: 'Referenser för kollisionsdesign',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};

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

@@ -0,0 +1,195 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { HitboxHurtboxAnimatorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+const slug = 'oyun-sprite-hitbox-ve-hurtbox-animatoru';
+const title = 'Oyun Sprite Hitbox ve Hurtbox Animatörü';
+const description = 'Her sprite karesinde çarpışma katmanları çizin, soğan zarı (onion skin) ile hareketleri önizleyin, piksel koordinatlarını düzenleyin ve nötr JSON aktarın.';
+
+const faq = [
+  {
+    question: 'Hitbox ile hurtbox arasındaki fark nedir?',
+    answer: 'Hitbox bir saldırının etki alanını, hurtbox ise hasar alabilen vücut alanını tanımlar. Pushbox karakterler arası mesafeyi korur, grabbox ise yakalama menzilini belirler.',
+  },
+  {
+    question: 'Sprite dosyalarım sunucuya yükleniyor mu?',
+    answer: 'Hayır. Görseller tamamen tarayıcınızın içinde işlenir ve aktarılır. Yalnızca düzenleyici tercihleri yerel depolamada saklanır.',
+  },
+  {
+    question: 'JSON aktarımı hangi koordinat sistemini kullanır?',
+    answer: 'Her kare piksel koordinatlarını sol üst köşeden itibaren ölçer. Genişlik ve yükseklik değerleri kendi merkez noktaları (pivot) ile pozitif değerler olarak saklanır.',
+  },
+  {
+    question: 'Hem sprite levhalarını hem de tekil kareleri düzenleyebilir miyim?',
+    answer: 'Evet. Satır ve sütun sayılarını girerek bir PNG veya WebP sprite levhası yükleyebilir ya da sıralı tekil görseller seçebilirsiniz.',
+  },
+  {
+    question: 'Aktarılan JSON tüm oyun motorlarında doğrudan çalışır mı?',
+    answer: 'JSON formatı nötrdür. Belirli bir motor yapısını zorlamadan kare çerçevelerini, merkez noktalarını ve geometrik katmanları kaydeder.',
+  },
+];
+
+const howTo = [
+  { name: 'Grafik yükleyin', text: 'Bir PNG/WebP sprite levhası veya sıralı görseller seçin. Tüm işlemler cihazınızda yerel olarak gerçekleşir.' },
+  { name: 'Kareleri belirleyin', text: 'Sprite levhası için satır ve sütun sayılarını girin ve zaman çizelgesindeki kare kesimlerini kontrol edin.' },
+  { name: 'Çarpışma katmanları çizin', text: 'Hitbox, hurtbox, pushbox veya sensör katmanını seçip dikdörtgen veya daire çizin.' },
+  { name: 'Hareketi ayarlayın', text: 'Hassas koordinatları düzenleyin, şekilleri komşu karelere kopyalayın ve soğan zarı ile hareketleri karşılaştırın.' },
+  { name: 'Projeyi aktarın', text: 'Nötr JSON dosyasını ve PNG temas levhasını indirin. Orijinal görselleri JSON ile birlikte saklayın.' },
+];
+
+const softwareApplication: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+};
+
+const faqPage: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
+};
+
+export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
+  slug,
+  title,
+  description,
+  ui: {
+    onboarding: 'Bir animasyon yükleyin, kare kesimlerini onaylayın ve saldırı, hasar veya fiziksel çarpışma alanlarını çizin.',
+    privacyNote: 'Yerel animasyon çalışma masası. Görseller sunucuya yüklenmez.',
+    loadSprite: 'Grafikleri çalışma masasına yerleştirin',
+    loadHint: 'Bir sprite levhası veya sıralı PNG/WebP görselleri seçin.',
+    chooseImages: 'Görselleri seç',
+    slicingTitle: 'Kare kesimi',
+    rowsLabel: 'Satırlar',
+    columnsLabel: 'Sütunlar',
+    applySlicing: 'Kes',
+    playbackTitle: 'Hareket önizlemesi',
+    previousFrame: 'Önceki kare',
+    play: 'Oynat',
+    pause: 'Duraklat',
+    nextFrame: 'Sonraki kare',
+    fpsLabel: 'Saniyedeki kare sayısı',
+    onionPrevious: 'Önceki katman',
+    onionNext: 'Sonraki katman',
+    layerTitle: 'Çarpışma katmanları',
+    typeHitbox: 'Hitbox',
+    typeHurtbox: 'Hurtbox',
+    typePushbox: 'Pushbox',
+    typeGrabbox: 'Grabbox',
+    typeSensor: 'Sensör',
+    typeCustom: 'Özel',
+    shapeRectangle: 'Dikdörtgen',
+    shapeCircle: 'Daire',
+    drawShape: 'Çiz',
+    selectShape: 'Seç',
+    stageLabel: 'Çalışma alanı',
+    emptyStage: 'Çarpışma katmanları çizmek için görseller yükleyin.',
+    frameReadout: 'Kare {current} / {total}',
+    timelineTitle: 'Kare şeridi',
+    inspectorTitle: 'Şekil denetleyicisi',
+    noSelection: 'Hassas koordinatları düzenlemek için bir şekil seçin.',
+    nameLabel: 'Katman adı',
+    xLabel: 'Piksel cinsinden X',
+    yLabel: 'Piksel cinsinden Y',
+    widthLabel: 'Piksel cinsinden Genişlik',
+    heightLabel: 'Piksel cinsinden Yükseklik',
+    radiusLabel: 'Piksel cinsinden Yarıçap',
+    duplicateShape: 'Çoğalt',
+    mirrorShape: 'Yatay yansıt',
+    deleteShape: 'Şekli sil',
+    copyPrevious: 'Önceki kareyi buraya kopyala',
+    copyAll: 'Bu kareyi tümüne kopyala',
+    pivotTitle: 'Kare merkez noktası (Pivot)',
+    pivotXLabel: 'Pivot X',
+    pivotYLabel: 'Pivot Y',
+    exportTitle: 'Projeyi aktar',
+    exportJson: 'JSON İndir',
+    importJson: 'JSON İçe Aktar',
+    exportContactSheet: 'Temas levhasını indir',
+    resetProject: 'Katmanları sıfırla',
+    undo: 'Geri al',
+    redo: 'Yinele',
+    statusReady: 'Çalışma masası hazır.',
+    statusImageLoaded: '{count} görsel dosyası yüklendi.',
+    statusShapeCreated: 'Yeni çarpışma şekli eklendi.',
+    statusShapeUpdated: 'Şekil güncellendi.',
+    statusImported: 'Proje içe aktarıldı.',
+    statusExported: 'Dışa aktarım hazır.',
+    statusError: 'Seçilen dosya okunamadı.',
+    framesBadge: '{count} kare',
+    shapesBadge: '{count} şekil',
+    coverageBadge: '%{percent} kapsama',
+    coordinatesNote: 'Koordinatlar her karenin sol üst köşesini (0,0) başlangıç kabul eder.',
+    localOnlyDisclosure: 'JSON dosyası dosya adlarını, merkez noktalarını ve şekilleri piksel verisi içermeden saklar.',
+    limitationDisclosure: 'Katmanlar tasarım alanlarını tanımlar. Davranışları oyun motorunuzda test edin.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Sprite hareketine uygun hitbox ve hurtbox alanları tasarlayın',
+    },
+    {
+      type: 'paragraph',
+      html: 'Her kare tek başına incelendiğinde çarpışma ayarları zorlaşır. Bu düzenleyici sprite görselini, çarpışma katmanlarını, soğan zarını ve zaman çizelgesini bir arada sunar.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Çarpışma katmanlarını oyun işlevine göre seçin',
+    },
+    {
+      type: 'table',
+      headers: ['Katman', 'Ana İşlev', 'Kontrol Noktası'],
+      rows: [
+        ['Hitbox', 'Saldırı veya etki oluşturan alan', 'Sadece aktif karelerde mi görünüyor?'],
+        ['Hurtbox', 'Hasar alan gövde alanı', 'Karakter formunu boşluk bırakmadan takip ediyor mu?'],
+        ['Pushbox', 'Karakterler arası fiziksel çarpışma alanı', 'Sarsıntıları önlemek için sabit duruyor mu?'],
+        ['Grabbox', 'Yakalama hamlesi menzili', 'Zamanlama görsel animasyonla eşleşiyor mu?'],
+        ['Sensor', 'Etkileşim algılama alanı', 'Katman adı net bir şekilde tanımlanmış mı?'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Koordinat sistemini anlama ve uygulama',
+    },
+    {
+      type: 'paragraph',
+      html: 'Aktarılan proje X ve Y koordinatlarını her kesilen karenin sol üst köşesinden itibaren ölçer. Genişlik ve yükseklik pozitif piksel değerleridir.',
+    },
+    {
+      type: 'tip',
+      title: 'Tüm animasyon dizilimini kontrol edin',
+      html: 'Bir kareyi düzenledikten sonra animasyonu tam olarak oynatarak hareket akışını doğrulayın.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Temas levhasını ekip çalışmasında kullanın',
+    },
+    {
+      type: 'paragraph',
+      html: 'PNG temas levhası tüm kareleri ve katmanlarını tek bir görselde göstererek yazılımcılar ve çizerler arasındaki iletişimi kolaylaştırır.',
+    },
+  ],
+  faq,
+  bibliographyTitle: 'Çarpışma tasarımı referansları',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};

package/src/tool/hitboxHurtboxAnimator/i18n/zh.ts

@@ -0,0 +1,195 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { HitboxHurtboxAnimatorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+const slug = 'hitbox-hurtbox-animator';
+const title = '像素动画 Hitbox 与 Hurtbox 帧编辑器';
+const description = '在精灵动画每帧上绘制碰撞判定图层，通过洋葱皮预阅动作连贯性，精确编辑像素坐标并导出引擎中立的 JSON 项目。';
+
+const faq = [
+  {
+    question: 'Hitbox（攻击框）与 Hurtbox（受击框）有什么区别？',
+    answer: 'Hitbox 通常用于判定发起攻击或产生作用的区域，而 Hurtbox 用于定义可以接收该攻击的受击区域。Pushbox 用于保持角色间距，Grabbox 用于判定投掷范围，Sensor 用于触发检测。',
+  },
+  {
+    question: '我的精灵图文件会被上传到服务器吗？',
+    answer: '不会。图像的解码、裁切、绘制和导出完全在您的浏览器本地完成。本地仅保存播放速度、洋葱皮开关等编辑偏好。',
+  },
+  {
+    question: '导出的 JSON 使用什么坐标系？',
+    answer: '每一帧均以该帧裁切矩形的左上角为原点 (0,0) 测量像素坐标。矩形与圆形碰撞框保存非负的 x、y、宽度和高度值，并记录每帧自有的轴心点 (Pivot)。',
+  },
+  {
+    question: '我可以同时编辑雪碧图（Sprite Sheet）和单帧图片序列吗？',
+    answer: '可以。您可以载入一张 PNG 或 WebP 雪碧图并设置行列数进行等分裁切，也可以选择多张有序的单帧图片序列。',
+  },
+  {
+    question: '导出的数据可以直接在所有游戏引擎中使用吗？',
+    answer: 'JSON 数据保持引擎中立。它记录了帧切片、轴心点、语义图层名称及几何形状，不强制绑定具体引擎。请在项目解析器中根据引擎的坐标原点与缩放规则进行转换。',
+  },
+];
+
+const howTo = [
+  { name: '载入动画素材', text: '选择一张 PNG 或 WebP 雪碧图，或选择多张有序单帧图片。所有图像处理均在本地进行。' },
+  { name: '设定帧切片', text: '如为等分雪碧图，请输入行数与列数。逐帧检查胶片条，确认每个切片均精准包含单帧画面。' },
+  { name: '绘制语义碰撞图层', text: '选择攻击框、受击框、推挤框、抓取框或传感器图层，在当前帧画面上拖拽绘制矩形或圆形。' },
+  { name: '精细化调整动作', text: '选中形状以修改精准像素坐标，复制形状至相邻帧，并开启洋葱皮图层比较前后帧动作。' },
+  { name: '导出可复现数据', text: '下载引擎中立的 JSON 项目文件与 PNG 印花列印图。请妥善保存原始图片。' },
+];
+
+const softwareApplication: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+};
+
+const faqPage: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
+};
+
+export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
+  slug,
+  title,
+  description,
+  ui: {
+    onboarding: '载入动画素材，确认切片划分，然后绘制判定攻击、受击、物理挤压、抓取或检测的碰撞区域。',
+    privacyNote: '本地动画工作台，图像不会上传至服务器。',
+    loadSprite: '将动画素材放置于工作台',
+    loadHint: '选择一张等分雪碧图或多张有序的 PNG、WebP 帧图片。',
+    chooseImages: '选择精灵图像',
+    slicingTitle: '帧切片划分',
+    rowsLabel: '行数',
+    columnsLabel: '列数',
+    applySlicing: '执行切片',
+    playbackTitle: '动作播放预览',
+    previousFrame: '上一帧',
+    play: '播放',
+    pause: '暂停',
+    nextFrame: '下一帧',
+    fpsLabel: '每秒帧数 (FPS)',
+    onionPrevious: '上一帧洋葱皮',
+    onionNext: '下一帧洋葱皮',
+    layerTitle: '碰撞图层绘制',
+    typeHitbox: 'Hitbox (攻击框)',
+    typeHurtbox: 'Hurtbox (受击框)',
+    typePushbox: 'Pushbox (推挤框)',
+    typeGrabbox: 'Grabbox (抓取框)',
+    typeSensor: 'Sensor (传感器)',
+    typeCustom: '自定义图层',
+    shapeRectangle: '矩形',
+    shapeCircle: '圆形',
+    drawShape: '绘制',
+    selectShape: '选择',
+    stageLabel: '动画工作台',
+    emptyStage: '请载入精灵素材以显示帧画面并开始绘制碰撞图层。',
+    frameReadout: '第 {current} 帧 / 共 {total} 帧',
+    timelineTitle: '碰撞时间胶片',
+    inspectorTitle: '选中形状属性',
+    noSelection: '切换至选择模式并点击某一形状，以修改其精准坐标与尺寸。',
+    nameLabel: '图层名称',
+    xLabel: 'X 坐标 (像素)',
+    yLabel: 'Y 坐标 (像素)',
+    widthLabel: '宽度 (像素)',
+    heightLabel: '高度 (像素)',
+    radiusLabel: '半径 (像素)',
+    duplicateShape: '创建副本',
+    mirrorShape: '水平镜像翻转',
+    deleteShape: '删除选中形状',
+    copyPrevious: '复制上一帧碰撞至当前帧',
+    copyAll: '应用当前帧碰撞至所有帧',
+    pivotTitle: '帧轴心点 (Pivot)',
+    pivotXLabel: '轴心点 X',
+    pivotYLabel: '轴心点 Y',
+    exportTitle: '导出动画项目',
+    exportJson: '下载 JSON 文件',
+    importJson: '导入 JSON 文件',
+    exportContactSheet: '下载印花对比图',
+    resetProject: '清空碰撞图层',
+    undo: '撤销',
+    redo: '重做',
+    statusReady: '动画工作台已就绪。',
+    statusImageLoaded: '已在本地载入 {count} 个图像文件。',
+    statusShapeCreated: '已为当前帧添加新的碰撞形状。',
+    statusShapeUpdated: '碰撞形状属性已更新。',
+    statusImported: '已导入碰撞项目文件。',
+    statusExported: '导出项目文件已生成。',
+    statusError: '无法读取所选文件，请确认格式是否正确。',
+    framesBadge: '{count} 帧',
+    shapesBadge: '{count} 个形状',
+    coverageBadge: '覆盖率 {percent}%',
+    coordinatesNote: '坐标系以每帧裁切图像的左上角为原点 (0,0)。',
+    localOnlyDisclosure: 'JSON 文件仅记录图像文件名、切片、轴心点及碰撞几何数据，不内嵌像素数据。',
+    limitationDisclosure: '碰撞图层用于定义几何设计。请在游戏引擎中进行最终行为测试。',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: '围绕动画动作本身设计 Hitbox 与 Hurtbox',
+    },
+    {
+      type: 'paragraph',
+      html: '如果将每一帧孤立来看，碰撞框的设置会变得十分困难。本编辑器将精灵画面、语义碰撞图层、洋葱皮参考及时间胶片条结合在一起，让您能清晰查看攻击判定何时生效、受击区域如何贴合角色形体。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '根据玩法职责选择碰撞图层',
+    },
+    {
+      type: 'table',
+      headers: ['图层类型', '典型职责', '审查要点'],
+      rows: [
+        ['Hitbox (攻击框)', '产生攻击判定或伤害作用的区域', '是否仅在预期的有效判定帧中出现？'],
+        ['Hurtbox (受击框)', '接收攻击或承受伤害的受击区域', '是否顺应角色形体轮廓且无不合理缝隙？'],
+        ['Pushbox (推挤框)', '防止角色实体相互穿模挤压的物理区域', '尺寸是否足够稳定以避免画面抖动？'],
+        ['Grabbox (抓取框)', '触发投掷或抓取判定的作用范围', '判定时间与范围是否匹配视觉动作提示？'],
+        ['Sensor (传感器)', '用于边缘检测、交互或触发器的探测区域', '图层名称是否具备清晰的语义？'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '理解并应用统一的坐标契约',
+    },
+    {
+      type: 'paragraph',
+      html: '导出的项目文件以每个裁切帧的左上角为 X 与 Y 的坐标原点。宽度与高度均为非负像素尺寸，轴心点亦使用相同的局部坐标系。这保证了保存与导入循环的可复现性。',
+    },
+    {
+      type: 'tip',
+      title: '综合审查起手、前摇、判定与收招过程',
+      html: '修改单帧后，请完整播放整段动作。开启前后帧洋葱皮可帮助您判断动作连贯性，避免碰撞框发生突兀跳跃。',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: '将印花对比图作为团队沟通的审查产物',
+    },
+    {
+      type: 'paragraph',
+      html: '生成的 PNG 印花对比图能在单张画面上直观展示所有帧及其叠加的彩色碰撞图层，非常适合与美术、策划及程序团队讨论战斗打击感与判定时间。',
+    },
+  ],
+  faq,
+  bibliographyTitle: '碰撞框设计与判定参考资料',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};

package/src/tool/hitboxHurtboxAnimator/index.ts

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