Arquitectura de Componentes Principales

Bean Heads implementa un enfoque basado en componentes, dividiendo el avatar en múltiples secciones independientes. Esta metodología proporciona una estructura de código ordenada y permite a los usuarios mezclar elementos diferentes para obtener resultados únicos.

La Figura 1 presenta ejemplos多样化 de avatares generados, evidenciando las múltiples combinaciones posibles entre componentes.

Estructura de Directorios

Los componentes fundamentales se localizan en el directorio core/src/components/, organizados en las siguientes categorías:

• Componentes base: Avatar.tsx y Base.tsx, responsables del diseño general y renderizado primario
• Componentes característicos: subdirectorios como eyes/, eyebrows/ y mouths/, que ofrecen rasgos faciales diversos
• Componentes decorativos: carpetas como accessories/, clothing/ y hair/, destinados a complementos y vestimenta

Análisis de Componentes Fundamentales

Componente Avatar: Punto de Entrada

El componente Avatar.tsx funciona como elemento central del sistema, estableciendo todas las propiedades configurables del avatar. Este componente integra diversos subelementos para producir la reprseentación gráfica completa.

La interfaz de propiedades principales se define de la siguiente manera:

export interface PersonajeConfig {
  tonoPiel?: keyof typeof colores.piel
  ojos?: keyof typeof mapaOjos
  cejas?: keyof typeof mapaCejas
  boca?: keyof typeof mapaBocas
  peinado?: keyof typeof mapaPeinados
  velloFacial?: keyof typeof mapaVello
  ropa?: keyof typeof mapaRopa
  complemento?: keyof typeof mapaComplementos
  grafico?: keyof typeof mapaGraficos
  sombrero?: keyof typeof mapaSombreros
  cuerpo?: keyof typeof modeloCuerpo

  colorPeinado?: keyof typeof colores.pelo
  colorRopa?: keyof typeof colores.vestimenta
  colorFondo?: keyof typeof colores.fondos
  colorLabios?: keyof typeof colores.labios
  colorSombrero?: keyof typeof colores.vestimenta
  colorMascarilla?: keyof typeof colores.vestimenta
}

Esta interfaz estabelce todas las opciones personalizables del personaje, abarcando rasgos faciales, vestimenta, accesorios y paletas cromáticas.

Componente Base: Estructura de Renderizado

El archivo Base.tsx ofrece las funciones básicas de dibujo, incluyendo el contorno craneal y el círculo posterior. Todos los componentes de características se construyen sobre esta base.

Clasificación de Componentes Característicos

Bean Heads organiza las características del avatar en múltiples categorías, cada una ofreciendo variadas opciones:

Componentes de Traits Faciales

• Ojos:localizados en core/src/components/eyes/, presentan múltiples expresiones como OjosContentos.tsx, OjosAlegres.tsx, OjosCorazon.tsx
• Cejas:ubicados en core/src/components/eyebrows/, incluyen CejasEnojadas.tsx, CejasPreocupadas.tsx
• Boca:en core/src/components/mouths/, proveen expresiones como SonrisaAmplia.tsx, SonrisaAbierta.tsx, Triste.tsx

Peinados y Vello Facial

• Peinados:el directorio core/src/components/hair/ ofrece opciones como Afro.tsx, CabelloCorto.tsx, CabelloLargo.tsx
• Vello facial: core/src/components/facialHair/ contiene estilos de barba como BarbaMedia.tsx y BarbaIncipiente.tsx

Vestimenta y Complementos

• Indumentaria: core/src/components/clothing/ proporciona opciones de prendas superiores como Vestido.tsx, Camisa.tsx, Top.tsx
• Accesorios: core/src/components/accessories/ incluye anteojos como GafasRedondas.tsx, GafasSol.tsx
• Sombreros: core/src/components/hats/ ofrece piezas craneales como Gorra.tsx, Turante.tsx

La Figura 2 muestra ejemplos de tarjetas de avatares, ilustrando el resultado final tras combinar los componentes.

Inicio Rápido de Implementación

Para comenzar a crear avatares con Bean Heads, es necesario clonar el repositorio:

git clone https://gitcode.com/gh_mirrors/bi/bigheads

Posterior al clonaje, se pueden generar avatares diversos configurando las propiedades del componente Avatar. A continuación, un ejemplo para crear un personaje con anteojos y expresión sonriente:

<Avatar 
  ojos="OjosAlegres" 
  boca="SonrisaAbierta" 
  complemento="GafasRedondas" 
  peinado="Afro" 
  colorPeinado="negro" 
  tonoPiel="claro" 
/>