I'm working on a card game right now and one of the biggest issues I'm having in the design of the play mat for the minimum resolution 1280x720. I wanted to at least support this resolution for laptops, and smaller screens.
The basic design is a play area like:
[x] = card spot
[H] = card spot for hand
--
[x][x][x]
[x][x][x]
--------
[x][x][x]
[x][x][x]
[H][H][H][H][H][H][H]
(Chat is on the right side, and on the left is player info, deck amounts, ect...)
There are some other icons, and stuff but this is a basic example. I'm finding with the height of 720 the area doesn't give enough space, and the width of 1280 doesn't allow room for the on screen chat box.
Each card spot, including hand size is at 110x150 for the card itself, and when the mouse if over there is a "increased" preview. I'm considering using smaller icons for the mid play area. I've also rotated the play area, but again, no room for chat box, or other information.
Does anyone have any input? Or should I just make really small versions of the cards on the play mat, maybe half the size, the cards still provide 100% previews on mouse over, but the issue is that you cannot really read anything off the cards at first glance, but I cannot scale down the left info side, and the right chat box side.
Unless I change the design of the play mat I'm essentially forced to take the working higher res version, and just scale it down with the camera to view it at a smaller ratio. Any ideas working with such tight spaces? Am I forced to just render out the smaller ratio with the mouse over zoom preview.
I could save about 30% off the height by slanting the card spots like this as seen in the Yu Gi Oh card game:
↧