Jump to content

Wobbly pick-up effect


Recommended Posts

Disclaimer: I know this sounds nooby af, but I don't even know how it's called what I want and I do not search for a solution, I search for ideas.(:

Maybe you guys played Hearthstone, or any other card game. When you pick up cards from your hand, they do some wobbly fx (<- I'd appreciate to get to know how to call this shit.) because the card has some elastic physics to it.

My first idea to do this would be using pixi-projection with some easing to it. But then the question is what to apply with easing to let it look right and not completely fucked up?^^
I guess the scaling should to have some easing to it and the 4 corners need to "spread out" with different speeds?

The next thing I thought about where displacement maps. But tbh, I have no idea how this black magic works and how to apply it doing some animated stuff.

Please don't be like "oh you rookie..." - I know I am.
Please don't be like "heres code: ..." - I want to know what I'm doing pls.
Please be like "this is an interesting resource: <link to interesting resource>".


Link to comment
Share on other sites

Yes. with pixi-projection you can render quad by 4 corners. Yes, te problem is to make easing for those corners, and not fuck it up. I dont know how to do that :( At least, performance will be good, better than filters.

As for displacement, you can make repeating texture with trick from https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#extra-texture-mapped-matrix

You can shift displacement sprite relative to the card, and the effect will be repeated. Dont forget to switch filter off when animation ends.

Link to comment
Share on other sites

The idea of shifting the displacement-map sounds quite interesting, i might give this a try.

But as you stated, I can imagine that this filter would be kinda slow (still smooth but cpu/gpu intense), especially when it comes to low-end devices.

I'll fiddle around a bit and eventually maybe post some result if I achieve something good.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...