+
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.
@@ -37,7 +36,24 @@
-
+
+
+
+ Layers
+ Add
+
+
+
+ {{ layer.name }}
+
+
+ ↑
+ ↓
+ Remove
+
+
+
Columns:
@@ -107,14 +123,13 @@
Preview animation
-
-
+
-
@@ -150,25 +165,41 @@
import SpritesheetSplitter from './components/SpritesheetSplitter.vue';
import GifFpsModal from './components/GifFpsModal.vue';
import DarkModeToggle from './components/utilities/DarkModeToggle.vue';
- import { useSprites, getMaxDimensions } from './composables/useSprites';
- import { useExport } from './composables/useExport';
+ import { useExportLayers } from './composables/useExportLayers';
+ import { useLayers } from './composables/useLayers';
+ import { getMaxDimensionsAcrossLayers } from './composables/useLayers';
import { useSettingsStore } from './stores/useSettingsStore';
import { calculateNegativeSpacing } from './composables/useNegativeSpacing';
import type { SpriteFile } from './types/sprites';
const settingsStore = useSettingsStore();
- const { sprites, columns, updateSpritePosition, updateSpriteCell, removeSprite, replaceSprite, addSprite, addSpriteWithResize, processImageFiles, alignSprites } = useSprites();
+ const {
+ layers,
+ visibleLayers,
+ activeLayer,
+ activeLayerId,
+ columns,
+ updateSpritePosition,
+ updateSpriteCell,
+ removeSprite,
+ replaceSprite,
+ addSprite,
+ addSpriteWithResize,
+ processImageFiles,
+ alignSprites,
+ addLayer,
+ removeLayer,
+ moveLayer,
+ } = useLayers();
- const { downloadSpritesheet, exportSpritesheetJSON, importSpritesheetJSON, downloadAsGif, downloadAsZip } = useExport(sprites, columns, toRef(settingsStore, 'negativeSpacingEnabled'));
+ const { downloadSpritesheet, exportSpritesheetJSON, importSpritesheetJSON, downloadAsGif, downloadAsZip } = useExportLayers(layers, columns, toRef(settingsStore, 'negativeSpacingEnabled'));
const cellSize = computed(() => {
- if (!sprites.value.length) return { width: 0, height: 0 };
- const { maxWidth, maxHeight } = getMaxDimensions(sprites.value);
- const negativeSpacing = calculateNegativeSpacing(sprites.value, settingsStore.negativeSpacingEnabled);
- return {
- width: maxWidth + negativeSpacing,
- height: maxHeight + negativeSpacing,
- };
+ if (!layers.value.length) return { width: 0, height: 0 };
+ const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers.value);
+ const allSprites = visibleLayers.value.flatMap(l => l.sprites);
+ const negativeSpacing = calculateNegativeSpacing(allSprites, settingsStore.negativeSpacingEnabled);
+ return { width: maxWidth + negativeSpacing, height: maxHeight + negativeSpacing };
});
const isPreviewModalOpen = ref(false);
const isHelpModalOpen = ref(false);
@@ -216,7 +247,7 @@
};
const openPreviewModal = () => {
- if (sprites.value.length === 0) {
+ if (!visibleLayers.value.some(l => l.sprites.length > 0)) {
alert('Please upload or import sprites to preview an animation.');
return;
}
@@ -253,7 +284,7 @@
};
const openGifFpsModal = () => {
- if (sprites.value.length === 0) {
+ if (!visibleLayers.value.some(l => l.sprites.length > 0)) {
alert('Please upload or import sprites before generating a GIF.');
return;
}
diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index e991832..776cd8a 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -100,7 +100,7 @@
diff --git a/src/composables/useExportLayers.ts b/src/composables/useExportLayers.ts
new file mode 100644
index 0000000..beae08b
--- /dev/null
+++ b/src/composables/useExportLayers.ts
@@ -0,0 +1,246 @@
+import type { Ref } from 'vue';
+import GIF from 'gif.js';
+import gifWorkerUrl from 'gif.js/dist/gif.worker.js?url';
+import JSZip from 'jszip';
+import type { Layer, Sprite } from '@/types/sprites';
+import { getMaxDimensionsAcrossLayers } from './useLayers';
+import { calculateNegativeSpacing } from './useNegativeSpacing';
+
+export const useExportLayers = (layersRef: Ref
, columns: Ref, negativeSpacingEnabled: Ref) => {
+ const getVisibleLayers = () => layersRef.value.filter(l => l.visible);
+ const getAllVisibleSprites = () => getVisibleLayers().flatMap(l => l.sprites);
+
+ const drawCompositeCell = (ctx: CanvasRenderingContext2D, cellIndex: number, cellWidth: number, cellHeight: number, negativeSpacing: number) => {
+ ctx.clearRect(0, 0, cellWidth, cellHeight);
+ ctx.fillStyle = '#f9fafb';
+ ctx.fillRect(0, 0, cellWidth, cellHeight);
+ const vLayers = getVisibleLayers();
+ vLayers.forEach(layer => {
+ const sprite = layer.sprites[cellIndex];
+ if (!sprite) return;
+ ctx.drawImage(sprite.img, Math.floor(negativeSpacing + sprite.x), Math.floor(negativeSpacing + sprite.y));
+ });
+ };
+
+ const downloadSpritesheet = () => {
+ const visibleLayers = getVisibleLayers();
+ if (!visibleLayers.length || !visibleLayers.some(l => l.sprites.length)) {
+ alert('Please upload or import sprites before downloading the spritesheet.');
+ return;
+ }
+
+ const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers);
+ const negativeSpacing = calculateNegativeSpacing(getAllVisibleSprites(), negativeSpacingEnabled.value);
+ const cellWidth = maxWidth + negativeSpacing;
+ const cellHeight = maxHeight + negativeSpacing;
+ const maxLen = Math.max(...visibleLayers.map(l => l.sprites.length));
+ const rows = Math.ceil(maxLen / columns.value);
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+ canvas.width = cellWidth * columns.value;
+ canvas.height = cellHeight * rows;
+ ctx.imageSmoothingEnabled = false;
+
+ for (let index = 0; index < maxLen; index++) {
+ const col = index % columns.value;
+ const row = Math.floor(index / columns.value);
+ const cellX = Math.floor(col * cellWidth);
+ const cellY = Math.floor(row * cellHeight);
+
+ const cellCanvas = document.createElement('canvas');
+ const cellCtx = cellCanvas.getContext('2d');
+ if (!cellCtx) return;
+ cellCanvas.width = cellWidth;
+ cellCanvas.height = cellHeight;
+ drawCompositeCell(cellCtx, index, cellWidth, cellHeight, negativeSpacing);
+ ctx.drawImage(cellCanvas, cellX, cellY);
+ }
+
+ const link = document.createElement('a');
+ link.download = 'spritesheet.png';
+ link.href = canvas.toDataURL('image/png', 1.0);
+ link.click();
+ };
+
+ const exportSpritesheetJSON = async () => {
+ const visibleLayers = getVisibleLayers();
+ if (!visibleLayers.length || !visibleLayers.some(l => l.sprites.length)) {
+ alert('Nothing to export. Please add sprites first.');
+ return;
+ }
+
+ const layersData = await Promise.all(
+ layersRef.value.map(async layer => {
+ const sprites = await Promise.all(
+ layer.sprites.map(async sprite => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return null;
+ canvas.width = sprite.width;
+ canvas.height = sprite.height;
+ ctx.drawImage(sprite.img, 0, 0);
+ const base64 = canvas.toDataURL('image/png');
+ return { id: sprite.id, width: sprite.width, height: sprite.height, x: sprite.x, y: sprite.y, base64, name: sprite.file.name };
+ })
+ );
+ return { id: layer.id, name: layer.name, visible: layer.visible, locked: layer.locked, sprites: sprites.filter(Boolean) };
+ })
+ );
+
+ const json = { version: 2, columns: columns.value, negativeSpacingEnabled: negativeSpacingEnabled.value, layers: layersData };
+ const jsonString = JSON.stringify(json, null, 2);
+ const blob = new Blob([jsonString], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'spritesheet.json';
+ a.click();
+ URL.revokeObjectURL(url);
+ };
+
+ const importSpritesheetJSON = async (jsonFile: File) => {
+ const text = await jsonFile.text();
+ const data = JSON.parse(text);
+
+ const loadSprite = (spriteData: any) =>
+ new Promise(resolve => {
+ const img = new Image();
+ img.onload = () => {
+ const byteString = atob(spriteData.base64.split(',')[1]);
+ const mimeType = spriteData.base64.split(',')[0].split(':')[1].split(';')[0];
+ const ab = new ArrayBuffer(byteString.length);
+ const ia = new Uint8Array(ab);
+ for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i);
+ const blob = new Blob([ab], { type: mimeType });
+ const fileName = spriteData.name || `sprite-${spriteData.id}.png`;
+ const file = new File([blob], fileName, { type: mimeType });
+ resolve({ id: spriteData.id || crypto.randomUUID(), file, img, url: spriteData.base64, width: spriteData.width, height: spriteData.height, x: spriteData.x || 0, y: spriteData.y || 0 });
+ };
+ img.src = spriteData.base64;
+ });
+
+ if (typeof data.columns === 'number') columns.value = data.columns;
+ if (typeof data.negativeSpacingEnabled === 'boolean') negativeSpacingEnabled.value = data.negativeSpacingEnabled;
+
+ if (Array.isArray(data.layers)) {
+ const newLayers: Layer[] = [];
+ for (const layerData of data.layers) {
+ const sprites: Sprite[] = await Promise.all(layerData.sprites.map((s: any) => loadSprite(s)));
+ newLayers.push({ id: layerData.id || crypto.randomUUID(), name: layerData.name || 'Layer', visible: layerData.visible !== false, locked: !!layerData.locked, sprites });
+ }
+ layersRef.value = newLayers;
+ return;
+ }
+
+ if (Array.isArray(data.sprites)) {
+ const sprites: Sprite[] = await Promise.all(data.sprites.map((s: any) => loadSprite(s)));
+ layersRef.value = [
+ { id: crypto.randomUUID(), name: 'Base', visible: true, locked: false, sprites },
+ { id: crypto.randomUUID(), name: 'Clothes', visible: true, locked: false, sprites: [] },
+ ];
+ return;
+ }
+
+ throw new Error('Invalid JSON format');
+ };
+
+ const downloadAsGif = (fps: number) => {
+ const visibleLayers = getVisibleLayers();
+ if (!visibleLayers.length || !visibleLayers.some(l => l.sprites.length)) {
+ alert('Please upload or import sprites before generating a GIF.');
+ return;
+ }
+
+ const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers);
+ const negativeSpacing = calculateNegativeSpacing(getAllVisibleSprites(), negativeSpacingEnabled.value);
+ const cellWidth = maxWidth + negativeSpacing;
+ const cellHeight = maxHeight + negativeSpacing;
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+ canvas.width = cellWidth;
+ canvas.height = cellHeight;
+ ctx.imageSmoothingEnabled = false;
+
+ const gif = new GIF({ workers: 2, quality: 10, width: cellWidth, height: cellHeight, workerScript: gifWorkerUrl });
+ const maxLen = Math.max(...visibleLayers.map(l => l.sprites.length));
+ for (let i = 0; i < maxLen; i++) {
+ drawCompositeCell(ctx, i, cellWidth, cellHeight, negativeSpacing);
+ gif.addFrame(ctx, { copy: true, delay: 1000 / fps });
+ }
+
+ gif.on('finished', (blob: Blob) => {
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'animation.gif';
+ a.click();
+ URL.revokeObjectURL(url);
+ });
+ gif.render();
+ };
+
+ const downloadAsZip = async () => {
+ const visibleLayers = getVisibleLayers();
+ if (!visibleLayers.length || !visibleLayers.some(l => l.sprites.length)) {
+ alert('Please upload or import sprites before downloading a ZIP.');
+ return;
+ }
+ const zip = new JSZip();
+
+ const { maxWidth, maxHeight } = getMaxDimensionsAcrossLayers(visibleLayers);
+ const negativeSpacing = calculateNegativeSpacing(getAllVisibleSprites(), negativeSpacingEnabled.value);
+ const cellWidth = maxWidth + negativeSpacing;
+ const cellHeight = maxHeight + negativeSpacing;
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+ canvas.width = cellWidth;
+ canvas.height = cellHeight;
+ ctx.imageSmoothingEnabled = false;
+
+ const maxLen = Math.max(...visibleLayers.map(l => l.sprites.length));
+ for (let i = 0; i < maxLen; i++) {
+ drawCompositeCell(ctx, i, cellWidth, cellHeight, negativeSpacing);
+ const dataURL = canvas.toDataURL('image/png');
+ const binary = atob(dataURL.split(',')[1]);
+ const buf = new ArrayBuffer(binary.length);
+ const view = new Uint8Array(buf);
+ for (let j = 0; j < binary.length; j++) view[j] = binary.charCodeAt(j);
+ zip.file(`frames/frame_${String(i + 1).padStart(3, '0')}.png`, view);
+ }
+
+ const jsonFolder = zip.folder('export')!;
+ const jsonBlobPromise = (async () => {
+ const layersPayload = await Promise.all(
+ layersRef.value.map(async layer => ({
+ id: layer.id,
+ name: layer.name,
+ visible: layer.visible,
+ locked: layer.locked,
+ sprites: await Promise.all(
+ layer.sprites.map(async s => ({ id: s.id, width: s.width, height: s.height, x: s.x, y: s.y, name: s.file.name }))
+ ),
+ }))
+ );
+ const meta = { version: 2, columns: columns.value, negativeSpacingEnabled: negativeSpacingEnabled.value, layers: layersPayload };
+ const metaStr = JSON.stringify(meta, null, 2);
+ jsonFolder.file('spritesheet.meta.json', metaStr);
+ })();
+ await jsonBlobPromise;
+
+ const content = await zip.generateAsync({ type: 'blob' });
+ const url = URL.createObjectURL(content);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'sprites.zip';
+ a.click();
+ URL.revokeObjectURL(url);
+ };
+
+ return { downloadSpritesheet, exportSpritesheetJSON, importSpritesheetJSON, downloadAsGif, downloadAsZip };
+};
diff --git a/src/composables/useFileDrop.ts b/src/composables/useFileDrop.ts
index 92304d0..c05a7f8 100644
--- a/src/composables/useFileDrop.ts
+++ b/src/composables/useFileDrop.ts
@@ -1,9 +1,9 @@
-import { ref, type Ref } from 'vue';
+import { ref, type Ref, type ComputedRef } from 'vue';
import type { Sprite } from '@/types/sprites';
import { getMaxDimensions } from './useSprites';
export interface FileDropOptions {
- sprites: Ref | Sprite[];
+ sprites: Ref | ComputedRef | Sprite[];
onAddSprite: (file: File) => void;
onAddSpriteWithResize: (file: File) => void;
}
diff --git a/src/composables/useLayers.ts b/src/composables/useLayers.ts
new file mode 100644
index 0000000..466a0fa
--- /dev/null
+++ b/src/composables/useLayers.ts
@@ -0,0 +1,205 @@
+import { computed, ref, watch } from 'vue';
+import type { Layer, Sprite } from '@/types/sprites';
+import { getMaxDimensions as getMaxDimensionsSingle, useSprites as useSpritesSingle } from './useSprites';
+
+export const createEmptyLayer = (name: string): Layer => ({
+ id: crypto.randomUUID(),
+ name,
+ sprites: [],
+ visible: true,
+ locked: false,
+});
+
+export const useLayers = () => {
+ const layers = ref([createEmptyLayer('Base')]);
+ const activeLayerId = ref(layers.value[0].id);
+ const columns = ref(4);
+
+ watch(columns, val => {
+ const num = typeof val === 'number' ? val : parseInt(String(val));
+ const safe = Number.isFinite(num) && num >= 1 ? Math.min(num, 10) : 1;
+ if (safe !== columns.value) columns.value = safe;
+ });
+
+ const activeLayer = computed(() => layers.value.find(l => l.id === activeLayerId.value) || layers.value[0]);
+
+ const getMaxDimensions = (sprites: Sprite[]) => getMaxDimensionsSingle(sprites);
+
+ const updateSpritePosition = (id: string, x: number, y: number) => {
+ const l = activeLayer.value;
+ if (!l) return;
+ const i = l.sprites.findIndex(s => s.id === id);
+ if (i !== -1) {
+ l.sprites[i].x = Math.floor(x);
+ l.sprites[i].y = Math.floor(y);
+ }
+ };
+
+ const alignSprites = (position: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
+ const l = activeLayer.value;
+ if (!l || !l.sprites.length) return;
+ const { maxWidth, maxHeight } = getMaxDimensions(l.sprites);
+ l.sprites = l.sprites.map(sprite => {
+ let x = sprite.x;
+ let y = sprite.y;
+ switch (position) {
+ case 'left':
+ x = 0;
+ break;
+ case 'center':
+ x = Math.floor((maxWidth - sprite.width) / 2);
+ break;
+ case 'right':
+ x = Math.floor(maxWidth - sprite.width);
+ break;
+ case 'top':
+ y = 0;
+ break;
+ case 'middle':
+ y = Math.floor((maxHeight - sprite.height) / 2);
+ break;
+ case 'bottom':
+ y = Math.floor(maxHeight - sprite.height);
+ break;
+ }
+ return { ...sprite, x: Math.floor(x), y: Math.floor(y) };
+ });
+ };
+
+ const updateSpriteCell = (id: string, newIndex: number) => {
+ const l = activeLayer.value;
+ if (!l) return;
+ const currentIndex = l.sprites.findIndex(s => s.id === id);
+ if (currentIndex === -1 || currentIndex === newIndex) return;
+ const next = [...l.sprites];
+ if (newIndex < next.length) {
+ const moving = { ...next[currentIndex] };
+ const target = { ...next[newIndex] };
+ next[currentIndex] = target;
+ next[newIndex] = moving;
+ } else {
+ const [moved] = next.splice(currentIndex, 1);
+ next.splice(newIndex, 0, moved);
+ }
+ l.sprites = next;
+ };
+
+ const removeSprite = (id: string) => {
+ const l = activeLayer.value;
+ if (!l) return;
+ const i = l.sprites.findIndex(s => s.id === id);
+ if (i === -1) return;
+ const s = l.sprites[i];
+ if (s.url && s.url.startsWith('blob:')) {
+ try {
+ URL.revokeObjectURL(s.url);
+ } catch {}
+ }
+ l.sprites.splice(i, 1);
+ };
+
+ const replaceSprite = (id: string, file: File) => {
+ const l = activeLayer.value;
+ if (!l) return;
+ const i = l.sprites.findIndex(s => s.id === id);
+ if (i === -1) return;
+ const old = l.sprites[i];
+ if (old.url && old.url.startsWith('blob:')) {
+ try {
+ URL.revokeObjectURL(old.url);
+ } catch {}
+ }
+
+ const url = URL.createObjectURL(file);
+ const img = new Image();
+ img.onload = () => {
+ l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y };
+ };
+ img.onerror = () => {
+ URL.revokeObjectURL(url);
+ };
+ img.src = url;
+ };
+
+ const addSprite = (file: File) => addSpriteWithResize(file);
+
+ const addSpriteWithResize = (file: File) => {
+ const l = activeLayer.value;
+ if (!l) return;
+ const url = URL.createObjectURL(file);
+ const img = new Image();
+ img.onload = () => {
+ const next: Sprite = {
+ id: crypto.randomUUID(),
+ file,
+ img,
+ url,
+ width: img.width,
+ height: img.height,
+ x: 0,
+ y: 0,
+ };
+ l.sprites = [...l.sprites, next];
+ };
+ img.onerror = () => URL.revokeObjectURL(url);
+ img.src = url;
+ };
+
+ const processImageFiles = async (files: File[]) => {
+ for (const f of files) addSpriteWithResize(f);
+ };
+
+ const addLayer = (name?: string) => {
+ const l = createEmptyLayer(name || `Layer ${layers.value.length + 1}`);
+ layers.value.push(l);
+ activeLayerId.value = l.id;
+ };
+
+ const removeLayer = (id: string) => {
+ if (layers.value.length === 1) return;
+ const idx = layers.value.findIndex(l => l.id === id);
+ if (idx === -1) return;
+ layers.value.splice(idx, 1);
+ if (activeLayerId.value === id) activeLayerId.value = layers.value[0].id;
+ };
+
+ const moveLayer = (id: string, direction: 'up' | 'down') => {
+ const idx = layers.value.findIndex(l => l.id === id);
+ if (idx === -1) return;
+ if (direction === 'up' && idx > 0) {
+ const [l] = layers.value.splice(idx, 1);
+ layers.value.splice(idx - 1, 0, l);
+ }
+ if (direction === 'down' && idx < layers.value.length - 1) {
+ const [l] = layers.value.splice(idx, 1);
+ layers.value.splice(idx + 1, 0, l);
+ }
+ };
+
+ const visibleLayers = computed(() => layers.value.filter(l => l.visible));
+
+ return {
+ layers,
+ visibleLayers,
+ activeLayerId,
+ activeLayer,
+ columns,
+ getMaxDimensions,
+ updateSpritePosition,
+ updateSpriteCell,
+ removeSprite,
+ replaceSprite,
+ addSprite,
+ addSpriteWithResize,
+ processImageFiles,
+ alignSprites,
+ addLayer,
+ removeLayer,
+ moveLayer,
+ };
+};
+
+export const getMaxDimensionsAcrossLayers = (layers: Layer[]) => {
+ const sprites = layers.flatMap(l => l.visible ? l.sprites : []);
+ return getMaxDimensionsSingle(sprites);
+};
\ No newline at end of file
diff --git a/src/types/sprites.ts b/src/types/sprites.ts
index e65597a..5833a86 100644
--- a/src/types/sprites.ts
+++ b/src/types/sprites.ts
@@ -16,3 +16,11 @@ export interface SpriteFile {
width: number;
height: number;
}
+
+export interface Layer {
+ id: string;
+ name: string;
+ sprites: Sprite[];
+ visible: boolean;
+ locked: boolean;
+}