@jjlmoya/utils-games-development 1.65.0 → 1.67.0

package/src/tool/spriteSheetPacker/exporter.ts

@@ -1,116 +1,116 @@
-import type { ExportFormat, PackedFrame } from './types';
-
-function buildGenericHashJson(frames: PackedFrame[], width: number, height: number): string {
-  const frameHash: Record<string, unknown> = {};
-  for (const f of frames) {
-    frameHash[f.name] = {
-      frame: { x: f.x, y: f.y, w: f.width, h: f.height },
-      rotated: f.rotated,
-      trimmed: f.trimmed,
-      spriteSourceSize: f.spriteSourceSize,
-      sourceSize: f.sourceSize,
-      pivot: f.pivot,
-    };
-  }
-  return JSON.stringify(
-    {
-      frames: frameHash,
-      meta: { app: 'GameBob Sprite Sheet Packer', version: '1.0', size: { w: width, h: height }, scale: 1 },
-    },
-    null,
-    2
-  );
-}
-
-function buildGenericArrayJson(frames: PackedFrame[], width: number, height: number): string {
-  const frameArray = frames.map((f) => ({
-    filename: f.name,
-    frame: { x: f.x, y: f.y, w: f.width, h: f.height },
-    rotated: f.rotated,
-    trimmed: f.trimmed,
-    spriteSourceSize: f.spriteSourceSize,
-    sourceSize: f.sourceSize,
-    pivot: f.pivot,
-  }));
-  return JSON.stringify(
-    {
-      frames: frameArray,
-      meta: { app: 'GameBob Sprite Sheet Packer', version: '1.0', size: { w: width, h: height }, scale: 1 },
-    },
-    null,
-    2
-  );
-}
-
-function buildGodotJson(frames: PackedFrame[], width: number, height: number): string {
-  const godotData = {
-    textures: [
-      {
-        image: 'spritesheet.png',
-        size: { w: width, h: height },
-        sprites: frames.map((f) => ({
-          name: f.name,
-          region: [f.x, f.y, f.width, f.height],
-          margin: [f.spriteSourceSize.x, f.spriteSourceSize.y, f.sourceSize.w, f.sourceSize.h],
-        })),
-      },
-    ],
-  };
-  return JSON.stringify(godotData, null, 2);
-}
-
-function buildUnityJson(frames: PackedFrame[], width: number, height: number): string {
-  const unityFrames = frames.map((f) => ({
-    name: f.name,
-    x: f.x,
-    y: f.y,
-    width: f.width,
-    height: f.height,
-    pivotX: f.pivot.x,
-    pivotY: f.pivot.y,
-  }));
-  return JSON.stringify({ sprites: unityFrames, meta: { width, height } }, null, 2);
-}
-
-export function generateAtlasJson(
-  frames: PackedFrame[],
-  width: number,
-  height: number,
-  format: ExportFormat
-): string {
-  if (format === 'generic-json-hash' || format === 'phaser') {
-    return buildGenericHashJson(frames, width, height);
-  }
-  if (format === 'generic-json-array') {
-    return buildGenericArrayJson(frames, width, height);
-  }
-  if (format === 'godot') {
-    return buildGodotJson(frames, width, height);
-  }
-  if (format === 'unity') {
-    return buildUnityJson(frames, width, height);
-  }
-  return JSON.stringify({ frames, meta: { width, height } }, null, 2);
-}
-
-export function generateCssSnippet(frames: PackedFrame[]): string {
-  return frames
-    .map(
-      (f) =>
-        `.sprite-${f.name.replace(/[^a-zA-Z0-9_-]/g, '_')} {\n  width: ${f.width}px;\n  height: ${f.height}px;\n  background-position: -${f.x}px -${f.y}px;\n}`
-    )
-    .join('\n\n');
-}
-
-export function generateEngineCodeSnippet(format: ExportFormat): string {
-  if (format === 'unity') {
-    return `// Unity C# Load Example\nSprite[] sprites = Resources.LoadAll<Sprite>("spritesheet");\nSprite myFrame = System.Array.Find(sprites, s => s.name == "frame_0");`;
-  }
-  if (format === 'godot') {
-    return `# Godot GDScript Load Example\nvar atlas_texture = AtlasTexture.new()\natlas_texture.atlas = load("res://spritesheet.png")\natlas_texture.region = Rect2(0, 0, 32, 32)`;
-  }
-  if (format === 'phaser') {
-    return `// Phaser 3 Load Example\nthis.load.atlas('sheetKey', 'spritesheet.png', 'spritesheet.json');\nconst sprite = this.add.sprite(400, 300, 'sheetKey', 'frame_0');`;
-  }
-  return `// HTML / JS Load Example\nconst image = new Image();\nimage.src = 'spritesheet.png';`;
-}
+import type { ExportFormat, PackedFrame } from './types';
+
+function buildGenericHashJson(frames: PackedFrame[], width: number, height: number): string {
+  const frameHash: Record<string, unknown> = {};
+  for (const f of frames) {
+    frameHash[f.name] = {
+      frame: { x: f.x, y: f.y, w: f.width, h: f.height },
+      rotated: f.rotated,
+      trimmed: f.trimmed,
+      spriteSourceSize: f.spriteSourceSize,
+      sourceSize: f.sourceSize,
+      pivot: f.pivot,
+    };
+  }
+  return JSON.stringify(
+    {
+      frames: frameHash,
+      meta: { app: 'GameBob Sprite Sheet Packer', version: '1.0', size: { w: width, h: height }, scale: 1 },
+    },
+    null,
+    2
+  );
+}
+
+function buildGenericArrayJson(frames: PackedFrame[], width: number, height: number): string {
+  const frameArray = frames.map((f) => ({
+    filename: f.name,
+    frame: { x: f.x, y: f.y, w: f.width, h: f.height },
+    rotated: f.rotated,
+    trimmed: f.trimmed,
+    spriteSourceSize: f.spriteSourceSize,
+    sourceSize: f.sourceSize,
+    pivot: f.pivot,
+  }));
+  return JSON.stringify(
+    {
+      frames: frameArray,
+      meta: { app: 'GameBob Sprite Sheet Packer', version: '1.0', size: { w: width, h: height }, scale: 1 },
+    },
+    null,
+    2
+  );
+}
+
+function buildGodotJson(frames: PackedFrame[], width: number, height: number): string {
+  const godotData = {
+    textures: [
+      {
+        image: 'spritesheet.png',
+        size: { w: width, h: height },
+        sprites: frames.map((f) => ({
+          name: f.name,
+          region: [f.x, f.y, f.width, f.height],
+          margin: [f.spriteSourceSize.x, f.spriteSourceSize.y, f.sourceSize.w, f.sourceSize.h],
+        })),
+      },
+    ],
+  };
+  return JSON.stringify(godotData, null, 2);
+}
+
+function buildUnityJson(frames: PackedFrame[], width: number, height: number): string {
+  const unityFrames = frames.map((f) => ({
+    name: f.name,
+    x: f.x,
+    y: f.y,
+    width: f.width,
+    height: f.height,
+    pivotX: f.pivot.x,
+    pivotY: f.pivot.y,
+  }));
+  return JSON.stringify({ sprites: unityFrames, meta: { width, height } }, null, 2);
+}
+
+export function generateAtlasJson(
+  frames: PackedFrame[],
+  width: number,
+  height: number,
+  format: ExportFormat
+): string {
+  if (format === 'generic-json-hash' || format === 'phaser') {
+    return buildGenericHashJson(frames, width, height);
+  }
+  if (format === 'generic-json-array') {
+    return buildGenericArrayJson(frames, width, height);
+  }
+  if (format === 'godot') {
+    return buildGodotJson(frames, width, height);
+  }
+  if (format === 'unity') {
+    return buildUnityJson(frames, width, height);
+  }
+  return JSON.stringify({ frames, meta: { width, height } }, null, 2);
+}
+
+export function generateCssSnippet(frames: PackedFrame[]): string {
+  return frames
+    .map(
+      (f) =>
+        `.sprite-${f.name.replace(/[^a-zA-Z0-9_-]/g, '_')} {\n  width: ${f.width}px;\n  height: ${f.height}px;\n  background-position: -${f.x}px -${f.y}px;\n}`
+    )
+    .join('\n\n');
+}
+
+export function generateEngineCodeSnippet(format: ExportFormat): string {
+  if (format === 'unity') {
+    return `// Unity C# Load Example\nSprite[] sprites = Resources.LoadAll<Sprite>("spritesheet");\nSprite myFrame = System.Array.Find(sprites, s => s.name == "frame_0");`;
+  }
+  if (format === 'godot') {
+    return `# Godot GDScript Load Example\nvar atlas_texture = AtlasTexture.new()\natlas_texture.atlas = load("res://spritesheet.png")\natlas_texture.region = Rect2(0, 0, 32, 32)`;
+  }
+  if (format === 'phaser') {
+    return `// Phaser 3 Load Example\nthis.load.atlas('sheetKey', 'spritesheet.png', 'spritesheet.json');\nconst sprite = this.add.sprite(400, 300, 'sheetKey', 'frame_0');`;
+  }
+  return `// HTML / JS Load Example\nconst image = new Image();\nimage.src = 'spritesheet.png';`;
+}

