FreeTLab/farolero
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

super assets

Browse Source
This commit is contained in:
freetlab
2026-05-10 21:32:28 +02:00
parent 852fbfa225
commit a5a4040daf
29 changed files with 464 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/premium_game_ui_pipeline.md
+18
View File
@@ -2,6 +2,24 @@
Objetivo: construir pantallas vistosas sin convertir una maqueta en “un PNG gigante”. La UI debe seguir siendo mantenible, animable, responsive, localizable y performante.
## Regla obligatoria: arte generado de alta calidad
Una pantalla premium NO se considera terminada si solo usa gradientes, `CustomPainter`, iconos Material y glows simples. Eso puede servir como scaffolding, pero no alcanza el nivel visual buscado.
Para cada pantalla o lote premium hay que definir y generar assets artísticos reales:
| Capa | Asset esperado | Transparencia |
| --- | --- | --- |
| Fondo atmosférico | Imagen generada opaca, móvil vertical, 1080x1920 o similar | No necesaria |
| Hero/emblema/mascota | Imagen generada PNG/WebP de alta calidad | Obligatoria |
| Marco de panel/botón | Imagen generada con bordes/brillos premium | Obligatoria |
| Burst/glow/humo/confetti | Overlay generado pictórico | Obligatoria |
| Iconos/medallas/avatares | 128-256 px o 512 px si son hero | Obligatoria |
Si el asset va encima de Flutter, debe tener fondo transparente real. Si el generador no entrega alpha nativo, se genera con chroma-key plano, se elimina localmente y se valida que las esquinas tengan `alpha=0`.
La regla práctica es brutal pero necesaria: **si el resultado parece Flutter con filtros, todavía falta arte**.
## Diagnóstico en Farolero
Los assets de `assets/rewards/` mezclan dos usos distintos:
docs/professional_generated_ui_art_plan.md
+127
View File
@@ -0,0 +1,127 @@
# Professional Generated UI Art Plan
Este plan corrige el enfoque anterior: una pantalla premium no se da por terminada si solo usa Flutter, gradientes, `CustomPainter`, iconos Material y glows procedurales. Eso es estructura. La dirección visual profesional exige assets generados de alta calidad, integrados por capas.
## Reglas no negociables
- La UI real sigue en Flutter: textos, localización, botones, inputs, progreso, navegación y estado.
- El arte visual potente se genera como assets independientes.
- Todo asset que va encima de Flutter debe tener transparencia real: PNG/WebP con alpha.
- Si el generador no entrega alpha nativo, se usa chroma-key plano y eliminación local.
- Se valida tamaño, alpha en esquinas, centrado y peso antes de integrar.
- Se diseña para móvil, tablet, iPad y iPhone: fondos flexibles, contenido con ancho máximo, assets no estirados.
## Estructura de assets
```text
assets/ui/generated/
shared/
main/
mode/
create_game/
join_lobby/
final_rewards/
```
## Contrato de tamaños
| Tipo | Tamaño master | Uso |
| --- | ---: | --- |
| Fondo vertical móvil | 1080×1920 | `BoxFit.cover`, puede ser opaco |
| Fondo tablet | 1440×1920 o 2048×1536 | `BoxFit.cover`, opcional por lote |
| Hero principal | 768–1024 px | PNG transparente |
| Emblema / mascota | 512–1024 px | PNG transparente |
| Marco de card/botón | 1024×256 / 1024×512 | PNG transparente |
| Icono/medalla | 128–256 px | PNG transparente |
| Burst/glow/humo | 512–1024 px | PNG transparente |
## Manifiesto de assets inicial
| ID | Ruta | Pantallas | Rol | Alpha | Estado |
| --- | --- | --- | --- | --- | --- |
| `main_atmosphere_bg` | `assets/ui/generated/main/main_atmosphere_bg.png` | Principal | Fondo vertical premium | No | Falta generar |
| `main_lantern_hero` | `assets/ui/generated/main/main_lantern_hero.png` | Principal | Hero/emblema de farol | Sí | Falta generar |
| `main_cta_frame` | `assets/ui/generated/main/main_cta_frame.png` | Principal | Marco/texture CTA | Sí | Falta generar |
| `shared_glass_panel_frame` | `assets/ui/generated/shared/glass_panel_frame.png` | Varias | Marco panel premium | Sí | Falta generar |
| `mode_duel_hero` | `assets/ui/generated/mode/mode_duel_hero.png` | Elegir modo | Hero de decisión | Sí | Falta generar |
| `create_game_header_art` | `assets/ui/generated/create_game/header_art.png` | Crear partida | Cabecera visual | Sí | Falta generar |
| `join_lobby_signal_art` | `assets/ui/generated/join_lobby/signal_art.png` | Unirse/lobby | Arte conexión/QR | Sí | Falta generar |
| `final_rewards_cinematic` | `assets/ui/generated/final_rewards/cinematic_burst.png` | Fin partida | Burst recompensa | Sí | Falta generar |
## Prompts base
### Fondo principal
```text
Use case: stylized-concept
Asset type: mobile game background, opaque
Primary request: high-end cinematic night village background for a social deduction mobile game called Farolero, warm lantern light, mysterious alleys, premium game UI atmosphere, dark navy and amber palette, depth, subtle fog, no text, no UI, no characters, vertical composition.
Size intent: 1080x1920.
Avoid: logos, letters, readable signs, buttons, phone status bar, flat vector look.
```
### Hero farol principal transparente
```text
Use case: stylized-concept
Asset type: transparent hero emblem
Primary request: premium stylized lantern emblem for a mobile social deduction game, cinematic amber glow, polished 3D game icon quality, ornate but readable silhouette, centered, no text.
Transparency: must be isolated on flat chroma-key background if native transparency is unavailable; no shadows baked into the background.
Size intent: 1024x1024.
Avoid: white background, black background, letters, watermark.
```
### Marco CTA transparente
```text
Use case: stylized-concept
Asset type: transparent UI frame
Primary request: premium golden rounded mobile game CTA button frame, glossy amber material, subtle bevel, inner glow, transparent center area usable behind Flutter text, no text, no icons.
Transparency: transparent outside frame and transparent usable center.
Size intent: 1024x256.
Avoid: baked text, opaque rectangle background, excessive decorations.
```
## Validación técnica
Para overlays:
```powershell
Add-Type -AssemblyName System.Drawing
$bmp=[Drawing.Bitmap]::FromFile("asset.png")
@($bmp.GetPixel(0,0).A,$bmp.GetPixel($bmp.Width-1,0).A,$bmp.GetPixel(0,$bmp.Height-1).A,$bmp.GetPixel($bmp.Width-1,$bmp.Height-1).A)
$bmp.Dispose()
```
Resultado esperado: `0,0,0,0` salvo fondos opacos documentados.
## Rollout
1. Pantalla principal: corregir dirección visual base.
2. Elegir modo + crear partida: adaptar estilo sin perder usabilidad.
3. Unirse + lobby: QR y conexión como assets reales.
4. Final de partida: cinematográfica de recompensas.
5. Resto de pantallas: aplicar assets compartidos y ajustar responsive.
## Phase 2 generated assets
- `assets/ui/generated/mode/mode_duel_hero.png`: hero transparente 1024?1024 para selecci?n de modo.
- `assets/ui/generated/mode/mode_single_card_frame.png`: marco transparente 1400?520 para tarjeta de un m?vil.
- `assets/ui/generated/mode/mode_multi_card_frame.png`: marco transparente 1400?520 para tarjeta multidispositivo.
- `assets/ui/generated/create_game/create_game_header_art.png`: cabecera transparente 1400?620 para crear partida.
- `assets/ui/generated/shared/glass_panel_frame.png`: marco transparente compartido 1400?520 para paneles premium.
Validaci?n: todos los assets de Phase 2 son PNG RGBA y tienen alpha 0 en las cuatro esquinas.
## Phase 2 correction ? image generation, not procedural assets
La primera iteraci?n de Phase 2 fue descartada porque los PNG se hab?an producido con Python/Pillow. Eso NO cumple el est?ndar premium: eran composici?n program?tica, no arte generado de alta calidad.
Assets rehechos con el flujo correcto del skill `imagegen` + `premium-game-ui`:
- `assets/ui/generated/mode/mode_duel_hero.png` ? generado con `image_gen`, source chroma-key en `mode_duel_hero_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/mode/mode_single_card_frame.png` ? generado con `image_gen`, source chroma-key en `mode_single_card_frame_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/mode/mode_multi_card_frame.png` ? generado con `image_gen`, source chroma-key en `mode_multi_card_frame_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/create_game/create_game_header_art.png` ? generado con `image_gen`, source chroma-key en `create_game_header_art_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/shared/glass_panel_frame.png` ? generado con `image_gen`, source chroma-key en `glass_panel_frame_source_chroma.png`, alpha removido localmente.
Validaci?n: todos los PNG finales son RGBA y tienen alpha 0 en las cuatro esquinas.