Visual "Tabletop" Appearance for a Card Game

ID:1842035
 
Apr 28 2015, 10:08 am
(See the best response by Lummox JR.)
I'm working on trying to program a card game (Fluxx, to be exact), and I can't for the life of me figure out how to make the cards appear on the screen to give it a "tabletop" appearance.

I only know how to make the cards show up in lists in different stat panels, but, needless to say, that type of format won't be very user-friendly or fun.

I've tried tutorials but I can't seem to get them to work for my game, and I don't even know where to begin to get it to work on my own.

Let me know if any snippets of my code are necessary if you have any coding suggestions.

Also feel free to link me to any tutorials that may be helpful. I prefer the very basic "from scratch" tutorials (like those by Zilal or Falacy), because I feel like I learn the most from those.

Thanks for any help.
Apr 28 2015, 10:14 am
Best response
I don't know if there's a tutorial for any of this, but probably the easiest thing is to just make each card an obj, so it can be placed on the map (the board) at a given spot--then give it a unique layer. I'd just create a proc that would place it on the closest turf and with the right pixel_x/y offsets.

What you'd want then is a way to handle clicks, double-clicks (maybe), and drag/drop.
Apr 28 2015, 10:22 am
In response to Lummox JR
That's exactly what I've been trying to do (great minds think alike ;) ), but I couldn't exactly figure out how to place the cards on the map.

Also, I don't exactly know what you mean by a unique layer. All I know about layers is from the 'atom' acronym (area, turf, obj, mob), but I don't see how that applies here.
Apr 28 2015, 11:45 am
Basically I mean set their layer var so they're not all the same, such as layer 3.01, 3.02, etc. That way the order of the cards for display will be consistent.

For placing them on the map, you'd just want some kind of proc:

// example values
#define MAP_PIXEL_WIDTH 720
#define MAP_PIXEL_HEIGHT 540
#define CARD_WIDTH 90
#define CARD_HEIGHT 120
#define TILE_SIZE 64    // what's the base world.icon_size?

obj/card/proc/Place(_x, _y)
    // _x,_y are in pixel coords starting at the top left
    // convert to Cartesian coords that are BYOND-friendly
    // subtract half of CARD_WIDTH/HEIGHT from _x,_y first if you position by card center
    _y = MAP_PIXEL_HEIGHT - (_y + CARD_HEIGHT)
    var/tx, ty
    tx = round(_x / TILE_SIZE)
    ty = round(_y / TILE_SIZE)
    _x -= tx * TILE_SIZE
    _y -= ty * TILE_SIZE
    loc = locate(tx+1, ty+1, 1)
    pixel_x = _x
    pixel_y = _y

That would need some adjustment if you wanted to work with animate() for positioning, but that's a good start.
Apr 28 2015, 11:52 am
In response to Lummox JR
Lummox JR wrote:
Basically I mean set their layer var so they're not all the same, such as layer 3.01, 3.02, etc. That way the order of the cards for display will be consistent.

For placing them on the map, you'd just want some kind of proc:

// example values
> #define MAP_PIXEL_WIDTH 720
> #define MAP_PIXEL_HEIGHT 540
> #define CARD_WIDTH 90
> #define CARD_HEIGHT 120
> #define TILE_SIZE 64    // what's the base world.icon_size?
>
> obj/card/proc/Place(_x, _y)
>     // _x,_y are in pixel coords starting at the top left
>     // convert to Cartesian coords that are BYOND-friendly
>     // subtract half of CARD_WIDTH/HEIGHT from _x,_y first if you position by card center
>     _y = MAP_PIXEL_HEIGHT - (_y + CARD_HEIGHT)
>     var/tx, ty
>     tx = round(_x / TILE_SIZE)
>     ty = round(_y / TILE_SIZE)
>     _x -= tx * TILE_SIZE
>     _y -= ty * TILE_SIZE
>     loc = locate(tx+1, ty+1, 1)
>     pixel_x = _x
>     pixel_y = _y

That would need some adjustment if you wanted to work with animate() for positioning, but that's a good start.

Cool. Thanks for the example. I haven't messed with #define yet, but I'll tinker around with this and see what happens.
Apr 28 2015, 12:21 pm
Awesome. I've finally gotten a card to show up on the map for the first time. Thank you!

Now I have to figure out how to actually make an algorithm that makes each card show up in the right place.

I've actually been trying to use Foomer's DisplayHUD library, but I couldn't figure out how to implement it into my code.

http://www.byond.com/developer/Foomer/DisplayHUD
Apr 28 2015, 1:28 pm
Well the way I set this up was not as HUD objects, but IMO you don't really need the cards to be on the HUD--except maybe when displaying the owner's hand.
Apr 28 2015, 1:52 pm
In response to Lummox JR
Lummox JR wrote:
Well the way I set this up was not as HUD objects, but IMO you don't really need the cards to be on the HUD--except maybe when displaying the owner's hand.

You know, I think I was trying to complicate things. In fact, I ended up not even using your snippet of code. After reading it, I realized that all I really needed to do was use "loc=locate(x,y,z)" and make an algorithm to make the cards all have their own space on the map.

It seems a little wonky, but at least for now it's better than what I had before (which was nothing). On one hand, I want it to be aesthetically pleasing to attract more players, but on the other hand, I want to spend less time on aesthetics and more time on functionality. I want to concern myself more with aesthetics after I have my game completed and functional.

For now, I'm trying to make a one-player solitaire version of the game and then convert it to a multiplayer game (which I'm not sure is a good idea or not) mostly to test functions.

But now that you mention it, how would I display my hand to only me? Would some kind of side window be a good idea (keeping in mind that I currently haven't looked into how to do that)? Or maybe somehow making the faces of cards show up for me, but backs show up for the opponent (again, I currently haven't looked into how to do that)?
Apr 28 2015, 2:07 pm
Displaying your hand only to you would be accomplished via /image or a HUD.

To avoid trouble later on, I recommend you still use a proc for card placement. Decide what sorts of placements you might have (e.g., a spot for the draw pile, discard pile, goals, rules, and players' keepers/creepers), and then have the proc convert that to the x,y coords. That way, once you decide to refine the positioning, everything that positions a card will already be going through this proc, and it'll save you a lot of headaches.
Apr 28 2015, 2:20 pm
In response to Lummox JR
I have it so that when a card is played, something different occurs for each card that is played. In other words, I have the Play() proc check what type of card that is played, and I have a spot on the map designated for each type of card. Positioning is determined by the number of cards that are in play.

I also plan on working on a proc that slides the cards over when a card is discarded, because I am sure to have problems if I don't.

For now things seem to be running smoothly, but I will definitely be back if problems arise.