Skip to content

Merge updated documentation for SpriteAI Quick Start Guide #448

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
111 changes: 111 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1 +1,112 @@
# SpriteAI Quick Start Guide

## Prerequisites

- Node.js (version 14 or higher)
- npm (Node Package Manager)
- OpenAI API Key

## Installation

```bash
npm install spriteai
```

## Basic Usage

### Generating Character Spritesheets

```javascript
import { generateCharacterSpritesheet } from 'spriteai';

const description = 'A pixelated ninja warrior';
const options = {
states: ['idle', 'walk', 'attack'],
framesPerState: 6,
size: '512x512',
style: 'pixel-art',
direction: 'right'
};

async function createSprite() {
try {
const result = await generateCharacterSpritesheet(description, options);
console.log('Spritesheet generated:', result.spritesheet);
console.log('Metadata:', result.metadata);
} catch (error) {
console.error('Sprite generation failed:', error);
}
}

createSprite();
```

### Generating Pixel Art

```javascript
import { generatePixelArt } from 'spriteai';

async function createPixelArt() {
const pixelArt = await generatePixelArt('A cute robot', {
save: true
});

console.log('Pixel Art URL:', pixelArt.url);
}
```

### Additional Effects

```javascript
import {
addShadow,
addReflectionEffect,
createElementalVariation
} from 'spriteai';

async function enhanceSprite() {
const baseSprite = await generatePixelArt('A dragon');

const spriteWithShadow = await addShadow(baseSprite, {
shadowColor: 'dark-gray',
opacity: 0.5
});

const reflectedSprite = await addReflectionEffect(baseSprite);

const fireElementSprite = await createElementalVariation(baseSprite, {
elementType: 'fire'
});
}
```

## Configuration

### API Keys

Set your OpenAI API key as an environment variable:

```bash
export OPENAI_API_KEY='your-api-key-here'
```

## Supported Methods

- `generateCharacterSpritesheet()`
- `generatePixelArt()`
- `generateIsometric()`
- `generateRetroConsole()`
- `addShadow()`
- `addOutline()`
- `addReflectionEffect()`
- And many more!

## Error Handling

Always wrap async sprite generation methods in try/catch blocks to handle potential API or processing errors.

## Notes

- Sprite generation relies on OpenAI's DALL-E 3 model
- Image processing is done using Sharp library
- Results may vary based on input description and model capabilities
156 changes: 156 additions & 0 deletions dev-docs/quickstart.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
# SpriteAI Quickstart Guide

## Overview

SpriteAI is a powerful library for generating and manipulating game sprites using AI-powered image generation and processing. This quickstart guide will help you quickly get started with the core functionalities of SpriteAI.

## Prerequisites

- Node.js (version 14 or higher)
- npm (Node Package Manager)
- OpenAI API Key

## Installation

Install SpriteAI using npm:

```bash
npm install spriteai
```

## Basic Usage

### 1. Generating a Character Spritesheet

Generate a character spritesheet with custom animation states:

```javascript
import { sprite } from 'spriteai';

// Generate a pixel art character spritesheet
const description = 'A warrior knight in pixel art style';
const options = {
states: ['idle', 'walk', 'attack'], // Animation states
framesPerState: 6, // Frames per animation
size: '512x512', // Output image size
style: 'pixel-art', // Art style
direction: 'right' // Character facing direction
};

async function createCharacterSprite() {
try {
const result = await sprite.generateCharacterSpritesheet(description, options);

// Access the generated spritesheet
console.log('Spritesheet URL:', result.original);
console.log('Base64 Spritesheet:', result.spritesheet);
console.log('Metadata:', result.metadata);
} catch (error) {
console.error('Sprite generation failed:', error);
}
}

createCharacterSprite();
```

### 2. Generating Pixel Art

Create pixel art sprites with AI:

```javascript
import { sprite } from 'spriteai';

async function createPixelArt() {
const description = 'A cute robot exploring a futuristic city';
const result = await sprite.generatePixelArt(description);

// Display or save the generated pixel art
console.log('Pixel Art:', result.image);
}

createPixelArt();
```

### 3. Generating a Landscape Sprite

Create game background or environment sprites:

```javascript
import { sprite } from 'spriteai';

async function createLandscapeSprite() {
const description = 'A mystical forest with ancient trees';
const options = {
size: '1024x1024',
style: 'pixel-art',
timeOfDay: 'sunset',
weather: 'misty',
perspective: 'side-scrolling'
};

const result = await sprite.generateLandscapeSprite(description, options);
console.log('Landscape Sprite:', result.landscape);
}

createLandscapeSprite();
```

## Advanced Image Processing

### Remove Background Color

Remove specific background colors from images:

```javascript
import { sprite } from 'spriteai';

async function processImage() {
const inputPath = 'path/to/input/image.png';
const outputPath = 'path/to/output/image.png';

await sprite.removeBackgroundColor(
inputPath,
outputPath,
'#FFFFFF', // Target color to remove
0.1 // Color matching threshold
);
}

processImage();
```

## Configuration

Ensure you have set up your OpenAI API key in your environment:

```bash
export OPENAI_API_KEY='your-api-key-here'
```

## Error Handling

Always use try/catch blocks when working with asynchronous sprite generation methods to handle potential errors gracefully.

## Supported Styles and Options

- Art Styles: 'pixel-art', 'retro', 'modern'
- Perspectives: 'side-scrolling', 'top-down', 'isometric'
- Time of Day: 'day', 'night', 'sunset', 'dawn'
- Weather Effects: 'clear', 'rainy', 'foggy', 'snowy'

## Next Steps

- Explore advanced sprite manipulation techniques
- Check out the full API documentation
- Join our community forums for tips and inspiration

## Troubleshooting

- Ensure you have a valid OpenAI API key
- Check your network connection
- Verify Node.js and npm are up to date
- Review error messages for specific guidance

## Support

For more detailed information, visit our documentation or contact support.