# Game Art Assets

> **Nota (2026-08-23):** esta carpeta ya no guarda arte de ningun juego. El de
> Chessimals vive en `frontend/chessimals/src/assets`, y el de Christianity en
> `frontend/christianity/src/assets`, cada uno en su propio proyecto. La
> libreria la consumen todas las apps del factory: el arte de un producto no
> puede vivir aca, porque las demas se lo llevan en su build sin usarlo. Esta
> guia se conserva porque describe el flujo de generacion, que sigue vigente.


Guia breve para generar, limpiar y guardar arte raster para mini juegos.

## Cuando usar este flujo

Usar `image_gen` para assets visuales de juego que deban sentirse hechos a medida:

- avatares de rivales o jugadores;
- cartas, fichas, piezas, power-ups o insignias;
- fondos, escenas, tableros decorativos o banners internos;
- sprites o sprite sheets simples.

No usar este flujo para iconos que ya pertenezcan al sistema visual, SVGs deterministas, diagramas simples o UI que pueda resolverse mejor con CSS/HTML.

## Flujo recomendado

1. Generar el asset con `image_gen`.
2. Si se necesita transparencia, pedir fondo chroma plano.
3. Copiar el resultado desde `$CODEX_HOME/generated_images/...` al workspace.
4. Remover chroma localmente.
5. Recortar, centrar y normalizar tamanos.
6. Revisar sobre fondo claro y oscuro.
7. Guardar solo los assets finales usados por la app.
8. Conectar el asset con fallback textual o emoji si aplica.

## Prompt base para transparencia

```text
Create the requested game asset on a perfectly flat solid #00ff00 chroma-key background for background removal.
The background must be one uniform color with no shadows, gradients, texture, reflections, floor plane, or lighting variation.
Keep the subject fully separated from the background with crisp edges and generous padding.
Do not use #00ff00 anywhere in the subject.
No cast shadow, no contact shadow, no reflection, no watermark, and no text unless explicitly requested.
```

Para sujetos verdes, usar otro chroma improbable, por ejemplo `#ff00ff`.

## Remover chroma

Preferir el helper instalado por Codex:

```bash
python "${CODEX_HOME:-$HOME/.codex}/skills/.system/imagegen/scripts/remove_chroma_key.py" \
  --input <source.png> \
  --out <final.png> \
  --auto-key border \
  --soft-matte \
  --transparent-threshold 12 \
  --opaque-threshold 220 \
  --despill
```

Si el borde queda con halo, reintentar una vez con:

```bash
python "${CODEX_HOME:-$HOME/.codex}/skills/.system/imagegen/scripts/remove_chroma_key.py" \
  --input <source.png> \
  --out <final.png> \
  --auto-key border \
  --soft-matte \
  --transparent-threshold 12 \
  --opaque-threshold 220 \
  --edge-contract 1 \
  --despill
```

## Sprite sheets

Para varios personajes, suele funcionar mejor pedir una sprite sheet consistente:

```text
Create 8 cute pixel art rival avatar portraits in a single 4x2 sprite sheet.
Each cell must have the same size, consistent outline thickness, same lighting and generous padding.
No text, no letters, no numbers, no watermark.
```

Despues recortar cada celda, remover chroma, centrar en un canvas cuadrado y exportar cada item con nombre semantico:

```text
explorer.png
guardian.png
hunter.png
```

## Ubicacion

Guardar assets finales en:

```text
frontend/valtech-components/src/lib/assets/games/<game-id>/
```

Ejemplo:

```text
frontend/valtech-components/src/lib/assets/games/chessimals/challenge-avatars/explorer.png
```

Para marcas oficiales de un juego, usar un subdirectorio `brand`:

```text
frontend/valtech-components/src/lib/assets/games/chessimals/brand/chessimals-emblem.png
```

No dejar archivos fuente temporales, hojas generadas o variantes descartadas en el repo salvo que sean necesarios para mantenimiento.

## Validacion visual

Antes de conectar el asset:

- revisar esquinas transparentes;
- revisar que no exista halo del chroma;
- probar sobre fondo claro y oscuro;
- verificar que se lea bien al tamano real de UI;
- comprobar que no se pueda arrastrar desde la interfaz (`draggable="false"` y CSS anti-drag si aplica);
- mantener `alt=""` cuando el asset sea decorativo y ya exista texto visible con el nombre.

## Conexion en Angular

Preferir rutas relativas servidas como assets:

```ts
avatarSrc: 'assets/games/chessimals/challenge-avatars/explorer.png'
```

En template, mantener fallback:

```html
@if (avatarSrc; as src) {
  <img [src]="src" alt="" draggable="false" />
} @else {
  {{ fallbackAvatar }}
}
```

## Caso de referencia

Chessimals usa este flujo para los avatares pixel art del modo Desafio:

```text
frontend/valtech-components/src/lib/assets/games/chessimals/challenge-avatars/
```

Documentacion ampliada:

```text
docs/frontend/mini-games-art-assets.md
```