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

[FEAT] More UI enhancements

Browse Source
This commit is contained in:
root
2025-11-23 01:48:05 +01:00
parent 56858701ef
commit b3f530870e
5 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -14,24 +14,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Spritesheet Generator - Create Game Spritesheets Online</title>
<meta name="title" content="Spritesheet Generator - Create Game Spritesheets Online">
<title>Spritesheet generator - Create Game Spritesheets Online</title>
<meta name="title" content="Spritesheet generator - Create Game Spritesheets Online">
<meta name="description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
<meta name="keywords" content="spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools">
<meta name="keywords" content="Spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools">
<meta name="author" content="nu11ed">
<meta name="robots" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://spritesheetgenerator.online/">
<meta property="og:title" content="Spritesheet Generator - Create Game Spritesheets Online">
<meta property="og:title" content="Spritesheet generator - Create Game Spritesheets Online">
<meta property="og:description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
<meta property="og:image" content="/og-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://spritesheetgenerator.online/">
<meta property="twitter:title" content="Spritesheet Generator - Create Game Spritesheets Online">
<meta property="twitter:title" content="Spritesheet generator - Create Game Spritesheets Online">
<meta property="twitter:description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
<meta property="twitter:image" content="/og-image.png">

8
src/App.vue
View File

@@ -4,7 +4,7 @@
<header class="mb-8 sm:mb-12">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
<div class="text-center sm:text-left">
<h1 class="text-3xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight mb-2">Spritesheet Generator</h1>
<h1 class="text-3xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight mb-2">Spritesheet generator</h1>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Create professional spritesheets for your game development projects</p>
</div>
<dark-mode-toggle />
@@ -62,8 +62,8 @@
<div class="mt-10">
<div class="prose prose-lg dark:prose-invert max-w-none">
<div>
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Welcome to Spritesheet Generator</h3>
<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>
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Welcome to Spritesheet generator</h3>
<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>
<div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
@@ -277,7 +277,7 @@
<div class="text-center">
<div class="text-4xl mb-4">💬</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Help us improve!</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">We'd love to hear your thoughts about the spritesheet generator. Would you like to share your feedback?</p>
<p class="text-gray-600 dark:text-gray-300 mb-6">We'd love to hear your thoughts about the Spritesheet generator. Would you like to share your feedback?</p>
<div class="flex gap-3 justify-center">
<button @click="handleFeedbackPopupResponse(false)" class="px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors">Maybe later</button>
<button @click="handleFeedbackPopupResponse(true)" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors">Share feedback</button>

5
src/components/SpriteCanvas.vue
View File

@@ -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,

16
src/composables/useDragSprite.ts
View File

@@ -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<Sprite[]> | ComputedRef<Sprite[]> | Sprite[];
layers?: Ref<Layer[]> | ComputedRef<Layer[]> | Layer[];
columns: Ref<number> | number;
zoom?: Ref<number>;
allowCellSwap?: Ref<boolean>;
@@ -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;

4
src/composables/useLayers.ts
View File

@@ -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;
}