Add comprehensive sprite generation documentation for game assets

docs/fetchAvailableSpriteStyles.md

@@ -0,0 +1,86 @@
+---
+title: fetchAvailableSpriteStyles
+description: A function to retrieve available sprite styles for character generation
+---
+
+# fetchAvailableSpriteStyles
+
+## Introduction
+
+The `fetchAvailableSpriteStyles` function is part of the spriteAI module and allows developers to retrieve a list of available sprite styles that can be used when generating character sprites. This function is useful for providing users with options for customizing the visual style of generated sprites.
+
+## Usage
+
+To use the `fetchAvailableSpriteStyles` function, import it from the spriteAI module and call it as an asynchronous function.
+
+```javascript
+import { fetchAvailableSpriteStyles } from './path/to/spriteAI';
+
+async function getStyles() {
+  const styles = await fetchAvailableSpriteStyles();
+  console.log(styles);
+}
+
+getStyles();
+```
+
+## Function Signature
+
+```javascript
+async function fetchAvailableSpriteStyles(): Promise<string[]>
+```
+
+The function returns a Promise that resolves to an array of strings, where each string represents an available sprite style.
+
+## Return Value
+
+The function returns an array of strings containing the available sprite styles. Currently, the available styles are:
+
+- `'pixel-art'`
+- `'vector'`
+- `'3d'`
+- `'hand-drawn'`
+- `'anime'`
+
+Example return value:
+
+```javascript
+['pixel-art', 'vector', '3d', 'hand-drawn', 'anime']
+```
+
+## Example
+
+Here's an example of how to use the `fetchAvailableSpriteStyles` function in conjunction with the `generateCharacterSpritesheet` function to create a character sprite with a specific style:
+
+```javascript
+import { fetchAvailableSpriteStyles, generateCharacterSpritesheet } from './path/to/spriteAI';
+
+async function createCustomStyledSprite() {
+  // Get available styles
+  const availableStyles = await fetchAvailableSpriteStyles();
+  console.log('Available styles:', availableStyles);
+
+  // Choose a style (for this example, we'll use 'pixel-art')
+  const chosenStyle = 'pixel-art';
+
+  // Generate a character sprite with the chosen style
+  const characterSprite = await generateCharacterSpritesheet('A cute robot', {
+    style: chosenStyle
+  });
+
+  console.log('Generated sprite:', characterSprite);
+}
+
+createCustomStyledSprite();
+```
+
+## Notes
+
+- The list of available styles is predefined in the `fetchAvailableSpriteStyles` function and may be updated in future versions of the spriteAI module.
+- When using the `generateCharacterSpritesheet` function, make sure to use one of the styles returned by `fetchAvailableSpriteStyles` to ensure compatibility.
+- The function is asynchronous and returns a Promise, so remember to use `await` or `.then()` when calling it.
+
+## See Also
+
+- [generateCharacterSpritesheet](./generateCharacterSpritesheet.md) - Function for generating character spritesheets
+- [Sprite Style Guide](./sprite-style-guide.md) - Detailed information about each sprite style

docs/generateEnvironmentSprites.md

