Best practice when dealing with cards?

Newbie & Debugging Questions
#1

Ok I have a set of cards for my current game. The best example would be a card from Magic the Gathering as an example.

The cards all have the same layout. The size is the size of a playing card, top area is a picture, bottom area text.

There are currently 100 cards in a deck. The player plays with 5 at a time.

So on the HUD I display the 5 cards and a deck.

Currently the HUD and the static deck are 2 images. Which I think I should combine into one to lessen load on the system.

So that leaves me with 5 cards to display. Currently I have a template card. And I load the small image into it, to create a new card image that I store. Then when I display the card, it always goes to 1 of 5 spots. These spots have labels drawn on them. And when the card appears it loads the proper text into the label.
I have a class that holds all the card consts,

  • ID
  • the pic it needs and
  • the text it displays
  • ID of event triggered (used in switch statement)

Seemed like a good idea at the time.

After thinking about this for the last 2 days. I’m think I did this the wrong way. I should have instead created 100 unique cards. And changed my const class.

  • ID
  • Card PNG
  • ID of event triggered (used in switch statement)

So assuming we have way 1

  • The way I have it currently set up
    And way 2
  • The new way described above

To lessen load on the system. I guess I should refactorit to work off way 2. What are other peoples thoughts on the matter?

#2

I’d like to help, but I don’t understand your description.

What is a “const class”? ???
Do you mean it is immutable (like String, Integer, etc.)?

When you say “100 unique cards”, do you mean card objects?

And what is the “load” that you are trying to reduce (memory? cpu? drawing instructions?) and how do you think your method 2 will lessen the load compared to method 1?

Maybe you could include a list of the Classes involved and a description of each Class’ responsibilities?

#3

No problem. I usually suck at descriptions.

  • I had a class called ADConstants where I was defining card properties but I deleted that last night. And went to using a text file.

Ok, Card is an object. That has the following properties.

  • label
  • image
  • name
  • type
  • cost to play
  • event triggered

These properties are stored in a txt file that is read into a 2 dimensional array. With all the card properties.

I have a class called deck. Which will read the text file and load a deck, creating an array of card objects.

After this the system retrieves the array of card IDs stored somewhere (JDBC most likely, but currently just on the client side). Its is just an array of ints which refrence the IDs of the master array of card objects.

So deck object has an array of card objects (100 so far). And the player as an aray of integers, which when called to be displayed. They fetch the card data, the total cards a player can have showing on screen is 4.

So player 1 is dealt 4 cards.

Card size is 145x200 and is a PNG file. So to display the card I have to load the image.

So my question is which is a better design to follow.
I create the PNG of the card with all the following displayed as part of the card.

  • name
  • type
  • flavor text
  • cost to play
  • what it does (event triggered)
  • main image
  • Downside
    If I change anything I need to recreate the card
    *Upside
    Quicker to create
    Easier to manage
    Less images to load,
    most likely quicker performance

What I have then is a PNG that is 145x200 and holds all the card info.

Or I do the following:

  • Card Template is a blank PNG of a card with no name or image or any text at all on it.
    I create a PNG of the cards main image. I then keep loaded all the time my card template. I know exactly where the card will be placed. So I add labels:
  • lblNameC1, where the name would be on the template
  • lblCostC1, where the cost appears
    And so on.
    So I paint down the template then load the JLabels
    And I just load the cards main image over top where I need it on the template.
    When I’m done with that card I clear the labels and load the next cards values into them.
    *Downside
    1 more image loading into memmory
    more processing time setting all the labels.
    I can cash the image, but will have to reload labels if the same card comes up
    Have to come up with a way to store the flavor text of the card in some kind of easy to manage reader.
    *Upside
    Quicker to add more cards, since I just have to create small simple images.
    Any change in the text file and it will auto reflect to the player with no need for a whole new card PNG

I can also email you a picture of a card if that will help you understand a little better, I bet its hard to imagine.

After writing it out a little better, the last option is looking better, but I’m not sure how much performance it will cost me using the labels and loading and displaying 2 images. The set up of the labels will be a pain in the ass as well.

My last question is, should I keep the card images loaded in memmory until the end of the game. So if anyone else plays the same card it loads the image quicker. Or should I dispose of it after is been played and thrown out.

  • Players could have 20 of the same card (in theory)
#4

