Player customization#83
Open
milegros wants to merge 15 commits into
Open
Conversation
Corrige el error "Apariencia is not defined" agregando el import global en el test.
El swatch de color de cabello/vello/ojos (.ap-swatch en style.css:660) ahora es circular (border-radius: 50% en el input y en los pseudo-elementos ::-webkit-color-swatch(-wrapper)/::-moz-color-swatch, más overflow: hidden de respaldo).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Qué hace el sistema
Pantalla "Personalizar" accesible desde el título, con 6 categorías: Piel, Cabello, Ojos, Vello facial, Parte superior, Parte inferior. Layout de 3 columnas (Piel+Cabello | Ojos+Vello | Superior+Inferior=ropa), preview del muñeco a la izquierda con flechas para rotarlo (frente/lado/espaldas). Botón de dado 🎲 randomiza todo. Por defecto, cualquier personaje nuevo usa el traje Hazmat (un mono amarillo fijo) hasta que el jugador cambia al modo "Personalizar" con el switch de arriba.
Adjunto un video explicando muy por arriba cómo funcionaría la función nueva:
(pido de antemano perdón por mi voz xd)
PersonalizarBackRoomsNoClip_comprimido.mp4
Elección de color, por categoría:
Piel: paleta fija de 4 tonos con flechas.
Cabello / Ojos / Vello facial: con el selector nativo del navegador, dibujado como un botón cuadrado.
Superior / Inferior: no se tiñen — cada estilo ya viene en su color final, y son las únicas capas que animan con el ciclo de caminata (down, up, side).
game/js/apariencia.js es la única fuente de verdad, compartida entre navegador y servidor (require directo en sala.js/protocolo.js), evitando listas duplicadas que se desincronicen. El teñido usa dos mecánicas distintas: remapeo de 3 tonos (remapTonos, para piel y el cuerpo base) y multiplicación (tintarMultiply, para cabello/ojos/vello con color continuo) — ambas puramente por composición de canvas, sin getImageData, porque file:// deja el canvas "tainted" y esa lectura fallaría.
ATENCIÓN
Pediría comprobar bien el funcionamiento que no afecte a otra PR, en mi caso no sucedió ningún error, pero por seguridad para no afectar el trabajo de otros. Cualquier problema que se encuentre jugando o se vea en el PR, pediría que comenten y lo mejoro sin problema alguno.
Lo único que no pude solucionar es que se ve levemente distorsionado el personaje cuando se cambia a Modo cámara: 640 x 360 (16:9 Retro).
Nota:
Cabe aclarar que tuve ayuda de Fonix (dc: fonixgm) para comprobar el correcto funcionamiento y de Aimar667 (dc: aimar667) como opinión sobre el interfaz de Personalización.