package/src/tool/spriteSheetPacker/extractor-client.ts

@@ -1,127 +1,127 @@
-import JSZip from 'jszip';
-import { calculateGridSlices } from './logic';
-import { drawEmptyCanvasMessage, setupStepper, triggerButtonFeedback } from './packer-ui';
-
-let extImage: HTMLImageElement | null = null;
-
-function parseInputValue(id: string, fallback: string): number {
-  const el = document.getElementById(id) as HTMLInputElement | null;
-  return parseInt(el?.value || fallback, 10);
-}
-
-function getExtractorInputs() {
-  return {
-    fw: parseInputValue('ssp-ext-width', '32'),
-    fh: parseInputValue('ssp-ext-height', '32'),
-    margin: parseInputValue('ssp-ext-margin', '0'),
-    spacing: parseInputValue('ssp-ext-spacing', '0'),
-  };
-}
-
-export function updateExtractor(): void {
-  const canvas = document.getElementById('ssp-ext-canvas') as HTMLCanvasElement | null;
-  if (!canvas) return;
-
-  if (!extImage) {
-    drawEmptyCanvasMessage(canvas, 'Upload sprite sheet to slice frames');
-    return;
-  }
-
-  canvas.width = extImage.width;
-  canvas.height = extImage.height;
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(extImage, 0, 0);
-
-  const { fw, fh, margin, spacing } = getExtractorInputs();
-  const slices = calculateGridSlices({
-    imageWidth: extImage.width,
-    imageHeight: extImage.height,
-    frameWidth: fw,
-    frameHeight: fh,
-    margin,
-    spacing,
-  });
-
-  const countEl = document.getElementById('ssp-ext-count');
-  if (countEl) countEl.textContent = slices.length.toString();
-
-  ctx.strokeStyle = '#38bdf8';
-  ctx.lineWidth = 1;
-  for (const slice of slices) {
-    ctx.strokeRect(slice.x, slice.y, slice.width, slice.height);
-  }
-}
-
-function processExtractedZip(e: MouseEvent, fw: number, fh: number, slices: ReturnType<typeof calculateGridSlices>) {
-  triggerButtonFeedback(document.getElementById('ssp-btn-extract-zip'), 'SPLIT ZIP!', e);
-
-  const zip = new JSZip();
-  const tempCanvas = document.createElement('canvas');
-  tempCanvas.width = fw;
-  tempCanvas.height = fh;
-  const tempCtx = tempCanvas.getContext('2d');
-  if (!tempCtx || !extImage) return;
-
-  slices.forEach((slice) => {
-    tempCtx.clearRect(0, 0, fw, fh);
-    tempCtx.drawImage(extImage!, slice.x, slice.y, slice.width, slice.height, 0, 0, fw, fh);
-    const dataUrl = tempCanvas.toDataURL('image/png').split(',')[1] ?? '';
-    zip.file(`frame_${slice.index}.png`, dataUrl, { base64: true });
-  });
-
-  zip.generateAsync({ type: 'blob' }).then((content) => {
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(content);
-    link.download = 'extracted-sprites.zip';
-    link.click();
-  });
-}
-
-export function downloadExtractedZip(e: MouseEvent): void {
-  if (!extImage) return;
-  const { fw, fh, margin, spacing } = getExtractorInputs();
-  const slices = calculateGridSlices({
-    imageWidth: extImage.width,
-    imageHeight: extImage.height,
-    frameWidth: fw,
-    frameHeight: fh,
-    margin,
-    spacing,
-  });
-
-  if (slices.length === 0) return;
-  processExtractedZip(e, fw, fh, slices);
-}
-
-export function initExtractor(): void {
-  const extDrop = document.getElementById('ssp-ext-dropzone');
-  const extInput = document.getElementById('ssp-ext-file-input') as HTMLInputElement | null;
-
-  extDrop?.addEventListener('click', () => extInput?.click());
-  extInput?.addEventListener('change', () => {
-    if (extInput.files && extInput.files[0]) {
-      const file = extInput.files[0];
-      const img = new Image();
-      img.onload = () => {
-        extImage = img;
-        updateExtractor();
-      };
-      img.src = URL.createObjectURL(file);
-    }
-  });
-
-  setupStepper('ssp-fw-dec', 'ssp-fw-inc', 'ssp-ext-width', updateExtractor);
-  setupStepper('ssp-fh-dec', 'ssp-fh-inc', 'ssp-ext-height', updateExtractor);
-  setupStepper('ssp-mar-dec', 'ssp-mar-inc', 'ssp-ext-margin', updateExtractor);
-  setupStepper('ssp-spc-dec', 'ssp-spc-inc', 'ssp-ext-spacing', updateExtractor);
-
-  ['ssp-ext-width', 'ssp-ext-height', 'ssp-ext-margin', 'ssp-ext-spacing'].forEach((id) => {
-    document.getElementById(id)?.addEventListener('input', updateExtractor);
-  });
-
-  document.getElementById('ssp-btn-extract-zip')?.addEventListener('click', (e) => downloadExtractedZip(e));
-}
+import JSZip from 'jszip';
+import { calculateGridSlices } from './logic';
+import { drawEmptyCanvasMessage, setupStepper, triggerButtonFeedback } from './packer-ui';
+
+let extImage: HTMLImageElement | null = null;
+
+function parseInputValue(id: string, fallback: string): number {
+  const el = document.getElementById(id) as HTMLInputElement | null;
+  return parseInt(el?.value || fallback, 10);
+}
+
+function getExtractorInputs() {
+  return {
+    fw: parseInputValue('ssp-ext-width', '32'),
+    fh: parseInputValue('ssp-ext-height', '32'),
+    margin: parseInputValue('ssp-ext-margin', '0'),
+    spacing: parseInputValue('ssp-ext-spacing', '0'),
+  };
+}
+
+export function updateExtractor(): void {
+  const canvas = document.getElementById('ssp-ext-canvas') as HTMLCanvasElement | null;
+  if (!canvas) return;
+
+  if (!extImage) {
+    drawEmptyCanvasMessage(canvas, 'Upload sprite sheet to slice frames');
+    return;
+  }
+
+  canvas.width = extImage.width;
+  canvas.height = extImage.height;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(extImage, 0, 0);
+
+  const { fw, fh, margin, spacing } = getExtractorInputs();
+  const slices = calculateGridSlices({
+    imageWidth: extImage.width,
+    imageHeight: extImage.height,
+    frameWidth: fw,
+    frameHeight: fh,
+    margin,
+    spacing,
+  });
+
+  const countEl = document.getElementById('ssp-ext-count');
+  if (countEl) countEl.textContent = slices.length.toString();
+
+  ctx.strokeStyle = '#38bdf8';
+  ctx.lineWidth = 1;
+  for (const slice of slices) {
+    ctx.strokeRect(slice.x, slice.y, slice.width, slice.height);
+  }
+}
+
+function processExtractedZip(e: MouseEvent, fw: number, fh: number, slices: ReturnType<typeof calculateGridSlices>) {
+  triggerButtonFeedback(document.getElementById('ssp-btn-extract-zip'), 'SPLIT ZIP!', e);
+
+  const zip = new JSZip();
+  const tempCanvas = document.createElement('canvas');
+  tempCanvas.width = fw;
+  tempCanvas.height = fh;
+  const tempCtx = tempCanvas.getContext('2d');
+  if (!tempCtx || !extImage) return;
+
+  slices.forEach((slice) => {
+    tempCtx.clearRect(0, 0, fw, fh);
+    tempCtx.drawImage(extImage!, slice.x, slice.y, slice.width, slice.height, 0, 0, fw, fh);
+    const dataUrl = tempCanvas.toDataURL('image/png').split(',')[1] ?? '';
+    zip.file(`frame_${slice.index}.png`, dataUrl, { base64: true });
+  });
+
+  zip.generateAsync({ type: 'blob' }).then((content) => {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(content);
+    link.download = 'extracted-sprites.zip';
+    link.click();
+  });
+}
+
+export function downloadExtractedZip(e: MouseEvent): void {
+  if (!extImage) return;
+  const { fw, fh, margin, spacing } = getExtractorInputs();
+  const slices = calculateGridSlices({
+    imageWidth: extImage.width,
+    imageHeight: extImage.height,
+    frameWidth: fw,
+    frameHeight: fh,
+    margin,
+    spacing,
+  });
+
+  if (slices.length === 0) return;
+  processExtractedZip(e, fw, fh, slices);
+}
+
+export function initExtractor(): void {
+  const extDrop = document.getElementById('ssp-ext-dropzone');
+  const extInput = document.getElementById('ssp-ext-file-input') as HTMLInputElement | null;
+
+  extDrop?.addEventListener('click', () => extInput?.click());
+  extInput?.addEventListener('change', () => {
+    if (extInput.files && extInput.files[0]) {
+      const file = extInput.files[0];
+      const img = new Image();
+      img.onload = () => {
+        extImage = img;
+        updateExtractor();
+      };
+      img.src = URL.createObjectURL(file);
+    }
+  });
+
+  setupStepper('ssp-fw-dec', 'ssp-fw-inc', 'ssp-ext-width', updateExtractor);
+  setupStepper('ssp-fh-dec', 'ssp-fh-inc', 'ssp-ext-height', updateExtractor);
+  setupStepper('ssp-mar-dec', 'ssp-mar-inc', 'ssp-ext-margin', updateExtractor);
+  setupStepper('ssp-spc-dec', 'ssp-spc-inc', 'ssp-ext-spacing', updateExtractor);
+
+  ['ssp-ext-width', 'ssp-ext-height', 'ssp-ext-margin', 'ssp-ext-spacing'].forEach((id) => {
+    document.getElementById(id)?.addEventListener('input', updateExtractor);
+  });
+
+  document.getElementById('ssp-btn-extract-zip')?.addEventListener('click', (e) => downloadExtractedZip(e));
+}

