diff --git a/docs/generateEnvironmentSprites.md b/docs/generateEnvironmentSprites.md new file mode 100644 index 00000000..8ecb325b --- /dev/null +++ b/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 generate tileset images for game environments using AI. This tutorial will guide you through the process of using this function to create custom environment sprites for your game projects. + +## Prerequisites + +Before you begin, make sure you have: + +1. Installed the required dependencies (OpenAI, axios, sharp) +2. Set up your OpenAI API key +3. Basic knowledge of JavaScript and async/await syntax + +## How to Use generateEnvironmentSprites + +### Basic Usage + +Here's a simple example of how to use the `generateEnvironmentSprites` function: + +```javascript +import { generateEnvironmentSprites } from 'spriteAI'; + +const description = "forest environment"; +const result = await generateEnvironmentSprites(description); + +console.log(result.original); // URL of the original image +console.log(result.tileset); // Base64-encoded tileset image +console.log(result.metadata); // Metadata about the generated tileset +``` + +### Function Parameters + +The `generateEnvironmentSprites` function accepts two parameters: + +1. `description` (string, required): A text description of the environment you want to generate. +2. `options` (object, optional): An object containing additional configuration options. + +### Available Options + +You can customize the sprite generation by passing an options object: + +```javascript +const options = { + elements: 4, // Number of distinct environment pieces (default: 4) + size: '1024x1024', // Size of the generated image (default: '1024x1024') + style: 'pixel-art', // Art style of the sprites (default: 'pixel-art') + padding: 1, // Padding between sprite elements (default: 1) + theme: 'fantasy', // Theme of the environment (default: 'fantasy') + save: true // Whether to save the generated image to disk (default: false) +}; + +const result = await generateEnvironmentSprites("desert oasis", options); +``` + +## Return Value + +The function returns an object containing: + +- `original`: URL of the original generated image +- `tileset`: Base64-encoded image data URL of the processed tileset +- `metadata`: Object containing information about the generated tileset + +Example metadata: + +```javascript +{ + elements: 4, + theme: 'fantasy', + dimensions: { + width: '1024', + height: '1024' + }, + tileData: { + rows: 2, + columns: 2, + totalTiles: 4 + } +} +``` + +## Example: Creating a Forest Environment + +Let's create a forest environment tileset with 6 elements: + +```javascript +import { generateEnvironmentSprites } from 'spriteAI'; + +async function createForestEnvironment() { + const description = "lush forest with trees, bushes, and rocks"; + const options = { + elements: 6, + style: 'pixel-art', + theme: 'fantasy', + save: true + }; + + try { + const result = await generateEnvironmentSprites(description, options); + console.log("Forest environment generated successfully!"); + console.log("Tileset saved as:", `assets/${description.replace(/\s+/g, '_')}_environment.png`); + console.log("Metadata:", result.metadata); + } catch (error) { + console.error("Error generating forest environment:", error); + } +} + +createForestEnvironment(); +``` + +This example will generate a forest environment tileset with 6 distinct elements in a pixel art style, save it to the assets folder, and log the metadata. + +## Best Practices + +1. Be specific in your environment descriptions for better results. +2. Experiment with different styles and themes to find the best fit for your game. +3. Use the `save` option to keep a local copy of your generated tilesets. +4. Consider the number of elements based on your game's needs and the desired variety. + +## Next Steps + +Now that you've learned how to generate environment sprites, you might want to explore: + +- [How to use generated sprites in your game engine](link-to-how-to-guide) +- [Customizing sprite generation with advanced options](link-to-advanced-options-doc) +- [Understanding the AI models behind sprite generation](link-to-explanation-doc) + +Happy sprite generating! \ No newline at end of file diff --git a/docs/generateItemSprites.md b/docs/generateItemSprites.md new file mode 100644 index 00000000..5de753b6 --- /dev/null +++ b/docs/generateItemSprites.md @@ -0,0 +1,123 @@ +--- +title: Generate Item Sprites +description: Learn how to generate item sprites using AI for your game or application. +--- + +# Generate Item Sprites + +## Introduction + +The `generateItemSprites` function is a powerful tool that allows you to create AI-generated item sprites for your game or application. This tutorial will guide you through the process of using this function to generate custom item sprites with various options. + +## Prerequisites + +- Node.js installed on your system +- Access to the `spriteAI` module +- An OpenAI API key (for image generation) + +## Getting Started + +First, let's import the necessary function from the `spriteAI` module: + +```javascript +import { generateItemSprites } from './path/to/spriteAI'; +``` + +## Basic Usage + +To generate a set of item sprites, you can call the `generateItemSprites` function with a description and optional parameters: + +```javascript +const result = await generateItemSprites("medieval weapons", { + itemCount: 4, + style: 'pixel-art', + itemType: 'equipment' +}); + +console.log(result); +``` + +This will generate a set of 4 pixel-art style medieval weapon sprites. + +## Function Parameters + +The `generateItemSprites` function accepts two parameters: + +1. `description` (string, required): A text description of the items to generate. +2. `options` (object, optional): An object containing various customization options. + +### Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `itemCount` | number | 4 | The number of items to generate | +| `size` | string | '1024x1024' | The size of the generated image | +| `style` | string | 'pixel-art' | The visual style of the sprites | +| `padding` | number | 1 | Padding between items in the sprite sheet | +| `itemType` | string | 'equipment' | The type of items to generate | +| `background` | string | 'white' | The background color of the sprite sheet | +| `save` | boolean | false | Whether to save the generated image to disk | + +## Advanced Usage + +Here's an example of generating a larger set of potion sprites with custom options: + +```javascript +const potionSprites = await generateItemSprites("magical potions", { + itemCount: 8, + size: '2048x2048', + style: 'hand-drawn', + itemType: 'consumable', + background: 'transparent', + save: true +}); + +console.log(potionSprites.metadata); +``` + +This will generate 8 hand-drawn potion sprites on a transparent background and save the image to disk. + +## Return Value + +The function returns an object containing: + +- `original`: URL of the original AI-generated image +- `itemSheet`: Base64-encoded data URL of the processed sprite sheet +- `metadata`: Object containing information about the generated sprites + +Example metadata: + +```javascript +{ + itemCount: 8, + itemType: 'consumable', + dimensions: { + width: '2048', + height: '2048' + }, + itemData: { + rows: 4, + columns: 2, + totalItems: 8 + } +} +``` + +## Saving Generated Sprites + +When the `save` option is set to `true`, the function will automatically save the generated sprite sheet to your project's `assets` folder. The filename will be based on the description you provided, with spaces replaced by underscores. + +For example: +``` +assets/magical_potions_items.png +``` + +## 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](link-to-how-to-guide) +- [Customizing sprite generation with advanced prompts](link-to-explanation-doc) +- [API Reference for the spriteAI module](link-to-reference-doc) + +By mastering the `generateItemSprites` function, you can quickly create diverse and unique items for your game or application, saving time and resources in the asset creation process. \ No newline at end of file diff --git a/docs/generateSprite.md b/docs/generateSprite.md index 8254a0c8..6b162003 100644 --- a/docs/generateSprite.md +++ b/docs/generateSprite.md @@ -1,54 +1,142 @@ --- +title: Sprite Generation and Environment Creation +description: >- + Learn how to generate character sprites, fetch available styles, and create + environment sprites using AI-powered image generation. slug: / sidebar_position: 1 --- -# generateSprite Documentation +# Sprite Generation and Environment Creation -## 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 documentation covers the AI-powered sprite and environment generation functions available in our SDK. These tools allow you to create character sprites, environment assets, and fetch available sprite styles for your game development needs. + +## Generate Character Spritesheet + +The `generateCharacterSpritesheet` function creates a character spritesheet based on a given description using AI-powered image generation. + +### Usage ```javascript -import { sprite } from './path/to/sprite/module'; +import { generateCharacterSpritesheet } from 'spriteAI'; -const result = await sprite.generateSprite(description, options); +const result = await generateCharacterSpritesheet(description, options); ``` -## Parameters +### 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. + - `states` (array): Animation states to include (default: ['idle', 'walk', 'run', 'attack']) + - `framesPerState` (number): Number of frames per animation state (default: 6) + - `size` (string): Size of the generated image (default: "1024x1024") + - `style` (string): Art style of the sprite (default: "pixel-art") + - `padding` (number): Padding between frames (default: 1) + - `direction` (string): Character facing direction (default: "right") + - `save` (boolean): Whether to save the generated image to disk + +### Return Value + +Returns an object containing: + +- `original`: URL of the original generated image +- `spritesheet`: Base64-encoded image data URL of the processed spritesheet +- `metadata`: Object containing information about the generated spritesheet + +### Example + +```javascript +const result = await generateCharacterSpritesheet("A pixelated robot warrior", { + states: ['idle', 'attack', 'defend'], + framesPerState: 4, + style: 'pixel-art', + save: true +}); + +console.log(result.metadata); +console.log(result.spritesheet); +``` -## 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. +## Fetch Available Sprite Styles -## Examples +The `fetchAvailableSpriteStyles` function retrieves a list of available sprite styles that can be used with the sprite generation functions. + +### Usage -1. Generate a single sprite sheet: ```javascript -const result = await sprite.generateSprite("A pixelated robot"); -console.log(result.messages); -console.log(result.image); +import { fetchAvailableSpriteStyles } from 'spriteAI'; + +const styles = await fetchAvailableSpriteStyles(); ``` -2. Generate multiple variations: +### Return Value + +Returns an array of strings representing available sprite styles. + +### Example + ```javascript -const variations = await sprite.generateSprite("A cartoon cat", { iterations: 3 }); -variations.forEach((variation, index) => { - console.log(`Variation ${index + 1}:`, variation.messages); +const availableStyles = await fetchAvailableSpriteStyles(); +console.log("Available styles:", availableStyles); +// Output: Available styles: ['pixel-art', 'vector', '3d', 'hand-drawn', 'anime'] +``` + +## Generate Environment Sprites + +The `generateEnvironmentSprites` function creates a set of environment sprites based on a given description using AI-powered image generation. + +### Usage + +```javascript +import { generateEnvironmentSprites } from 'spriteAI'; + +const result = await generateEnvironmentSprites(description, options); +``` + +### Parameters + +- `description` (string, required): A text description of the environment to generate. +- `options` (object, optional): + - `elements` (number): Number of distinct environment elements to generate (default: 4) + - `size` (string): Size of the generated image (default: "1024x1024") + - `style` (string): Art style of the sprites (default: "pixel-art") + - `padding` (number): Padding between elements (default: 1) + - `theme` (string): Theme of the environment (default: "fantasy") + - `save` (boolean): Whether to save the generated image to disk + +### Return Value + +Returns an object containing: + +- `original`: URL of the original generated image +- `tileset`: Base64-encoded image data URL of the processed environment tileset +- `metadata`: Object containing information about the generated environment sprites + +### Example + +```javascript +const result = await generateEnvironmentSprites("A lush forest with magical elements", { + elements: 6, + style: 'pixel-art', + theme: 'fantasy', + save: true }); + +console.log(result.metadata); +console.log(result.tileset); ``` -## 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. +## Notes and Considerations + +- The functions use AI models (DALL-E 3) to generate images, which may result in varying outputs for the same input. +- Generated sprites are optimized for game development use, with clear separation between elements and consistent styling. - 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. +- The functions may take some time to complete due to API calls and image processing. +- Ensure you have the necessary permissions and comply with usage limits when using these AI-powered generation functions. + +## Next Steps + +- Explore the [Image Processing Documentation](/docs/image-processing) to learn about additional image manipulation tools. +- Check out the [Game Integration Guide](/docs/game-integration) for tips on using generated sprites in your game engine. diff --git a/docs/misc-api_integration.md b/docs/misc-api_integration.md new file mode 100644 index 00000000..efd142a1 --- /dev/null +++ b/docs/misc-api_integration.md @@ -0,0 +1,114 @@ +--- +title: Environment Sprite Generation +description: Learn how to generate environment sprites using the generateEnvironmentSprites function +--- + +# Environment Sprite Generation + +## Introduction + +This tutorial will guide you through the process of generating environment sprites using the `generateEnvironmentSprites` function. This powerful feature allows you to create diverse and customizable environment elements for your game or application. + +## Prerequisites + +- Node.js installed on your system +- Basic knowledge of JavaScript and async/await syntax +- Familiarity with image manipulation concepts + +## Generating Environment Sprites + +Let's walk through the steps to generate environment sprites using the `generateEnvironmentSprites` function. + +### Step 1: Import the Function + +First, import the `generateEnvironmentSprites` function from the spriteAI module: + +```javascript +import { generateEnvironmentSprites } from './spriteAI'; +``` + +### Step 2: Prepare the Function Parameters + +The `generateEnvironmentSprites` function takes two parameters: + +1. `description`: A string describing the environment you want to generate. +2. `options`: An object containing various customization options. + +Let's set up these parameters: + +```javascript +const description = "forest clearing with rocks and bushes"; +const options = { + elements: 6, + size: "1024x1024", + style: "pixel-art", + padding: 2, + theme: "fantasy", + save: true +}; +``` + +### Step 3: Call the Function + +Now, let's call the `generateEnvironmentSprites` function with our prepared parameters: + +```javascript +async function createEnvironmentSprites() { + try { + const result = await generateEnvironmentSprites(description, 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); + } +} + +createEnvironmentSprites(); +``` + +### Step 4: Use the Generated Sprites + +After running the function, you'll receive an object containing: + +- `original`: URL of the original generated image +- `tileset`: Data URL of the processed tileset +- `metadata`: Object containing information about the generated sprites + +You can use these in your application as needed, for example: + +```javascript +function displayTileset(tilesetDataUrl) { + const img = document.createElement('img'); + img.src = tilesetDataUrl; + document.body.appendChild(img); +} + +// Call this function with the result.tileset +``` + +## Customizing Environment Sprites + +The `options` object allows you to customize various aspects of the generated sprites: + +- `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) + +Experiment with these options to create the perfect environment for your project! + +## Outcome + +After following these steps, you'll have generated a set of environment sprites based on your description and options. The sprites will be arranged in a tileset format, ready for use in your game or application. + +## Next Steps + +- Learn how to integrate these sprites into your game engine +- Explore generating character sprites with the `generateCharacterSpritesheet` function +- Dive deeper into the AI-powered image generation capabilities of the spriteAI module + +By mastering environment sprite generation, you're one step closer to creating rich, visually appealing game worlds with ease! \ No newline at end of file