Rolodex for viewing cards
Hi Everyone,
I'm trying to adapt a game that's working great on tablets for smaller phone screens. It's a card strategy game and one issue I'm having is fitting cards on screen at a size at which the text on them is legible.
My most recent attempt at making efficient use of real estate is to have a sort of rolodex card scroller.
The idea is that the user can swipe left or right on that grouping and the card appearing on top of the pile will change and the others will rotate around.
I'm having trouble finding info on this type of thing but I'm sure lots of other people have done it.
As things stand now, if I detect a swipe I'm simply going to adjust the card id of all of those visible cards and the images will change instantaneously. So one swipe equals seeing the next card. If you want to see all of them, you would have to swipe 6 times in this case.
I've been thinking it would look really good however if I could trap the force of the swipe and actually make all those cards animate and change position according to the force of the swipe. But this would involve attaching the cards to a geometric disk or something that would rotate according to physics after the force is a applied, dragging the cards along with it. Is that correct?
Would love to hear from others who have tips on this type of thing. A search on rolodex or swipe list viewer didn't really turn anything up.
Answer by peterk1968 · Mar 26, 2016 at 06:04 PM
I finally figured out a way to get a good Rolodex effect that looks good and is very easy. Rather than making use of swipe, make use of a dragging gesture. The user selects a partially revealed card and moves it to the position he wants (usually the center where he can see the whole card). You can track the movement of the finger and just swap cardIds for the whole group whenever he hits a collider for cards adjacent to where he started.
None of the cards actually physically move but the effect is convincing anyways. From a user point of view, it's also easier to control the motion this way as compared to a swipe.
Answer by Nonakesh · Mar 25, 2016 at 08:48 PM
I don't know how you've implemented it right now, but if you are moving the cards directly from within a script you could always simulate physics yourself. Here's some pseudo-code of what I'm talking about:
//First you have to get the current velocity of the movement
if (cards are being moved) {
currentVelocity = (currentPosition - positionLastFrame) / Time.deltaTime;
}
//Now use that velocity to move the cards
cardPosition += currentVelocity * Time.deltaTime;
//And now simulate some drag to slow down the cards after you let go
//You could use whatever functions you'd like, this is the one Unity uses in it's physics
currentVelocity -= currentVelocity * dragStrength * Time.deltaTime;
Now you just have to tweak the dragStrength. You could also add some fancy features like bouncing off as soon as the end is reached (just reverse the velocity and multiply it with a impact dampen value).
But there's a wraparound effect and there's an altitude effect as well where the card in the middle goes above the others. It's not as simple as just taking the X,Y force of the finger move. The movement of the cards has to be constrained to a sort of rotation that you would find on a physical Rolodex card thing.
I would personally try to abstract that complexity away, in other words make a function with a parameter moveDistance that does everything else in the background. And if you want the cards to warp around, just teleport them to the other side, as soon as they are needed there.
Also what do you mean with the cards having to be constrained? Do you want to make the whole thing physically accurate in some way? Because it's generally a better idea to fake the effect ins$$anonymous$$d of simulating it. It's far easier to make something look like it's realistic, than making it work within the physics system. So as long as it's not necessary for the gameplay, always try to fake as much as possible. That's also more performance efficient.
Edit: Oh and if you were asking how to get the rotary effect itself, you could parent the cards to a empty game object, and rotate that ins$$anonymous$$d of moving the cards. The object should be in the middle of the rolodex, so the cards rotate around it. You could only parent the top card to it and as soon as it's on the other side unparent it again. Of course you'll have to play around until you have a nice effect.
Your answer
Follow this Question
Related Questions
Weapon arsenal Inventory UI 0 Answers
Help with ui scaling on screens with different aspect ratios. -3 Answers
Certain scripts that are attached does not work after build, scene change and closing unity 0 Answers
How to detect the touch on certain Game Object (UI Panel) 1 Answer
How to create a scrolling menu that scales to all screen sizes 2 Answers