Add Comprehensive Sprite Generation Documentation

docs/fetchAvailableSpriteStyles.md

@@ -0,0 +1,95 @@
+---
+title: fetchAvailableSpriteStyles
+description: Retrieve available sprite styles for character generation
+---
+
+# fetchAvailableSpriteStyles
+
+## Introduction
+
+The `fetchAvailableSpriteStyles` function is part of the Sprite AI module. It allows developers to retrieve a list of available sprite styles that can be used when generating character spritesheets. This function is useful for providing users with style options or for validating style inputs before generating sprites.
+
+## Usage
+
+To use the `fetchAvailableSpriteStyles` function, import it from the Sprite AI module and call it as an asynchronous function.
+
+```javascript
+import { fetchAvailableSpriteStyles } from 'spriteAI';
+
+async function getStyles() {
+  const styles = await fetchAvailableSpriteStyles();
+  console.log(styles);
+}
+
+getStyles();
+```
+
+## Function Signature
+
+```javascript
+async function fetchAvailableSpriteStyles(): Promise<string[]>
+```
+
+## Return Value
+
+The function returns a Promise that resolves to an array of strings. Each string represents an available sprite style.
+
+Example return value:
+
+```javascript
+['pixel-art', 'vector', '3d', 'hand-drawn', 'anime']
+```
+
+## Example
+
+Here's a complete example of how to use the `fetchAvailableSpriteStyles` function in a React component:
+
+```javascript
+import React, { useState, useEffect } from 'react';
+import { fetchAvailableSpriteStyles } from 'spriteAI';
+
+function SpriteStyleSelector() {
+  const [styles, setStyles] = useState([]);
+  const [selectedStyle, setSelectedStyle] = useState('');
+
+  useEffect(() => {
+    async function loadStyles() {
+      const availableStyles = await fetchAvailableSpriteStyles();
+      setStyles(availableStyles);
+      if (availableStyles.length > 0) {
+        setSelectedStyle(availableStyles[0]);
+      }
+    }
+    loadStyles();
+  }, []);
+
+  return (
+    <div>
+      <h2>Select Sprite Style</h2>
+      <select 
+        value={selectedStyle} 
+        onChange={(e) => setSelectedStyle(e.target.value)}
+      >
+        {styles.map((style) => (
+          <option key={style} value={style}>
+            {style}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export default SpriteStyleSelector;
+```
+
+## Notes
+
+- The available styles may change in future updates, so it's recommended to always fetch the latest styles rather than hardcoding them.
+- This function is asynchronous and returns a Promise, so remember to use `await` or `.then()` when calling it.
+- If no styles are available or an error occurs, the function will return an empty array.
+
+## See Also
+
+- [generateCharacterSpritesheet](./generateCharacterSpritesheet.md) - For generating character spritesheets using the available styles.
+- [fetchAvailableAnimationStates](./fetchAvailableAnimationStates.md) - To get available animation states for character sprites.

docs/generateEnvironmentSprites.md

@@ -0,0 +1,104 @@
+---
+title: Generate Environment Sprites
+description: Learn how to create environment sprites using AI-powered image generation.
+---
+
+# Generate Environment Sprites
+
+## Introduction
+
+The `generateEnvironmentSprites` function allows you to create environment sprites for your game or application using AI-powered image generation. This tutorial will guide you through the process of generating a set of environment sprites based on a description and customizable options.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Node.js installed on your system
+- The `spriteAI` module installed in your project
+- An OpenAI API key set up in your environment variables
+
+## Getting Started
+
+First, import the `generateEnvironmentSprites` function from the `spriteAI` module:
+
+```javascript
+import { generateEnvironmentSprites } from 'spriteAI';
+```
+
+## Generating Environment Sprites
+
+Let's create a set of environment sprites for a fantasy forest. We'll use the default options for this example:
+
+```javascript
+const description = "Fantasy forest elements";
+const result = await generateEnvironmentSprites(description);
+
+console.log(result);
+```
+
+This will generate a set of 4 different forest-themed environment sprites arranged in a grid.
+
+## Customizing the Output
+
+You can customize various aspects of the generated sprites by passing an options object as the second argument:
+
+```javascript
+const description = "Sci-fi space station elements";
+const options = {
+  elements: 6,
+  size: '1024x1024',
+  style: 'vector',
+  padding: 2,
+  theme: 'futuristic',
+  save: true
+};
+
+const result = await generateEnvironmentSprites(description, options);
+
+console.log(result);
+```
+
+This will create 6 sci-fi space station elements in a vector style, with a futuristic theme, and save the result to your local assets folder.
+
+## Understanding the Result
+
+The `generateEnvironmentSprites` function returns an object with the following properties:
+
+- `original`: URL of the original generated image
+- `tileset`: Base64-encoded image data of the processed tileset
+- `metadata`: Object containing information about the generated sprites
+
+Example metadata:
+
+```javascript
+{
+  elements: 6,
+  theme: 'futuristic',
+  dimensions: {
+    width: '1024',
+    height: '1024'
+  },
+  tileData: {
+    rows: 3,
+    columns: 2,
+    totalTiles: 6
+  }
+}
+```
+
+## Best Practices
+
+1. Be specific in your descriptions to get the best results.
+2. Experiment with different styles and themes to find the perfect fit for your project.
+3. Use the `save` option to keep a local copy of your generated sprites.
+4. Consider generating multiple variations and selecting the best one for your needs.
+
+## Next Steps
+
+Now that you've learned how to generate environment sprites, you might want to explore:
+
+- [How to integrate generated sprites into your game engine](link-to-integration-guide)
+- [Customizing sprite generation with advanced options](link-to-advanced-options)
+- [Best practices for optimizing sprite sheets](link-to-optimization-guide)
+
+Happy sprite generating!

