diff --git a/docs/fetchAvailableSpriteStyles.md b/docs/fetchAvailableSpriteStyles.md new file mode 100644 index 00000000..bebd3b77 --- /dev/null +++ b/docs/fetchAvailableSpriteStyles.md @@ -0,0 +1,91 @@ +--- +title: fetchAvailableSpriteStyles +description: A function to retrieve available sprite styles for character generation. +--- + +# fetchAvailableSpriteStyles + +## Introduction + +The `fetchAvailableSpriteStyles` function is a part of the sprite generation module. It allows developers to retrieve a list of available sprite styles that can be used when generating character sprites. This function is useful for providing options to users or for dynamically adjusting sprite generation parameters in your application. + +## Usage + +To use the `fetchAvailableSpriteStyles` function, import it from the sprite module and call it as an asynchronous function. + +```javascript +import { fetchAvailableSpriteStyles } from './path/to/sprite/module'; + +async function getStyles() { + const styles = await fetchAvailableSpriteStyles(); + console.log(styles); +} +``` + +## Function Signature + +```javascript +async function fetchAvailableSpriteStyles(): Promise +``` + +## Return Value + +The function returns a Promise that resolves to an array of strings. Each string represents an available sprite style. + +## Example + +Here's a practical example of how to use `fetchAvailableSpriteStyles` in your application: + +```javascript +import { fetchAvailableSpriteStyles, generateCharacterSpritesheet } from './path/to/sprite/module'; + +async function createCharacterWithRandomStyle(description) { + try { + const availableStyles = await fetchAvailableSpriteStyles(); + const randomStyle = availableStyles[Math.floor(Math.random() * availableStyles.length)]; + + const spritesheet = await generateCharacterSpritesheet(description, { + style: randomStyle + }); + + console.log(`Generated character with style: ${randomStyle}`); + return spritesheet; + } catch (error) { + console.error('Error generating character:', error); + } +} + +// Usage +createCharacterWithRandomStyle('A brave knight with shining armor'); +``` + +## Available Styles + +The current implementation returns the following styles: + +- pixel-art +- vector +- 3d +- hand-drawn +- anime + +Please note that the available styles may be updated in future versions of the module. + +## Notes and Considerations + +- The function is asynchronous and returns a Promise. Always use `await` or `.then()` when calling it. +- The list of available styles is hardcoded in the current implementation. Future versions may fetch this data from an external source or configuration file. +- If you need to support a specific style, it's recommended to check if it's included in the returned array before using it in sprite generation. + +## Related Functions + +- `generateCharacterSpritesheet`: Uses the styles from `fetchAvailableSpriteStyles` to generate character spritesheets. +- `fetchAvailableAnimationStates`: Retrieves available animation states for sprite generation. + +## Next Steps + +Now that you know how to fetch available sprite styles, you might want to explore: + +- [How to generate a character spritesheet](./generateCharacterSpritesheet.md) +- [Customizing sprite generation options](./customizingSpriteGeneration.md) +- [Working with different sprite styles](./workingWithSpriteStyles.md) \ No newline at end of file diff --git a/docs/generateEnvironmentSprites.md b/docs/generateEnvironmentSprites.md new file mode 100644 index 00000000..5486b443 --- /dev/null +++ b/docs/generateEnvironmentSprites.md @@ -0,0 +1,94 @@ +--- +title: Generate Environment Sprites +description: Learn how to use the generateEnvironmentSprites function to create custom environment sprites for your game. +--- + +# Generate Environment Sprites + +## Introduction + +The `generateEnvironmentSprites` function is a powerful tool for game developers to create custom environment sprites using AI-powered image generation. This tutorial will guide you through the process of using this function to generate a tileset for your game environment. + +## Prerequisites + +Before you begin, make sure you have: + +- Node.js installed on your machine +- The `spriteAI` module installed in your project +- An OpenAI API key (the function uses DALL-E 3 for image generation) + +## Getting Started + +Let's create a set of environment sprites for a fantasy forest setting. + +### Step 1: Import the function + +First, import the `generateEnvironmentSprites` function from the `spriteAI` module: + +```javascript +import { generateEnvironmentSprites } from './path/to/spriteAI'; +``` + +### Step 2: Set up the function call + +Now, let's call the function with a description of the environment we want to create: + +```javascript +const description = "fantasy forest"; +const options = { + elements: 6, + size: '1024x1024', + style: 'pixel-art', + padding: 2, + theme: 'fantasy', + save: true +}; + +generateEnvironmentSprites(description, options) + .then(result => console.log(result)) + .catch(error => console.error(error)); +``` + +### Step 3: Run the code + +Execute your script. The function will generate the environment sprites and save them to your project's `assets` folder. + +## Understanding the Output + +The `generateEnvironmentSprites` 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 what the metadata might look like: + +```javascript +{ + elements: 6, + theme: 'fantasy', + dimensions: { width: '1024', height: '1024' }, + tileData: { rows: 3, columns: 2, totalTiles: 6 } +} +``` + +## Customizing Your Sprites + +You can customize the generated sprites by adjusting the options passed to the function: + +- `elements`: Number of distinct environment pieces to generate (default: 4) +- `size`: Size of the generated image (default: '1024x1024') +- `style`: Art style of the sprites (default: 'pixel-art') +- `padding`: Padding between tiles (default: 1) +- `theme`: Theme of the environment (default: 'fantasy') +- `save`: Whether to save the generated image to disk (default: false) + +## Next Steps + +Now that you've generated your environment sprites, you might want to: + +- Learn how to integrate these sprites into your game engine +- Explore generating character sprites with the `generateCharacterSpritesheet` function +- Understand how to manipulate and optimize the generated images for better performance + +Check out our other How-To Guides and Reference docs for more information on working with AI-generated game assets! \ No newline at end of file diff --git a/docs/generateItemSprites.md b/docs/generateItemSprites.md new file mode 100644 index 00000000..af74d645 --- /dev/null +++ b/docs/generateItemSprites.md @@ -0,0 +1,115 @@ +--- +title: Generate Item Sprites +description: Learn how to generate item sprites for your game using AI-powered image generation. +--- + +# Generate Item Sprites + +## Introduction + +The `generateItemSprites` function is a powerful tool that allows you to create item sprites for your game using AI-powered image generation. This tutorial will guide you through the process of using this function to generate custom item sprites based on your descriptions. + +## Prerequisites + +- Node.js installed on your machine +- Access to the `spriteAI` module +- An OpenAI API key (for DALL-E 3 image generation) + +## Getting Started + +First, let's import the necessary function from the `spriteAI` module: + +```javascript +import { generateItemSprites } from './path/to/spriteAI'; +``` + +## Generating Item Sprites + +To generate item sprites, you'll need to provide a description and some optional parameters. Here's a basic example: + +```javascript +const description = "medieval fantasy weapons"; +const options = { + itemCount: 4, + size: '1024x1024', + style: 'pixel-art', + itemType: 'equipment' +}; + +const result = await generateItemSprites(description, options); +``` + +Let's break down the parameters: + +- `description`: A string describing the items you want to generate. +- `options`: An object containing various customization options: + - `itemCount`: Number of items to generate (default: 4) + - `size`: Size of the generated image (default: '1024x1024') + - `style`: Visual style of the items (default: 'pixel-art') + - `itemType`: Type of items to generate (default: 'equipment') + - `padding`: Padding between items (default: 1) + - `background`: Background color (default: 'white') + - `save`: Whether to save the generated image to disk (default: false) + +## Understanding the Result + +The function returns an object with the following properties: + +```javascript +{ + original: 'https://url-to-original-image.com', + itemSheet: 'data:image/png;base64,base64EncodedImageData', + metadata: { + itemCount: 4, + itemType: 'equipment', + dimensions: { + width: '1024', + height: '1024' + }, + itemData: { + rows: 2, + columns: 2, + totalItems: 4 + } + } +} +``` + +- `original`: URL of the original generated image. +- `itemSheet`: Base64-encoded data URL of the processed item sheet. +- `metadata`: Object containing information about the generated items. + +## Customizing Your Sprites + +You can customize your item sprites by adjusting the options. For example, to generate 8 sci-fi gadgets in a vector style: + +```javascript +const result = await generateItemSprites("futuristic sci-fi gadgets", { + itemCount: 8, + style: 'vector', + itemType: 'technology', + background: 'transparent' +}); +``` + +## Saving Generated Sprites + +To save the generated sprites to disk, set the `save` option to `true`: + +```javascript +const result = await generateItemSprites("magical potions", { + save: true +}); +``` + +The sprites will be saved in the `assets` folder with a filename based on the description. + +## Next Steps + +Now that you've learned how to generate item sprites, you might want to explore: + +- [How to integrate generated sprites into your game engine](link-to-integration-guide) +- [Customizing sprite generation with advanced DALL-E 3 prompts](link-to-advanced-prompts-guide) +- [Managing and organizing your generated game assets](link-to-asset-management-guide) + +By mastering the `generateItemSprites` function, you'll be able to quickly create diverse and unique items for your game, saving time and enhancing your game's visual appeal. \ No newline at end of file diff --git a/docs/generateSprite.md b/docs/generateSprite.md index 8254a0c8..f9ecfbb7 100644 --- a/docs/generateSprite.md +++ b/docs/generateSprite.md @@ -1,54 +1,165 @@ --- +title: Sprite Generation API +description: >- + Learn how to generate character sprites, environment sprites, and item sprites + using the Sprite Generation API. slug: / sidebar_position: 1 --- -# generateSprite Documentation +# Sprite Generation API -## 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. +The Sprite Generation API allows you to create various types of sprites for your game or application using AI-powered image generation. This tutorial will guide you through generating character sprites, environment sprites, and item sprites, as well as fetching available animation states and sprite styles. + +## Prerequisites + +- Node.js installed on your system +- Basic knowledge of JavaScript and async/await syntax +- An OpenAI API key (for image generation) + +## Getting Started + +First, install the required dependencies: + +```bash +npm install openai axios sharp jimp fs path +``` + +Then, import the necessary functions from the Sprite Generation API: + +```javascript +import { + generateCharacterSpritesheet, + generateEnvironmentSprites, + generateItemSprites, + fetchAvailableAnimationStates, + fetchAvailableSpriteStyles +} from './spriteAI'; +``` + +## Generating Character Sprites + +Let's create a character spritesheet with custom options: ```javascript -import { sprite } from './path/to/sprite/module'; +async function createCharacterSprite() { + const options = { + states: ['idle', 'walk', 'run', 'attack'], + framesPerState: 6, + size: '1024x1024', + style: 'pixel-art', + padding: 1, + direction: 'right', + save: true + }; + + const result = await generateCharacterSpritesheet("A brave knight in shining armor", options); + + console.log("Spritesheet URL:", result.spritesheet); + console.log("Metadata:", result.metadata); +} -const result = await sprite.generateSprite(description, options); +createCharacterSprite(); ``` -## 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. +This will generate a spritesheet for a knight character with idle, walk, run, and attack animations. -## 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 +Create a set of environment sprites 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); +async function createEnvironmentSprites() { + const options = { + elements: 4, + size: '1024x1024', + style: 'pixel-art', + padding: 1, + theme: 'fantasy', + save: true + }; + + const result = await generateEnvironmentSprites("Medieval castle elements", options); + + console.log("Environment tileset URL:", result.tileset); + console.log("Metadata:", result.metadata); +} + +createEnvironmentSprites(); ``` -2. Generate multiple variations: +This will generate a tileset of medieval castle elements for a fantasy-themed environment. + +## Generating Item Sprites + +Create a set of item sprites for your game inventory: + ```javascript -const variations = await sprite.generateSprite("A cartoon cat", { iterations: 3 }); -variations.forEach((variation, index) => { - console.log(`Variation ${index + 1}:`, variation.messages); -}); +async function createItemSprites() { + const options = { + itemCount: 4, + size: '1024x1024', + style: 'pixel-art', + padding: 1, + itemType: 'equipment', + background: 'transparent', + save: true + }; + + const result = await generateItemSprites("Medieval weapons and armor", options); + + console.log("Item spritesheet URL:", result.itemSheet); + console.log("Metadata:", result.metadata); +} + +createItemSprites(); ``` -## 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. +This will generate a spritesheet of medieval weapons and armor items for your game's equipment system. + +## Fetching Available Animation States + +To get a list of available animation states for character sprites: + +```javascript +async function getAnimationStates() { + const states = await fetchAvailableAnimationStates(); + console.log("Available animation states:", states); +} + +getAnimationStates(); +``` + +## Fetching Available Sprite Styles + +To get a list of available sprite styles: + +```javascript +async function getSpriteStyles() { + const styles = await fetchAvailableSpriteStyles(); + console.log("Available sprite styles:", styles); +} + +getSpriteStyles(); +``` + +## Outcome + +After running these functions, you'll have: + +1. A character spritesheet with multiple animations +2. An environment tileset for your game world +3. An item spritesheet for your inventory system +4. Lists of available animation states and sprite styles + +You can use these generated assets in your game engine or application to create a visually cohesive and animated game world. + +## Next Steps + +- Learn how to integrate these sprites into your game engine +- Explore advanced customization options for sprite generation +- Discover techniques for optimizing and compressing sprite assets + +By mastering the Sprite Generation API, you'll be able to quickly create diverse and visually appealing assets for your game development projects.