Create professional spritesheets for your game development projects
@@ -62,8 +62,8 @@
-
Welcome to Spritesheet Generator
-
Create spritesheets for your game development and animation projects with our completely free, open-source spritesheet generator.
+
Welcome to Spritesheet generator
+
Create spritesheets for your game development and animation projects with our completely free, open-source Spritesheet generator.
This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.
@@ -277,7 +277,7 @@
💬
Help us improve!
-
We'd love to hear your thoughts about the spritesheet generator. Would you like to share your feedback?
+
We'd love to hear your thoughts about the Spritesheet generator. Would you like to share your feedback?
diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index d13b718..d1512ee 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -93,8 +93,8 @@
class="absolute text-[23px] leading-none font-mono text-cyan-600 dark:text-cyan-400 bg-white/90 dark:bg-gray-900/90 px-1 py-0.5 rounded-sm"
:style="{
// Position at bottom-right corner of each cell, scaled by zoom
- left: `${((position.cellX + position.maxWidth) * zoom) - 2}px`,
- top: `${((position.cellY + position.maxHeight) * zoom) - 2}px`,
+ left: `${(position.cellX + position.maxWidth) * zoom - 2}px`,
+ top: `${(position.cellY + position.maxHeight) * zoom - 2}px`,
transform: 'translate(-100%, -100%)',
}"
>
@@ -198,6 +198,7 @@
calculateMaxDimensions,
} = useDragSprite({
sprites: computed(() => props.layers.find(l => l.id === props.activeLayerId)?.sprites ?? []),
+ layers: toRef(props, 'layers'),
columns: toRef(props, 'columns'),
zoom,
allowCellSwap,
diff --git a/src/composables/useDragSprite.ts b/src/composables/useDragSprite.ts
index 5c1e353..682ff95 100644
--- a/src/composables/useDragSprite.ts
+++ b/src/composables/useDragSprite.ts
@@ -1,5 +1,5 @@
import { ref, computed, type Ref, type ComputedRef } from 'vue';
-import type { Sprite } from '@/types/sprites';
+import type { Sprite, Layer } from '@/types/sprites';
import { getMaxDimensions } from './useSprites';
import { calculateNegativeSpacing } from './useNegativeSpacing';
@@ -28,6 +28,7 @@ export interface SpritePosition {
export interface DragSpriteOptions {
sprites: Ref | ComputedRef | Sprite[];
+ layers?: Ref | ComputedRef | Layer[];
columns: Ref | number;
zoom?: Ref;
allowCellSwap?: Ref;
@@ -46,6 +47,7 @@ export function useDragSprite(options: DragSpriteOptions) {
// Helper to get reactive values
const getSprites = () => (Array.isArray(options.sprites) ? options.sprites : options.sprites.value);
+ const getLayers = () => (options.layers ? (Array.isArray(options.layers) ? options.layers : options.layers.value) : null);
const getColumns = () => (typeof options.columns === 'number' ? options.columns : options.columns.value);
const getZoom = () => options.zoom?.value ?? 1;
const getAllowCellSwap = () => options.allowCellSwap?.value ?? false;
@@ -73,7 +75,6 @@ export function useDragSprite(options: DragSpriteOptions) {
const lastMaxHeight = ref(1);
const calculateMaxDimensions = () => {
- const sprites = getSprites();
const negativeSpacingEnabled = getNegativeSpacingEnabled();
const manualCellSizeEnabled = getManualCellSizeEnabled();
@@ -87,8 +88,13 @@ export function useDragSprite(options: DragSpriteOptions) {
return { maxWidth, maxHeight, negativeSpacing };
}
- // Otherwise, calculate based on sprite dimensions
- const base = getMaxDimensions(sprites);
+ // Get all sprites to calculate dimensions from
+ // If layers are provided, use all visible layers; otherwise use current sprites
+ const layers = getLayers();
+ const spritesToMeasure = layers ? layers.filter(l => l.visible).flatMap(l => l.sprites) : getSprites();
+
+ // Otherwise, calculate based on sprite dimensions across all visible layers
+ const base = getMaxDimensions(spritesToMeasure);
// When switching back from manual mode, reset to actual sprite dimensions
const baseMaxWidth = Math.max(1, base.maxWidth);
const baseMaxHeight = Math.max(1, base.maxHeight);
@@ -96,7 +102,7 @@ export function useDragSprite(options: DragSpriteOptions) {
lastMaxHeight.value = baseMaxHeight;
// Calculate negative spacing using shared composable
- const negativeSpacing = calculateNegativeSpacing(sprites, negativeSpacingEnabled);
+ const negativeSpacing = calculateNegativeSpacing(spritesToMeasure, negativeSpacingEnabled);
// Add negative spacing to expand each cell
const maxWidth = baseMaxWidth + negativeSpacing;
diff --git a/src/composables/useLayers.ts b/src/composables/useLayers.ts
index ecc0864..7cb2900 100644
--- a/src/composables/useLayers.ts
+++ b/src/composables/useLayers.ts
@@ -50,8 +50,8 @@ export const useLayers = () => {
cellWidth = settingsStore.manualCellWidth;
cellHeight = settingsStore.manualCellHeight;
} else {
- // Use auto-calculated dimensions based on sprite sizes
- const { maxWidth, maxHeight } = getMaxDimensions(l.sprites);
+ // Use auto-calculated dimensions based on ALL visible layers (not just active layer)
+ const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers.value);
cellWidth = maxWidth;
cellHeight = maxHeight;
}