From b60657e60a6bbc5f752924be4b2b96408be212b1 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:07:52 +0000 Subject: [PATCH 1/4] Create file --- docs/fetchAvailableSpriteStyles.md | 89 ++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 docs/fetchAvailableSpriteStyles.md diff --git a/docs/fetchAvailableSpriteStyles.md b/docs/fetchAvailableSpriteStyles.md new file mode 100644 index 00000000..bdc77873 --- /dev/null +++ b/docs/fetchAvailableSpriteStyles.md @@ -0,0 +1,89 @@ +--- +title: fetchAvailableSpriteStyles +description: Learn how to retrieve available sprite styles using the fetchAvailableSpriteStyles function. +sidebar_position: 4 +--- + +# fetchAvailableSpriteStyles + +## Introduction + +The `fetchAvailableSpriteStyles` function is a part of the spriteAI 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 users with style options or for validating style inputs before sprite generation. + +## 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'; + +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 complete example of how to use the `fetchAvailableSpriteStyles` function: + +```javascript +import { fetchAvailableSpriteStyles } from './path/to/spriteAI'; + +async function displayAvailableStyles() { + try { + const styles = await fetchAvailableSpriteStyles(); + console.log('Available sprite styles:'); + styles.forEach((style, index) => { + console.log(`${index + 1}. ${style}`); + }); + } catch (error) { + console.error('Error fetching available styles:', error); + } +} + +displayAvailableStyles(); +``` + +This example will fetch and display a list of all available sprite styles. + +## Available Styles + +As of the current implementation, the following styles are available: + +- pixel-art +- vector +- 3d +- hand-drawn +- anime + +Please note that this list may be updated in future versions of the spriteAI module. + +## Use Cases + +1. **Style Selection UI**: Use this function to populate a dropdown menu or radio button group, allowing users to select a style for sprite generation. + +2. **Input Validation**: Before calling the sprite generation function, you can use the returned array to validate that the user-selected style is valid. + +3. **Dynamic Feature Enabling**: Enable or disable certain features in your application based on the available styles. + +## Notes + +- The function is asynchronous and returns a Promise. Always use `await` or `.then()` when calling it. +- If the function fails to fetch the styles, it will throw an error. Make sure to implement proper error handling in your code. +- The list of available styles may change in future updates. It's recommended to always use this function to get the most up-to-date list rather than hardcoding style options in your application. + +## Related Functions + +- `generateCharacterSpritesheet`: Uses the styles returned by `fetchAvailableSpriteStyles` to generate character sprites. +- `fetchAvailableAnimationStates`: Retrieves available animation states for sprite generation. + +By using `fetchAvailableSpriteStyles` in conjunction with other spriteAI functions, you can create a robust and flexible sprite generation system in your application. \ No newline at end of file From 1f59b8af73f5b8b8b5f0a5000b779cb98404f248 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:07:55 +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..72ca2d42 --- /dev/null +++ b/docs/generateEnvironmentSprites.md @@ -0,0 +1,104 @@ +--- +title: Generate Environment Sprites +description: Learn how to generate environment sprites for your game using AI-powered image generation. +--- + +# Generate Environment Sprites + +## Introduction + +This tutorial will guide you through the process of generating environment sprites for your game using the `generateEnvironmentSprites` function. This powerful tool leverages AI to create custom environment elements based on your description, making it easy to populate your game world with unique and visually appealing assets. + +## 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 (for DALL-E 3 image generation) + +## Generate Your First Environment Sprite Set + +Let's create a set of environment sprites for a fantasy forest setting. + +1. Import the necessary function: + +```javascript +import { generateEnvironmentSprites } from 'spriteAI'; +``` + +2. Call the function with a description and options: + +```javascript +const result = await generateEnvironmentSprites("fantasy forest elements", { + elements: 6, + size: '1024x1024', + style: 'pixel-art', + padding: 2, + theme: 'fantasy', + save: true +}); +``` + +3. The function will return an object containing: + - `original`: URL of the original generated image + - `tileset`: Base64-encoded PNG of the processed tileset + - `metadata`: Information about the generated sprites + +4. You can now use the `tileset` in your game or save it for later use. + +## Customizing Your Environment Sprites + +The `generateEnvironmentSprites` function offers several options to customize your output: + +- `elements`: Number of distinct environment pieces (default: 4) +- `size`: Size of the generated image (default: '1024x1024') +- `style`: Art style of the sprites (default: 'pixel-art') +- `padding`: Spacing between elements (default: 1) +- `theme`: Overall theme of the environment (default: 'fantasy') +- `save`: Whether to automatically save the generated image (default: false) + +Example with custom options: + +```javascript +const result = await generateEnvironmentSprites("sci-fi space station components", { + elements: 8, + size: '2048x2048', + style: 'vector', + theme: 'futuristic', + save: true +}); +``` + +## Working with the Generated Sprites + +After generating your environment sprites, you can: + +1. Use the base64-encoded `tileset` directly in your game engine. +2. Save the image to your project assets folder (if `save: true` was used). +3. Access individual sprite information using the `metadata` object. + +Example of accessing metadata: + +```javascript +console.log(result.metadata.elements); // Number of generated elements +console.log(result.metadata.dimensions); // Width and height of the tileset +console.log(result.metadata.tileData); // Information about rows, columns, and total tiles +``` + +## Best Practices + +- Be specific in your descriptions to get the best results. +- Experiment with different styles and themes to find what works best for your game. +- Generate multiple variations and choose the best one for your needs. +- Consider post-processing the sprites for consistency with your game's art style. + +## Next Steps + +Now that you've generated your environment sprites, you might want to: + +- Learn how to [Generate Character Spritesheets](/docs/generateCharacterSpritesheet) for your game. +- Explore [Integrating AI-Generated Assets](/docs/integratingAIAssets) into your game engine. +- Understand more about [AI Art Styles and Prompts](/docs/aiArtStyles) for better results. + +By mastering the `generateEnvironmentSprites` function, you'll be able to quickly create diverse and interesting game environments with ease. Happy sprite generating! \ No newline at end of file From d2b784df416996d2a53ac264466b427bf86fa7f5 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:07:57 +0000 Subject: [PATCH 3/4] Create file --- docs/generateItemSprites.md | 137 ++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 docs/generateItemSprites.md diff --git a/docs/generateItemSprites.md b/docs/generateItemSprites.md new file mode 100644 index 00000000..1e3ca8bd --- /dev/null +++ b/docs/generateItemSprites.md @@ -0,0 +1,137 @@ +--- +title: Generate Item Sprites +description: Learn how to use the generateItemSprites function to create sprite sheets for game items. +--- + +# Generate Item Sprites + +## Introduction + +The `generateItemSprites` function is a powerful tool for game developers to create customizable sprite sheets for in-game items. This tutorial will guide you through the process of using this function to generate high-quality item sprites for your game. + +## Prerequisites + +Before you begin, make sure you have: + +- Node.js installed on your system +- The SpriteAI library installed in your project +- Basic knowledge of JavaScript and asynchronous programming + +## Getting Started + +First, let's import the necessary function from the SpriteAI module: + +```javascript +import { generateItemSprites } from 'spriteAI'; +``` + +## Using generateItemSprites + +The `generateItemSprites` function allows you to create a sprite sheet of items based on a description and various options. Here's the basic syntax: + +```javascript +const result = await generateItemSprites(description, options); +``` + +### Parameters + +- `description` (string, required): A text description of the items you want to generate. +- `options` (object, optional): Customization options for the sprite generation. + +### Options + +You can customize the sprite generation process using the following options: + +```javascript +const options = { + itemCount: 4, + size: '1024x1024', + style: 'pixel-art', + padding: 1, + itemType: 'equipment', + background: 'white', + save: true +}; +``` + +- `itemCount`: Number of items to generate (default: 4) +- `size`: Size of the output 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 sprite sheet (default: 'white') +- `save`: Whether to save the generated image to disk (default: false) + +## Example: Generating Equipment Sprites + +Let's create a sprite sheet of fantasy equipment items: + +```javascript +async function createEquipmentSprites() { + const description = "Fantasy RPG equipment including swords, shields, and potions"; + const options = { + itemCount: 6, + style: 'pixel-art', + itemType: 'equipment', + save: true + }; + + try { + const result = await generateItemSprites(description, options); + console.log("Sprite sheet generated successfully!"); + console.log("Original image URL:", result.original); + console.log("Sprite sheet data URL:", result.itemSheet); + console.log("Metadata:", result.metadata); + } catch (error) { + console.error("Error generating sprite sheet:", error); + } +} + +createEquipmentSprites(); +``` + +## Understanding the Result + +The `generateItemSprites` function returns an object with the following properties: + +- `original`: URL of the original generated image +- `itemSheet`: Data URL of the processed sprite sheet +- `metadata`: Object containing information about the generated sprites + +```javascript +{ + original: "https://example.com/original-image.png", + itemSheet: "data:image/png;base64,iVBORw0KGgo...", + metadata: { + itemCount: 6, + itemType: "equipment", + dimensions: { + width: "1024", + height: "1024" + }, + itemData: { + rows: 3, + columns: 2, + totalItems: 6 + } + } +} +``` + +## Saving the Sprite Sheet + +If you set `save: true` in the options, the function will automatically save the sprite sheet to your project's `assets` folder. The filename will be based on the description you provided, with spaces replaced by underscores. + +## Next Steps + +Now that you've learned how to generate item sprites, you might want to explore: + +- [Customizing Sprite Styles](/docs/customizing-sprite-styles) +- [Integrating Sprites in Your Game Engine](/docs/integrating-sprites) +- [Advanced Sprite Generation Techniques](/docs/advanced-sprite-generation) + +## Conclusion + +The `generateItemSprites` function simplifies the process of creating consistent and customizable item sprites for your game. By leveraging AI-powered image generation, you can quickly produce high-quality assets that match your game's style and requirements. + +Remember to experiment with different descriptions and options to achieve the best results for your specific game needs. Happy sprite generating! \ No newline at end of file From b189e669f531ad855f75b14c4f8807c43063d2fb 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:07:59 +0000 Subject: [PATCH 4/4] Update file --- docs/generateSprite.md | 166 +++++++++++++++++++++++++++++++++-------- 1 file changed, 133 insertions(+), 33 deletions(-) diff --git a/docs/generateSprite.md b/docs/generateSprite.md index 8254a0c8..dc62471b 100644 --- a/docs/generateSprite.md +++ b/docs/generateSprite.md @@ -1,54 +1,154 @@ --- +title: Generate Sprite Documentation +description: >- + Learn how to use the generateSprite function to create character spritesheets, + environment sprites, and item sprites using AI-powered image generation. slug: / sidebar_position: 1 --- -# generateSprite Documentation +# Generate Sprite Documentation -## 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 `generateSprite` module provides powerful functions for creating game assets using AI-powered image generation. This tutorial will guide you through using these functions to generate character spritesheets, environment sprites, and item sprites for your game development projects. + +## Prerequisites + +- Node.js installed on your system +- Basic knowledge of JavaScript and async/await syntax +- An OpenAI API key (for DALL-E 3 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 module: + +```javascript +import { generateCharacterSpritesheet, generateEnvironmentSprites, generateItemSprites } from './path/to/sprite/module'; +``` + +## Generating a Character Spritesheet + +Let's create a character spritesheet with custom animation states and styles. + +```javascript +const characterDescription = "A cute pixel art robot"; +const options = { + states: ['idle', 'walk', 'run', 'attack', 'jump'], + framesPerState: 8, + size: '1024x1024', + style: 'pixel-art', + direction: 'right', + save: true +}; + +try { + const result = await generateCharacterSpritesheet(characterDescription, options); + console.log("Character spritesheet generated:", result); +} catch (error) { + console.error("Error generating character spritesheet:", error); +} +``` + +This will generate a pixel art robot character spritesheet with 5 animation states and 8 frames per state. + +## Creating Environment Sprites + +Now, let's generate some environment sprites for our game world. ```javascript -import { sprite } from './path/to/sprite/module'; +const environmentDescription = "Forest tileset"; +const envOptions = { + elements: 6, + size: '1024x1024', + style: 'pixel-art', + theme: 'fantasy', + save: true +}; -const result = await sprite.generateSprite(description, options); +try { + const envResult = await generateEnvironmentSprites(environmentDescription, envOptions); + console.log("Environment sprites generated:", envResult); +} catch (error) { + console.error("Error generating environment sprites:", error); +} ``` -## 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 create a fantasy-themed forest tileset with 6 different elements in pixel art style. -## 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. +## Designing Item Sprites -## Examples +Finally, let's generate some item sprites for our game inventory. -1. Generate a single sprite sheet: ```javascript -const result = await sprite.generateSprite("A pixelated robot"); -console.log(result.messages); -console.log(result.image); +const itemDescription = "Medieval weapons and armor"; +const itemOptions = { + itemCount: 8, + size: '1024x1024', + style: 'pixel-art', + itemType: 'equipment', + background: 'transparent', + save: true +}; + +try { + const itemResult = await generateItemSprites(itemDescription, itemOptions); + console.log("Item sprites generated:", itemResult); +} catch (error) { + console.error("Error generating item sprites:", error); +} ``` -2. Generate multiple variations: +This will create 8 different medieval weapons and armor item sprites in pixel art style with a transparent background. + +## Customizing Sprite Generation + +You can customize various aspects of sprite generation using the options parameter. Here are some key options: + +- `states`: Array of animation states for character spritesheets +- `framesPerState`: Number of frames per animation state +- `size`: Size of the generated image (e.g., '1024x1024') +- `style`: Art style (e.g., 'pixel-art', 'vector', '3d') +- `theme`: Theme for environment sprites (e.g., 'fantasy', 'sci-fi') +- `itemType`: Type of items for item sprites (e.g., 'equipment', 'consumables') + +## Fetching Available Options + +To get the list of available animation states and sprite styles, you can use these helper functions: + ```javascript -const variations = await sprite.generateSprite("A cartoon cat", { iterations: 3 }); -variations.forEach((variation, index) => { - console.log(`Variation ${index + 1}:`, variation.messages); -}); +import { fetchAvailableAnimationStates, fetchAvailableSpriteStyles } from './path/to/sprite/module'; + +const animationStates = await fetchAvailableAnimationStates(); +console.log("Available animation states:", animationStates); + +const spriteStyles = await fetchAvailableSpriteStyles(); +console.log("Available sprite styles:", spriteStyles); ``` -## 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. +## Outcome + +After running these functions, you'll have: + +1. A character spritesheet with multiple animation states +2. A set of environment sprites for your game world +3. A collection of item sprites for your game inventory + +Each result includes: +- The original AI-generated image URL +- A base64-encoded spritesheet or tileset +- Metadata about the generated sprites + +## Next Steps + +- Learn how to integrate these sprites into your game engine +- Explore advanced customization options for sprite generation +- Check out our How-To guides for optimizing and processing generated sprites + +By following this tutorial, you've learned how to use AI-powered sprite generation to create various game assets quickly and easily. Happy game development!