zengm-games / facesjs Goto Github PK

Hello,

I'm loving the potential of this library, but I'm finding it difficult to use only on the client side. Do you have plans to release a server side version?

"Terrifying glitch" from reddit sub

@dumbmatter had a good synopsis of issue:

How to trigger this glitch:

1. Play up until the All-Star game
2. Make your window really narrow, like as narrow as a cell phone
3. Go to the Slam Dunk or Three-Point Contest page
4. Make your window wider again

The reason is that if the window is small, then it doesn't show the faces of those players. But it does draw them, it just doesn't show them. The problem is that if a face is drawn while it's not displayed, then some of the facial features get messed up, because some of them are positioned relatively to others but that only works if it's actually shown.

After writing that, idk if that will makes sense to anyone :) but the fix would be to delay drawing the face until it's actually displayed.

Would the lazy loading functionality from Face component solve this?

It'd be cool if generate took an optional parameter to specify a race. I'm not sure how granular the races should be. But it'd be a little more immersive if players in Basketball GM roughly matched their country of origin.

It'd be cool to put an age property on the root of the face object, and use that to control aging-related features, like facial lines, balding, and graying hair.

Hello, I love the project but the github icon seems broken. I would love to fix it if you are open to it

Whether there's a fit in BBGM or not, wondering if there's any interest in a ref outfit. First pass was done kinda lazily, would probably fix colors/size/bar width if thumbs up

Sample SVG code:

<svg width="100%" height="100%" viewBox="0 0 400 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
    <g id="suit">
        <path id="Shirt" d="M10,600C10,600 10,550 70,530C77.392,527.536 84.025,524.92 89.977,522.218C89.977,522.218 112.174,510.76 117.574,507.199C118.492,512.863 111.076,508.897 125.931,521.518C137.439,531.295 167.631,551 200,551C243.448,551 276.369,527.279 275.782,510.725C275.426,500.695 299.25,518.504 310.023,522.218L310.583,522.471C316.39,525.083 322.839,527.613 330,530C390,550 390,600 390,600L10,600Z" style="fill:white;fill-rule:nonzero;stroke:black;stroke-width:6px;"/>
        <path d="M18.096,600L18.096,571.334C22.402,563.083 28.998,554.165 39.102,546.204L39.102,600L18.096,600ZM52.243,600L52.243,537.612C57.485,534.781 63.377,532.208 70,530C71.1,529.633 72.183,529.263 73.249,528.89L73.249,600L52.243,600ZM86.39,600L86.39,523.8C87.613,523.276 88.808,522.749 89.977,522.218C89.977,522.218 99.35,517.379 107.397,513.014L107.397,600L86.39,600ZM120.538,600L120.538,516.769C121.881,518.022 123.642,519.573 125.931,521.518C129.501,524.551 134.87,528.54 141.544,532.6L141.544,600L120.538,600ZM154.685,600L154.685,539.708C161.123,542.774 168.209,545.549 175.691,547.581L175.691,600L154.685,600ZM188.832,600L188.832,550.249C192.508,550.734 196.239,551 200,551C203.345,551 206.628,550.859 209.839,550.592L209.839,600L188.832,600ZM222.98,600L222.98,548.742C230.615,547.215 237.676,544.989 243.986,542.302L243.986,600L222.98,600ZM257.127,600L257.127,535.393C269.064,527.695 276.055,518.433 275.782,510.725C275.711,508.736 276.592,507.841 278.133,507.715L278.133,600L257.127,600ZM291.274,600L291.274,512.637C297.928,516.168 305.254,520.574 310.023,522.218L310.583,522.471C311.143,522.723 311.709,522.974 312.28,523.224L312.28,600L291.274,600ZM325.421,600L325.421,528.421C326.914,528.953 328.44,529.48 330,530C336.069,532.023 341.524,534.353 346.428,536.907L346.428,600L325.421,600ZM359.569,600L359.569,545.178C369.411,552.624 376.07,560.988 380.575,568.897L380.575,600L359.569,600Z" style="fill:rgb(34,34,34);"/>
        <path id="Shirt1" serif:id="Shirt" d="M10,600C10,600 10,550 70,530C77.392,527.536 84.025,524.92 89.977,522.218C89.977,522.218 112.174,510.76 117.574,507.199C118.492,512.863 111.076,508.897 125.931,521.518C137.439,531.295 167.631,551 200,551C243.448,551 276.369,527.279 275.782,510.725C275.426,500.695 299.25,518.504 310.023,522.218L310.583,522.471C316.39,525.083 322.839,527.613 330,530C390,550 390,600 390,600L10,600Z" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:6px;"/>
        <g id="Collar">
            <g transform="matrix(1,0,0,1,0.457375,0)">
                <path d="M277.919,505.94C276.215,506.632 200,550 200,550L232.485,581.939C232.485,581.939 267.391,549.65 282.175,527.05C292.087,511.898 279.624,505.248 277.919,505.94Z" style="fill:rgb(33,33,33);fill-rule:nonzero;stroke:black;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"/>
            </g>
            <g transform="matrix(-1,0,0,1,400,0)">
                <path d="M279.339,504.354C277.635,505.046 200,550 200,550L232.485,581.939C232.485,581.939 267.391,549.65 282.175,527.05C292.087,511.898 281.044,503.662 279.339,504.354Z" style="fill:rgb(33,33,33);fill-rule:nonzero;stroke:black;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"/>
            </g>
        </g>
    </g>
