Communitygithub.com

Waipjy/ClaudeGame

Dirección artística para Pour Decisions. Define paletas de materiales, coloración de partículas, bloom/efectos posteriores URP, cámara Pixel Perfect, UI de puntuación estilo Balatro, iconos de 16–32px, cápsulas de Steam y una lista de verificación QA visual pre-commit.

¿Qué es ClaudeGame?

Este skill de agente de IA establece la dirección artística completa para Pour Decisions, un juego de simulación de arena con estilo pixel art. Su propósito es unificar las decisiones visuales entre diferentes desarrolladores y herramientas, evitando inconsistencias cromáticas y manteniendo una línea visual coherente. Cubre desde los fundamentos teóricos del color (valor, saturación, paletas limitadas) hasta reglas prácticas de renderizado (iluminación de partículas, manejo de emisivas y bloom con URP en Unity 6). También incluye pautas para la interfaz de usuario inspirada en Balatro (código de colores para puntuación, animaciones, jugosidad) y la creación de activos gráficos como iconos de 16–32px y cápsulas de Steam. El skill impone reglas estrictas (sin imágenes generadas por IA, sin mezclas de píxeles, pruebas de daltonismo) y proporciona una lista de verificación previa al commit para garantizar la calidad visual. Está diseñado para ser utilizado con asistentes de código como Claude o Cursor, y es esencial para cualquier tarea que involucre color, shaders, apariencia de UI, iconos o gráficos para la tienda del juego.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Waipjy/ClaudeGame/tree/HEAD/.claude/skills/art-direction
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Dirección Artística — Pour Decisions

La imagen se compone aproximadamente en un 80% de píxeles simulados. El presupuesto artístico se invierte únicamente en: paletas de materiales, brillo/efectos posteriores, interfaz de usuario, iconos y cápsulas de Steam. Regla estricta: No usar imágenes generadas por IA (activan la divulgación de Steam); los activos externos solo se toman de una lista blanca (docs/research/03_assets_legal.md) y se registran en docs/art/ASSET_LICENSES.md. Nuestros puntos fuertes: shaders, renderizado procedural, matemáticas de color. Punto débil: ilustración dibujada a mano → todas las decisiones se inclinan hacia «calculado con código».

Documentación adicional (léase solo cuando se necesiten detalles):

  • references/material-palette.md — Rampas, HEX, ruido y parámetros de brillo para 14 materiales (valores iniciales)
  • references/urp-postfx.md — Recetas de volúmenes URP, especificaciones del shader CRT, configuración Pixel Perfect
  • references/ui-juice.md — Desglose de la UI de Balatro, temporización de animaciones de puntuación, valores de easing
  • references/steam-capsule.md — Especificaciones de cápsulas, reglas de Valve, práctica para no ilustradores

1. Teoría del Color (Decidir en este orden)

1.1 El Valor (Luminosidad) Antes que el Tono

  • Diseñar primero en escala de grises: al convertir a grises (luma = 0.299R + 0.587G + 0.114B, o OKLab L), el fondo, los materiales y la interfaz deben seguir distinguiéndose en capas. Lo que no se separa en grises, el cambio de color no lo salva.
  • Capas de luminosidad del juego (objetivo L, OKLab 0–1):
    CapaRango LContenido
    Fondo/pared interior del vaso0.12–0.22Oscuro, baja saturación, frío violáceo
    Materiales inertes (piedra, arena, pólvora, semillas)0.30–0.65Luminosidad media, saturación media-baja
    Fluidos (agua, aceite, ácido)0.35–0.75Luminosidad media, identificables por dinámica y semitransparencia
    Reacción/brillo (fuego, lava, chispa, partículas de puntuación)0.75–1.0 + HDRLo más brillante y saturado de toda la escena
    Números/botones de UI0.85–1.0En paneles independientes, separados por el color de fondo del panel
  • Regla: El foco debe ser lo más brillante y saturado. El foco = la posición donde ocurre la reacción + los números de puntuación. Nada más debe ser más brillante que ellos.

