Add SpriteAI Documentation for Character, Item, and Environment Sprite Generation

docs/fetchAvailableSpriteStyles.md

@@ -0,0 +1,106 @@
+---
+title: fetchAvailableSpriteStyles
+description: A function to retrieve available sprite styles for character generation.
+---
+
+# fetchAvailableSpriteStyles
+
+## Introduction
+
+The `fetchAvailableSpriteStyles` function is a part of the SpriteAI module, designed to provide developers with a list of available sprite styles that can be used when generating character spritesheets. This function is particularly useful when you want to offer users a selection of styles for their sprite generation tasks.
+
+## Usage
+
+To use the `fetchAvailableSpriteStyles` function, import it from the SpriteAI module and call it as an asynchronous function.
+
+```javascript
+import { fetchAvailableSpriteStyles } from 'spriteAI';
+
+async function getSpriteStyles() {
+  const styles = await fetchAvailableSpriteStyles();
+  console.log(styles);
+}
+
+getSpriteStyles();
+```
+
+## Function Signature
+
+```javascript
+async function fetchAvailableSpriteStyles(): Promise<string[]>
+```
+
+## Return Value
+
+The function returns a Promise that resolves to an array of strings. Each string in the array represents an available sprite style.
+
+Example return value:
+
+```javascript
+['pixel-art', 'vector', '3d', 'hand-drawn', 'anime']
+```
+
+## Example
+
+Here's a more comprehensive example of how you might use the `fetchAvailableSpriteStyles` function in a React component:
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { fetchAvailableSpriteStyles, generateCharacterSpritesheet } from 'spriteAI';
+
+function SpriteGenerator() {
+  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();
+  }, []);
+
+  const handleStyleChange = (event) => {
+    setSelectedStyle(event.target.value);
+  };
+
+  const handleGenerateSprite = async () => {
+    const spritesheet = await generateCharacterSpritesheet('A brave knight', {
+      style: selectedStyle
+    });
+    // Handle the generated spritesheet...
+  };
+
+  return (
+    <div>
+      <h2>Sprite Generator</h2>
+      <select value={selectedStyle} onChange={handleStyleChange}>
+        {styles.map((style) => (
+          <option key={style} value={style}>
+            {style}
+          </option>
+        ))}
+      </select>
+      <button onClick={handleGenerateSprite}>Generate Sprite</button>
+    </div>
+  );
+}
+
+export default SpriteGenerator;
+```
+
+## Notes and Considerations
+
+- The `fetchAvailableSpriteStyles` function is asynchronous, so always remember to use `await` when calling it or handle the returned Promise appropriately.
+- The available styles may change over time as new styles are added or removed from the SpriteAI module. It's a good practice to fetch the styles dynamically rather than hardcoding them in your application.
+- When using the returned styles with the `generateCharacterSpritesheet` function, ensure that you pass the style string exactly as received from `fetchAvailableSpriteStyles`.
+
+## Related Functions
+
+- [`generateCharacterSpritesheet`](./generateCharacterSpritesheet.md): Use this function to generate a character spritesheet with the selected style.
+- [`fetchAvailableAnimationStates`](./fetchAvailableAnimationStates.md): This function can be used in conjunction with `fetchAvailableSpriteStyles` to provide a comprehensive set of options for sprite generation.
+
+By utilizing the `fetchAvailableSpriteStyles` function, you can create more dynamic and user-friendly interfaces for sprite generation in your applications.

docs/generateEnvironmentSprites.md

@@ -0,0 +1,89 @@
+---
+title: Generate Environment Sprites
+description: Learn how to generate environment sprites using AI-powered image generation.
+sidebar_position: 3
+---
+
+# Generate Environment Sprites
+
+## Introduction
+
+The `generateEnvironmentSprites` function allows you to create custom environment sprites for your game or application using AI-powered image generation. This tutorial will guide you through the process of using this function to generate a tileset of environment elements.
+
+## 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 modules and set up our environment:
+
+```javascript
+import { generateEnvironmentSprites } from './spriteAI';
+import OpenAI from 'openai';
+
+// Set up your OpenAI API key
+const openai = new OpenAI({ apiKey: 'your-api-key-here' });
+```
+
+## Generating Environment Sprites
+
+Now, let's use the `generateEnvironmentSprites` function to create a set of environment elements:
+
+```javascript
+async function createEnvironment() {
+  const options = {
+    elements: 4,
+    size: '1024x1024',
+    style: 'pixel-art',
+    padding: 1,
+    theme: 'fantasy',
+    save: true
+  };
+
+  try {
+    const result = await generateEnvironmentSprites('forest', options);
+    console.log('Environment sprites generated successfully!');
+    console.log('Original image URL:', result.original);
+    console.log('Tileset data URL:', result.tileset);
+    console.log('Metadata:', result.metadata);
+  } catch (error) {
+    console.error('Error generating environment sprites:', error);
+  }
+}
+
+createEnvironment();
+```
+
+In this example, we're generating a set of forest environment sprites in a pixel-art style with a fantasy theme.
+
+## Understanding the Options
+
+The `generateEnvironmentSprites` function accepts several options to customize the output:
+
+- `elements`: Number of different 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 (default: 1)
+- `theme`: Theme of the environment (default: 'fantasy')
+- `save`: Whether to save the generated image to disk (default: false)
+
+## Outcome
+
+After running the function, you'll receive an object containing:
+
+- `original`: URL of the original AI-generated image
+- `tileset`: Data URL of the processed tileset image
+- `metadata`: Information about the generated sprites, including dimensions and tile data
+
+The generated tileset will be saved in the `assets` folder with a filename based on the description (e.g., `forest_environment.png`).
+
+## Next Steps
+
+- Learn how to integrate these environment sprites into your game engine
+- Explore generating character sprites with the `generateCharacterSpritesheet` function
+- Dive into the explanation of how AI-powered sprite generation works
+
+By following this tutorial, you've learned how to generate custom environment sprites using AI. Experiment with different descriptions, themes, and styles to create unique assets for your projects!

docs/generateItemSprites.md

@@ -0,0 +1,105 @@
+---
+title: Generate Item Sprites
+description: Learn how to use the generateItemSprites function to create item sprites for your game.
+---
+
+# Generate Item Sprites
+
+## Introduction
+
+The `generateItemSprites` function is a powerful tool for game developers to quickly create customized item sprites using AI-generated images. This tutorial will guide you through the process of using this function to generate a collection of item sprites for your game.
+
+## Prerequisites
+
+- Node.js installed on your machine
+- Basic knowledge of JavaScript and async/await syntax
+- Access to the OpenAI API (API key required)
+
+## Getting Started
+
+First, let's import the necessary function from the sprite module:
+
+```javascript
+import { generateItemSprites } from './path/to/spriteAI/index.js';
+```
+
+## Generating Item Sprites
+
+Now, let's use the `generateItemSprites` function to create a set of item sprites for your game.
+
+```javascript
+async function createGameItems() {
+  const options = {
+    itemCount: 4,
+    size: '1024x1024',
+    style: 'pixel-art',
+    itemType: 'equipment',
+    background: 'transparent'
+  };
+
+  try {
+    const result = await generateItemSprites("medieval weapons", 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);
+  }
+}
+
+createGameItems();
+```
+
+Let's break down the options and the function call:
+
+1. `itemCount`: The number of items to generate (default is 4).
+2. `size`: The size of the generated image (default is '1024x1024').
+3. `style`: The visual style of the items (default is 'pixel-art').
+4. `itemType`: The type of items to generate (default is 'equipment').
+5. `background`: The background color of the sprite sheet (default is 'white').
+
+The function returns an object containing:
+
+- `original`: The URL of the original AI-generated image.
+- `itemSheet`: A data URL of the processed sprite sheet.
+- `metadata`: Information about the generated items, including dimensions and layout.
+
+## Customizing Item Generation
+
+You can customize the item generation process by adjusting the options:
+
+```javascript
+const options = {
+  itemCount: 6,
+  size: '2048x2048',
+  style: 'hand-drawn',
+  itemType: 'potions',
+  background: 'transparent',
+  save: true // This will save the generated sprite sheet to disk
+};
+
+const result = await generateItemSprites("magical potion bottles", options);
+```
+
+## Working with the Generated Sprites
+
+Once you have your item sprite sheet, you can use it in your game engine or rendering system. The `metadata` object provides information about the layout of the items in the sprite sheet, which you can use to properly render individual items.
+
+```javascript
+const { itemCount, dimensions, itemData } = result.metadata;
+
+console.log(`Generated ${itemCount} items`);
+console.log(`Sprite sheet dimensions: ${dimensions.width}x${dimensions.height}`);
+console.log(`Items are arranged in ${itemData.rows} rows and ${itemData.columns} columns`);
+```
+
+## Next Steps
+
+Now that you've generated your item sprites, you might want to:
+
+1. Integrate the sprite sheet into your game engine.
+2. Create an inventory system using the generated items.
+3. Explore generating other types of game assets, such as character sprites or environment tiles.
+
+For more information on working with sprites and game assets, check out our other tutorials and guides in the documentation.