@jjlmoya/utils-games-development 1.62.0 → 1.63.0

package/src/tool/hitboxHurtboxAnimator/i18n/de.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-und-hurtbox-animator-sprites';
+const title = 'Hitbox und Hurtbox Animator für Sprites';
+const description = 'Zeichnen Sie Kollisions-Ebenen auf jedes Sprite-Frame, nutzen Sie Zwiebelschalen-Vorschauen, bearbeiten Sie exakte Pixel-Koordinaten und exportieren Sie ein motorneutrales JSON.';
+
+const faq = [
+  {
+    question: 'Was ist der Unterschied zwischen einer Hitbox und einer Hurtbox?',
+    answer: 'Eine Hitbox markiert einen angreifenden Bereich, während eine Hurtbox den Bereich definiert, der Schaden empfangen kann. Pushboxes halten Charaktere auf Abstand, Grabboxes definieren die Griffreichweite und Sensoren dienen als Erkennungszonen.',
+  },
+  {
+    question: 'Verlassen meine Sprite-Dateien den Browser?',
+    answer: 'Nein. Bilder werden vollständig im Browser verarbeitet und exportiert. Das Werkzeug speichert lediglich Einstellungen wie die Abspielgeschwindigkeit im lokalen Speicher.',
+  },
+  {
+    question: 'Welches Koordinatensystem nutzt der JSON-Export?',
+    answer: 'Jedes Frame misst Pixel ausgehend von der oberen linken Ecke. Die Abmessungen von Rechtecken und Kreisen speichern positive Werte für x, y, Breite und Höhe inklusive des eigenen Drehpunktes.',
+  },
+  {
+    question: 'Kann ich Spritesheets und einzelne Frame-Bilder bearbeiten?',
+    answer: 'Ja. Sie können ein PNG- oder WebP-Spritesheet mit Zeilen- und Spaltenanzahl laden oder mehrere geordnete Einzelbilder auswählen.',
+  },
+  {
+    question: 'Funktioniert der Export direkt in jeder Game-Engine?',
+    answer: 'Das JSON ist bewusst engine-neutral gestaltet. Es speichert Frame-Rechtecke, Drehpunkte, Ebenennamen und geometrische Formen ohne Bindung an eine bestimmte Engine.',
+  },
+];
+
+const howTo = [
+  { name: 'Grafikmaterial laden', text: 'Wählen Sie ein PNG/WebP-Spritesheet oder eine Sequenz geordneter Einzelbilder aus. Die Bearbeitung erfolgt lokal.' },
+  { name: 'Frames definieren', text: 'Geben Sie bei einem Spritesheet die Anzahl der Zeilen und Spalten an und überprüfen Sie die Einzelbilder in der Leiste.' },
+  { name: 'Kollisions-Ebenen zeichnen', text: 'Wählen Sie Hitbox, Hurtbox, Pushbox, Grabbox oder Sensor und ziehen Sie Rechtecke oder Kreise über das aktive Frame.' },
+  { name: 'Bewegung im Zeitverlauf anpassen', text: 'Bearbeiten Sie Koordinaten exakt, kopieren Sie Formen auf benachbarte Frames und nutzen Sie die Zwiebelschalenansicht.' },
+  { name: 'JSON-Projekt exportieren', text: 'Laden Sie das neutrale JSON-Projekt und ein Übersichts-PNG herunter. Bewahren Sie die Quellbilder zusammen mit dem JSON auf.' },
+];
+
+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: 'Laden Sie eine Animation, überprüfen Sie die Frame-Zuschnitte und zeichnen Sie Bereiche für Angriff, Treffer, Physik oder Erkennung.',
+    privacyNote: 'Lokale Bearbeitung. Bilder werden nicht hochgeladen.',
+    loadSprite: 'Grafikmaterial laden',
+    loadHint: 'Wählen Sie ein Spritesheet oder eine Reihe geordneter PNG/WebP-Bilder.',
+    chooseImages: 'Bilder auswählen',
+    slicingTitle: 'Frame-Zuschnitt',
+    rowsLabel: 'Zeilen',
+    columnsLabel: 'Spalten',
+    applySlicing: 'Zuschneiden',
+    playbackTitle: 'Vorschau',
+    previousFrame: 'Vorheriges Frame',
+    play: 'Abspielen',
+    pause: 'Pause',
+    nextFrame: 'Nächstes Frame',
+    fpsLabel: 'Bilder pro Sekunde',
+    onionPrevious: 'Vorherige Folie',
+    onionNext: 'Nächste Folie',
+    layerTitle: 'Kollisions-Ebenen',
+    typeHitbox: 'Hitbox',
+    typeHurtbox: 'Hurtbox',
+    typePushbox: 'Pushbox',
+    typeGrabbox: 'Grabbox',
+    typeSensor: 'Sensor',
+    typeCustom: 'Benutzerdefiniert',
+    shapeRectangle: 'Rechteck',
+    shapeCircle: 'Kreis',
+    drawShape: 'Zeichnen',
+    selectShape: 'Auswählen',
+    stageLabel: 'Arbeitsfläche',
+    emptyStage: 'Laden Sie Grafiken, um mit dem Zeichnen von Kollisions-Ebenen zu beginnen.',
+    frameReadout: 'Frame {current} von {total}',
+    timelineTitle: 'Frame-Leiste',
+    inspectorTitle: 'Form-Inspektor',
+    noSelection: 'Wählen Sie eine Form aus, um deren Koordinaten zu bearbeiten.',
+    nameLabel: 'Ebenenname',
+    xLabel: 'X in Pixeln',
+    yLabel: 'Y in Pixeln',
+    widthLabel: 'Breite in Pixeln',
+    heightLabel: 'Höhe in Pixeln',
+    radiusLabel: 'Radius in Pixeln',
+    duplicateShape: 'Duplizieren',
+    mirrorShape: 'Horizontal spiegeln',
+    deleteShape: 'Form löschen',
+    copyPrevious: 'Vorheriges Frame hierher kopieren',
+    copyAll: 'Auf alle Frames kopieren',
+    pivotTitle: 'Drehpunkt',
+    pivotXLabel: 'Drehpunkt X',
+    pivotYLabel: 'Drehpunkt Y',
+    exportTitle: 'Projekt exportieren',
+    exportJson: 'JSON herunterladen',
+    importJson: 'JSON importieren',
+    exportContactSheet: 'Übersichtsbild herunterladen',
+    resetTool: 'Ebenen zurücksetzen',
+    undo: 'Rückgängig',
+    redo: 'Wiederholen',
+    statusReady: 'Arbeitsfläche bereit.',
+    statusImageLoaded: '{count} Bilddateien geladen.',
+    statusShapeCreated: 'Neue Form hinzugefügt.',
+    statusShapeUpdated: 'Form angepasst.',
+    statusImported: 'Projekt importiert.',
+    statusExported: 'Export vorbereitet.',
+    statusError: 'Datei konnte nicht gelesen werden.',
+    framesBadge: '{count} Frames',
+    shapesBadge: '{count} Formen',
+    coverageBadge: '{percent}% Abdeckung',
+    coordinatesNote: 'Koordinaten nutzen die obere linke Ecke des Frames als Ursprung (0,0).',
+    localOnlyDisclosure: 'Die JSON-Datei speichert Bildnamen, Drehpunkte und Geometrien. Sie enthält keine Bilddaten.',
+    limitationDisclosure: 'Die Ebenen beschreiben gezeichnete Bereiche. Prüfen Sie das Verhalten in Ihrer Game-Engine.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Hitboxes und Hurtboxes direkt am Sprite-Bewegungsablauf ausrichten',
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Festlegung von Kollisionen wird schwierig, wenn jedes Einzelbild isoliert betrachtet wird. Dieser Editor vereint Sprite-Grafik, Kollisions-Ebenen, Zwiebelschalenansicht und Frame-Leiste. So sehen Sie genau, wann ein Angriff startet und wie die Trefferfläche der Bewegung folgt.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Kollisions-Ebenen nach ihrer Spiellogik wählen',
+    },
+    {
+      type: 'table',
+      headers: ['Ebene', 'Typische Funktion', 'Prüffrage'],
+      rows: [
+        ['Hitbox', 'Bereich, der einen Angriff auslöst', 'Erscheint sie nur in den aktiven Frames?'],
+        ['Hurtbox', 'Bereich, der Treffer empfängt', 'Folgt sie dem Körper ohne unnatürliche Lücken?'],
+        ['Pushbox', 'Physikalischer Bereich zur Abstandshaltung', 'Bleibt sie stabil, um Ruckeln zu vermeiden?'],
+        ['Grabbox', 'Reichweite für Würfe oder Griffe', 'Passt das Timing zur visuellen Animation?'],
+        ['Sensor', 'Erkennungszone für Interaktionen', 'Ist die Bezeichnung eindeutig?'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Das Koordinatensystem verstehen und nutzen',
+    },
+    {
+      type: 'paragraph',
+      html: 'Das exportierte Projekt misst X und Y ausgehend von der oberen linken Ecke des zugeschnittenen Frames. Breite und Höhe sind Pixelwerte, und der Drehpunkt nutzt dieselben lokalen Koordinaten.',
+    },
+    {
+      type: 'tip',
+      title: 'Ablauf von Angriff, Treffer und Erholung gemeinsam prüfen',
+      html: 'Spielen Sie die Gesamtanimation nach jeder Anpassung ab, um flüssige Übergänge ohne abrupte Sprünge sicherzustellen.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Die Kontaktbogen-Übersicht im Entwicklerteam nutzen',
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Übersichts-PNG zeigt alle Frames mit ihren eingezeichneten Ebenen auf einer Fläche. Nutzen Sie es zusammen mit dem JSON-Export für die Abstimmung zwischen Grafik, Design und Programmierung.',
+    },
+  ],
+  faq,
+  bibliographyTitle: 'Referenzen zur Kollisionsentwicklung',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};

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

