About hands of card game

We are currently developing a card game with a small team.
I have a question about how to implement hand cards.
We tried to implement it using the following assets, but because it is a widget, the cards themselves cannot reflect lighting, etc. Also, we cannot actually put them on the field.

Therefore, I am thinking of implementing the card itself as an Actor in BP, and then sticking a Widget on it.

In that case, how can I make it look like I am expanding my cards according to the number of cards in my hand, as shown in the following image (I am also thinking of highlighting the cards on mouse-over, etc.)?

Personally, I think it is necessary to separate the implementation of “cards in hand” and “cards by themselves” by having a sort of “saucer” of cards in BP_PlayerCharacter itself, and placing random cards in that saucer when the game starts. Then, I am thinking that we should put a process in the “saucer” itself that arranges the cards neatly as shown in the image, depending on the number of cards.

However, I don’t know how to arrange the cards neatly in the first place. (Is it possible to use “Spline” or something similar?)
Also, I don’t know if this implementation itself is OK.

It would be very difficult to write down all the implementation methods, so please just give me an example of how to do it.

Thanks.

1 Like

I posted this today:

Judging by the vid above, you wouldn’t need to physically place the cards down, would you now? Cards in hand can be 3D, ofc - but you’d need to work hard to keep the widget components looking sharp - especially the text.

You can absolutely distribute them along a spline but rotating a vector would also work fine.

In the video I just attached, the cards do not actually need to be 3D,
but what I am developing needs to be an actor because the cards need to actually be placed on the field!

Hold a hand of 2d cards. Spawn actors with a widget component and place them on the field. What is the feature you’re currently struggling with? Hand distribution in a semicircle?

What I’m struggling with is the clean placement of the cards in the hand,
ideally it should behave like a SlayTheSpire or Inscryption hand.
I would like to be able to highlight cards on mouse over, etc.

By the way, in Inscryption, are the cards in hand implemented as widgets and the cards actually placed as actors?

1 Like

No clue, never played it but looks like a banger:

This, right:

Looks like it’s all 3d

I now know what I’m doing tonight, though.

It’s a lot of fun.
The most ideal implementation of cards like Inscryption.
But I’ve never developed a card game before, so I’m wondering how it should be implemented.

What is the best way to implement this so that the cards line up nicely at hand like Inscryption?

For 2D you could experiment with something along the lines of:

Play with the values, see what they do, this can be dramatically improved ofc. The hand widget is just a canvas that spawns a bunch of widgets, shifts them around and rotates. Animations should be added to the individual card widgets. zOrder can be handled in the card or in the hand.

Thank you!! Can I replace this with an actor?

Sure, why not. You mentioned a spline at some point:

The spline is attached to the camera:

The card actors get attached to the spline and distributed along it evenly. Each card actor has a world space widget component. You’d need to add rotation and so on, ofc. More logic to handle a varying number of cards…

2 Likes

With Inscryption, the width gets narrower with the number of cards. is it possible to do that with Spline?


Yes. The default spline duration is 1s. You divide it by whatever number of cards you need and use it to calculate a step for the next element. Or you can edit duration itself. Or move the spline points. There’s probably as many methods of handling this as there are people.

Let’s say I had 4 cards and only want to use 20% of the spline to distribute them:

image

It’s somewhat flexible, could work well for what’s needed here.

It saved my life. Thank you.
I tried to implement this as a test, but the cards are arranged like in the picture.(Sorry it is hard to see…)


The above problem has been resolved.
The splines were in the wrong shape.
What is the best way to angle the card?

Not sure if you mean the order or the distance from the camera. Splines have input points, you shift them any way you want:

0 would be the beginning.

When it comes to what appears on top of what, this is fully 3d so the world location dictates occlusion. Reshape the spline as needed.

Almost certain this could be done with scene depth / post process. But we may not need to go as deep, ehm.

The spline has rotation data:

To make the above better you could use the spline time location as pivot (currently the cards snap by their midpoints) and rotate from there. Or find a common pivot and rotate a vector around it instead. One way or another it’s a bunch of math you will need for other things anyway. :smiley:

Perfect!! Thanks a million. It’s looking pretty good.

If I only use 50% of the Spline width, I’m adding 0.5. Is there any other way?

1 Like

I guess you could adjust spline duration. But the end result would be similar.