root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Bug fix

Browse Source
This commit is contained in:
root
2025-11-25 01:48:02 +01:00
parent 2586a0a0bc
commit caef8003fa
4 changed files with 255 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/App.vue
View File

@@ -53,7 +53,7 @@
<!-- Welcome state -->
<div v-if="!visibleLayers.some(l => l.sprites.length)" class="p-6 sm:p-10">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites</h2>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Upload sprites or single image</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Drag and drop images or import from JSON</p>
</div>
<file-uploader @upload-sprites="handleSpritesUpload" />
@@ -65,7 +65,7 @@
<p class="text-gray-700 dark:text-gray-300 mb-4">Create spritesheets for your game development and animation projects with our completely free, open-source Spritesheet generator.</p>
<p class="text-gray-700 dark:text-gray-300 mb-6">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.</p>
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Key features of this sprite editor</h3>
<li class="text-gray-700 dark:text-gray-300 mb-6 space-y-2">
<ul class="text-gray-700 dark:text-gray-300 mb-6 space-y-2">
<li><strong>Free sprite editor</strong>: Edit, organize, and optimize your game sprites directly in your browser</li>
<li><strong>Automatic spritesheet generation</strong>: Convert multiple PNG, JPG, or GIF images into efficient sprite atlases</li>
<li><strong>Customizable grid layouts</strong>: Adjust spacing, padding, and arrangement for pixel-perfect results</li>
@@ -74,7 +74,7 @@
<li><strong>Zero installation required</strong>: No downloads - use our web-based sprite sheet maker instantly</li>
<li><strong>Batch processing</strong>: Upload and process multiple sprites simultaneously</li>
<li><strong>Export options</strong>: Download spritesheet as PNG, JPG, GIF, ZIP or JSON.</li>
</li>
</ul>
<div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
<i class="fas fa-play-circle text-gray-800 dark:text-gray-200"></i>
@@ -392,20 +392,29 @@
if (files.length === 1 && files[0].type.startsWith('image/')) {
const file = files[0];
const url = URL.createObjectURL(file);
const reader = new FileReader();
reader.onload = e => {
const url = e.target?.result as string;
const img = new Image();
img.onload = () => {
if (confirm('This looks like it might be a spritesheet. Would you like to split it into individual sprites?')) {
spritesheetImageUrl.value = url;
spritesheetImageFile.value = file;
isSpritesheetSplitterOpen.value = true;
return;
}
const img = new Image();
img.onload = () => {
if (confirm('This looks like it might be a spritesheet. Would you like to split it into individual sprites?')) {
spritesheetImageUrl.value = url;
spritesheetImageFile.value = file;
isSpritesheetSplitterOpen.value = true;
return;
}
processImageFiles([file]);
processImageFiles([file]);
};
img.onerror = () => {
console.error('Failed to load image:', file.name);
};
img.src = url;
};
img.src = url;
reader.onerror = () => {
console.error('Failed to read image file:', file.name);
};
reader.readAsDataURL(file);
return;
}
@@ -439,10 +448,12 @@
const closeSpritesheetSplitter = () => {
isSpritesheetSplitterOpen.value = false;
if (spritesheetImageUrl.value) {
URL.revokeObjectURL(spritesheetImageUrl.value);
spritesheetImageUrl.value = '';
if (spritesheetImageUrl.value && spritesheetImageUrl.value.startsWith('blob:')) {
try {
URL.revokeObjectURL(spritesheetImageUrl.value);
} catch {}
}
spritesheetImageUrl.value = '';
spritesheetImageFile.value = null;
};