@@ -0,0 +1,191 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { HitboxHurtboxAnimatorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+const faq = [
+  {
+    question: 'What is the difference between a hitbox and a hurtbox?',
+    answer: 'A hitbox usually marks an attacking region, while a hurtbox marks a region that can receive that attack. Pushboxes can keep characters apart, grabboxes can define throw reach, and sensors can represent detection areas. Your engine and game rules decide the final behavior.',
+  },
+  {
+    question: 'Do my sprite files leave the browser?',
+    answer: 'No. Images are decoded, sliced, drawn, and exported in your browser. The tool stores only editor preferences such as playback speed and onion skin visibility. Save the JSON file yourself if you want to keep the project.',
+  },
+  {
+    question: 'Which coordinate system does the JSON export use?',
+    answer: 'Every frame uses pixels measured from its top left corner. Rectangle and circle bounds store nonnegative x, y, width, and height values. Each frame also stores its own pivot in the same coordinate system.',
+  },
+  {
+    question: 'Can I edit a sprite sheet and separate frame images?',
+    answer: 'Yes. Load one PNG or WebP and set its rows and columns for uniform slicing, or select several ordered images and the tool will use one image per frame. File names with numbers are sorted naturally before the sequence is created.',
+  },
+  {
+    question: 'Does the export work directly in every game engine?',
+    answer: 'The JSON is intentionally engine neutral. It records frame rectangles, pivots, semantic layer names, and primitive shapes without claiming a universal engine mapping. Convert those values in your project while accounting for its origin, scale, and collider conventions.',
+  },
+];
+
+const howTo = [
+  { name: 'Load animation artwork', text: 'Choose one PNG or WebP sprite sheet, or select an ordered sequence of frame images. All image work stays on your device.' },
+  { name: 'Define the frames', text: 'For a uniform sheet, enter its row and column count. Step through the filmstrip and confirm that every crop contains one animation frame.' },
+  { name: 'Draw semantic collision layers', text: 'Choose a hitbox, hurtbox, pushbox, grabbox, sensor, or custom layer, then drag a rectangle or circle over the active frame.' },
+  { name: 'Refine motion across time', text: 'Select shapes to drag or edit exact coordinates, copy useful geometry to neighboring frames, and use onion skin layers to compare motion.' },
+  { name: 'Export reproducible data', text: 'Download the engine neutral JSON project and a PNG contact sheet. Keep the original images beside the JSON because image pixels are not embedded.' },
+];
+
+const softwareApplication: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Hitbox and Hurtbox Animator for Sprites',
+  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: 'How to animate hitboxes and hurtboxes from a sprite sheet',
+  step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })),
+};
+
+export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
+  slug: 'hitbox-hurtbox-animator',
+  title: 'Hitbox and Hurtbox Animator for Sprites',
+  description: 'Draw collision layers on every sprite frame, preview them with onion skins, edit exact pixel coordinates, and export engine neutral JSON without uploading artwork.',
+  ui: {
+    onboarding: 'Load the current animation, confirm its frame cuts, then draw the regions that attack, receive damage, block movement, grab, or sense. The filmstrip shows where every layer exists.',
+    privacyNote: 'Local animation desk. Artwork is not uploaded.',
+    loadSprite: 'Bring artwork to the light table',
+    loadHint: 'Choose one uniform sprite sheet or several ordered PNG and WebP frames. Numbered file names are sorted naturally.',
+    chooseImages: 'Choose sprite images',
+    slicingTitle: 'Frame slicing',
+    rowsLabel: 'Rows',
+    columnsLabel: 'Columns',
+    applySlicing: 'Cut filmstrip',
+    playbackTitle: 'Motion preview',
+    previousFrame: 'Previous frame',
+    play: 'Play',
+    pause: 'Pause',
+    nextFrame: 'Next frame',
+    fpsLabel: 'Frames per second',
+    onionPrevious: 'Previous acetate',
+    onionNext: 'Next acetate',
+    layerTitle: 'Collision inks',
+    typeHitbox: 'Hitbox',
+    typeHurtbox: 'Hurtbox',
+    typePushbox: 'Pushbox',
+    typeGrabbox: 'Grabbox',
+    typeSensor: 'Sensor',
+    typeCustom: 'Custom',
+    shapeRectangle: 'Rectangle',
+    shapeCircle: 'Circle',
+    drawShape: 'Draw',
+    selectShape: 'Select',
+    stageLabel: 'Animation light table',
+    emptyStage: 'Load sprite artwork to reveal the frame and start drawing collision layers.',
+    frameReadout: 'Frame {current} of {total}',
+    timelineTitle: 'Collision filmstrip',
+    inspectorTitle: 'Selected acetate',
+    noSelection: 'Switch to Select and choose a shape to edit exact values.',
+    nameLabel: 'Layer name',
+    xLabel: 'X in pixels',
+    yLabel: 'Y in pixels',
+    widthLabel: 'Width in pixels',
+    heightLabel: 'Height in pixels',
+    radiusLabel: 'Radius in pixels',
+    duplicateShape: 'Duplicate',
+    mirrorShape: 'Mirror horizontally',
+    deleteShape: 'Delete selected shape',
+    copyPrevious: 'Copy previous frame here',
+    copyAll: 'Copy this frame to all',
+    pivotTitle: 'Frame pivot',
+    pivotXLabel: 'Pivot X',
+    pivotYLabel: 'Pivot Y',
+    exportTitle: 'Take the animation plan with you',
+    exportJson: 'Download JSON',
+    importJson: 'Import JSON',
+    exportContactSheet: 'Download contact sheet',
+    resetProject: 'Clear collision layers',
+    undo: 'Undo',
+    redo: 'Redo',
+    statusReady: 'The animation desk is ready.',
+    statusImageLoaded: '{count} image files loaded locally.',
+    statusShapeCreated: 'A new collision shape was added to this frame.',
+    statusShapeUpdated: 'Collision geometry updated.',
+    statusImported: 'Collision project imported. Reconnect its source images to preview the artwork.',
+    statusExported: 'Export prepared on this device.',
+    statusError: 'The selected file could not be read as a supported image or collision project.',
+    framesBadge: '{count} frames',
+    shapesBadge: '{count} shapes',
+    coverageBadge: '{percent}% covered',
+    coordinatesNote: 'Coordinates use the top left of each frame as zero. Bounds are clamped to the visible frame and stored in pixels.',
+    localOnlyDisclosure: 'The JSON stores image names, frame cuts, pivots, and collision geometry. It does not embed the image pixels.',
+    limitationDisclosure: 'Collision layers describe authored regions only. Test them inside your game because timing, scale, transforms, physics settings, and combat rules remain engine specific.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Build hitboxes and hurtboxes around the animation itself',
+    },
+    {
+      type: 'paragraph',
+      html: 'Collision authoring becomes difficult when every frame is judged in isolation. This editor puts the sprite, semantic collision inks, neighboring onion skins, and filmstrip in one place. You can see where an attack begins, how a hurt region follows the body, and whether a pushbox stays stable while the artwork stretches or turns.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Choose each collision layer by gameplay responsibility',
+    },
+    {
+      type: 'table',
+      headers: ['Layer', 'Typical responsibility', 'Question to review'],
+      rows: [
+        ['Hitbox', 'Area that delivers an attack or active effect', 'Does it appear only on the intended active frames?'],
+        ['Hurtbox', 'Area that can receive an attack or effect', 'Does it follow the readable body volume without unnecessary gaps?'],
+        ['Pushbox', 'Area used to keep actors from occupying the same space', 'Does it remain stable enough to avoid visible shoving or jitter?'],
+        ['Grabbox', 'Reach used to begin a throw or hold', 'Does its timing and range match the animation cue?'],
+        ['Sensor', 'Detection area for interactions, ledges, targets, or triggers', 'Is its purpose named clearly enough for implementation?'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Read and preserve the coordinate contract',
+    },
+    {
+      type: 'paragraph',
+      html: 'The exported project measures x and y from the top left of each cropped frame. Width and height are nonnegative pixel dimensions, and the pivot uses the same frame local coordinates. This makes save and import cycles reproducible, but your engine adapter still needs to account for texture scale, centered origins, world transforms, and its own shape representation.',
+    },
+    {
+      type: 'tip',
+      title: 'Review anticipation, contact, and recovery together',
+      html: 'Play the complete motion after editing a single frame. A geometrically tidy box can still start too early, disappear before the visual follow through, or drift between frames. Use the previous and next acetates to judge continuity without hiding intentional changes.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Use the contact sheet as an implementation review artifact',
+    },
+    {
+      type: 'paragraph',
+      html: 'The PNG contact sheet reveals every authored frame and its colored layers in one image. Pair it with the JSON export when reviewing combat timing with design, animation, and engineering. The image explains the motion at a glance, while the JSON carries the exact frame rectangles, pivots, semantic names, and primitive bounds.',
+    },
+  ],
+  faq,
+  bibliographyTitle: 'Collision authoring references',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};

