Mathematical Algorithms - Displaying a Spread of Cards in 320x200

[TerranRich]

I may or may not do this again, but I decided to share with all of you the mathematical algorithms I came up with for displaying a spread of cards in a 320x200 room ("table").

First off, certain limits must be set, stored as constants (or at least as variables that you promise not to change)...

You first need to make a mock-up in Photoshop (with each card on a layer) to figure out the smallest gap between cards where the visible values on each are not obscured, as well as how many cards can fit in the width of the screen. In designing my Uno clone, I found that I could fit 20 cards in a 320-pixel space (with space to the left and right), with 12 pixels minimum between each card (where I could still see the values of all cards). I then figured out that this would take up a maximum of 275 pixels.

1. The spread of cards cannot exceed a certain width. Let's call this MW, for maximum width, in pixels (275 above).
2. Cards cannot be shown too close together, or the player will not be able to see what they show. Let's call this SG, for smallest gap, in pixels (12 above).
3. Conversely, cards shouldn't be shown too far apart, for aesthetics. Let's call this the LG, for largest gap, in pixels (in my game, it's 20).
4. You need to know the width of each card, CW, for card width (in my game, it's 47).
5. Finally, you should know at what point on the Y-axis (how far down) to show the top edge of all the cards (in my game, it's 172), called, simply, Y, for Y-axis.

A. Find the largest possible gap between cards without the total width of the shown cards to exceed MW, given the current number of cards (N).

Code: ags

SPACE = FloatToInt( (MW - CW) / (N - 1) ); // This is the inverse of the WIDTH formula in step B
if (SPACE > LG) { SPACE = LG; } // Can't go any farther apart than LG

This is the space between each card. Knowing this will allow you to draw each card, and increment the X value by this amount each time.

B. Find the starting X value for the top-left of the first (leftmost) card. Since the row of cards will be centered, you would use the usual "half of the difference between screen width and graphic width" formula, after figuring out the width, in pixels, taken up by the row of cards.

Code: ags

WIDTH = ( SPACE * (N - 1) ) + CW; // You're only adding up the gaps between each card, except for the last card, where you factor in the entire width
X = FloatToInt( (320 - W) / 2 )

C. Go through each card to be displayed. It's up to you to figure out which sprite to display, and what code to use to display each one. Start with the X value above, draw the card, then increment by SPACE, draw the card, etc. This will center the spread of cards (accurate to 1 pixel), with no less than SG between each card, and no more than LG between each card.

Below is an example of a spread of 7 cards, and then a spread of 20 cards, given my values above:





If anything is unclear or confusing, please let me know, and I will try to clear it up. I hope this helps many of you who aspire to create card games in AGS. I love math, and I absolutely love coming up with algorithms and formulas for things like this.