I while back I talked about how I created Lacuna Expanse: A New Empire programatically. Today, I’m pleased to share with you how another user did it, using a different programming language. The following article was contributed by Alex Wolff (aka Supremacy in chat) of Wolfpack Studios.
Designing a Card Game With C#
By Alex Wolff (Wolfpack Studios)
Ever wanted to create games, but weren’t the graphically talented type? Struggle to make stick figures that look like they were drawn by someone over the age of 5? Same here. I’m fairly certain my 3 year old nephew has more artistic talent than I do.
Fortunately, learning to progam can help solve a lot of these issues. Taking advantage of some of the tools in the C# .Net library, mainly System.Drawing, it’s pretty quick and easy to pop out something like a card game.
We can also do this with all completely free software!
The tools that I use are:
Visual C# 2010 Express
Paint.Net (Though Inkscape and GIMP are also options that you can use as well)
Getting Started:
While designing the actual cards programmatically is the end goal, first you will need to design a template using the graphics program of your choice.
Since I used TheGameCrafter to build, design, and publish my game. I’m going to start by using one of their templates. First, I open up the template in Paint.Net and put it on it’s own layer. This way I can start designing the rest without constantly having to check how it fits on the card template, and also to make sure that my finished template is the correct size for upload.
Next, I usually add in separate layers for each specific thing that I want to put on the card. These cards are really simple in layout, all they need is a background and some text to be put on them. Putting each piece on a separate layer might seem like more work up front, but if you ever need to make changes, it’s a hell of a lot easier in the long run.
I went with a very simple “terminal” looking background, consisting of green 0’s and 1’s on a black background. This requires absolutely no artwork and still fits the game’s theme. I created a new layer for the black background, filled it in using the Fill tool, and then created a new layer to put my 0’s and 1’s.
The 0’s and 1’s were created using the Font tool. I just used Arial font, 12 point. I listened to some music and tapped out random patterns of 0’s and 1’s for a few minutes, then copied and pasted the rest. Just for visual effect I tried not to repeat the same pattern over and over in an obvious way, so I inserted the copy/paste into the middle of itself a few times, and did some overlaying.
Next, per the card design, I wanted to add a layer to show where the card text was going to be. After playtesting and a few different designs, I settled on wanting the text to show on the top and bottom of the card, with a way to distinguish which way the card was being held. This allows the players to adjust to the way they are looking at the game board and makes it much easier for players to see what the numbers on their cards are as they hold them.
The final card template looks like
Now that everything is on the template that I want it to be, the next part is to save it off as a PNG file so that it’s something we can reference in our code that the library understands without too much trouble. In Paint.Net this is as easy and doing a Save As and selecting PNG in the format list.
Next is the fun part, the programming part… the part you probably started reading this to get to!
While a console application could easily do the job, I prefer to use standard WinForms applications to do my quick and dirty apps. They give me the control of a button, and when it’s something visual it allows me to do a preview before I create the entire batch.
In Visual Studio Express, I created a new Windows Forms Application project for my Bit Shift cards. I only have 2 controls, a button to fire off the card creation (appropriately labeled CREATE STUFF) and a Picture Box that I can use to preview what my final images look like after I’ve manipulated the template.
Warning: I’m well aware that my code probably doesn’t follow standard programming guidelines, best practices, and may possibly not make sense to anyone that isn’t me. Regardless, I’m going to show you what I did to get my cards created.
First, I created a reference to the template:
staticImage baseImage { get { returnImage.FromFile(@"C:\Users\Alex\Desktop\Board and Card Games\Bit Shift\Cards\PNG Files\BitShiftCardTemplate.png"); } }
Then, I needed a method that I would use to create the actual cards in an image based on the template.
staticImage DrawImage(Image baseImage, string textline1)
{
var newImage = newBitmap(baseImage);
var graphics = Graphics.FromImage(newImage);
var line1start = newPointF(100.0f, 162.0f);
var line2start = newPointF(100.0f, 798.0f);
var cardFont = newFont("Quartz MS", 114.0f, FontStyle.Regular, GraphicsUnit.Pixel);
var whiteBrush = Brushes.White;
graphics.DrawString(textline1, cardFont, whiteBrush, line1start);
graphics.DrawString(textline1, cardFont, whiteBrush, line2start);
return newImage;
}
This method will take in a base image (our template), and then write out our card text to it on both the top and the bottom.
Because of certain difficulties with images and how they can be saved/handled, I had to first create a new Bitmap from the base image. Using the Graphics.FromImage method gives me a Graphics object that is what I use to actually manipulate the Bitmap contained on it.
Next I define line1start and line2start as the different PointF objects which are the start points for my lines of text.
Then I need to define the font and size that I want to use. Quartz MS gives me that nice “alarm clock / terminal” feeling, which fits the theme of the game really well, so I went with that.
Note: The sizes of the fonts, and the Point starts did not line up to what I originally tried to do in Paint.Net, so it required a lot of trial and error to get them right. This is one of the reasons that I included a preview on the main screen, so that I could adjust the numbers, run and preview, then adjust them again if something was off.
Since I want my font to be White text on the template, I define my brush using the built-in Brush.White.
The graphics.DrawString method allows me to draw a string directly on the bitmap image contained in the graphics file. Since it updates the Bitmap reference directly, we can then just return the new bitmap that we created. The Graphics library contains a lot of methods that are useful for drawing. You can draw other images, text, ellipses, rectangles. If you’re more artisticly inclined than I am, you could probably get a lot more leverage out of the Graphics library than I can.
Anyway… now that we have a method to put text on our templates, we have to tell the program what text we want and how many cards to create. This is the code for our CREATE STUFF button.
private void btnCreate_Click(object sender, EventArgs e)
{
//Loop through the numbers and create the images, and then save them
var savedImagesDirectory = @"C:\Users\Alex\Desktop\Board and Card Games\Bit Shift\Cards\PNG Files\";
for (short i = 0; i < 256; i++)
{
var numAsBinaryString = GetShortBinaryString(i);
if (numAsBinaryString.Where(c => c == '0').Count() == 4)
{
var newImage = DrawImage(baseImage, numAsBinaryString);
newImage.Save(savedImagesDirectory + "Bit_Shift_" + i.ToString().PadLeft(3, '0') + ".png", System.Drawing.Imaging.ImageFormat.Png);
}
}
}
When clicked, the button will loop through all of the numbers between 0 and 255, get their binary string representation, and then create and save the images in the specified directory, with a name based on the number it represents.
Since it turns out that having 256 cards for all combinations was not only too expensive, but did not really make the game too fun, I trimmed down the automated process to only output numbers that contained 4 0’s and 4 1’s in their binary string. I then further cut them down and tried to remove ones that had all 4 0’s or 4 1’s all in a row.
The Image class contains a Save method that allows you to save it in any of the supported formats.
The following is a function that I found on the Internet that I adapted to meet my needs. It takes a number and converts it to a binary string. The original version was 32 bit, but I only needed 8-bit for my purposes. (While trying to remember where I got it to credit the Author, I found additional articles with much easier ways to do this… but still) Credit to the Author:
static string GetShortBinaryString(short n)
{
char[] b = newchar[8];
int pos = 7;
int i = 0;
while (i < 8)
{
if ((n & (1 << i)) != 0)
{
b[pos] = '1';
}
else
{
b[pos] = '0';
}
pos--;
i++;
}
returnnewstring(b);
}
The final piece of the application is to display a preview of the card on the screen before it gets printed. I put this in the form initialization method. I was originally having some troubles so I put in additional debug information into a label on the screen as well.
public frmMain()
{
InitializeComponent();
var previewImage = DrawImage(baseImage, "01010101");
pbxPreview.Image = previewImage;
pbxPreview.Height = previewImage.Height;
pbxPreview.Width = previewImage.Width;
imgInfo.Text = string.Format("Height: {0}, Width: {1}, PhysicalDimHeight: {2}, PhysicalDimWidth: {3}",
baseImage.Height, baseImage.Width, baseImage.PhysicalDimension.Height, baseImage.PhysicalDimension.Width);
}
When the application loads up, it should load up the template, create an image based on the “01010101” string, and then output it into my Picture Box on the screen to preview. Having the preview was invaluable to getting and tweaking the values for the line1start and line2start values in my DrawImage method.
When the application starts it looks like this: It shows our template with our sample text on it along with some property information. Once it looks good, I know I’m good to click the button.
Once the button has been created, the program does its thing and VOILA! Cards.
Since I had to recreate the cards a few times based on different template styles, the time it took me to develop the application was nowhere near the time it would have taken me to adjust all of the images every time I wanted to make a template change.
Next step is to upload them to TheGameCrafter and proof them. I’m currently in the process of creating a .Net wrapper around the TheGameCrafter API, but that is a work in progress and has no estimated completion date.
Questions, comments, praise, or other musings can be sent to Wolfpack.Studios.PA@Gmail.com
If you’re interested in Bit Shift, you can find the link to it on TheGameCrafter