package/src/tool/hitboxHurtboxAnimator/i18n/es.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 = 'animador-hitbox-hurtbox-sprites';
+const title = 'Animador de Hitbox y Hurtbox para Sprites';
+const description = 'Dibuja capas de colisión en cada fotograma de tu sprite, previsualiza secuencias con papel cebolla, ajusta coordenadas exactas en píxeles y exporta JSON neutro.';
+
+const faq = [
+  {
+    question: '¿Cuál es la diferencia entre una hitbox y una hurtbox?',
+    answer: 'Una hitbox define la zona que genera un ataque, mientras que una hurtbox delimita el área vulnerable que recibe dicho ataque. Las pushboxes mantienen alejados a los personajes, las grabboxes delimitan agarres y los sensores detectan eventos. El motor y las reglas del juego definen el comportamiento final.',
+  },
+  {
+    question: '¿Mis archivos de sprites salen del navegador?',
+    answer: 'No. Las imágenes se decodifican, recortan, dibujan y exportan íntegramente dentro de tu navegador. La herramienta solo guarda en el almacenamiento local preferencias de edición como la velocidad de reproducción y la visibilidad del papel cebolla. Guarda el JSON para conservar tu proyecto.',
+  },
+  {
+    question: '¿Qué sistema de coordenadas utiliza el archivo JSON exportado?',
+    answer: 'Cada fotograma mide sus coordenadas en píxeles tomando como origen (0,0) la esquina superior izquierda del recorte. Las dimensiones de rectángulos y círculos almacenan valores no negativos de x, y, ancho y alto. Cada fotograma incluye también su propio punto de pivote en este mismo sistema local.',
+  },
+  {
+    question: '¿Puedo editar hojas de sprites completas e imágenes de fotogramas sueltos?',
+    answer: 'Sí. Puedes cargar una imagen PNG o WebP indicando filas y columnas para una división uniforme, o bien seleccionar varias imágenes ordenadas para crear una secuencia cuadro a cuadro. Los archivos numerados se ordenan de forma natural.',
+  },
+  {
+    question: '¿El archivo exportado funciona directamente en cualquier motor de juego?',
+    answer: 'El formato JSON es deliberadamente neutro. Registra recortes de fotogramas, pivotes, nombres semánticos de capa y geometría primitiva sin imponer la estructura de un motor específico. Convierte estos datos en tu proyecto considerando su escala, origen y sistema de colisiones.',
+  },
+];
+
+const howTo = [
+  { name: 'Cargar el arte de animación', text: 'Selecciona una hoja de sprites PNG o WebP, o bien una secuencia ordenada de imágenes. Todo el procesamiento se realiza localmente en tu dispositivo.' },
+  { name: 'Definir los fotogramas', text: 'Para una hoja uniforme, especifica el número de filas y columnas. Recorre la cinta de animación para verificar que cada recorte encuadre un fotograma limpio.' },
+  { name: 'Dibujar capas semánticas de colisión', text: 'Elige una capa de hitbox, hurtbox, pushbox, grabbox, sensor o personalizada, y arrastra un rectángulo o círculo sobre el fotograma activo.' },
+  { name: 'Refinar el movimiento en el tiempo', text: 'Selecciona figuras para ajustar sus coordenadas numéricas, copia geometría a fotogramas adyacentes y activa capas de papel cebolla para comparar el movimiento.' },
+  { name: 'Exportar datos reproducibles', text: 'Descarga el proyecto JSON neutro y una hoja de contactos en PNG. Conserva las imágenes originales junto al JSON, ya que los píxeles no se incrustan en el archivo.' },
+];
+
+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: 'Carga una animación, confirma los recortes de fotograma y dibuja las áreas de ataque, daño, colisión física, agarre o detección. La cinta de fotogramas mostrará las capas activas.',
+    privacyNote: 'Mesa de animación local. Las imágenes no se suben a ningún servidor.',
+    loadSprite: 'Colocar material gráfico en la mesa óptica',
+    loadHint: 'Selecciona una hoja de sprites uniforme o varias imágenes ordenadas en PNG o WebP. Los archivos numerados se ordenan de forma natural.',
+    chooseImages: 'Seleccionar imágenes de sprite',
+    slicingTitle: 'División de fotogramas',
+    rowsLabel: 'Filas',
+    columnsLabel: 'Columnas',
+    applySlicing: 'Cortar cinta',
+    playbackTitle: 'Vista previa de movimiento',
+    previousFrame: 'Fotograma anterior',
+    play: 'Reproducir',
+    pause: 'Pausar',
+    nextFrame: 'Siguiente fotograma',
+    fpsLabel: 'Fotogramas por segundo',
+    onionPrevious: 'Acetato anterior',
+    onionNext: 'Acetato siguiente',
+    layerTitle: 'Tintas de colisión',
+    typeHitbox: 'Hitbox (Ataque)',
+    typeHurtbox: 'Hurtbox (Vulnerable)',
+    typePushbox: 'Pushbox (Física)',
+    typeGrabbox: 'Grabbox (Agarre)',
+    typeSensor: 'Sensor',
+    typeCustom: 'Personalizada',
+    shapeRectangle: 'Rectángulo',
+    shapeCircle: 'Círculo',
+    drawShape: 'Dibujar',
+    selectShape: 'Seleccionar',
+    stageLabel: 'Mesa óptica de animación',
+    emptyStage: 'Carga material gráfico para visualizar el fotograma y comenzar a dibujar capas de colisión.',
+    frameReadout: 'Fotograma {current} de {total}',
+    timelineTitle: 'Cinta de colisiones',
+    inspectorTitle: 'Acetato seleccionado',
+    noSelection: 'Activa la herramienta Seleccionar y haz clic en una figura para editar sus dimensiones exactas.',
+    nameLabel: 'Nombre de la capa',
+    xLabel: 'X en píxeles',
+    yLabel: 'Y en píxeles',
+    widthLabel: 'Ancho en píxeles',
+    heightLabel: 'Alto en píxeles',
+    radiusLabel: 'Radio en píxeles',
+    duplicateShape: 'Duplicar',
+    mirrorShape: 'Reflejar horizontalmente',
+    deleteShape: 'Eliminar figura seleccionada',
+    copyPrevious: 'Copiar fotograma anterior aquí',
+    copyAll: 'Copiar este fotograma a todos',
+    pivotTitle: 'Pivote del fotograma',
+    pivotXLabel: 'Pivote X',
+    pivotYLabel: 'Pivote Y',
+    exportTitle: 'Exportar plan de animación',
+    exportJson: 'Descargar JSON',
+    importJson: 'Importar JSON',
+    exportContactSheet: 'Descargar hoja de contactos',
+    resetProject: 'Limpiar capas de colisión',
+    undo: 'Deshacer',
+    redo: 'Rehacer',
+    statusReady: 'La mesa de animación está lista.',
+    statusImageLoaded: 'Se han cargado {count} archivos de imagen en local.',
+    statusShapeCreated: 'Se ha añadido una nueva figura de colisión a este fotograma.',
+    statusShapeUpdated: 'Geometría de colisión actualizada.',
+    statusImported: 'Proyecto de colisión importado. Vuelve a enlazar las imágenes de origen para previsualizar el arte.',
+    statusExported: 'Exportación preparada en este dispositivo.',
+    statusError: 'El archivo seleccionado no se pudo leer como una imagen o proyecto válido.',
+    framesBadge: '{count} fotogramas',
+    shapesBadge: '{count} figuras',
+    coverageBadge: '{percent}% cubierto',
+    coordinatesNote: 'Las coordenadas toman la esquina superior izquierda de cada fotograma recortado como origen (0,0). Los límites se miden en píxeles dentro del fotograma.',
+    localOnlyDisclosure: 'El archivo JSON almacena nombres de imagen, recortes, pivotes y geometría de colisión. No incrusta los píxeles de las imágenes.',
+    limitationDisclosure: 'Las capas definen regiones geométricas de diseño. Pruébalas en tu motor de juego, ya que la sincronización, escala, físicas y reglas de combate dependen del código de tu proyecto.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Diseña hitboxes y hurtboxes alineadas con el movimiento real del sprite',
+    },
+    {
+      type: 'paragraph',
+      html: 'Configurar colisiones resulta complejo cuando cada fotograma se evalúa de manera aislada. Este editor integra en una sola vista el fotograma del sprite, las capas de colisión semánticas, los acetatos adyacentes en papel cebolla y la cinta temporal. Esto permite verificar cuándo se activa un golpe, cómo sigue el área vulnerable al volumen del personaje y si la caja física mantiene estabilidad durante estiramientos o giros.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Elige cada capa de colisión según su función técnica en el juego',
+    },
+    {
+      type: 'table',
+      headers: ['Capa', 'Responsabilidad habitual', 'Aspecto a revisar'],
+      rows: [
+        ['Hitbox', 'Área que aplica un golpe, daño o efecto activo', '¿Aparece únicamente durante los fotogramas de impacto previstos?'],
+        ['Hurtbox', 'Área que recibe ataques o impactos del oponente', '¿Ajusta bien al volumen del personaje sin dejar huecos antinaturales?'],
+        ['Pushbox', 'Caja de colisión física para impedir que dos personajes se solapen', '¿Mantiene dimensiones estables para evitar empujones o temblores bruscos?'],
+        ['Grabbox', 'Alcance necesario para iniciar un agarre o llave', '¿Coincide la ventana de tiempo y el rango con la clave visual de la animación?'],
+        ['Sensor', 'Área de detección para interacciones, bordes, objetivos o disparadores', '¿El nombre asignado describe con claridad su propósito técnico?'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Interpretación y estructura del sistema de coordenadas',
+    },
+    {
+      type: 'paragraph',
+      html: 'El proyecto exportado mide las coordenadas X e Y desde la esquina superior izquierda de cada fotograma recortado. Las dimensiones de ancho y alto son siempre valores no negativos en píxeles, y el pivote utiliza este mismo sistema local. Esto asegura que los ciclos de guardado e importación sean completamente reproducibles, aunque el adaptador de tu motor deberá considerar la escala de textura, los orígenes centrados y las transformaciones del mundo.',
+    },
+    {
+      type: 'tip',
+      title: 'Revisa las fases de anticipación, impacto y recuperación en conjunto',
+      html: 'Reproduce la animación completa tras ajustar un fotograma clave. Una caja bien dibujada en reposo puede activarse demasiado pronto, desaparecer antes de tiempo o desplazarse de forma discontinua. Utiliza los acetatos anterior y posterior para verificar la fluidez del movimiento sin perder las modificaciones intencionadas.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'La hoja de contactos como herramienta de revisión para el equipo',
+    },
+    {
+      type: 'paragraph',
+      html: 'La hoja de contactos en PNG muestra todos los fotogramas de la secuencia con sus capas de color superpuestas en un único lienzo. Utilízala junto al archivo JSON para revisar la sincronización de combate con los equipos de arte, diseño y programación. La imagen proporciona una visión de conjunto inmediata, mientras que el JSON aporta los valores exactos de recortes, pivotes y volúmenes de colisión.',
+    },
+  ],
+  faq,
+  bibliographyTitle: 'Referencias de diseño de colisiones',
+  bibliography: bibliographyEntries,
+  howTo,
+  schemas: [softwareApplication, faqPage, howToSchema],
+};