Cards¶
In this chapter we will begin implementing the most visible component in the
game – the Card component, which corresponds to a single real-life card.
There will be 52 Card objects in the game.
Each card has a rank (from 1 to 13, where 1 is an Ace, and 13 is a King) and a suit (from 0 to 3: hearts ♥, diamonds ♦, clubs ♣, and spades ♠). Also, each card will have a boolean flag faceUp, which controls whether the card is currently facing up or down. This property is important both for rendering, and for certain aspects of the gameplay logic.
The rank and the suit are simple properties of a card, they aren’t components,
so we need to make a decision on how to represent them. There are several
possibilities: either as a simple int, or as an enum, or as objects. The
choice will depend on what operations we need to perform with them. For the
rank, we will need to be able to tell whether one rank is one higher/lower than
another rank. Also, we need to produce the text label and a sprite corresponding
to the given rank. For suits, we need to know whether two suits are of different
colors, and also produce a text label and a sprite. Given these requirements,
I decided to represent both Rank and Suit as classes.
Suit¶
Create file suit.dart and declare an @immutable class Suit there, with no
parent. The @immutable annotation here is just a hint for us that the objects
of this class should not be modified after creation.
Next, we define the factory constructor for the class: Suit.fromInt(i). We
use a factory constructor here in order to enforce the singleton pattern for
the class: instead of creating a new object every time, we are returning one
of the pre-built objects that we store in the _singletons list:
factory Suit.fromInt(int index) {
assert(index >= 0 && index <= 3);
return _singletons[index];
}
After that, there is a private constructor Suit._(). This constructor
initializes the main properties of each Suit object: the numeric value, the
string label, and the sprite object which we will later use to draw the suit
symbol on the canvas. The sprite object is initialized using the
klondikeSprite() function that we created in the previous chapter:
Suit._(this.value, this.label, double x, double y, double w, double h)
: sprite = klondikeSprite(x, y, w, h);
final int value;
final String label;
final Sprite sprite;
Then comes the static list of all Suit objects in the game. Note that we
define it as late, meaning that it will be only initialized the first time
it is needed. This is important: as we seen above, the constructor tries to
retrieve an image from the global cache, so it can only be invoked after the
image is loaded into the cache.
static late final List<Suit> _singletons = [
Suit._(0, '♥', 1176, 17, 172, 183),
Suit._(1, '♦', 973, 14, 177, 182),
Suit._(2, '♣', 974, 226, 184, 172),
Suit._(3, '♠', 1178, 220, 176, 182),
];
The last four numbers in the constructor are the coordinates of the sprite
image within the spritesheet klondike-sprites.png. If you’re wondering how I
obtained these numbers, the answer is that I used a free online service
spritecow.com – it’s a handy tool for locating sprites within a spritesheet.
Lastly, I have simple getters to determine the “color” of a suit. This will be needed later when we need to enforce the rule that cards can only be placed into columns by alternating colors.
/// Hearts and Diamonds are red, while Clubs and Spades are black.
bool get isRed => value <= 1;
bool get isBlack => value >= 2;
Rank¶
The Rank class is very similar to Suit. The main difference is that Rank
contains two sprites instead of one, separately for ranks of “red” and “black”
colors. The full code for the Rank class is as follows:
import 'package:flame/components.dart';
import 'package:flame/flame.dart';
import 'package:flutter/foundation.dart';
@immutable
class Rank {
factory Rank.of(int value) {
assert(value >= 1 && value <= 13);
return _singletons[value - 1];
}
Rank._(
this.value,
this.label,
double x1,
double y1,
double x2,
double y2,
double w,
double h,
) : redSprite = klondikeSprite(x1, y1, w, h),
blackSprite = klondikeSprite(x2, y2, w, h);
final int value;
final String label;
final Sprite redSprite;
final Sprite blackSprite;
static late final List<Rank> _singletons = [
Rank._(1, 'A', 335, 164, 789, 161, 120, 129),
Rank._(2, '2', 20, 19, 15, 322, 83, 125),
Rank._(3, '3', 122, 19, 117, 322, 80, 127),
Rank._(4, '4', 213, 12, 208, 315, 93, 132),
Rank._(5, '5', 314, 21, 309, 324, 85, 125),
Rank._(6, '6', 419, 17, 414, 320, 84, 129),
Rank._(7, '7', 509, 21, 505, 324, 92, 128),
Rank._(8, '8', 612, 19, 607, 322, 78, 127),
Rank._(9, '9', 709, 19, 704, 322, 84, 130),
Rank._(10, '10', 810, 20, 805, 322, 137, 127),
Rank._(11, 'J', 15, 170, 469, 167, 56, 126),
Rank._(12, 'Q', 92, 168, 547, 165, 132, 128),
Rank._(13, 'K', 243, 170, 696, 167, 92, 123),
];
}
Card component¶
Now that we have the Rank and the Suit classes, we can finally start
implementing the Card component. Create file components/card.dart and
declare the Card class extending from the PositionComponent:
class Card extends PositionComponent {}
The constructor of the class will take integer rank and suit, and make the
card initially facing down. Also, we initialize the size of the component to
be equal to the cardSize constant defined in the KlondikeGame class:
Card(int intRank, int intSuit)
: rank = Rank.fromInt(intRank),
suit = Suit.fromInt(intSuit),
_faceUp = false,
super(size: KlondikeGame.cardSize);
final Rank rank;
final Suit suit;
bool _faceUp;
The _faceUp property is private (indicated by the underscore) and non-final,
meaning that it can change during the lifetime of a card. We should create some
public accessors and mutators for this variable:
bool get isFaceUp => _faceUp;
void flip() => _faceUp = !_faceUp;
Lastly, let’s add a simple toString() implementation, which may turn out to
be useful when we need to debug the game:
@override
String toString() => rank.label + suit.label; // e.g. "Q♠" or "10♦"
Before we proceed with implementing the rendering, we need to add some cards
into the game. Head over to the KlondikeGame class and add the following at
the bottom of the onLoad method:
final random = Random();
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 4; j++) {
final card = Card(random.nextInt(13) + 1, random.nextInt(4))
..position = Vector2(100 + i * 1150, 100 + j * 1500)
..addToParent(world);
if (random.nextDouble() < 0.9) { // flip face up with 90% probability
card.flip();
}
}
}
This snippet is a temporary code – we will remove it in the next chapter – but for now it lays down 28 random cards on the table, most of them facing up.
Rendering¶
In order to be able to see a card, we need to implement its render() method.
Since the card has two distinct states – face up or down – we will
implement rendering for these two states separately. Add the following methods
into the Card class:
@override
void render(Canvas canvas) {
if (_faceUp) {
_renderFront(canvas);
} else {
_renderBack(canvas);
}
}
void _renderFront(Canvas canvas) {}
void _renderBack(Canvas canvas) {}
renderBack()¶
Since rendering the back of a card is simpler, we will do it first.
The render() method of a PositionComponent operates in a local coordinate
system, which means we don’t need to worry about where the card is located on
the screen. This local coordinate system has the origin at the top-left corner
of the component, and extends to the right by width and down by height
pixels.
There is a lot of artistic freedom in how to draw the back of a card, but my implementation contains a solid background, a border, a flame logo in the middle, and another decorative border:
void _renderBack(Canvas canvas) {
canvas.drawRRect(cardRRect, backBackgroundPaint);
canvas.drawRRect(cardRRect, backBorderPaint1);
canvas.drawRRect(backRRectInner, backBorderPaint2);
flameSprite.render(canvas, position: size / 2, anchor: Anchor.center);
}
The most interesting part here is the rendering of a sprite: we want to
render it in the middle (size/2), and we use Anchor.center to tell the
engine that we want the center of the sprite to be at that point.
Various properties used in the _renderBack() method are defined as follows:
static final Paint backBackgroundPaint = Paint()
..color = const Color(0xff380c02);
static final Paint backBorderPaint1 = Paint()
..color = const Color(0xffdbaf58)
..style = PaintingStyle.stroke
..strokeWidth = 10;
static final Paint backBorderPaint2 = Paint()
..color = const Color(0x5CEF971B)
..style = PaintingStyle.stroke
..strokeWidth = 35;
static final RRect cardRRect = RRect.fromRectAndRadius(
KlondikeGame.cardSize.toRect(),
const Radius.circular(KlondikeGame.cardRadius),
);
static final RRect backRRectInner = cardRRect.deflate(40);
static late final Sprite flameSprite = klondikeSprite(1367, 6, 357, 501);
I declared these properties as static because they will all be the same across all 52 card objects, so we might as well save some resources by having them initialized only once.
renderFront()¶
When rendering the face of a card, we will follow the standard card design: the rank and the suit in two opposite corners, plus the number of pips equal to the rank value. The court cards (jack, queen, king) will have special images in the center.
As before, we begin by declaring some constants that will be used for rendering. The background of a card will be black, whereas the border will be different depending on whether the card is of a “red” suit or “black”:
static final Paint frontBackgroundPaint = Paint()
..color = const Color(0xff000000);
static final Paint redBorderPaint = Paint()
..color = const Color(0xffece8a3)
..style = PaintingStyle.stroke
..strokeWidth = 10;
static final Paint blackBorderPaint = Paint()
..color = const Color(0xff7ab2e8)
..style = PaintingStyle.stroke
..strokeWidth = 10;
Next, we also need the images for the court cards:
static late final Sprite redJack = klondikeSprite(81, 565, 562, 488);
static late final Sprite redQueen = klondikeSprite(717, 541, 486, 515);
static late final Sprite redKing = klondikeSprite(1305, 532, 407, 549);
Note that I’m calling these sprites redJack, redQueen, and redKing. This
is because, after some trial, I found that the images that I have don’t look
very well on black-suit cards. So what I decided to do is to take these images
and tint them with a blueish hue. Tinting of a sprite can be achieved by
using a paint with colorFilter set to the specified color and the srcATop
blending mode:
static final blueFilter = Paint()
..colorFilter = const ColorFilter.mode(
Color(0x880d8bff),
BlendMode.srcATop,
);
static late final Sprite blackJack = klondikeSprite(81, 565, 562, 488)
..paint = blueFilter;
static late final Sprite blackQueen = klondikeSprite(717, 541, 486, 515)
..paint = blueFilter;
static late final Sprite blackKing = klondikeSprite(1305, 532, 407, 549)
..paint = blueFilter;
Now we can start coding the render method itself. First, draw the background and the card border:
void _renderFront(Canvas canvas) {
canvas.drawRRect(cardRRect, frontBackgroundPaint);
canvas.drawRRect(
cardRRect,
suit.isRed ? redBorderPaint : blackBorderPaint,
);
}
In order to draw the rest of the card, I need one more helper method. This
method will draw the provided sprite on the canvas at the specified place (the
location is relative to the dimensions of the card). The sprite can be
optionally scaled. In addition, if flag rotate=true is passed, the sprite
will be drawn as if it was rotated 180º around the center of the card:
void _drawSprite(
Canvas canvas,
Sprite sprite,
double relativeX,
double relativeY, {
double scale = 1,
bool rotate = false,
}) {
if (rotate) {
canvas.save();
canvas.translate(size.x / 2, size.y / 2);
canvas.rotate(pi);
canvas.translate(-size.x / 2, -size.y / 2);
}
sprite.render(
canvas,
position: Vector2(relativeX * size.x, relativeY * size.y),
anchor: Anchor.center,
size: sprite.srcSize.scaled(scale),
);
if (rotate) {
canvas.restore();
}
}
Let’s draw the rank and the suit symbols in the corners of the card. Add the
following to the _renderFront() method:
final rankSprite = suit.isBlack ? rank.blackSprite : rank.redSprite;
final suitSprite = suit.sprite;
_drawSprite(canvas, rankSprite, 0.1, 0.08);
_drawSprite(canvas, rankSprite, 0.1, 0.08, rotate: true);
_drawSprite(canvas, suitSprite, 0.1, 0.18, scale: 0.5);
_drawSprite(canvas, suitSprite, 0.1, 0.18, scale: 0.5, rotate: true);
The middle of the card is rendered in the same manner: we will create a big switch statement on the card’s rank, and draw pips accordingly. The code below may seem long, but it is actually quite repetitive and consists only of drawing various sprites in different places on the card’s face:
switch (rank.value) {
case 1:
_drawSprite(canvas, suitSprite, 0.5, 0.5, scale: 2.5);
break;
case 2:
_drawSprite(canvas, suitSprite, 0.5, 0.25);
_drawSprite(canvas, suitSprite, 0.5, 0.25, rotate: true);
break;
case 3:
_drawSprite(canvas, suitSprite, 0.5, 0.2);
_drawSprite(canvas, suitSprite, 0.5, 0.5);
_drawSprite(canvas, suitSprite, 0.5, 0.2, rotate: true);
break;
case 4:
_drawSprite(canvas, suitSprite, 0.3, 0.25);
_drawSprite(canvas, suitSprite, 0.7, 0.25);
_drawSprite(canvas, suitSprite, 0.3, 0.25, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.25, rotate: true);
break;
case 5:
_drawSprite(canvas, suitSprite, 0.3, 0.25);
_drawSprite(canvas, suitSprite, 0.7, 0.25);
_drawSprite(canvas, suitSprite, 0.3, 0.25, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.25, rotate: true);
_drawSprite(canvas, suitSprite, 0.5, 0.5);
break;
case 6:
_drawSprite(canvas, suitSprite, 0.3, 0.25);
_drawSprite(canvas, suitSprite, 0.7, 0.25);
_drawSprite(canvas, suitSprite, 0.3, 0.5);
_drawSprite(canvas, suitSprite, 0.7, 0.5);
_drawSprite(canvas, suitSprite, 0.3, 0.25, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.25, rotate: true);
break;
case 7:
_drawSprite(canvas, suitSprite, 0.3, 0.2);
_drawSprite(canvas, suitSprite, 0.7, 0.2);
_drawSprite(canvas, suitSprite, 0.5, 0.35);
_drawSprite(canvas, suitSprite, 0.3, 0.5);
_drawSprite(canvas, suitSprite, 0.7, 0.5);
_drawSprite(canvas, suitSprite, 0.3, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.2, rotate: true);
break;
case 8:
_drawSprite(canvas, suitSprite, 0.3, 0.2);
_drawSprite(canvas, suitSprite, 0.7, 0.2);
_drawSprite(canvas, suitSprite, 0.5, 0.35);
_drawSprite(canvas, suitSprite, 0.3, 0.5);
_drawSprite(canvas, suitSprite, 0.7, 0.5);
_drawSprite(canvas, suitSprite, 0.3, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.5, 0.35, rotate: true);
break;
case 9:
_drawSprite(canvas, suitSprite, 0.3, 0.2);
_drawSprite(canvas, suitSprite, 0.7, 0.2);
_drawSprite(canvas, suitSprite, 0.5, 0.3);
_drawSprite(canvas, suitSprite, 0.3, 0.4);
_drawSprite(canvas, suitSprite, 0.7, 0.4);
_drawSprite(canvas, suitSprite, 0.3, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.3, 0.4, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.4, rotate: true);
break;
case 10:
_drawSprite(canvas, suitSprite, 0.3, 0.2);
_drawSprite(canvas, suitSprite, 0.7, 0.2);
_drawSprite(canvas, suitSprite, 0.5, 0.3);
_drawSprite(canvas, suitSprite, 0.3, 0.4);
_drawSprite(canvas, suitSprite, 0.7, 0.4);
_drawSprite(canvas, suitSprite, 0.3, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.2, rotate: true);
_drawSprite(canvas, suitSprite, 0.5, 0.3, rotate: true);
_drawSprite(canvas, suitSprite, 0.3, 0.4, rotate: true);
_drawSprite(canvas, suitSprite, 0.7, 0.4, rotate: true);
break;
case 11:
_drawSprite(canvas, suit.isRed? redJack : blackJack, 0.5, 0.5);
break;
case 12:
_drawSprite(canvas, suit.isRed? redQueen : blackQueen, 0.5, 0.5);
break;
case 13:
_drawSprite(canvas, suit.isRed? redKing : blackKing, 0.5, 0.5);
break;
}
And this is it with the rendering of the Card component. If you run the code
now, you would see four rows of cards neatly spread on the table. Refreshing
the page will lay down a new set of cards. Remember that we have laid these
cards in this way only temporarily, in order to be able to check that rendering
works properly.
In the next chapter we will discuss how to implement interactions with the cards, that is, how to make them draggable and tappable.