1.2 Desplazamiento de Tono (Hue Shifting)

  • Una rampa (oscuro→claro) no solo ajusta la luminosidad: las partes claras se desplazan hacia el cálido (amarillo), las oscuras hacia el frío (azul/violeta). Desplazar 10–20° por paso, 20° como máximo (Slynyrd Pixelblog 1).
  • No usar «añadir negro» para las sombras ni «añadir blanco» para los brillos → resulta sucio y gris (pillow/muddy).
  • Curva de saturación: máxima en el medio, disminuye en los extremos pero no llega a 0 o 100%; los colores oscuros pueden ser más saturados que los claros. Evitar saturación alta + luminosidad alta simultáneamente (molesta a la vista), esa posición se reserva para los materiales brillantes.

1.3 Jerarquía de Saturación

  • La saturación es el segundo imán de atención. Tres niveles:
    1. Alta: Materiales brillantes, efectos de puntuación, números Mult.
    2. Media: Colores principales de materiales generales, UI interactiva.
    3. Baja: Fondo, vidrio del vaso, paneles, texto no interactivo.
  • Saturación del fondo ≤ 25% (HSV S). La imagen general debe ser «mayoritariamente baja saturación, pocos elementos de alta saturación» para que haya foco.

1.4 Paleta Limitada

  • Usar una única paleta principal. Todos los materiales, UI e iconos toman colores solo de ella. Ventaja: la coherencia se logra automáticamente, los agentes de IA no eligen colores al azar.
  • Punto de partida: Resurrect 64 (lospec.com/palette-list/resurrect-64), 64 colores, rampas con desplazamiento de tono ya aplicado, oscuros violáceos, adecuado para fondo oscuro + brillo. Alternativas: Endesga 32, Apollo (46 colores), AAP-64. Los valores de la paleta en sí no están protegidos por derechos de autor; la página de Lospec puede citarse como fuente pero no es obligatorio (suposición, riesgo bajo).
  • Proceso de creación propia (si es necesario):
    1. Elegir un color intermedio vibrante (S y B son lo más importante, H es libre).
    2. Expandir hacia ambos lados 5–9 pasos: B de oscuro a claro (pasos más pequeños cuanto más cerca de 100), S máxima en el medio, H cada paso +10~20° (más cálido al aclarar).
    3. Rotar toda la rampa H 45° para generar otras familias de color.
    4. Copiar la sección media y desaturarla → rampa de grises neutros (para UI/fondo).
    5. Colocar todos los valores de color en Game/Assets/Art/Palette/palette.png (1 píxel por color) + un PaletteSO en C#. El código solo referencia índices, no colores HEX fijos.
  • Excepción permitida: los valores HDR de brillo (>1.0) solo se generan multiplicando el color de la paleta por una intensidad, no se crean nuevos colores.

2. Reglas de Legibilidad

  1. Prueba de grises: Cada vez que se modifique un color, capturar la imagen y convertirla a grises para verificarlo (elemento 1 de la lista QA).
  2. Los materiales adyacentes deben diferenciarse claramente en valor o en tono, al menos en uno: ΔL (OKLab) ≥ 0.08 o Δhue ≥ 40°. Las combinaciones fáciles de confundir deben tratarse especialmente:
    • fuego vs lava vs arena (todos cálidos) → fuego es el más brillante y dinámico, lava tiene base rojo oscuro con vetas brillantes y es lenta, arena no brilla y tiene luminosidad media.
    • ácido vs planta (ambos verdes) → ácido es amarillo verdoso + débilmente brillante + burbujas, planta es azul verdoso oscuro y no brilla.
    • vapor vs humo → vapor es blanco, frío, asciende rápido; humo es gris violáceo, más oscuro, se dispersa lentamente.
  3. Daltonismo: No se puede diferenciar solo por rojo/verde. Cada material debe tener otra característica no cromática (dinámica, tipo de ruido de textura, brillo, transparencia). Usar Coblis o un shader que simule deuteranopia para verificar.
  4. Separación entre UI y área de juego: La zona de simulación solo contiene píxeles de materiales; la UI se coloca en paneles fuera del vaso, con color neutro de baja saturación y borde de 1 píxel. La UI no usa ningún color de material como fondo (para evitar preguntas como «¿esto es arena?»). Los números de puntuación pueden flotar dentro del área de simulación, pero deben tener contorno/sombra y salir en 0.6 segundos.
  5. Foco único: Solo un grupo de elementos puede «robar la atención» al mismo tiempo. Cuando hay muchas reacciones, reducir el brillo de las partículas secundarias (ver §4 sobre presupuesto de brillo).
  6. Silueta: La forma del vaso, los botones y los iconos deben ser reconocibles en una silueta completamente negra.

