@jjlmoya/utils-games-development 1.66.0 → 1.68.0

package/src/tool/spriteSheetPacker/logic.test.ts

@@ -1,155 +1,155 @@
-import { describe, expect, it } from 'vitest';
-import {
-  calculateBinPacking,
-  calculateGridSlices,
-  generateAtlasJson,
-  generateCssSnippet,
-  generateEngineCodeSnippet,
-  nextPowerOfTwo,
-  type PackerOptions,
-  type SpriteFrameInput,
-} from './logic';
-
-describe('SpriteSheetPacker Logic', () => {
-  it('calculates next power of two correctly', () => {
-    expect(nextPowerOfTwo(1)).toBe(1);
-    expect(nextPowerOfTwo(3)).toBe(4);
-    expect(nextPowerOfTwo(500)).toBe(512);
-    expect(nextPowerOfTwo(1024)).toBe(1024);
-  });
-
-  it('packs empty frames array returning default empty result', () => {
-    const options: PackerOptions = {
-      padding: 2,
-      borderExtrusion: 0,
-      forcePowerOfTwo: true,
-      maxTextureWidth: 1024,
-      maxTextureHeight: 1024,
-      allowRotation: false,
-      trimTransparency: false,
-      format: 'generic-json-hash',
-    };
-
-    const result = calculateBinPacking([], options);
-    expect(result.totalFrames).toBe(0);
-    expect(result.efficiency).toBe(0);
-    expect(result.drawCallsBefore).toBe(0);
-    expect(result.drawCallsAfter).toBe(0);
-  });
-
-  it('packs frames and calculates texture dimensions and efficiency', () => {
-    const frames: SpriteFrameInput[] = [
-      { id: '1', name: 'hero_walk_0', width: 32, height: 32 },
-      { id: '2', name: 'hero_walk_1', width: 32, height: 32 },
-      { id: '3', name: 'hero_idle_0', width: 64, height: 64 },
-    ];
-
-    const options: PackerOptions = {
-      padding: 0,
-      borderExtrusion: 0,
-      forcePowerOfTwo: false,
-      maxTextureWidth: 1024,
-      maxTextureHeight: 1024,
-      allowRotation: false,
-      trimTransparency: false,
-      format: 'generic-json-hash',
-    };
-
-    const result = calculateBinPacking(frames, options);
-    expect(result.totalFrames).toBe(3);
-    expect(result.drawCallsBefore).toBe(3);
-    expect(result.drawCallsAfter).toBe(1);
-    expect(result.frames.length).toBe(3);
-    expect(result.efficiency).toBeGreaterThan(0);
-  });
-
-  it('forces power of two dimensions when requested', () => {
-    const frames: SpriteFrameInput[] = [
-      { id: '1', name: 'frame_1', width: 100, height: 100 },
-    ];
-
-    const options: PackerOptions = {
-      padding: 0,
-      borderExtrusion: 0,
-      forcePowerOfTwo: true,
-      maxTextureWidth: 2048,
-      maxTextureHeight: 2048,
-      allowRotation: false,
-      trimTransparency: false,
-      format: 'generic-json-array',
-    };
-
-    const result = calculateBinPacking(frames, options);
-    expect(result.textureWidth).toBe(128);
-    expect(result.textureHeight).toBe(128);
-  });
-
-  it('generates atlas JSON formats for different engines', () => {
-    const frames: SpriteFrameInput[] = [
-      { id: '1', name: 'coin', width: 16, height: 16 },
-    ];
-    const options: PackerOptions = {
-      padding: 0,
-      borderExtrusion: 0,
-      forcePowerOfTwo: false,
-      maxTextureWidth: 512,
-      maxTextureHeight: 512,
-      allowRotation: false,
-      trimTransparency: false,
-      format: 'godot',
-    };
-
-    const result = calculateBinPacking(frames, options);
-    expect(result.atlasJson).toContain('spritesheet.png');
-    expect(result.atlasJson).toContain('coin');
-
-    const unityJson = generateAtlasJson(result.frames, 512, 512, 'unity');
-    expect(unityJson).toContain('sprites');
-
-    const phaserJson = generateAtlasJson(result.frames, 512, 512, 'phaser');
-    expect(phaserJson).toContain('meta');
-  });
-
-  it('generates css snippets accurately', () => {
-    const frames: SpriteFrameInput[] = [
-      { id: '1', name: 'player_idle', width: 24, height: 24 },
-    ];
-    const options: PackerOptions = {
-      padding: 0,
-      borderExtrusion: 0,
-      forcePowerOfTwo: false,
-      maxTextureWidth: 512,
-      maxTextureHeight: 512,
-      allowRotation: false,
-      trimTransparency: false,
-      format: 'css',
-    };
-    const result = calculateBinPacking(frames, options);
-    const css = generateCssSnippet(result.frames);
-    expect(css).toContain('.sprite-player_idle');
-    expect(css).toContain('background-position');
-  });
-
-  it('generates engine code snippets correctly', () => {
-    expect(generateEngineCodeSnippet('unity')).toContain('Resources.LoadAll');
-    expect(generateEngineCodeSnippet('godot')).toContain('AtlasTexture');
-    expect(generateEngineCodeSnippet('phaser')).toContain('this.load.atlas');
-  });
-
-  it('calculates grid slices for extractor mode', () => {
-    const slices = calculateGridSlices({
-      imageWidth: 128,
-      imageHeight: 64,
-      frameWidth: 32,
-      frameHeight: 32,
-      margin: 0,
-      spacing: 0,
-    });
-
-    expect(slices.length).toBe(8);
-    expect(slices[0]?.x).toBe(0);
-    expect(slices[0]?.y).toBe(0);
-    expect(slices[7]?.x).toBe(96);
-    expect(slices[7]?.y).toBe(32);
-  });
-});
+import { describe, expect, it } from 'vitest';
+import {
+  calculateBinPacking,
+  calculateGridSlices,
+  generateAtlasJson,
+  generateCssSnippet,
+  generateEngineCodeSnippet,
+  nextPowerOfTwo,
+  type PackerOptions,
+  type SpriteFrameInput,
+} from './logic';
+
+describe('SpriteSheetPacker Logic', () => {
+  it('calculates next power of two correctly', () => {
+    expect(nextPowerOfTwo(1)).toBe(1);
+    expect(nextPowerOfTwo(3)).toBe(4);
+    expect(nextPowerOfTwo(500)).toBe(512);
+    expect(nextPowerOfTwo(1024)).toBe(1024);
+  });
+
+  it('packs empty frames array returning default empty result', () => {
+    const options: PackerOptions = {
+      padding: 2,
+      borderExtrusion: 0,
+      forcePowerOfTwo: true,
+      maxTextureWidth: 1024,
+      maxTextureHeight: 1024,
+      allowRotation: false,
+      trimTransparency: false,
+      format: 'generic-json-hash',
+    };
+
+    const result = calculateBinPacking([], options);
+    expect(result.totalFrames).toBe(0);
+    expect(result.efficiency).toBe(0);
+    expect(result.drawCallsBefore).toBe(0);
+    expect(result.drawCallsAfter).toBe(0);
+  });
+
+  it('packs frames and calculates texture dimensions and efficiency', () => {
+    const frames: SpriteFrameInput[] = [
+      { id: '1', name: 'hero_walk_0', width: 32, height: 32 },
+      { id: '2', name: 'hero_walk_1', width: 32, height: 32 },
+      { id: '3', name: 'hero_idle_0', width: 64, height: 64 },
+    ];
+
+    const options: PackerOptions = {
+      padding: 0,
+      borderExtrusion: 0,
+      forcePowerOfTwo: false,
+      maxTextureWidth: 1024,
+      maxTextureHeight: 1024,
+      allowRotation: false,
+      trimTransparency: false,
+      format: 'generic-json-hash',
+    };
+
+    const result = calculateBinPacking(frames, options);
+    expect(result.totalFrames).toBe(3);
+    expect(result.drawCallsBefore).toBe(3);
+    expect(result.drawCallsAfter).toBe(1);
+    expect(result.frames.length).toBe(3);
+    expect(result.efficiency).toBeGreaterThan(0);
+  });
+
+  it('forces power of two dimensions when requested', () => {
+    const frames: SpriteFrameInput[] = [
+      { id: '1', name: 'frame_1', width: 100, height: 100 },
+    ];
+
+    const options: PackerOptions = {
+      padding: 0,
+      borderExtrusion: 0,
+      forcePowerOfTwo: true,
+      maxTextureWidth: 2048,
+      maxTextureHeight: 2048,
+      allowRotation: false,
+      trimTransparency: false,
+      format: 'generic-json-array',
+    };
+
+    const result = calculateBinPacking(frames, options);
+    expect(result.textureWidth).toBe(128);
+    expect(result.textureHeight).toBe(128);
+  });
+
+  it('generates atlas JSON formats for different engines', () => {
+    const frames: SpriteFrameInput[] = [
+      { id: '1', name: 'coin', width: 16, height: 16 },
+    ];
+    const options: PackerOptions = {
+      padding: 0,
+      borderExtrusion: 0,
+      forcePowerOfTwo: false,
+      maxTextureWidth: 512,
+      maxTextureHeight: 512,
+      allowRotation: false,
+      trimTransparency: false,
+      format: 'godot',
+    };
+
+    const result = calculateBinPacking(frames, options);
+    expect(result.atlasJson).toContain('spritesheet.png');
+    expect(result.atlasJson).toContain('coin');
+
+    const unityJson = generateAtlasJson(result.frames, 512, 512, 'unity');
+    expect(unityJson).toContain('sprites');
+
+    const phaserJson = generateAtlasJson(result.frames, 512, 512, 'phaser');
+    expect(phaserJson).toContain('meta');
+  });
+
+  it('generates css snippets accurately', () => {
+    const frames: SpriteFrameInput[] = [
+      { id: '1', name: 'player_idle', width: 24, height: 24 },
+    ];
+    const options: PackerOptions = {
+      padding: 0,
+      borderExtrusion: 0,
+      forcePowerOfTwo: false,
+      maxTextureWidth: 512,
+      maxTextureHeight: 512,
+      allowRotation: false,
+      trimTransparency: false,
+      format: 'css',
+    };
+    const result = calculateBinPacking(frames, options);
+    const css = generateCssSnippet(result.frames);
+    expect(css).toContain('.sprite-player_idle');
+    expect(css).toContain('background-position');
+  });
+
+  it('generates engine code snippets correctly', () => {
+    expect(generateEngineCodeSnippet('unity')).toContain('Resources.LoadAll');
+    expect(generateEngineCodeSnippet('godot')).toContain('AtlasTexture');
+    expect(generateEngineCodeSnippet('phaser')).toContain('this.load.atlas');
+  });
+
+  it('calculates grid slices for extractor mode', () => {
+    const slices = calculateGridSlices({
+      imageWidth: 128,
+      imageHeight: 64,
+      frameWidth: 32,
+      frameHeight: 32,
+      margin: 0,
+      spacing: 0,
+    });
+
+    expect(slices.length).toBe(8);
+    expect(slices[0]?.x).toBe(0);
+    expect(slices[0]?.y).toBe(0);
+    expect(slices[7]?.x).toBe(96);
+    expect(slices[7]?.y).toBe(32);
+  });
+});