@@ -0,0 +1,133 @@
+---
+title: Generate Environment Sprites
+description: Learn how to use the generateEnvironmentSprites function to create tileset images for game environments.
+---
+
+# Generate Environment Sprites
+
+## Introduction
+
+The `generateEnvironmentSprites` function is a powerful tool that allows you to create tileset images for game environments using AI-generated imagery. This tutorial will guide you through the process of using this function to generate custom environment sprites for your game projects.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Node.js installed on your system
+- The necessary dependencies installed (OpenAI, axios, sharp)
+- An OpenAI API key set up in your environment
+
+## Getting Started
+
+First, let's import the required modules and the `generateEnvironmentSprites` function:
+
+```javascript
+import OpenAI from "openai";
+import axios from "axios";
+import sharp from "sharp";
+import { generateEnvironmentSprites } from "./spriteAI";
+```
+
+## Using generateEnvironmentSprites
+
+The `generateEnvironmentSprites` function takes two parameters:
+
+1. `description`: A string describing the environment you want to generate
+2. `options`: An object containing optional configuration settings
+
+Here's a basic example of how to use the function:
+
+```javascript
+const description = "forest with trees and bushes";
+const options = {
+  elements: 4,
+  size: "1024x1024",
+  style: "pixel-art",
+  padding: 1,
+  theme: "fantasy"
+};
+
+const result = await generateEnvironmentSprites(description, options);
+console.log(result);
+```
+
+## Function Parameters
+
+Let's break down the options you can pass to the `generateEnvironmentSprites` function:
+
+- `elements`: Number of different elements in the tileset (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")
+
+## Understanding the Output
+
+The function returns an object with the following properties:
+
+- `original`: URL of the original AI-generated image
+- `tileset`: Base64-encoded string of the processed tileset image
+- `metadata`: Object containing information about the generated tileset
+
+Here's an example of how to use the returned data:
+
+```javascript
+const { original, tileset, metadata } = await generateEnvironmentSprites("desert oasis", {
+  elements: 6,
+  theme: "desert"
+});
+
+console.log("Original image URL:", original);
+console.log("Tileset dimensions:", metadata.dimensions);
+console.log("Number of tiles:", metadata.tileData.totalTiles);
+
+// You can use the tileset string to create an image element
+const img = document.createElement("img");
+img.src = tileset;
+document.body.appendChild(img);
+```
+
+## Saving the Generated Tileset
+
+If you want to save the generated tileset to a file, you can use the `save` option:
+
+```javascript
+const result = await generateEnvironmentSprites("snowy mountain peaks", {
+  elements: 8,
+  theme: "winter",
+  save: true
+});
+```
+
+This will save the tileset image in the `assets` folder of your project with a filename based on the description.
+
+## Customizing the Style
+
+You can experiment with different styles and themes to get the desired look for your environment sprites:
+
+```javascript
+const pixelArtForest = await generateEnvironmentSprites("dense forest", {
+  style: "pixel-art",
+  theme: "fantasy"
+});
+
+const vectorSpaceStation = await generateEnvironmentSprites("futuristic space station", {
+  style: "vector",
+  theme: "sci-fi"
+});
+
+const handDrawnBeach = await generateEnvironmentSprites("tropical beach", {
+  style: "hand-drawn",
+  theme: "summer"
+});
+```
+
+## Conclusion
+
+The `generateEnvironmentSprites` function provides a quick and easy way to create custom environment tilesets for your games. By adjusting the description, style, and theme, you can generate a wide variety of sprites to suit your game's needs.
+
+## Next Steps
+
+- Check out the [Generate Character Spritesheet](/docs/generateCharacterSpritesheet) guide to learn how to create animated character sprites.
+- Explore the [Generate Item Sprites](/docs/generateItemSprites) documentation to add items and equipment to your game.
+- Read the [OpenAI Integration](/docs/openai-integration) explanation to understand how AI is used in sprite generation.

docs/generateItemSprites.md

@@ -0,0 +1,99 @@
+---
+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 is a powerful tool that allows you to create custom item sprites for your game using AI-powered image generation. This tutorial will guide you through the process of using this function to generate a collection of item sprites based on your description.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Installed the required dependencies (OpenAI, axios, sharp)
+- Set up your OpenAI API key
+- Basic knowledge of JavaScript and async/await syntax
+
+## Getting Started
+
+Let's dive in and create some 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 any custom options you want to use:
+
+```javascript
+const description = "medieval fantasy weapons";
+const options = {
+  itemCount: 6,
+  size: '1024x1024',
+  style: 'pixel-art',
+  itemType: 'weapons',
+  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:
+
+- `original`: The URL of the original AI-generated image
+- `itemSheet`: A data URL of the processed item sheet
+- `metadata`: Information about the generated sprites
+
+You can use this data to display the sprites in your game or save them for later use.
+
+## Customizing Your Item Sprites
+
+The `generateItemSprites` function offers several options to customize your 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 items (default: 1)
+- `itemType`: Type of items to generate (default: 'equipment')
+- `background`: Background color of the sprite sheet (default: 'white')
+
+Experiment with these options to create the perfect set of item sprites for your game!
+
+## Next Steps
+
+Now that you've generated your item sprites, you might want to:
+
+- Learn how to [integrate the 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
+
+Happy sprite generating!