[RELEASED] FluidCards, A Card Motion and Management System

Community Showcases
1

FluidCards v1 was released on 1/10/17 See attached file for the quick start guide and a peek at the API. Please reply if you have any questions. Thanks!

FluidCards is a card motion/animation and management system meant to greatly simplify development of games with card/tile mechanics. FluidCards manages how cards/tiles behave when dragged, dropped, played from hand, returned to hand, discarded from hand, drawn to hand, etc. It’s easy to get started and have FluidCards manage your card/token prefabs, and is highly customizable. It makes it extremely easy to add some JUICE to your presentation by injecting your own custom animations (e.g., easing functions) to preset trigger points (e.g., pop out card when grabbed).

Fluid, beautiful card motions/animations - Robust and consistent, with customizable timing and easing (create your own easing func or use the many built in). Grab cards mid-animation. Drop and pick them up again. All transitions are smooth and seamless. Multi-touch supported.

Build any card game - Turn-based, slow-paced, fast-paced; Classic (poker, solitaire) or complex (CCG, LCG, board games).

Great performance - Crisp, responsive animations and user interactions. Timing controlled by Unity’s Time.deltaTime and Time.timeScale.

Easy to Use! - Follows Unity conventions. Add behavior components to your GameObjects and tweak from there. Works with your own card/tile prefabs. Great customer support!

Works with: Unity UI, VR, tweening libraries like DOTween, many other Unity card assets

Essentials (ES) Purchase Includes - FluidCards.DLL (.NET assembly) providing everything described above; Scripts for the “juicy” demo; Guides, examples, and email support.

PRO Purchase Exclusives - FULL scripts/source code instead of FluidCards.DLL; Scripts for the PRO demo; Card deck management scripts with logic for maintaining and organizing the data MODEL of a deck, discard pile, and hand of cards; First class support.

2951583–218848–01-QuickStart.pdf (205 KB)

2

I’m interested in this asset. I would like to know if it is possible to create a GCC with it? A GCC that each player has a deck, graveyard, hand area, etc …

3

Hi thiagomelo,

Yes, a CCG is it’s primary use case. In that case you would have a DraggableCard at the top of your deck that you can click (or click a button) to draw into your hand. In FluidCards, that hand is represented by the FluidCardView. You can drag cards from the hand (FluidCardView) into the play area where you can drop them on one or more DropTargets that you’ve created. You can have multiple DropTargets to represent multiple places in the play area that you can put cards (like in Solitaire) OR just one big DropTarget (covering the play area) and have your own code redirect the card to where it should go.

The QuickStart and the example projects should be enough to get you going on this, but if you need any more help feel free to email me or post here.

And let me know how it goes! Any feedback will help me improve this asset for you and others, so don’t be shy! :slight_smile:

Thanks,
Steve

4

For example: I want to set some attributes for cards like attack, defense, class, etc. Is it possible to filter and search for cards on the deck (DraggableCard) using filters? Like all cards with class “X”, cards with “Y” attack, etc? How do I show all deck cards to the player using these filters?

It’s possible?

5

Yep, you can do that. But there are two sides to it. There’s the “data model”, which is what you would be searching and filtering. That data model is separate from things like DraggableCard and FluidCardView, which are on the “view” side.

So you would have your own card/deck data model (or use the one included in FluidCards PRO) that you would sort and which would represent the current state of the deck or graveyard. If, in the game, you wanted to play a card that let you search and remove “all cards with class X”, then you would write code to:

  • (data model) Search your deck and return matching cards
  • (data model) Remove the cards from the deck
  • (view) Create a DraggableCard for each card to be removed and place them over top of your deck
  • (view) Inject a “start discard” and “end discard” animation for each card, so that they are discarded in some fancy way (using the built in easing functions or something else) (see QuickStart for how to “inject” animations)
  • (view) Set each DraggableCard to move to the discard pile.
  • (view) Start a coroutine to begin that discard move
  • (view) Clean up and remove the DraggableCard once animation has completed

Key Takeaway: You do not need a DraggableCard for each card in your deck or graveyard. Typically, DraggableCards will be created and destroyed only when entering, leaving, or being played from the hand/FluidCardView OR before and after moving them around in the play area or between piles.

Does that help? I’ve started working on some more real-world examples to demonstrate things like this. I’ll let you know when I have one finished that helps you.

1 Like
6

Thank you very much!

1 Like
7

FluidCards is getting very close (targeting end of Feb) to release 1.1, which adds the following:

  • Stackable drop targets (making it MUCH easier to make games like Solitaire)
  • Ability to respond to click events (previously you could only drag cards). Now you can click on the top card in a stack to play it or move it to another stack. You can also just click on a card in the hand to play it.
  • Ability to rearrange the cards in your hand so you can group cards together like you’d do with physical playing cards.

These enhancements are based on user feedback I’ve received over the past 2 months. Any other requests??

Thank you, customers!

8

Setting up a stack is just like setting up a DropTarget (from release 1.0). You simply add a DropTargetStack component to a gameobject and it becomes a stackable target! You can adjust the offset between stacked cards so that you can stack however you’d like: solitaire-style, a pile of cards, etc.

Here’s an example:
2964764--220119--stacked.png

9

Great job, congratulations!

  • If possible it would be interesting to add an option to view all the cards in a stack. After viewing all the cards on the stack could add a card in hand or send it to the discard pile.

  • The option to hide a stack of cards (face down card). An option to set whether or not the area is hidden (face down).

10

Thiagomelo, the stack has an (x,y) offset used to space out the cards in a stack. So to accomplish what (I think) you’re requesting, you could just set the the offset high or wide enough for all the cards in the stack to be seen. You could even animate the stack expanding and collapsing by adjusting the offset over time. Should look pretty slick. In the future, I could make this a little easier to do, but hopefully what I just described covers you for now.

As for whether the card is face down or not … that’s up to how you model the card. You can respond to mouse clicks and things like that (through FluidCards) to flip the card however you want it. So you could flip all the cards face up or down in a stack. Or just the top card. I’ll be sure to include an example for how to flip cards around.

11

ANNOUNCEMENT: There was a packaging issue with FluidCards Essentials 1.0 and rather than continue to sell a subpar product, I have decided to deprecate the package. A BIG thanks to the customers that reported the issue!

FluidCards Essentials will be available for purchase again once FluidCards 1.1 is approved. (soon!) When that happens, Essentials owners will also again be able to upgrade to PRO for $30.

** This does NOT affect FluidCards PRO **

12

What happened to this project?

2 Likes
13

Any update on this project? It looks great