Every card game has its own rules, but there are some basics that they all include. One of the most important things is that cards are drawn from a deck of 52 cards, and each drawn card is unique. So before we can figure out all the rules a card game needs to follow, we first need to figure out how we’ll event that rule.

For this tutorial I’ll be using Caz’s Pixel Fantasy Playing Cards, but you can use your own set of playing card images and it should work the same. Since MZ now lets us use subfolders in our image folders, we can store our card images in one to make it easy to find them all.

We do want to make sure that each card’s name includes its suit and its number to help us choose the right picture later on, so make sure that your cards have a consistent naming system, like your ace of diamonds being named “card-diamond-1”.

Flipping a Card

But before we get into choosing random cards, let’s take a look at how we can make the reveal more interesting by having the card flip over. The basic movement for flipping a card is pretty simple, we need to first show the back of the card as an image and then use the move picture command to change its Width to 0%. That makes the image shrink in on itself, which our brains read as the card turning from being flat to having its side facing us.

Once the card is ‘sideways’, we need to change the picture to the face of the card. But we need to make sure that we keep the Width at 0% so that the card doesn’t just pop into position, and then use another move picture command to change the Width to 100% to make the card finish flipping.

When we put those together, we end up with an event that looks like this:

And shows a nice flip effect in-game:

This simple flip effect can be perfect for a ‘guess the card’ game or revealing tarot cards, but only if we know what card is going to appear. To add some randomness to the card drawn, we need to make use of variables.

Drawing a Hand

Picking 5 different cards to make up a hand seems pretty straightforward: we need to have a random variable choose a card and then have that card shown with a picture. But if you’ve ever played around with random variables, you know that it’s possible for the variable to choose the same number over and over and over… Which means that we need to figure out a way to keep track of which cards have already been chosen to avoid picking them again. There are a few ways we could do that, but for this tutorial let’s use arrays to store all the chosen cards in a variable.

To start the 5-card draw event, we need to set 2 variables to be empty arrays, by putting [] in each variables script section. I also decided to make a simple play area appear in the background so that the cards are easy to see.

Next, we need to actually pick a card. We’ll do that by calling a common event that stores the ‘draw a card’ eventing so that we can use it wherever we want. Once that common event runs, we can also add the chosen card to the player hand variable array with a script call.

The ‘draw a card’ common event can be broken into three parts: picking the suit and card number, combining the suit and number, and then checking if that suit and number has already been picked.

Picking the suit and card number is done with 2 variables, one for each. We’ll set the suit variable to pick a random number between 1 and 4, and then use conditional branches to change that variable to the word "clubs", "diamonds", "hearts", or "spades" using the script section. While we could leave it as just a number, it’s easier to compare and check for issues if the actual card suits are visible right in the variable.

The number variable is simpler, just picking a random number between 1 and 13.

With our suit and number picked, we can move to the next part of the event and combine the two into a single variable by using $gameVariables.value(6) + "-" + $gameVariables.value(7) in the variable script section.

Now that the card’s full info is ready, we can check to make sure it hasn’t already been drawn from the deck. The way we’ll be doing that is by checking if the ‘cards drawn from deck’ variable array contains that card. If the card is included in that array, then that means the card was already drawn and we need to rerun the card pick (which we can do by jumping to a label at the start of the common event). If the card isn’t in the array, then we can use that card without worrying about it being a duplicate.

To check if our chosen card is already in the variable array, we’ll use the script call $gameVariables.value(8).includes($gameVariables.value(6)) in a conditional branch, where $gameVariables.value(8) is our ‘cards drawn’ variable and $gameVariables.value(6) is our chosen card variable. If our chosen card isn’t already in the variable, then we can wrap up the common event with one last thing: adding that new card to the ‘cards drawn’ variable array. To do that, we’ll use the .push method to add it to the end of the array in the script call $gameVariables.value(8).push($gameVariables.value(6)); . Now that the card’s info has been added to the array, it can’t be chosen again until the array is cleared (such as at the start of a new game of cards).

Once we put those three parts together, our common event is ready to pick out a new card every time.

Back to our hand drawing event, now that we have a chosen card we need to have it appear on the screen. We could use the default show picture command, but since there are 52 possible cards that would require a ton of extra conditional branches to make sure the right card picture is shown. So instead, let’s use another script call to make our lives easier.