package/src/tool/spriteSheetPacker/flipbook-client.ts

@@ -1,60 +1,60 @@
-import { spawnParticle, type LoadedImageItem } from './packer-ui';
-
-let currentAnimFrameIndex = 0;
-let animFps = 12;
-let isPlayingAnim = true;
-let lastFrameTime = 0;
-
-export function renderFlipbookFrame(loadedImages: LoadedImageItem[]): void {
-  const canvas = document.getElementById('ssp-flipbook-canvas') as HTMLCanvasElement | null;
-  if (!canvas || loadedImages.length === 0) return;
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  const item = loadedImages[currentAnimFrameIndex % loadedImages.length];
-
-  if (item && item.img) {
-    const scale = Math.min(canvas.width / item.img.width, canvas.height / item.img.height);
-    const drawW = item.img.width * scale;
-    const drawH = item.img.height * scale;
-    const drawX = (canvas.width - drawW) / 2;
-    const drawY = (canvas.height - drawH) / 2;
-    ctx.drawImage(item.img, drawX, drawY, drawW, drawH);
-  }
-}
-
-export function startFlipbookLoop(loadedImages: LoadedImageItem[]): void {
-  function loop(timestamp: number) {
-    if (isPlayingAnim && loadedImages.length > 0) {
-      const interval = 1000 / animFps;
-      if (timestamp - lastFrameTime > interval) {
-        currentAnimFrameIndex = (currentAnimFrameIndex + 1) % loadedImages.length;
-        lastFrameTime = timestamp;
-        renderFlipbookFrame(loadedImages);
-      }
-    }
-    requestAnimationFrame(loop);
-  }
-  requestAnimationFrame(loop);
-}
-
-export function bindFlipbook(): void {
-  const fpsSlider = document.getElementById('ssp-fps-slider') as HTMLInputElement | null;
-  fpsSlider?.addEventListener('input', () => {
-    animFps = parseInt(fpsSlider.value, 10);
-    const valEl = document.getElementById('ssp-fps-val');
-    if (valEl) valEl.textContent = `${animFps} FPS`;
-  });
-
-  document.getElementById('ssp-btn-play')?.addEventListener('click', (e) => {
-    isPlayingAnim = true;
-    spawnParticle(e.clientX, e.clientY, 'PLAYING');
-  });
-
-  document.getElementById('ssp-btn-pause')?.addEventListener('click', (e) => {
-    isPlayingAnim = false;
-    spawnParticle(e.clientX, e.clientY, 'PAUSED');
-  });
-}
+import { spawnParticle, type LoadedImageItem } from './packer-ui';
+
+let currentAnimFrameIndex = 0;
+let animFps = 12;
+let isPlayingAnim = true;
+let lastFrameTime = 0;
+
+export function renderFlipbookFrame(loadedImages: LoadedImageItem[]): void {
+  const canvas = document.getElementById('ssp-flipbook-canvas') as HTMLCanvasElement | null;
+  if (!canvas || loadedImages.length === 0) return;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  const item = loadedImages[currentAnimFrameIndex % loadedImages.length];
+
+  if (item && item.img) {
+    const scale = Math.min(canvas.width / item.img.width, canvas.height / item.img.height);
+    const drawW = item.img.width * scale;
+    const drawH = item.img.height * scale;
+    const drawX = (canvas.width - drawW) / 2;
+    const drawY = (canvas.height - drawH) / 2;
+    ctx.drawImage(item.img, drawX, drawY, drawW, drawH);
+  }
+}
+
+export function startFlipbookLoop(loadedImages: LoadedImageItem[]): void {
+  function loop(timestamp: number) {
+    if (isPlayingAnim && loadedImages.length > 0) {
+      const interval = 1000 / animFps;
+      if (timestamp - lastFrameTime > interval) {
+        currentAnimFrameIndex = (currentAnimFrameIndex + 1) % loadedImages.length;
+        lastFrameTime = timestamp;
+        renderFlipbookFrame(loadedImages);
+      }
+    }
+    requestAnimationFrame(loop);
+  }
+  requestAnimationFrame(loop);
+}
+
+export function bindFlipbook(): void {
+  const fpsSlider = document.getElementById('ssp-fps-slider') as HTMLInputElement | null;
+  fpsSlider?.addEventListener('input', () => {
+    animFps = parseInt(fpsSlider.value, 10);
+    const valEl = document.getElementById('ssp-fps-val');
+    if (valEl) valEl.textContent = `${animFps} FPS`;
+  });
+
+  document.getElementById('ssp-btn-play')?.addEventListener('click', (e) => {
+    isPlayingAnim = true;
+    spawnParticle(e.clientX, e.clientY, 'PLAYING');
+  });
+
+  document.getElementById('ssp-btn-pause')?.addEventListener('click', (e) => {
+    isPlayingAnim = false;
+    spawnParticle(e.clientX, e.clientY, 'PAUSED');
+  });
+}