Steam Trading Card Hover Effect

Development Programming & Scripting Blueprint
1

Hello Everyone;

Do anyone know that how to achieve that card hover effect with blueprint in widget?

Sample link html+css+js code down below

Original steam card hover effect sample:
steamcard

I just came so far with zoom in effect when hover mouse over widget button like here:cardzoom

Please let me know if you know how to do it!
Cheers
2021-09-14T22:00:00Z

2

To get the tilting effect + shadow, you’d need to switch to widget components. Is it is safe to assume that last anim is using just 2d widgets?

3

If there’s interest, I can post the setup for this:

Cooking was fun but the kitchen’s a mess! I need motivation to clean it up. She ain’t pretty on the inside, atm.

4 Likes
4

Omg man of course I’m interested in, please share that messy kitchen we can learn a lot from it, looking really great :), btw sorry for late reply, just I get time to respond. Thank you very much @Everynone for your interest about that topic! Looking forward to hear from you…

1 Like
5

That looks awesome! I’d be interested too! :nerd_face:

1 Like
6

  • aCardBoard - an actor that spawns a3dCard actors and hangs them on the wall; also holds onto a Pawn via a CAC in case the board gets huge and we need to pan around (not implemented)

  • a3dCard - holds onto the WC_myCard widget component, currently does nothing and is potentially redundant; if more complex functionality needs adding, it could go here

  • the extended WC_myCard widget component does most of the heavy lifting and holds onto the wCard widget; can be added to any actor and will use its transform

  • the wCard is the 2d widget, it dispatches user interaction to the owning widget component;
    in short: we check where in local space of the widget the cursor is and tilt the owning component by the appropriate value. If tilting is not needed, the component interpolates back to default position / rotation.

  • the widget component’s material is a modified WidgetPassThrough - that’s where roughness is piped in for the foil effect. This should be more much more graceful, ofc and is totally fake atm. This element needs the most work & my material game is weak :expressionless:

Added comments where I felt like it ;p

This is not a plug & play thing. Do treat it as a proof of concept - but it does seem like a good direction to take.

Project link:

I’ll happily handle questions I know answers to.

4 Likes
7

Thank you! <3

1 Like
8

Thank you very much! Love it…

(+karma)>> @Everynone

1 Like