package/src/tool/spriteSheetPacker/logic.ts

@@ -1,32 +1,32 @@
-import type { ExtractionGridConfig, ExtractedFrameSlice } from './types';
-
-export * from './types';
-export * from './packer-core';
-export * from './exporter';
-
-export function calculateGridSlices(config: ExtractionGridConfig): ExtractedFrameSlice[] {
-  const { imageWidth, imageHeight, frameWidth, frameHeight, margin, spacing } = config;
-
-  if (frameWidth <= 0 || frameHeight <= 0) {
-    return [];
-  }
-
-  const slices: ExtractedFrameSlice[] = [];
-  let index = 0;
-
-  for (let y = margin; y + frameHeight <= imageHeight; y += frameHeight + spacing) {
-    for (let x = margin; x + frameWidth <= imageWidth; x += frameWidth + spacing) {
-      slices.push({
-        id: `slice_${index}`,
-        index,
-        x,
-        y,
-        width: frameWidth,
-        height: frameHeight,
-      });
-      index++;
-    }
-  }
-
-  return slices;
-}
+import type { ExtractionGridConfig, ExtractedFrameSlice } from './types';
+
+export * from './types';
+export * from './packer-core';
+export * from './exporter';
+
+export function calculateGridSlices(config: ExtractionGridConfig): ExtractedFrameSlice[] {
+  const { imageWidth, imageHeight, frameWidth, frameHeight, margin, spacing } = config;
+
+  if (frameWidth <= 0 || frameHeight <= 0) {
+    return [];
+  }
+
+  const slices: ExtractedFrameSlice[] = [];
+  let index = 0;
+
+  for (let y = margin; y + frameHeight <= imageHeight; y += frameHeight + spacing) {
+    for (let x = margin; x + frameWidth <= imageWidth; x += frameWidth + spacing) {
+      slices.push({
+        id: `slice_${index}`,
+        index,
+        x,
+        y,
+        width: frameWidth,
+        height: frameHeight,
+      });
+      index++;
+    }
+  }
+
+  return slices;
+}