docs/generateItemSprites.md

@@ -0,0 +1,121 @@
+---
+title: Generate Item Sprites
+description: Learn how to generate item sprites for your game using the generateItemSprites function.
+sidebar_position: 4
+---
+
+# Generate Item Sprites
+
+## Introduction
+
+The `generateItemSprites` function is a powerful tool that allows you to create custom item sprites for your game using AI-generated images. This tutorial will guide you through the process of generating a collection of item sprites with various customization options.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Installed the necessary dependencies (OpenAI, axios, sharp)
+- Set up your OpenAI API key
+- Basic knowledge of JavaScript and async/await syntax
+
+## Getting Started
+
+Let's dive into generating item sprites for your game!
+
+### Step 1: Import the Function
+
+First, import the `generateItemSprites` function from the appropriate module:
+
+```javascript
+import { generateItemSprites } from './path/to/spriteAI';
+```
+
+### Step 2: Prepare Your Description and Options
+
+Next, decide on a description for your items and set up your options object:
+
+```javascript
+const description = "medieval weapons and armor";
+const options = {
+  itemCount: 6,
+  size: '1024x1024',
+  style: 'pixel-art',
+  itemType: 'equipment',
+  background: 'transparent'
+};
+```
+
+### Step 3: Generate the Item Sprites
+
+Now, let's call the `generateItemSprites` function with our description and options:
+
+```javascript
+async function createItemSprites() {
+  try {
+    const result = await generateItemSprites(description, options);
+    console.log('Item sprites generated successfully!');
+    console.log('Original image URL:', result.original);
+    console.log('Item sheet data URL:', result.itemSheet);
+    console.log('Metadata:', result.metadata);
+  } catch (error) {
+    console.error('Error generating item sprites:', error);
+  }
+}
+
+createItemSprites();
+```
+
+### Step 4: Use the Generated Sprites
+
+After running the function, you'll receive an object containing:
+
+- The original image URL
+- A data URL for the item sprite sheet
+- Metadata about the generated items
+
+You can use this data to display the sprites in your game or save them for later use.
+
+## Customization Options
+
+The `generateItemSprites` function accepts several options to customize your output:
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `itemCount` | Number of items to generate | 4 |
+| `size` | Size of the generated image | '1024x1024' |
+| `style` | Visual style of the items | 'pixel-art' |
+| `padding` | Padding between items | 1 |
+| `itemType` | Type of items to generate | 'equipment' |
+| `background` | Background color of the sprite sheet | 'white' |
+
+## Example: Generating Potion Items
+
+Let's create a set of potion items for an RPG game:
+
+```javascript
+const potionDescription = "colorful magic potions";
+const potionOptions = {
+  itemCount: 8,
+  size: '512x512',
+  style: 'hand-drawn',
+  itemType: 'consumable',
+  background: 'transparent'
+};
+
+async function generatePotions() {
+  const result = await generateItemSprites(potionDescription, potionOptions);
+  // Use the result in your game...
+}
+```
+
+## Outcome
+
+After running the `generateItemSprites` function, you'll have a custom sprite sheet containing your requested items. You can use this in your game engine, save it as an asset, or further process it as needed.
+
+## Next Steps
+
+- Learn how to [integrate generated sprites into your game engine](/docs/sprite-integration)
+- Explore [advanced sprite customization techniques](/docs/advanced-sprite-customization)
+- Check out the [API Reference](/docs/api-reference) for more details on the `generateItemSprites` function
+
+By following this tutorial, you've learned how to generate custom item sprites for your game using AI. Experiment with different descriptions and options to create unique and exciting items for your players!