The script call to show a picture is $gameScreen.showPicture(pictureId, name, origin, x, y, scaleX, scaleY, opacity, blendMode) . The pictureId, x, and y options all depend on where you want your card to appear on the screen, so choose those based on your game’s resolution. It’s the name option that we really want to focus on, since we can use our chosen card variable in it to make sure we show the right picture. Our cards are tucked into their subfolder, so we also need to make sure to include that, meaning that we need to use ("Cards/card-" + $gameVariables.value(6)) as the name to have it find the picture. So if our variable 6 happened to be “diamonds-5”, then the engine would show the card “card-diamonds-5” it found in the “Cards” picture subfolder.

So to show our chosen card with the script call, we’d write it out as: $gameScreen.showPicture(10, ("Cards/card-" + $gameVariables.value(6)), 1, 432, 312, 100, 100, 255, 0) .

Of course, this only shows the first card in the hand, and we want 5 cards by the end of this. We also don’t want the card pictures to stack right on top of each other, so we need to include a way to check which card we’re picking and put it in a different spot than the one before it. Which we can do with a conditional branch to check the .length of the player hand variable array (we added to that array right after the card draw common event) to figure out which card we’re on. So if the length is 1, we know we’re on the first card, and if it’s 4, then we are on the fourth card. We can do that with the script call $gameVariables.value(9).length == N, with N being the number we want to check.

Then we just need to set up a conditional branch for each of the 5 cards.

After we’ve gotten all 5 of our card conditional branches set up, we need to check if our hand has 5 cards in it or not. A conditional branch with the script call $gameVariables.value(9).length < 5 can tell us if the player hand has less than 5 cards or not, and if it doesn’t then we can jump to the start of the event to pick the next card for the hand.

Once we’ve got the 5 cards in the player’s hand, we’re done! So we could move onto the actual card game at this point, though for this tutorial we’ll just have a message that shows us the cards drawn variable and player hand variable, so that we can make sure both match. Once we’re done with our cards, we need to erase all the pictures we used, either with the default command or the script call for (var i = min; i< max+1; i++){ $gameScreen.erasePicture(i); } . And with that, we’re ready to wrap this event up!

All together, our event becomes this:

And in-game our player’s hand appears like so:

Now that we can draw unique cards for our player, let’s take a look at how we can expand on that.

Drawing Hands for the Player and Dealer

Most card games are against others, so how about we go over drawing a hand for both the player and dealer at the same time? And let’s also add in a flip effect as the cards are drawn.

A lot of what we did in the single-hand draw event will be repeated in this event, so we’ll skip over certain parts like drawing a card. A major addition at the start of the event is another variable array: the ‘cards in dealer hand’ variable, so that we’ll know exactly what our dealer is holding.

After setting up the play area picture we can begin drawing cards, starting with the player. If we want the card to move from the top of the deck to the player’s hand, we’ll need to place a picture of a card’s back on the deck that we can move in a moment (the card number doesn’t matter, I chose 25 because it’s outside of the range of ids I used for the player and dealer’s hand images). To keep the event easy to read (and since we probably want to be able to draw the player’s hand in multiple events), let’s put the show picture commands in a common event.

In the ‘add to player’s hand’ common event, we’ll need similar conditional branches and script calls as we used above. But we’ll also include the script call to add to the player’s hand variable array at the start of the common event, as well as some move picture commands.

Much like how we flipped a card at the start of this tutorial, we need to change the card back’s Width to 0% as it moves into place. Then we can use the show picture script call for the chosen card, though this time making sure the ScaleX (which is Width) is set to 0 so that when we move it and set its Width to 100% it properly flips over.

Of course, we need to set up a conditional branch for all 5 cards. When the player’s part is done, we can move on to the dealer’s section which is very similar. We just need to use another common event so that the dealer’s hand will appear in a different spot. And once the dealer has a card added to their hand, we can check their variable array to see if they have 5 cards (since they go second, if they have 5 cards then our player has 5 cards) and if we can move on.

The dealer’s common event also starts with a script call, though this one adds the card to the dealer’s hand variable array. For this example we have the dealer’s card also flipping over so that we can double-check that everything is working properly, but if we wanted to hide the dealer’s card then we could remove the parts where the card flips and just show the card back picture.

As with our player’s hand common event, we need to add branches for all 5 cards the dealer will draw.

And with that, our 2-hand draw event is finished.

In-game, we can see all 10 cards get drawn from the deck. If we wanted to add in extra hands, we’d just need to set up more opponents ‘add to hand’ common events so that their hands could also appear in the game...

Now that we know the basics of drawing a card from a deck, how could you use this in your games? Would you make a fortune teller who uses tarot cards, or set up some poker tables in your game’s casino?

‍