</svg>

It should somehow be possible to say "make a face that looks like a relative of another face" - basically constrain the randomness so that the output is similar to an existing face.

In BBGM/FBGM this could be used to create someone who is a relative of an existing player.

When I build a custom face, sometimes I have trouble remembering what all the hair, mouth, eye options are. I thought that maybe a gallery of sorts, where you take you existing face, and then look at all X options (hair, accessory, etc), and choose which you like the most

I have a very very very rough draft below, but option for any thoughts on:

1. Is it a good idea at all
2. How to make it look good
3. How it should act
4. Should it be a standalone page? Or just in editor.html
5. Eh, any other thoughts are welcome!

tomkennedy22#5

I've played around with the concept of adding in team names to jerseys, if a team has that feature enabled. It would require some changes for the display function to (A) determine if this team displays team name, and (B) actually pull the team name in. But the text can be added as a simple SVG element.

No worries if you're not interested, but I have some of the code to display working now, and could finish it up if the feature is appealing.

Hi,

I just found ur work that is exactly what i was looking for.
Actually im working for a huge project that's on Discord and would use some character generator as you presented.

I just look at your documentation but i don't think that can be use on Discord right ?
I wanted to know if there's any way to generate an image (or a link) that i can use to display the image, because on Discord i can't precise an HTML element.

Thank you so much.
Have a great day

Hi,

I played facesjs library on the project,
That project build from nextjs 14 but I got the issue when use the faceToSvgString function. the error is global is not define.

I have tried several but it still error.
How can I use it on nextjs.

Thanks

Hello, i don't know if you know who i am, but my name on reddit is u/sscZERO and Goose #3235 on discord. I have been talking to dumbmatter about the possible future of adding in females to bbgm. And i asked who i could talk to about the faces, and he directed me here. Please lmk what you can do, and if you have a discord, please do dm me on there, as i am not very active on github.

Looking at https://zengm.com/facesjs/beta/ , selecting the randomize button for Mouth Size sets the value to 0. Selecting it again retains the 0 value and does not randomize the value as expected.

Interesting idea by a ZenGM Discorder below

Ultimately I really like the set of mouths right now so I wouldn't fully vouch for this change, but it's interesting

Could correlate with how the player feels about re-signing with the team in BBGM or similar

https://discord.com/channels/290013534023057409/331882115119448065/1234550634280386591

From Reddit:

Beautiful new face editor- wonderful job as always. But where is my beloved ‘shave’ option??? any time i wanted to give a player more personality, age them up, or just make them a sexier hunk of a man, i would give em a lil 5’ o clock shadow. i’ve fallen into a deep depression😫 what have you done with my most coveted facial customization parameter sir

Indeed it is missing in the new editor!

In the old editor it was a text field containing something like:

rgba(0,0,0,0.25)

So a transparent black color. Randomizing it just makes the alpha value change somewhere between 0 and 0.5. But you could actually put any color in there.

Ideal UI for shave in the new editor:

1. For the feature gallery, show rgba(0,0,0,0) through rgba(0,0,0,0.5) spaced at 0.1 (so 6 total, matching some other types of features).
2. For the selector above that, use https://github.com/uiwjs/react-color to let the user pick a color and alpha value. I recently started using this library in zengm, and I customized one of the default UIs a bit to make it more to my liking (main change is adding the eyedropper if it's supported in your browser and deleting some unused features), we could use a similar thing here just with the alpha slider added back like in the default Sketch component.
3. (bonus) We could then also use the same color component (with alpha disabled again) for selecting other colors, since it's generally superior to the built-in default browser color selector widget.

@tomkennedy22 are you interested in doing this? If so, please do! If not, just let me know and then I'll do it.

Decent idea for more customization -

• Right now hairColor is used for hair, eyebrows, beard
• Giving additional config option could potentially lead to too many configuration options in editor
• And in like 98% of cases we would want them to be same color
• It might be bad UX if users in editor always have to change both facialHairColor & hairColor - maybe link them unless user specifically unlinks

https://discord.com/channels/290013534023057409/331882115119448065/1087874167958945822