Rotate to vertical (card dealing)

tatiang

I'm building a card dealing template and I'm pretty happy with it so far but I think the actual tossing of the cards could use some visual improvement. Specifically, I'm interpolating their self.rotation to 180 when they are at the right x/y position.

Anyone have ideas for how to have a more natural looking toss?

(Note that those are actually 52 card actors stacked to make a deck and then shuffled... the deck shrinks as cards are dealt)



The white image of the deck (card back) will be fixed in a later version, as will the card flip glitch.

tatiang

One thought I had was to vary the rotation speed of the cards as they moving into position based on the distance from the deck to their final destination. I'm not sure that's enough, though.

JarrenH

The way I visualize a card toss is a slightly haphazard rotation of the cards upon arrival at their destination. So I would try to interpolate their rotation to random(160,200) or something along those lines, and then once the final card is placed, interpolate all of them to 180. Perhaps make their movements a bit faster too...

tatiang

@JarrenH thanks, that's pretty much how I have it set up. I did find an improvement by making the rotation speed (while moving) 120 instead of 180 and adding a percentage of the distance traveled to that speed. That way cards moving farther rotate faster than cards moving a shorter distance from the deck. It's looking better now but I welcome other suggestions!

SnapFireStudios

One thought I had was to vary the rotation speed of the cards as they moving into position based on the distance from the deck to their final destination. I'm not sure that's enough, though.

I like what you're getting at there. Also, it looks like right now it's linear interpolation. I think that ease out would look more like you were actually dealing.
- Thomas

tatiang

@SnapFireStudios Ease Out does look a little better. I'm still hoping to stumble upon a good math formula for rotating through 180° within a certain amount of time. I know that the rotation speed is per second and I had set my Interpolate duration to 1 second so theoretically with a rotation speed of 180, the card should rotate exactly 180° into place. In practice, the distance from the deck is causing problems.

SnapFireStudios

Well.. wait.
Why not just say interpolate card x and y to wherever in x seconds, and then interpolate card rotation to 180 in x seconds, with x being the same? That seems to be the most logical way, unless i'm missing something.
- Thomas

SnapFireStudios

Actually wait, you want the card to move at a constant rate don't you?
Hm... :-?
- Thomas

tatiang

Well.. wait.
Why not just say interpolate card x and y to wherever in x seconds, and then interpolate card rotation to 180 in x seconds, with x being the same? That seems to be the most logical way, unless i'm missing something.
- Thomas

I could have sworn I started with that and it didn't work because I couldn't get the cards to reliably rotate the same direction, so I switched to a Rotate behavior.

But I'll be darned, it works perfectly with just a single Interpolate self.Rotation to 180 in 1 second. Thanks so much!

I'm not so worried about enforcing a constant rate, but I'd think it would be pretty easy by altering the duration based on the distance (something I alluded to earlier).

tatiang

It also lets me use a simple game.dealSpeed (real) to adjust the tossing speed. Here's 0.7 (vs. 1.0 seconds in the initial video).

tatiang

The way I visualize a card toss is a slightly haphazard rotation of the cards upon arrival at their destination. So I would try to interpolate their rotation to random(160,200) or something along those lines, and then once the final card is placed, interpolate all of them to 180. Perhaps make their movements a bit faster too...

I tried that effect and it's pretty nice. Good suggestion. I think I'm going to keep it "cleaner" as in the video above but still... good idea.

Socks

@tatiang

Can you send me the project (or at least the relevant part) - I have a couple of ideas that might add a little visual improvement.

JarrenH

I tried that effect and it's pretty nice. Good suggestion. I think I'm going to keep it "cleaner" as in the video above but still... good idea.

The new video looks pretty good, I'd stick with something clean like the now that I see it!

tatiang

@tatiang

Can you send me the project (or at least the relevant part) - I have a couple of ideas that might add a little visual improvement.

I can once I sell it! :P

It's basically just Interpolate X to newX, Interpolate Y to newY, Interpolate Rotation to 180... [ease out] all in 0.7 seconds. Or did you mean the deck, shuffling, etc.?

SnapFireStudios

@tatiang - Glad it worked out! That ease out effect makes it look all the better.
- Thomas

gyroscope

Nice @tatiang :-) As a suggestion, make the deal out card time shorter still, 0.5 or even 0.4 will make it look snappier, I'm thinking.

Another suggestion if you want is to also reduce the wait time in between the cards dealing out.

tatiang

@gyroscope I'll try a shorter deal out speed. I think I've had the deal delay (between cards) set to 0.8 the whole time I've been working on it just because it gives me enough time to figure out when things aren't working, but I'll try to reduce it.

Socks

I can once I sell it! :P

Lol. )

Here you go, this is the kind of thing I was thinking . . . (project attached)

The one thing I'd mention (even more than the 'toss' animation) is the colour palette, it seems a little muted, card games (and card game visual 'culture') is pretty rich stuff, reds, baize, gold, rich wood colours and all that skeuomorphic stuff . . .

tatiang

@Socks if I use that effect I'll have to send you some of my proceeds. That's top notch!

And yeah, I have little to no design sense when it comes to graphics. It's more of a proof of concept at this point but I suppose I should really spice it up.

Socks

@Socks if I use that effect I'll have to send you some of my proceeds.

Help yourself, no need for proceeds or anything like that (it only took a few minutes!!!), you'll obviously need to modify it, change the speed, distances, sizes, etc - but as a basic idea I thought it might add a little gloss, also sound (even on dealing) will also add a lot more than most suspect.

And yeah, I have little to no design sense when it comes to graphics. It's more of a proof of concept at this point but I suppose I should really spice it up.

I think that's a viable way to work, get your project working - worry about making it look good towards the end.

SnapFireStudios

@Socks - Cool thing you did there! The shadow effect could be useful for a plethora of games. I'll be interested to see how tatiang incorporates it.
- Thomas

beefy_clyro

To really take it one step further, as the deck shrinks, so should the appearance of the height the card and shadow are flung from

Elfizm

Not sure if it's going to be noticeable if you change the speed, but because your using the interpolate behaviors your last few cards can see a great decrease in speed. So a constant rate would look better when dealing them all. Which means somewhere in your rules you would have to change the values to a quicker speed depending on the distance, unless your using a big long forumla to decided.

But other than that it's looking pretty cool, @socks gives it that bit more and I think once you get the basic code done you can really work with great effects.

tatiang

Thanks, @Elfizm. I played around with variable speed based on distance and it did improve the effect a bit. I think for the sake of the template I may keep things simple (easily understandable) as far as the formulas go.

RubiWorks

How did you do the shuffle dear @tatiang?

SnapFireStudios

@tatiang - Maybe now you can use @RThurman's custom interpolation to make it look all the better?
- Thomas

tatiang

@RubiWorks, it's two parts (1) the visual effect which is just all 52 card actors jiggling by moving a random distance for a short amount of time and then returning to their original locations (via interpolate); and (2) I used my own randomize in place demo to "shuffle" the table rows that hold the card position, value, and suit.