From 01e5e2e3e17513927575dd9932f155310f088359 Mon Sep 17 00:00:00 2001
From: "dev-docs-github-app[bot]"
 <178952281+dev-docs-github-app[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 23:17:47 +0000
Subject: [PATCH 1/4] Create file

---
 docs/fetchAvailableSpriteStyles.md | 95 ++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 docs/fetchAvailableSpriteStyles.md

diff --git a/docs/fetchAvailableSpriteStyles.md b/docs/fetchAvailableSpriteStyles.md
new file mode 100644
index 00000000..2faec49d
--- /dev/null
+++ b/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.
\ No newline at end of file

From 303a8d3f399af9a70ac1d0fb5b52b93afbf03045 Mon Sep 17 00:00:00 2001
From: "dev-docs-github-app[bot]"
 <178952281+dev-docs-github-app[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 23:17:49 +0000
Subject: [PATCH 2/4] Create file

---
 docs/generateEnvironmentSprites.md | 104 +++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 docs/generateEnvironmentSprites.md

diff --git a/docs/generateEnvironmentSprites.md b/docs/generateEnvironmentSprites.md
new file mode 100644
index 00000000..4f8577b0
--- /dev/null
+++ b/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!
\ No newline at end of file

From 4b95f1e04cce7890ec39cd70c692d267f7c32376 Mon Sep 17 00:00:00 2001
From: "dev-docs-github-app[bot]"
 <178952281+dev-docs-github-app[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 23:17:55 +0000
Subject: [PATCH 3/4] Create file

---
 docs/generateItemSprites.md | 121 ++++++++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 docs/generateItemSprites.md

diff --git a/docs/generateItemSprites.md b/docs/generateItemSprites.md
new file mode 100644
index 00000000..235f45a7
--- /dev/null
+++ b/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!
\ No newline at end of file

From 81c2079f5bfa37923ba7d23770eb5b3973eb1bb4 Mon Sep 17 00:00:00 2001
From: "dev-docs-github-app[bot]"
 <178952281+dev-docs-github-app[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 23:17:56 +0000
Subject: [PATCH 4/4] Update file

---
 docs/generateSprite.md | 150 ++++++++++++++++++++++++++++++++---------
 1 file changed, 117 insertions(+), 33 deletions(-)

diff --git a/docs/generateSprite.md b/docs/generateSprite.md
index 8254a0c8..75ea4832 100644
--- a/docs/generateSprite.md
+++ b/docs/generateSprite.md
@@ -1,54 +1,138 @@
 ---
+title: Sprite Generation and Manipulation
+description: Learn how to generate and manipulate game sprites using our AI-powered tools.
 slug: /
 sidebar_position: 1
 ---
 
-# generateSprite Documentation
+# Sprite Generation and Manipulation
 
-## Brief Description
-`generateSprite` is a function that generates a sprite sheet image based on a given description, using AI-powered image generation and analysis.
+## Introduction
 
-## Usage
-To use `generateSprite`, import it from the sprite module and call it with a description of the character you want to generate.
+This guide will walk you through the process of generating and manipulating game sprites using our AI-powered tools. We'll cover character sprite generation, environment sprite creation, and item sprite generation, as well as how to fetch available animation states and sprite styles.
+
+## Prerequisites
+
+- Node.js installed on your machine
+- Basic understanding of JavaScript and async/await syntax
+- Familiarity with game development concepts
+
+## Generating Character Sprites
+
+The `generateCharacterSpritesheet` function allows you to create character spritesheets with various animation states.
 
 ```javascript
-import { sprite } from './path/to/sprite/module';
+import { generateCharacterSpritesheet } from 'spriteAI';
 
-const result = await sprite.generateSprite(description, options);
+const description = "A pixelated warrior with armor";
+const options = {
+  states: ['idle', 'walk', 'attack'],
+  framesPerState: 4,
+  size: '512x512',
+  style: 'pixel-art',
+  direction: 'right'
+};
+
+const result = await generateCharacterSpritesheet(description, options);
+console.log(result.spritesheet); // Base64-encoded spritesheet image
+console.log(result.metadata); // Spritesheet metadata
 ```
 
-## Parameters
-- `description` (string, required): A text description of the character to generate.
-- `options` (object, optional):
-  - `iterations` (number): Number of sprite variations to generate.
-  - `size` (string): Size of the generated image (default: "1024x1024").
-  - `save` (boolean): Whether to save the generated image to disk.
+### Options
+
+- `states`: Array of animation states (default: ['idle', 'walk', 'run', 'attack'])
+- `framesPerState`: Number of frames per animation state (default: 6)
+- `size`: Size of the generated image (default: '1024x1024')
+- `style`: Visual style of the sprite (default: 'pixel-art')
+- `padding`: Padding between frames (default: 1)
+- `direction`: Direction the character faces (default: 'right')
 
-## Return Value
-Returns an object or array of objects containing:
-- `messages`: JSON object with frameHeight and frameWidth information.
-- `image`: Base64-encoded image data URL of the generated sprite sheet.
+## Generating Environment Sprites
 
-## Examples
+Use the `generateEnvironmentSprites` function to create environmental elements for your game.
 
-1. Generate a single sprite sheet:
 ```javascript
-const result = await sprite.generateSprite("A pixelated robot");
-console.log(result.messages);
-console.log(result.image);
+import { generateEnvironmentSprites } from 'spriteAI';
+
+const description = "Forest tileset";
+const options = {
+  elements: 6,
+  size: '512x512',
+  style: 'pixel-art',
+  theme: 'fantasy'
+};
+
+const result = await generateEnvironmentSprites(description, options);
+console.log(result.tileset); // Base64-encoded tileset image
+console.log(result.metadata); // Tileset metadata
 ```
 
-2. Generate multiple variations:
+### Options
+
+- `elements`: Number of distinct environment pieces (default: 4)
+- `size`: Size of the generated image (default: '1024x1024')
+- `style`: Visual style of the sprites (default: 'pixel-art')
+- `padding`: Padding between elements (default: 1)
+- `theme`: Theme of the environment (default: 'fantasy')
+
+## Generating Item Sprites
+
+The `generateItemSprites` function helps you create item sprites for your game inventory or pickups.
+
 ```javascript
-const variations = await sprite.generateSprite("A cartoon cat", { iterations: 3 });
-variations.forEach((variation, index) => {
-  console.log(`Variation ${index + 1}:`, variation.messages);
-});
+import { generateItemSprites } from 'spriteAI';
+
+const description = "Magic potions and scrolls";
+const options = {
+  itemCount: 8,
+  size: '512x512',
+  style: 'pixel-art',
+  itemType: 'consumable',
+  background: 'transparent'
+};
+
+const result = await generateItemSprites(description, options);
+console.log(result.itemSheet); // Base64-encoded item sheet image
+console.log(result.metadata); // Item sheet metadata
 ```
 
-## Notes or Considerations
-- The function uses AI models (DALL-E 3 and GPT) to generate and analyze images, which may result in varying outputs for the same input.
-- Generated sprites are optimized for walking animations and follow a specific layout (6 frames in a 2x3 grid).
-- The function converts images to grayscale, which may affect the final output.
-- When saving images, they are stored in an 'assets' folder with a filename based on the description.
-- The function may take some time to complete due to API calls and image processing.
+### Options
+
+- `itemCount`: Number of distinct items to generate (default: 4)
+- `size`: Size of the generated image (default: '1024x1024')
+- `style`: Visual style of the items (default: 'pixel-art')
+- `padding`: Padding between items (default: 1)
+- `itemType`: Type of items to generate (default: 'equipment')
+- `background`: Background color of the item sheet (default: 'white')
+
+## Fetching Available Animation States
+
+To get a list of available animation states for character sprites, use the `fetchAvailableAnimationStates` function:
+
+```javascript
+import { fetchAvailableAnimationStates } from 'spriteAI';
+
+const states = await fetchAvailableAnimationStates();
+console.log(states); // ['idle', 'walk', 'run', 'attack', 'jump', 'fall', 'hurt', 'die']
+```
+
+## Fetching Available Sprite Styles
+
+To retrieve a list of available sprite styles, use the `fetchAvailableSpriteStyles` function:
+
+```javascript
+import { fetchAvailableSpriteStyles } from 'spriteAI';
+
+const styles = await fetchAvailableSpriteStyles();
+console.log(styles); // ['pixel-art', 'vector', '3d', 'hand-drawn', 'anime']
+```
+
+## Conclusion
+
+With these functions, you can easily generate and manipulate various types of sprites for your game development projects. Experiment with different descriptions, styles, and options to create unique and engaging game assets.
+
+## Next Steps
+
+- Learn how to integrate these sprites into your game engine
+- Explore advanced sprite manipulation techniques
+- Dive into our tutorials on game asset management and optimization