Chrona Avatar System

The avatar generation system for Chrona, a life simulation game. Creates unique, customizable character avatars with deterministic generation from seeds.

Features

• Deterministic Generation - Same seed always produces the same avatar
• SVG Based - Crisp rendering at any resolution
• Lightweight & Performant - Optimized for game use
• Highly Customizable - Mix and match appearance options
• React Integration - Drop-in component for your UI

Installation

yarn add @playchrona/avatars

or

npm install @playchrona/avatars --save

Usage

import * as React from 'react'
import Avatar from '@playchrona/avatars'

export default function CharacterPortrait() {
  return (
    <Avatar
      style={{width: '100px', height: '100px'}}
      avatarStyle='Circle'
      topType='LongHairMiaWallace'
      accessoriesType='Prescription02'
      hairColor='BrownDark'
      facialHairType='Blank'
      clotheType='Hoodie'
      clotheColor='PastelBlue'
      eyeType='Happy'
      eyebrowType='Default'
      mouthType='Smile'
      skinColor='Light'
    />
  )
}

Individual Pieces

Render specific avatar components separately for UI elements like customization screens:

import {Piece} from '@playchrona/avatars'

<Piece pieceType="mouth" pieceSize="100" mouthType="Eating"/>
<Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy"/>
<Piece pieceType="eyebrows" pieceSize="100" eyebrowType="RaisedExcited"/>
<Piece pieceType="accessories" pieceSize="100" accessoriesType="Round"/>
<Piece pieceType="top" pieceSize="100" topType="LongHairFro" hairColor="Red"/>
<Piece pieceType="facialHair" pieceSize="100" facialHairType="BeardMajestic"/>
<Piece pieceType="clothe" pieceSize="100" clotheType="Hoodie" clotheColor="Red"/>
<Piece pieceType="graphics" pieceSize="100" graphicType="Skull"/>
<Piece pieceType="skin" pieceSize="100" skinColor="Brown"/>

Custom Editor

To build a character creation screen, use the lower level Avatar component with OptionContext to collect available options. See the avataaars-generator source for implementation details.

Attribution

This project is based on the open-source Avataaars project by Fang-Pen Lin, inspired by designs from Pablo Stanley. Licensed under the MIT License.

This fork significantly extends the original system for use in games, including deterministic generation, performance optimizations, and game-specific features.