package/src/tool/spriteSheetPacker/packer-core.ts

@@ -1,121 +1,121 @@
-import type { PackerOptions, PackedFrame, PackedResult, SpriteFrameInput } from './types';
-import { generateAtlasJson, generateCssSnippet, generateEngineCodeSnippet } from './exporter';
-
-export function nextPowerOfTwo(value: number): number {
-  let power = 1;
-  while (power < value) {
-    power *= 2;
-  }
-  return power;
-}
-
-function emptyPackingResult(): PackedResult {
-  return {
-    textureWidth: 0,
-    textureHeight: 0,
-    efficiency: 0,
-    totalFrames: 0,
-    frames: [],
-    atlasJson: '{}',
-    cssSnippet: '',
-    codeSnippet: '',
-    drawCallsBefore: 0,
-    drawCallsAfter: 0,
-  };
-}
-
-function getFrameOffsets(item: SpriteFrameInput) {
-  const tx = item.trimmedX ? item.trimmedX : 0;
-  const ty = item.trimmedY ? item.trimmedY : 0;
-  const ow = item.originalWidth ? item.originalWidth : item.width;
-  const oh = item.originalHeight ? item.originalHeight : item.height;
-  const px = item.pivotX !== undefined ? item.pivotX : 0.5;
-  const py = item.pivotY !== undefined ? item.pivotY : 0.5;
-  return { tx, ty, ow, oh, px, py };
-}
-
-function createPackedFrame(item: SpriteFrameInput, x: number, y: number): PackedFrame {
-  const { tx, ty, ow, oh, px, py } = getFrameOffsets(item);
-  return {
-    id: item.id,
-    name: item.name,
-    x,
-    y,
-    width: item.width,
-    height: item.height,
-    rotated: false,
-    trimmed: tx > 0 || ty > 0,
-    spriteSourceSize: { x: tx, y: ty, w: item.width, h: item.height },
-    sourceSize: { w: ow, h: oh },
-    pivot: { x: px, y: py },
-  };
-}
-
-function packSortedFrames(sorted: SpriteFrameInput[], options: PackerOptions) {
-  const padding = Math.max(0, options.padding);
-  const extrusion = Math.max(0, options.borderExtrusion);
-  const totalOffset = padding + extrusion * 2;
-
-  let currentX = padding;
-  let currentY = padding;
-  let rowHeight = 0;
-  let maxW = 0;
-  let maxH = 0;
-  const packedFrames: PackedFrame[] = [];
-
-  for (const item of sorted) {
-    const itemW = item.width + totalOffset;
-    const itemH = item.height + totalOffset;
-
-    if (currentX + itemW > options.maxTextureWidth && currentX > padding) {
-      currentX = padding;
-      currentY += rowHeight + padding;
-      rowHeight = 0;
-    }
-
-    packedFrames.push(createPackedFrame(item, currentX + extrusion, currentY + extrusion));
-
-    currentX += itemW + padding;
-    rowHeight = Math.max(rowHeight, itemH);
-    maxW = Math.max(maxW, currentX);
-    maxH = Math.max(maxH, currentY + rowHeight + padding);
-  }
-
-  return { packedFrames, maxW, maxH };
-}
-
-export function calculateBinPacking(frames: SpriteFrameInput[], options: PackerOptions): PackedResult {
-  if (frames.length === 0) {
-    return emptyPackingResult();
-  }
-
-  const sorted = [...frames].sort((a, b) => Math.max(b.width, b.height) - Math.max(a.width, a.height));
-  const { packedFrames, maxW, maxH } = packSortedFrames(sorted, options);
-
-  let finalWidth = options.forcePowerOfTwo ? nextPowerOfTwo(maxW) : maxW;
-  let finalHeight = options.forcePowerOfTwo ? nextPowerOfTwo(maxH) : maxH;
-
-  finalWidth = Math.min(finalWidth, options.maxTextureWidth);
-  finalHeight = Math.min(finalHeight, options.maxTextureHeight);
-
-  let usedArea = 0;
-  for (const f of packedFrames) {
-    usedArea += f.width * f.height;
-  }
-
-  const totalArea = Math.max(1, finalWidth * finalHeight);
-  const efficiency = Math.min(100, Math.round((usedArea / totalArea) * 1000) / 10);
-
-  return {
-    textureWidth: finalWidth,
-    textureHeight: finalHeight,
-    efficiency,
-    totalFrames: packedFrames.length,
-    frames: packedFrames,
-    atlasJson: generateAtlasJson(packedFrames, finalWidth, finalHeight, options.format),
-    cssSnippet: generateCssSnippet(packedFrames),
-    codeSnippet: generateEngineCodeSnippet(options.format),
-    drawCallsBefore: frames.length,
-    drawCallsAfter: 1,
-  };
-}
+import type { PackerOptions, PackedFrame, PackedResult, SpriteFrameInput } from './types';
+import { generateAtlasJson, generateCssSnippet, generateEngineCodeSnippet } from './exporter';
+
+export function nextPowerOfTwo(value: number): number {
+  let power = 1;
+  while (power < value) {
+    power *= 2;
+  }
+  return power;
+}
+
+function emptyPackingResult(): PackedResult {
+  return {
+    textureWidth: 0,
+    textureHeight: 0,
+    efficiency: 0,
+    totalFrames: 0,
+    frames: [],
+    atlasJson: '{}',
+    cssSnippet: '',
+    codeSnippet: '',
+    drawCallsBefore: 0,
+    drawCallsAfter: 0,
+  };
+}
+
+function getFrameOffsets(item: SpriteFrameInput) {
+  const tx = item.trimmedX ? item.trimmedX : 0;
+  const ty = item.trimmedY ? item.trimmedY : 0;
+  const ow = item.originalWidth ? item.originalWidth : item.width;
+  const oh = item.originalHeight ? item.originalHeight : item.height;
+  const px = item.pivotX !== undefined ? item.pivotX : 0.5;
+  const py = item.pivotY !== undefined ? item.pivotY : 0.5;
+  return { tx, ty, ow, oh, px, py };
+}
+
+function createPackedFrame(item: SpriteFrameInput, x: number, y: number): PackedFrame {
+  const { tx, ty, ow, oh, px, py } = getFrameOffsets(item);
+  return {
+    id: item.id,
+    name: item.name,
+    x,
+    y,
+    width: item.width,
+    height: item.height,
+    rotated: false,
+    trimmed: tx > 0 || ty > 0,
+    spriteSourceSize: { x: tx, y: ty, w: item.width, h: item.height },
+    sourceSize: { w: ow, h: oh },
+    pivot: { x: px, y: py },
+  };
+}
+
+function packSortedFrames(sorted: SpriteFrameInput[], options: PackerOptions) {
+  const padding = Math.max(0, options.padding);
+  const extrusion = Math.max(0, options.borderExtrusion);
+  const totalOffset = padding + extrusion * 2;
+
+  let currentX = padding;
+  let currentY = padding;
+  let rowHeight = 0;
+  let maxW = 0;
+  let maxH = 0;
+  const packedFrames: PackedFrame[] = [];
+
+  for (const item of sorted) {
+    const itemW = item.width + totalOffset;
+    const itemH = item.height + totalOffset;
+
+    if (currentX + itemW > options.maxTextureWidth && currentX > padding) {
+      currentX = padding;
+      currentY += rowHeight + padding;
+      rowHeight = 0;
+    }
+
+    packedFrames.push(createPackedFrame(item, currentX + extrusion, currentY + extrusion));
+
+    currentX += itemW + padding;
+    rowHeight = Math.max(rowHeight, itemH);
+    maxW = Math.max(maxW, currentX);
+    maxH = Math.max(maxH, currentY + rowHeight + padding);
+  }
+
+  return { packedFrames, maxW, maxH };
+}
+
+export function calculateBinPacking(frames: SpriteFrameInput[], options: PackerOptions): PackedResult {
+  if (frames.length === 0) {
+    return emptyPackingResult();
+  }
+
+  const sorted = [...frames].sort((a, b) => Math.max(b.width, b.height) - Math.max(a.width, a.height));
+  const { packedFrames, maxW, maxH } = packSortedFrames(sorted, options);
+
+  let finalWidth = options.forcePowerOfTwo ? nextPowerOfTwo(maxW) : maxW;
+  let finalHeight = options.forcePowerOfTwo ? nextPowerOfTwo(maxH) : maxH;
+
+  finalWidth = Math.min(finalWidth, options.maxTextureWidth);
+  finalHeight = Math.min(finalHeight, options.maxTextureHeight);
+
+  let usedArea = 0;
+  for (const f of packedFrames) {
+    usedArea += f.width * f.height;
+  }
+
+  const totalArea = Math.max(1, finalWidth * finalHeight);
+  const efficiency = Math.min(100, Math.round((usedArea / totalArea) * 1000) / 10);
+
+  return {
+    textureWidth: finalWidth,
+    textureHeight: finalHeight,
+    efficiency,
+    totalFrames: packedFrames.length,
+    frames: packedFrames,
+    atlasJson: generateAtlasJson(packedFrames, finalWidth, finalHeight, options.format),
+    cssSnippet: generateCssSnippet(packedFrames),
+    codeSnippet: generateEngineCodeSnippet(options.format),
+    drawCallsBefore: frames.length,
+    drawCallsAfter: 1,
+  };
+}