A comprehensive tool for viewing 3D character models, creating sprite sheets, and exporting animations.

• Loads and displays character models in GLB or FBX format
• Automatic fallback to simple character if no model is found
• Orthographic camera with side view perfect for 2D game sprites
• Camera controls:
  • Mouse wheel zoom
  • Arrow keys for precise positioning
  • Camera reset button

• Plays animations included in the model
• Animation selector dropdown for multiple animations
• Play/pause controls
• Shows animation information

• Creates sprite sheets from any animation
• Customizable settings:
  • Number of frames to capture
  • Grid layout (columns)
  • Cell dimensions (width & height)
• Content optimization:
  • Centers characters in frames
  • Maintains transparent background
  • Preserves exact cell dimensions
• Exports both sprite sheet image (PNG) and metadata (JSON)

• View and play created sprite sheets
• Export animations as GIF files
• Customizable GIF settings:
  • Animation speed (FPS)
  • Quality
  • Scale
  • Loop/no-loop option
• Live preview and direct download

Generated sprite sheet with 64 frames arranged in a 8x8 grid.

The resulting smooth animation exported as a GIF file.

1. Clone or download this repository
2. No build step required - it runs directly in the browser
3. For local development, use a web server to serve the files

1. Load your model and select the desired animation
2. Position the camera for the perfect view:
   • Use arrow keys for precise positioning
   • Use mouse wheel to zoom in/out
3. Configure sprite sheet settings:
   • Number of frames (16-64 recommended)
   • Number of columns (4-8 recommended)
   • Cell dimensions (in pixels)
   • Toggle "Center content" for better framing
4. Click "Record Sprite Sheet"
5. Two files will be automatically downloaded:
   • [animation_name]_spritesheet.png: The sprite sheet image
   • [animation_name]_metadata.json: Metadata for using the sprite sheet

1. Open sheet-animation.html in your browser
2. Click "Load Sprite Sheet" and select your PNG file
3. Load the corresponding metadata JSON file
4. Use play/pause controls to preview the animation
5. Adjust playback speed using the slider
6. Configure GIF export settings:

• FPS: Frames per second
• Scale: Size multiplier
• Loop: Whether the GIF should repeat
• Quality: Lower values = smaller file size

7. Click "Generate GIF"
8. Preview the GIF and click "Download GIF" to save it

/c:/source/game/ ├── index.html # Main 3D model viewer and sprite sheet generator ├── sheet-animation.html # Sprite sheet viewer and GIF exporter ├── README.md # This file ├── js/ │ ├── fbxViewer.js # Main viewer functionality │ ├── SpriteSheetHelper.js# Helper functions for sprite sheet generation │ └── GifExporter.js # Utility for exporting animations as GIFs ├── models/ │ └── character.glb # Your 3D character model (put yours here) └── sprites/ ├── character.png # Generated sprite sheet └── character.json # Generated metadata 

The generated JSON metadata file contains:

{ "frameWidth": 256, // Width of each cell in pixels "frameHeight": 256, // Height of each cell in pixels "frames": 16, // Total number of frames "columns": 4, // Number of columns in grid "rows": 4, // Number of rows in grid "animationName": "walk", // Name of the animation "optimized": true, // Whether frames were optimized "transparent": true, // Whether background is transparent "fps": 24, // Recommended playback speed "cameraPosition": { // Camera position data "offsetX": 0, "offsetY": -0.25 } }

• Chrome 70+
• Firefox 65+
• Edge 80+
• Safari 13+

• BabylonJS - 3D rendering engine
• gif.js - GIF encoding library

1. Positioning: Use the camera controls to center your character before recording
2. Frame Count: More frames = smoother animation but larger files
3. Transparent Background: Already enabled by default
4. Size Optimization: Enable "Center content" for more efficient sprite sheets
5. Consistent Lighting: The default lighting is optimized for side view animations
6. GIF Quality: Use lower quality values (5-10) for smaller file sizes

// Load the sprite sheet image const spriteSheet = new Image(); spriteSheet.src = 'sprites/character_walk_spritesheet.png'; // Animation parameters from metadata.json const frameWidth = 256; const frameHeight = 256; const columns = 4; let currentFrame = 0; const fps = 24; const frameInterval = 1000 / fps; let lastFrameTime = 0; function drawFrame(timestamp) { if (!lastFrameTime) lastFrameTime = timestamp; // Calculate elapsed time since last frame const elapsed = timestamp - lastFrameTime; // Update animation if it's time for next frame if (elapsed >= frameInterval) { currentFrame = (currentFrame + 1) % totalFrames; lastFrameTime = timestamp; } // Calculate position in sprite sheet const col = currentFrame % columns; const row = Math.floor(currentFrame / columns); // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw the current frame ctx.drawImage( spriteSheet, col * frameWidth, row * frameHeight, frameWidth, frameHeight, 0, 0, canvas.width, canvas.height ); requestAnimationFrame(drawFrame); } // Start the animation spriteSheet.onload = () => requestAnimationFrame(drawFrame);

// In your game's preload method function preload() { // Load the generated sprite sheet this.load.spritesheet('character', 'sprites/character_walk_spritesheet.png', { frameWidth: 256, frameHeight: 256 } ); } // In create method function create() { // Create the animation this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('character', { start: 0, end: 15 }), frameRate: 24, repeat: -1 }); // Create a sprite and play the animation const player = this.add.sprite(400, 300, 'character'); player.play('walk'); }

MIT License - Feel free to use for personal or commercial projects.

Developed as a tool for game developers to easily create sprite sheets from 3D models.