Add comprehensive documentation for AI-powered sprite generation tools

docs/fetchAvailableSpriteStyles.md

@@ -0,0 +1,76 @@
+---
+title: Fetch Available Sprite Styles
+description: Learn how to use the fetchAvailableSpriteStyles function to get a list of available sprite styles for character generation.
+sidebar_position: 3
+---
+
+# Fetch Available Sprite Styles
+
+## Introduction
+
+The `fetchAvailableSpriteStyles` function is a part of the SpriteAI module, which allows developers to retrieve a list of available sprite styles for character generation. This tutorial will guide you through using this function in your projects.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Installed the SpriteAI module in your project
+- Basic knowledge of JavaScript and asynchronous programming
+
+## How to Use fetchAvailableSpriteStyles
+
+Follow these steps to fetch the available sprite styles:
+
+1. Import the function from the SpriteAI module:
+
+```javascript
+import { fetchAvailableSpriteStyles } from 'spriteAI';
+```
+
+2. Call the function and handle the returned promise:
+
+```javascript
+async function getStyles() {
+  try {
+    const styles = await fetchAvailableSpriteStyles();
+    console.log('Available styles:', styles);
+  } catch (error) {
+    console.error('Error fetching styles:', error);
+  }
+}
+
+getStyles();
+```
+
+3. The function will return an array of available sprite styles.
+
+## Example Output
+
+The `fetchAvailableSpriteStyles` function returns an array of strings. Here's an example of what the output might look like:
+
+```javascript
+['pixel-art', 'vector', '3d', 'hand-drawn', 'anime']
+```
+
+## Use Cases
+
+You can use the `fetchAvailableSpriteStyles` function to:
+
+- Populate a dropdown menu for style selection in your character generation UI
+- Validate user input when generating sprites
+- Dynamically adjust your application based on available styles
+
+## Best Practices
+
+- Cache the results if you're calling this function frequently, as the available styles are unlikely to change often.
+- Handle potential network errors or unexpected responses gracefully.
+- Use the returned styles to ensure you're only offering valid options to your users.
+
+## Next Steps
+
+Now that you know how to fetch available sprite styles, you might want to explore:
+
+- [How to Generate Character Spritesheets](/docs/generateCharacterSpritesheet)
+- [Customizing Sprite Generation Options](/docs/customizeSpriteOptions)
+
+Remember, the available styles may be updated over time, so always use this function to get the most up-to-date list of styles supported by the SpriteAI module.

docs/generateEnvironmentSprites.md

@@ -0,0 +1,119 @@
+---
+title: Generate Environment Sprites
+description: Learn how to use the generateEnvironmentSprites function to create tileset images for game environments.
+sidebar_position: 4
+---
+
+# Generate Environment Sprites
+
+## Introduction
+
+The `generateEnvironmentSprites` function is a powerful tool for game developers to quickly generate tileset images for various game environments. This tutorial will guide you through using this function to create custom environment sprites using AI-powered image generation.
+
+## Prerequisites
+
+- Node.js installed on your system
+- Access to the `spriteAI` module
+- An OpenAI API key (for DALL-E 3 image generation)
+
+## Getting Started
+
+First, let's import the necessary function from the `spriteAI` module:
+
+```javascript
+import { generateEnvironmentSprites } from './path/to/spriteAI';
+```
+
+## Basic Usage
+
+Here's a simple example of how to use the `generateEnvironmentSprites` function:
+
+```javascript
+const description = "medieval fantasy forest";
+const result = await generateEnvironmentSprites(description);
+console.log(result);
+```
+
+This will generate a tileset of medieval fantasy forest environment elements.
+
+## Customizing Your Environment Sprites
+
+The `generateEnvironmentSprites` function accepts an options object as its second parameter, allowing you to customize various aspects of the generated sprites.
+
+Here's an example with custom options:
+
+```javascript
+const description = "futuristic cyberpunk city";
+const options = {
+  elements: 6,
+  size: '1024x1024',
+  style: 'vector',
+  padding: 2,
+  theme: 'sci-fi',
+  save: true
+};
+
+const result = await generateEnvironmentSprites(description, options);
+console.log(result);
+```
+
+Let's break down the available options:
+
+- `elements`: Number of different environment elements to generate (default: 4)
+- `size`: Size of the generated image (default: '1024x1024')
+- `style`: Art style of the sprites (default: 'pixel-art')
+- `padding`: Padding between elements in the tileset (default: 1)
+- `theme`: Theme of the environment (default: 'fantasy')
+- `save`: Whether to save the generated image to disk (default: false)
+
+## Understanding the Output
+
+The `generateEnvironmentSprites` function returns an object with the following properties:
+
+- `original`: URL of the original AI-generated image
+- `tileset`: Base64-encoded PNG image of the processed tileset
+- `metadata`: Object containing information about the generated tileset
+
+Here's an example of how to use the returned data:
+
+```javascript
+const result = await generateEnvironmentSprites("tropical beach");
+
+console.log("Original image URL:", result.original);
+console.log("Tileset image (base64):", result.tileset);
+console.log("Number of elements:", result.metadata.elements);
+console.log("Theme:", result.metadata.theme);
+console.log("Dimensions:", result.metadata.dimensions);
+console.log("Tile layout:", result.metadata.tileData);
+```
+
+## Saving Generated Sprites
+
+If you set the `save` option to `true`, the function will automatically save the generated tileset to your project's `assets` folder. The filename will be based on the description you provided, with spaces replaced by underscores.
+
+For example:
+
+```javascript
+const description = "snowy mountain landscape";
+const options = { save: true };
+
+await generateEnvironmentSprites(description, options);
+// Saves: ./assets/snowy_mountain_landscape_environment.png
+```
+
+## Best Practices
+
+1. Be specific in your descriptions to get the best results.
+2. Experiment with different styles and themes to find what works best for your game.
+3. Generate multiple variations and choose the best one for your needs.
+4. Always review and potentially touch up the AI-generated sprites before using them in production.
+
+## Next Steps
+
+Now that you've learned how to generate environment sprites, you might want to explore:
+
+- [Generating Character Sprites](./generateCharacterSprite.md)
+- [Generating Item Sprites](./generateItemSprites.md)
+- [Working with Sprite Sheets in Game Engines](./workingWithSpriteSheets.md)
+
+Happy sprite generating!

