Skip to content

Add technical documentation for SpriteAI SDK features #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 177 additions & 0 deletions docs/spriteai/index-js-technical-brief.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
# SpriteAI: index.js Technical Brief

## Overview

The `index.js` file in the SpriteAI project provides a set of functions for generating game assets using AI and image processing techniques. This technical brief outlines the key functions and their usage.

## Key Functions

### 1. generateCharacterSpritesheet

```javascript
export const generateCharacterSpritesheet = async function(description, options = {}) {
// ... implementation details
}
```

This function generates a character spritesheet based on a given description and options.

#### Parameters:

* `description`: A string describing the character.

* `options`: An object containing configuration options such as:

* `states`: Array of animation states (default: ['idle', 'walk', 'run', 'attack'])

* `framesPerState`: Number of frames per animation state (default: 6)

* `size`: Image size (default: '1024x1024')

* `style`: Art style (default: 'pixel-art')

* `padding`: Padding between frames (default: 1)

* `direction`: Character facing direction (default: 'right')

#### Returns:

An object containing:

* `original`: URL of the original generated image

* `spritesheet`: Base64 encoded spritesheet

* `metadata`: Detailed information about the spritesheet

### 2. fetchAvailableAnimationStates

```javascript
export const fetchAvailableAnimationStates = async function() {
// ... implementation details
}
```

This function returns an array of available animation states for character sprites.

#### Returns:

An array of strings representing animation states: ['idle', 'walk', 'run', 'attack', 'jump', 'fall', 'hurt', 'die']

### 3. fetchAvailableSpriteStyles

```javascript
export const fetchAvailableSpriteStyles = async function() {
// ... implementation details
}
```

This function returns an array of available sprite styles.

#### Returns:

An array of strings representing sprite styles: ['pixel-art', 'vector', '3d', 'hand-drawn', 'anime']

### 4. generateEnvironmentSprites

```javascript
export const generateEnvironmentSprites = async function(description, options = {}) {
// ... implementation details
}
```

This function generates environment sprites based on a given description and options.

#### Parameters:

* `description`: A string describing the environment.

* `options`: An object containing configuration options such as:

* `elements`: Number of distinct environment pieces (default: 4)

* `size`: Image size (default: '1024x1024')

* `style`: Art style (default: 'pixel-art')

* `padding`: Padding between elements (default: 1)

* `theme`: Environment theme (default: 'fantasy')

#### Returns:

An object containing:

* `original`: URL of the original generated image

* `tileset`: Base64 encoded tileset

* `metadata`: Detailed information about the tileset

### 5. generateItemSprites

```javascript
export const generateItemSprites = async function(description, options = {}) {
// ... implementation details
}
```

This function generates item sprites based on a given description and options.

#### Parameters:

* `description`: A string describing the items.

* `options`: An object containing configuration options such as:

* `itemCount`: Number of distinct items (default: 4)

* `size`: Image size (default: '1024x1024')

* `style`: Art style (default: 'pixel-art')

* `padding`: Padding between items (default: 1)

* `itemType`: Type of items (default: 'equipment')

* `background`: Background color (default: 'white')

#### Returns:

An object containing:

* `original`: URL of the original generated image

* `itemSheet`: Base64 encoded item sheet

* `metadata`: Detailed information about the item sheet

## Utility Functions

### removeBackgroundColor

```javascript
async function removeBackgroundColor(inputPath, outputPath, targetColor, colorThreshold = 0, options = {}) {
// ... implementation details
}
```

This internal function removes a specified background color from an image.

## Dependencies

The module relies on several external libraries:

* OpenAI: For AI-powered image generation

* axios: For making HTTP requests

* sharp: For image processing

* Jimp: For image manipulation

* fs and path: For file system operations

## Conclusion

The `index.js` file provides a comprehensive set of functions for generating game assets using AI. It offers flexibility in terms of customization options and covers various aspects of game asset creation, including character animations, environment tiles, and item sprites. The new functions added in this update (`generateEnvironmentSprites`, `generateItemSprites`, `fetchAvailableAnimationStates`, and `fetchAvailableSpriteStyles`) enhance the capabilities of the SpriteAI SDK, allowing for more diverse and customizable asset generation.
113 changes: 113 additions & 0 deletions docs/spriteai/new-sprite-generation-features.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
# New Sprite Generation Features

This document outlines the new sprite generation features added to the spriteAI SDK. These features expand the capabilities of the SDK, allowing for more diverse and customizable sprite creation.

## Table of Contents
1. [Generate Environment Sprites](#generate-environment-sprites)
2. [Generate Item Sprites](#generate-item-sprites)
3. [Fetch Available Animation States](#fetch-available-animation-states)
4. [Fetch Available Sprite Styles](#fetch-available-sprite-styles)

## Generate Environment Sprites

The `generateEnvironmentSprites` function allows you to create environment tilesets based on a description.

### Function Signature
```javascript
async function generateEnvironmentSprites(description, options = {})
```

### Parameters
- `description` (string): Description of the environment to generate.
- `options` (object): Configuration options for the tileset generation.

### Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| elements | number | 4 | Number of different elements in the tileset |
| size | string | '1024x1024' | Output image size |
| style | string | 'pixel-art' | Art style to use |
| padding | number | 1 | Padding between tiles |
| theme | string | 'fantasy' | Theme of the environment |

### Example Usage
```javascript
const environmentSprites = await generateEnvironmentSprites('a fantasy forest', {
elements: 6,
size: '1024x1024',
style: 'pixel-art',
padding: 2,
theme: 'fantasy',
save: true
});
console.log(environmentSprites.tileset);
```

## Generate Item Sprites

The `generateItemSprites` function allows you to create item collections based on a description.

### Function Signature
```javascript
async function generateItemSprites(description, options = {})
```

### Parameters
- `description` (string): Description of the items to generate.
- `options` (object): Configuration options for the item generation.

### Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| itemCount | number | 4 | Number of different items in the collection |
| size | string | '1024x1024' | Output image size |
| style | string | 'pixel-art' | Art style to use |
| padding | number | 1 | Padding between items |
| itemType | string | 'equipment' | Type of items to generate |
| background | string | 'white' | Background color of the items |

### Example Usage
```javascript
const itemSprites = await generateItemSprites('medieval weapons', {
itemCount: 8,
size: '1024x1024',
style: 'pixel-art',
padding: 2,
itemType: 'weapon',
background: 'transparent',
save: true
});
console.log(itemSprites.itemSheet);
```

## Fetch Available Animation States

The `fetchAvailableAnimationStates` function retrieves a list of available animation states for character sprites.

### Function Signature
```javascript
async function fetchAvailableAnimationStates()
```

### Example Usage
```javascript
const animationStates = await fetchAvailableAnimationStates();
console.log(animationStates);
```

## Fetch Available Sprite Styles

The `fetchAvailableSpriteStyles` function retrieves a list of available sprite styles that can be used in sprite generation.

### Function Signature
```javascript
async function fetchAvailableSpriteStyles()
```

### Example Usage
```javascript
const spriteStyles = await fetchAvailableSpriteStyles();
console.log(spriteStyles);
```

These new features enhance the spriteAI SDK's capabilities, allowing for more diverse and customizable sprite generation. They can be used to create rich, varied game environments and item collections, as well as provide information about available animation states and sprite styles.