Okay, Jeremy.
I’m sure I still don’t understand everything you’re trying to do or exactly how you’re doing it, but I think I get the picture ('scuse the pun) enough to say how I would do it. Hopefully this will help you. ;D

I would go similar to your method #2 in your second post, having a “template” card, over which I draw the elements of an actual card instance.

I wouldn’t use labels to draw the text, but graphics.drawString(). This is because I don’t like mixing plain rendering (i.e. to a Graphics2D) with Swing rendering. I don’t know if there’s any problems with doing it, but it doesn’t seem right to me, in that I don’t think it’s what Swing is intended to do.

It sounds like 145x200 is the size of a whole card (i.e. the card template)? So, I assume your PNG images will be smaller than this. If I assume (just for this calculation) that they are about 100x100 and 32-bit, then amount of memory they’ll take is:

= ((w * h) * (bits/8)) * no. of cards
= ((100 * 100) * (32/8)) * 100
= 4000000 bytes
= 3.8 MB

So, if you can afford to use 3.8 MB for your images, it will be easier. I would do this (i.e. keep them in memory) - seems pretty cheap to me.

You say near the end that there can be up to 20 of the same card? You may need to make sure here that the card to be rendered object is different to the card that the player has in their hand object, with the 2nd having a reference to the first. So there may be many card instances allocated to the players that represent the same card (type), but they all reference to the one BufferdImage instance. This will ensure you don’t double up by having the same image in memory twice.

Hope my opinion helps you somewhat.
Good luck,

Graham.

#5

Yea 2 was sounding better and better. Thanks.

Now when you drawstring. Would you bother creating that as a bufferedimage. We dicussed this in another topic. But these could be changing very often or the player may hold the same card for 40 minutes no one knows.

So to speed up rendering I would want to make them a compatible image. But is it worth the CPU time to create these images, or should I just keep calling drawstring.

And another question if I may, the flavor text area is 100x75. How can I ensure the text wraps when it reaches the end of the limit using drawstring? I can ensure the text doesnt exceed x amount of characters. That would make it to big to fit in a 100x75 box. But can you force the text to wrap?

So far all my uses of draw string its been to say short little things that I always knew would fit.

I did find this on the net which looks like it will work, but if there is an easier way. I always like to hear about those.


import java.util.Enumeration;
import java.util.NoSuchElementException;

import javax.microedition.lcdui.*;

//www.astrientlabs.com
public class LineEnumeration implements Enumeration
{
private Font font;
private String text;

private int width;
private int position;
private int length;
private int start = 0;

public LineEnumeration(Font font, String text, int width)
{
this.font = font;
this.text = text;
this.width = width;
this.length = text.length();
}


public boolean hasMoreElements()
{
return (position < (length-1));
}

public Object nextElement() throws NoSuchElementException
{
try
{
return text.substring(start,(start = next()));
}
catch ( IndexOutOfBoundsException e )
{
throw new NoSuchElementException(e.getMessage());
}
catch ( Exception e )
{
throw new NoSuchElementException(e.getMessage());
}
}


private int next()
{ 
int i = position; 
int lastBreak = -1;

for ( ;i < length && font.stringWidth(text.substring(position,i)) <= width; i++ )
{
if ( text.charAt(i) == ' ' )
{
lastBreak = i;
}
else if ( text.charAt(i) == '\n' )
{
lastBreak = i;
break;
} 
}


if ( i == length )
{
position = i;
}
else if ( lastBreak <= position )
{
position = i;
}
else
{
position = lastBreak;
}

return position;
}
}

Usage Example:

LineEnumeration e = new LineEnumeration(myFont,myText,lineWidth);
while ( e.hasMoreElements() )
{
g.drawString(e.nextElement().toString(), startX,startY, Graphics.TOP | Graphics.LEFT);
startY += myFont.getHeight();
}

#6

So to speed up rendering I would want to make them a
compatible image. But is it worth the CPU time to create
these images, or should I just keep calling drawstring.

I would create the complete card once… and just draw that image all the time. That allows you to use antialiasing without any noticable performance hit (even on older PCs).

How can I ensure the text wraps when it reaches the end
of the limit using drawstring?

You can determine how much space a given String needs by using FontMetrics.

#7

[quote]Now when you drawstring. Would you bother creating that as a bufferedimage. We dicussed this in another topic. But these could be changing very often or the player may hold the same card for 40 minutes no one knows.
[/quote]
This depends on whether you’re doing active or reactive rendering. i.e. are you attempting to draw 40 fps (or whatever) or are you only repainting when something changes?
As it’s a card game and the game view changes relatively infrequently, I would go with reactive and only reapint the GUI when the game state changed (i.e. the user or a NPC does something), or when Swing tells you to (i.e. don’t turn auto-repainting off).

If this was me, I’d do everything possible to make sure I didn’t have to handle wrapping!
I think that would be easier than actually doing wrapping.

Unfortunately, that’s the only advice I can offer on that subject. :stuck_out_tongue:

If you really get stuck, the source code for Huckster (https://huckster.dev.java.net/) might have some stuff you could use (I don’t know - but it seems like the kind of app that would). Be careful about copying open-source code verbatim, though - it’s not necessarily legal.

#8

Sorry for the late reponse; i am just seeing this post now. Please try the updated code at

http://fotomica.astrientlabs.com/downloads/textwrap.jsp

I will give you a better starting point.