3. Fundamentos del Arte de Píxeles

  • Escala de píxeles fija: 1 celda de simulación = 1 píxel de juego. Los activos de píxeles de la UI usan el mismo factor de escala (se recomienda una resolución de simulación de 320×180 o 384×216, ampliada por un factor entero a 1080p/1440p/4K). Prohibido mezclar diferentes factores de escala.
  • Sin mixels: Ningún activo de píxeles debe escalarse de forma no entera ni rotarse (la rotación produce píxeles de tamaño desigual). Para la UI que necesita rotación (como cartas que tiemblan), usar una capa de UI de alta resolución, o rotar en una textura de render de baja resolución y luego ampliar por entero.
  • Rampa: Cada material tiene 3–5 colores (ver references/material-palette.md). Más de 5 colores no se aprecian en partículas de 1 píxel.
  • Uso correcto del tramado (dithering): Usarlo solo para (a) degradados grandes (fondo, reflejos del vidrio del vaso), (b) ilusión de semitransparencia (humo, vapor con alpha checkerboard/Bayer 4×4). No aplicar tramado en objetos pequeños, iconos o texto; no usar tramado en espacio del mundo en partículas dinámicas (parpadea); el patrón de tramado debe fijarse en el espacio de la pantalla o en coordenadas de celda.
  • Anti-aliasing manual: Solo en líneas diagonales/curvas de iconos de UI y logotipos, usando un color intermedio entre el color de la línea y el del fondo, de 1 píxel de ancho. No aplicar AA en el contorno exterior ni en los bordes con fondo transparente (al cambiar de fondo aparecen bordes sucios).
  • Banding: Evitar bandas de color paralelas y de igual ancho que sigan el contorno (parecen curvas de nivel de un mapa).
  • Prohibido el sombreado de almohada (pillow shading): La dirección de la luz es fija (superior izquierda); las sombras no se hacen «desde los bordes hacia el centro, más claras».
  • Tipografía: Las fuentes de píxeles solo de la lista blanca (Cubic 11, Fusion Pixel Font, Kenney Fonts); se muestran en múltiplos enteros de su tamaño de píxel nativo; TMP usar mapas de bits con muestreo de punto o SDF de muestreo alto.

4. Cómo Colorear los Materiales en un Juego de Arena

Observaciones de obras de referencia (Noita, The Powder Toy, Sandspiel, Sandustry; algunas son inferencias observacionales, marcadas como «no verificado»):

  1. Ruido de color por partícula: Al generar la partícula, almacenar un byte aleatorio (ra en Sandspiel). Al renderizar, usarlo para seleccionar un color dentro de la rampa del material o ajustar la luminosidad → arena, piedras tienen sensación granular. El ruido se fija en la generación, el color sigue a la partícula cuando se mueve (no volver a muestrear cada fotograma, parpadea).
  2. Sólidos usan textura de coordenadas del mundo: En Noita, los materiales pueden especificar texture_file; los sólidos muestrean la textura según la posición mundial; al convertirse en partículas que caen, conservan el color de ese momento (inferido de propiedades del wiki, detalles no verificados). Nuestra piedra/vidrio/hielo puede usar un hash de coordenadas de celda para muestrear la rampa y producir una textura estable.
  3. Los fluidos no dependen del ruido, sino del movimiento: El ruido en agua/aceite es pequeño (±3% L), combinado con (a) un destello más brillante en la celda superficial, (b) un parpadeo sutil basado en la velocidad/tiempo.
  4. Materiales emisivos (que brillan): Noita tiene gfx_glow (0–255) y gfx_glow_color. Nuestro enfoque: cada celda tiene un valor de emission. Se renderiza un color HDR = color de paleta × (1 + emission × k), que es capturado por el Bloom de URP. Fuego, lava, chispa, ácido (débil), vidrio incandescente emiten luz.
  5. Color de temperatura: The Powder Toy tiene un modo de visualización de calor; tomamos solo su espíritu — cuando la temperatura de un material es alta, se desplaza a lo largo del espectro de cuerpo negro (rojo oscuro → naranja → amarillo → blanco) hacia el extremo brillante, y al enfriarse vuelve a su rampa original.
  6. Destello de reacción: En la celda donde ocurre la reacción, la emisión se lleva al máximo en ese fotograma y se desvanece en 2–4 fotogramas → el jugador «ve» la reacción. Es la retroalimentación de legibilidad más importante.
  7. Presupuesto de brillo: Si el número de celdas brillantes supera N (inicialmente 2000), reducir proporcionalmente la emisión de cada celda para mantener la luminosidad general estable y evitar que la imagen se vuelva blanca.

