Hacker News Clone new | comments | show | ask | jobs | submit | github repologin
Frosted Glass from Games to the Web: HTML glass UI inspired by AAA game dev (www.tyleo.com)
28 points by tyleo 2 hours ago | hide | past | web | 8 comments | favorite





Many game UIs are built using HTML/CSS under the hood, so it has come full circle!

https://coherent-labs.com/products/coherent-gameface/


Lots of games used to use [Scaleform](https://en.m.wikipedia.org/wiki/Scaleform_GFx) for their UI.

I was part of an investigation which considered Coherent products for one of the Forza titles. We didn't go with it at the time, and I haven't had the opportunity to use it on a title at other companies, but it looks rad.

Forza used a custom UI system based on XAML and the acrylic elements at the top of the article were largely implemented in a custom shader. For a custom system it was pretty solid. We also built a lot of tech into it related to 3D placement of elements to support diagetic UI.


Author here! Happy to answer any questions.

Very nice effect. I love these more creative realistic elements.

This one reminds me of this cool card effect

https://poke-holo.simey.me/


Very cool stuff!

Little tip, you might want to add a -webkit-user-select: none on the container elements so it prevents highlighting in Safari when dragging the cursor out and back over.


Thanks for the tip! I had `user-select: none` on the container which had the glass inside of it but apparently that didn't work. I just updated the page with `user-select: none` on the glass itself and it looks like that did the job.

I may be mistaken, but I think you have to use the -webkit- prefix for it to work in Safari.

It's working great in Chrome and Firefox though.


Interesting, I'll add the prefix and install desktop Safari in the future.

I was testing on Safari iOS and it looks like the non-prefix version worked there.


Nice effect, nice article too



Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: