I have been looking at the "Poker Gamebox" trying to understand how the co-ordinantes system works but I am still confused. I wanted to try and make a new game which uses 2 decks of cards and some counters.
Both decks contain 30 cards each, each with a different Face. I also need 2 different Backs, one for deck "A" one for deck "B". Do I make 1 .jpg image with all the cards and 2 backs on, and a mask to match. ?? Or do I need to make a .jpg image for each card deck including its back and a mask to match ??
Once I have created the image/image's, how do i use the co-ordinates to reference the correct cards from the .jpg image.?
I understand my .jpg will be in some form of grid, referenced in rows and columns, but I dont understand how to obtain the co-ordinantes for the card face's and for the card backs. So each card type is in the correct stack.
Newb needs XML help
Moderators: Ichibrothers, Cambronne
When you're trying to make cards for your gamebox, the coordinates you have to reference are pixels, starting at zero in the top-left corner. So 'face-left' and 'face-right' refer to horizontal pixels, and 'face-top' and 'face-bottom' refer to vertical pixels.
The cards are laid out in a grid, so it's very important that you have them equally spaced horizontally and vertically to the pixel. This best way I have found to make cards (although I am somewhat new at this myself) is to use an automated process such as photoshop's "Contact Sheet" function. Anyway, however you do it, you will want an image with all cards in one grid.
To set up the cards the way you like, you then simply have to enter the coordinates. For instance, say you have a grid of cards that are 10 wide (300 pixels each) and 7 tall (500 pixels each). The grid would thus be be 3000 pixels wide by 3500 pixels tall. The card-section reference would be:
If you want to use backsides, you will need the backside included as a card in the image. Ok, so say in our grid of 10 wide (300 pixels each) x 7 tall (500 pixels each), we made the bottom-right image the "backside" image. Since you know the size of each card, it's pretty easy to get the coordinates. In this case, they would be
That will do the trick, but the last card will have the backside image on both the front and back. You can avoid this by making two "card sections" so as to avoid referencing the backside (bottom-right) image as a face. You have to use two sections because each one is rectangular.
In this case, i made a 6X10 grid for the top 6 rows....
....and then made a 1x9 grid for the bottom row, less the backside image....
.... and put those in the same "Counter Sheet" tag
Of course, if you wanted to use TWO backside images, you could do that and use different backsides for different sections. Although, personally, if I were making two decks, i'd just use the above method twice and use a separate image for each deck.
That may be overly tedious but that's what i've been doing.
~Tom
The cards are laid out in a grid, so it's very important that you have them equally spaced horizontally and vertically to the pixel. This best way I have found to make cards (although I am somewhat new at this myself) is to use an automated process such as photoshop's "Contact Sheet" function. Anyway, however you do it, you will want an image with all cards in one grid.
To set up the cards the way you like, you then simply have to enter the coordinates. For instance, say you have a grid of cards that are 10 wide (300 pixels each) and 7 tall (500 pixels each). The grid would thus be be 3000 pixels wide by 3500 pixels tall. The card-section reference would be:
Code: Select all
<card-section rows="7" columns="10"
face-left="0" face-top="0" face-right="3000" face-bottom="3500" Code: Select all
<card-section rows="7" columns="10"
face-left="0" face-top="0" face-right="3000" face-bottom="3500"
back-left="2700" back-top="3000" back-right="3000" back-bottom="3500" />In this case, i made a 6X10 grid for the top 6 rows....
Code: Select all
<card-section rows="6" columns="10"
face-left="0" face-top="0" face-right="3000" face-bottom="3000"
back-left="2700" back-top="3000" back-right="3000" back-bottom="3500" />Code: Select all
<card-section rows="1" columns="9"
face-left="0" face-top="3000" face-right="2700" face-bottom="3500"
back-left="2700" back-top="3000" back-right="3000" back-bottom="3500" />Code: Select all
<counter-sheet name="Command2"
front-image-file="Command.png" front-resolution="300 dpi"
front-mask-file="Command_Mask.png">
<card-section rows="6" columns="10"
face-left="0" face-top="0" face-right="3000" face-bottom="3000"
back-left="2700" back-top="3000" back-right="3000" back-bottom="3500" />
<card-section rows="1" columns="9"
face-left="0" face-top="3000" face-right="2700" face-bottom="3500"
back-left="2700" back-top="3000" back-right="3000" back-bottom="3500" />
</counter-sheet>That may be overly tedious but that's what i've been doing.
~Tom
Re: Newb needs XML help
ZunTzu can handle huge images so both solutions are OK. The important thing is to keep the back scan on the same image file as the front scans.Zilf wrote:Do I make 1 .jpg image with all the cards and 2 backs on, and a mask to match. ?? Or do I need to make a .jpg image for each card deck including its back and a mask to match ??
Personally, I would go for a single image file with 62 cards nicely arranged as 9 rows of 7 cards - only one space wasted.
Zilf wrote:Once I have created the image/image's, how do i use the co-ordinates to reference the correct cards from the .jpg image.?
In the game-box.xml file, indicate the position - in pixels from the top left corner - of each of the four rectangular card sections. Sections 1 and 2 are to be associated with back A. Sections 3 and 4 are to be associated with back B. The black card in the bottom right corner is not used, but I chose to make it part of section 4 for convenience.
Jerome, ZunTzu developer.
Using Jeromes Grid Layout and TYCH0216 example of cards (300 pixels wide) and (500 pixels high) can you confirm if the structure below is correct for green cards Deck A card faces, and card "A" the back of all green cards. The same applying to the purple cards and back "B"
zilf
Code: Select all
<counter-sheet name="Cards"
front-image-file="cards.jpg"
front-mask-file="cards-mask.png">
<card-section rows="2" columns="5"
face-left="0" face-top="0" face-right="1500" face-bottom="1000"
back-left="1200" back-top="1000" back-right="1500" back-bottom="1500" />
<card-section rows="5" columns="4"
face-left="0" face-top="1000" face-right="1200" face-bottom="3500"
back-left="1200" back-top="1000" back-right="1500" back-bottom="1500" />
<card-section rows="4" columns="4"
face-left="1500" face-top="0" face-right="2700" face-bottom="2000"
back-left="1200" back-top="1500" back-right="1500" back-bottom="2000" />
<card-section rows="3" columns="5"
face-left="1200" face-top="2000" face-right="2700" face-bottom="3500"
back-left="1200" back-top="1500" back-right="1500" back-bottom="2000" />
</counter-sheet>