Puntos clave de implementación: los datos de simulación (id del material, byte aleatorio, temperatura, emisión) se empaquetan en una textura RGBA8 y se suben a la GPU; un fragment shader consulta una LUT de paleta (256×1 o una textura pequeña de materiales×rampa) para determinar el color. La CPU no calcula colores.

5. Puntos Clave de Postprocesado (Unity 6 URP)

La receta detallada está en references/urp-postfx.md. Esencial:

  • Cámara con HDR activado; Bloom con Threshold 1.0–1.1 (solo los materiales brillantes con HDR>1 producen deslumbramiento, los materiales normales no), Intensity 0.6–1.0 como ajuste inicial, Scatter 0.6–0.75, High Quality Filtering activado (reduce parpadeo).
  • Tonemapping: Neutral (ACES cambia tonos y aplasta la paleta). O None + control propio.
  • Color grading LUT: solo ajustes muy sutiles de unificación (como «sensación de chimenea» en una escena), sin alterar la estructura de valores de la paleta; Color Lookup contribution ≤ 0.5.
  • CRT/líneas de exploración desactivadas por defecto, con opción en el menú de configuración para activarlas y ajustar la intensidad; las capturas de pantalla y avances de Steam deben mostrarse principalmente «desactivadas», como máximo una captura con el efecto activado.
  • Cámara Pixel Perfect (integrada en URP, no instalar el paquete 2D Pixel Perfect antiguo): Grid Snapping = Upscale Render Texture; el Bloom se aplica después de ampliar la resolución, para evitar halos de deslumbramiento con forma de bloques.

6. Estilo de UI (Balatro-style score-attack)

La temporización detallada está en references/ui-juice.md. Reglas obligatorias:

  • El color es el lenguaje de la puntuación: Chips = azul, Mult = rojo, Dinero = dorado, ×Mult = fondo rojo con texto blanco. Fijo en todo el juego, no debe usarse para otro propósito.
  • Liquidación elemento por elemento: Las reacciones aparecen una a una (+chips / +mult). Cada una tiene un pop de número (scale 1.0→1.3→1.0, easing con overshoot) y un tono ascendente.
  • Vibración graduada según la magnitud: Cuanto mayor es la puntuación, mayor es la amplitud y duración de la vibración; máximo 8px / 1°. Proporcionar una opción de «Reducir vibración de la pantalla» (accesibilidad).
  • Los números siempre deben ser legibles: Contorno grueso (2px de color oscuro) + sombra; los números grandes usan notación científica solo después de usar separadores de miles.
  • El juice no debe ocultar la información: Las partículas y los destellos no deben cubrir chips × mult ni la puntuación objetivo.

7. Iconos (16–32px)

  • Primero hacer la versión de 16px, luego ampliarla a 32px añadiendo detalles (no reducir un icono de 32px a 16px).
  • Un icono = un concepto, una silueta; borde exterior de 1px del color más oscuro de la paleta para que funcione sobre cualquier fondo.
  • Cada icono tiene un máximo de 4–5 colores (borde, oscuro, medio, claro, énfasis). La fuente de luz siempre es superior izquierda.
  • Iconos de vial (frasco de material): forma de frasco unificada, solo se cambia el color del líquido y un pequeño símbolo (llama, gota, calavera…) → el jugador lo reconoce mediante color + símbolo (amigable con daltonismo).
  • Reliquias catalizadoras: la forma varía según la rareza (círculo / hexágono / estrella enmarcados), el color del marco según la rareza (gris, azul, morado, dorado).
  • Generación procedural: los iconos se pueden dibujar en C# o Python usando «forma + índice de paleta» y exportar como PNG, reproducible y modificable por lotes.
  • Prueba: mirar los iconos sobre el fondo real de la UI, al 100% de escala; al reducirlos al 50%, aún deben poder distinguirse entre sí.