docs/generateItemSprites.md

@@ -0,0 +1,102 @@
+---
+title: Generate Item Sprites
+description: Learn how to generate item sprites for your game using AI-powered image generation.
+sidebar_position: 4
+---
+
+# Generate Item Sprites
+
+## Introduction
+
+The `generateItemSprites` function allows you to create a collection of item sprites for your game using AI-powered image generation. This tutorial will guide you through the process of generating a set of item sprites with customizable options.
+
+## Prerequisites
+
+- Node.js installed on your system
+- The `spriteAI` module installed in your project
+
+## Getting Started
+
+First, import the `generateItemSprites` function from the `spriteAI` module:
+
+```javascript
+import { generateItemSprites } from 'spriteAI';
+```
+
+## Generating Item Sprites
+
+To generate item sprites, call the `generateItemSprites` function with a description and optional parameters. Here's a basic example:
+
+```javascript
+const result = await generateItemSprites("medieval weapons", {
+  itemCount: 6,
+  style: 'pixel-art',
+  itemType: 'equipment'
+});
+
+console.log(result);
+```
+
+This will generate a collection of 6 medieval weapon sprites in a pixel art style.
+
+## Customizing Your Sprite Generation
+
+The `generateItemSprites` function accepts several options to customize the output:
+
+- `itemCount`: Number of items to generate (default: 4)
+- `size`: Size of the generated image (default: "1024x1024")
+- `style`: Art style of the sprites (default: "pixel-art")
+- `padding`: Padding between sprites (default: 1)
+- `itemType`: Type of items to generate (default: "equipment")
+- `background`: Background color of the sprite sheet (default: "white")
+
+Here's an example with custom options:
+
+```javascript
+const result = await generateItemSprites("magical potions", {
+  itemCount: 8,
+  size: "2048x2048",
+  style: "hand-drawn",
+  itemType: "consumable",
+  background: "transparent"
+});
+```
+
+## Understanding the Result
+
+The `generateItemSprites` function returns an object containing:
+
+- `original`: URL of the original generated image
+- `itemSheet`: Base64-encoded image data of the processed sprite sheet
+- `metadata`: Object containing information about the generated sprites
+
+Example of accessing the metadata:
+
+```javascript
+const { metadata } = await generateItemSprites("space gadgets");
+
+console.log(`Generated ${metadata.itemCount} items`);
+console.log(`Image dimensions: ${metadata.dimensions.width}x${metadata.dimensions.height}`);
+```
+
+## Saving the Generated Sprites
+
+To save the generated sprite sheet to disk, use the `save` option:
+
+```javascript
+await generateItemSprites("fantasy armor", {
+  save: true
+});
+```
+
+This will save the sprite sheet in your project's `assets` folder with a filename based on the description.
+
+## Next Steps
+
+Now that you've learned how to generate item sprites, you might want to explore:
+
+- [How to use generated sprites in your game engine](/docs/using-sprites-in-game)
+- [Customizing sprite generation with advanced prompts](/docs/advanced-sprite-prompts)
+- [Integrating sprite generation into your asset pipeline](/docs/asset-pipeline-integration)
+
+Remember, the AI-generated sprites are a starting point. You may want to refine them further or use them as inspiration for your final game assets.