8. Cápsulas de Steam

Detalles en references/steam-capsule.md. Puntos clave:

  • Especificaciones: Header 920×430, Small 462×174, Main 1232×706, Vertical 748×896, Library 600×900, Hero 3840×1240 (sin texto), Logo PNG transparente.
  • Reglas de Valve: En la cápsula solo puede aparecer la imagen/juego y el logotipo del nombre del juego (y el subtítulo oficial); no se permiten reseñas, premios, descuentos ni otro texto.
  • Nuestro enfoque (funciona incluso para quienes no son ilustradores): Logotipo grande impulsado por tipografía + renderizado de simulación de alta resolución (un momento de reacción explosiva) + un foco claro. El logotipo en sí mismo es una simulación de arena: las letras se «vierten» o están formadas por diferentes materiales.
  • Primero hacer la cápsula Small (120×45 de vista previa, el logotipo aún debe ser legible), luego escalar hacia arriba.

9. Reglas de Flujo de Trabajo

  1. Nuevo color → primero añadirlo al archivo de paleta, luego referenciarlo; en el PR/commit, listar los índices añadidos.
  2. Cualquier activo externo (fuentes, UI de Kenney) → registrar en docs/art/ASSET_LICENSES.md (nombre de archivo, URL, autor, licencia, fecha).
  3. Todo el arte procedural (iconos, logotipos, cápsulas) debe conservar el script de generación y los parámetros, colocarlos en Game/Tools/ArtGen/ o tools/, reproducibles.
  4. Los parámetros inciertos se marcan como «valores iniciales»; después de las pruebas de prototipo, se actualizan en los archivos de referencia.

10. Lista de Verificación QA Visual Pre-Commit

  • Captura de pantalla en escala de grises: las cuatro capas (fondo, materiales, brillo, UI) se distinguen en luminosidad.
  • El foco (punto de reacción, números de puntuación) es lo más brillante y saturado de la imagen.
  • Los nuevos colores provienen de la paleta (sin HEX fijo).
  • Los materiales adyacentes fáciles de confundir (fuego/lava/arena, ácido/planta, vapor/humo) se distinguen al 100% y al 50% de escala.
  • Bajo simulación de daltonismo (deuteranopia, protanopia), los materiales y Chips/Mult siguen siendo reconocibles.
  • Sin mixels: todos los activos de píxeles escalados por entero, sin rotar.
  • El ruido de color de las partículas no parpadea al moverse.
  • Bloom: los materiales normales no producen deslumbramiento; cuando hay 500+ reacciones simultáneas, la imagen no se vuelve blanca (el presupuesto de brillo funciona).
  • El texto de la UI tiene contorno y es legible incluso sobre la explosión más brillante.
  • La vibración de la pantalla es ≤ 8px; con la opción «Reducir vibración» desactivada, no hay vibración en absoluto.
  • El filtro CRT está desactivado por defecto y el interruptor funciona.
  • Los iconos de 16px son reconocibles a su tamaño original y se pueden distinguir entre sí.
  • Las resoluciones 1080p, 1440p y Steam Deck (1280×800) se amplían por factor entero o tienen letterbox correcto.
  • No hay imágenes generadas por IA; los nuevos activos tienen licencia registrada.
  • Las capturas de pantalla se guardan en docs/art/qa/<fecha>_<funcionalidad>.png para referencia futura.

Fuentes

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Waipjy/ClaudeGame

設計或修改 Pour Decisions 的規則、材料（vial）、催化劑（catalyst）、計分公式、目標分數曲線、商店經濟、難度階梯、教學，或要跑平衡模擬、審查新卡/遺物時使用。

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community