# Card Game Mechanics in Sprite Kit with Swift

**URL:** <https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793>\
**Category:** 🎓 Courses & Articles\
**Created:** [July 1, 2016, 1:03pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793 "2016-07-01T13:03:10Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![bcbroom](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/bcbroom/32/110291_2.png) [@bcbroom](https://forums.kodeco.com/u/bcbroom)\
**Post date:** [July 1, 2016, 1:03pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/1 "2016-07-01T13:03:10Z")

</div>

Learn how to implement basic card game mechanics and animation with Sprite Kit and Swift.

* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/1062-card-game-mechanics-in-sprite-kit-with-swift](https://www.raywenderlich.com/1062-card-game-mechanics-in-sprite-kit-with-swift)

---

<div class="post-metadata">

**Author:** ![endodoug](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/endodoug/32/77531_2.png) [@endodoug](https://forums.kodeco.com/u/endodoug)\
**Post date:** [July 1, 2016, 1:11pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/2 "2016-07-01T13:11:58Z")

</div>

I’ve borrowed from this tutorial on several projects… there’s some really great stuff in here.

---

<div class="post-metadata">

**Author:** ![mirrordude](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mirrordude/32/79544_2.png) [@mirrordude](https://forums.kodeco.com/u/mirrordude)\
**Post date:** [July 1, 2016, 5:18pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/3 "2016-07-01T17:18:36Z")

</div>

I’ve been stuck on getting to the next step since the last version of this great tutorial … creating a Game State (or something) and having the cards implement even simple special powers such as forcing a draw or discard. I just can’t conceptually get my head around which objects should be sending messages and which should be listening to them and how to implement that. Should the scene be handling touches (as in this tutorial) ,or should the cards and then send them to the relevant objects, whether they be draw decks or discard locations. Does anyone have any resources they can recommend for next steps, or is anyone interested in conceptually working this out with me, either privately or in a public forum somewhere?

Maybe the next step to this tutorial series is a simple game like War that implements a game state including a full replay / undo stack, object messages and simple rules checking?

---

<div class="post-metadata">

**Author:** ![bcbroom](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/bcbroom/32/110291_2.png) [@bcbroom](https://forums.kodeco.com/u/bcbroom)\
**Post date:** [July 1, 2016, 5:55pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/4 "2016-07-01T17:55:37Z")

</div>

The original full sample game is at [https://bitbucket.org/bcbroom/ccg](https://bitbucket.org/bcbroom/ccg) (still in Obj C). Its not the cleanest implementation, but has turns, attacks, and special effects. It might give you some ideas.

---

<div class="post-metadata">

**Author:** ![geeksweep](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/geeksweep/32/104569_2.png) [@geeksweep](https://forums.kodeco.com/u/geeksweep)\
**Post date:** [July 5, 2016, 11:06pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/5 "2016-07-05T23:06:08Z")

</div>

i am having exploring SpriteKit again and wondering if a SKNode(or SKNode subclass) can render custom drawing? in other words if i want to draw shapes by hand in code and display those in a card - is that supported out of the box… i.e. instead of placing just pre-drawn images for the front and back. The initial answer might be, “well convert your drawings to an image” but what I would eventually like to do is take those shapes on a card (think of 2 or 3 on one card) and animate them independently (and go even further and have them react to hitting the edges of card with UIKit Dynamics etc)

The last time I went down this route I was dismayed to find out that unlike UIView subclasses, you cannot create SKNode subclasses that perform custom drawing. If thats still true… then there has to be a another way?

---

<div class="post-metadata">

**Author:** ![bcbroom](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/bcbroom/32/110291_2.png) [@bcbroom](https://forums.kodeco.com/u/bcbroom)\
**Post date:** [July 5, 2016, 11:27pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/6 "2016-07-05T23:27:05Z")

</div>

I’m not aware of anything like ‘drawRect’ for sprites. I think the best you can do is render it to an image and swap the texture.

I think you can do custom shaders now (have been out of SK for a little bit, just getting back in now), so I don’t know if that would help you. I don’t have any sense of what you can or can’t do with that.

---

<div class="post-metadata">

**Author:** ![geeksweep](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/geeksweep/32/104569_2.png) [@geeksweep](https://forums.kodeco.com/u/geeksweep)\
**Post date:** [July 6, 2016, 2:20am UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/7 "2016-07-06T02:20:05Z")

</div>

i just got something to render using SKShapeNode. I made a SKShapeNode like so:

```
self.buttonNode = [SKShapeNode shapeNodeWithRect:CGRectMake(300, 300, 100, 100) cornerRadius:8.0];
self.buttonNode.fillColor = [SKColor whiteColor];
self.buttonNode.strokeColor = [SKColor orangeColor];
self.buttonNode.lineWidth = 5.0;
//buttonNode.physicsBody =

self.circleNode = [SKShapeNode shapeNodeWithCircleOfRadius:20];
self.circleNode.fillColor = [SKColor greenColor];
self.circleNode.position = CGPointMake(self.buttonNode.frame.origin.x + 30, self.buttonNode.frame.origin.y + 50);

[self.buttonNode addChild:self.circleNode];
[self addChild:self.buttonNode];

```

this renders to the screen on my iPhone device just fine.

that apple dev link is here: [Apple Developer Documentation](https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKShapeNode_Ref/)

looks like you can create shapes made up of points or by using CGMutablePathRef (and I’m assuming BezierPath as well) as well as default stuff (like with my circle)

As you can see I’ve commented out the physics body part , but since this is a subclass of SKNode it looks like its available. You should be able to use here touchesBegan to identify the node touched as well. Unless I am mistaken you should be able to animate objects with the node as well using SKActions, etc.

I know in the past the SKShapeNode had some problems surrounding leaks/memory issues , etc and wasn’t well received. I am not sure what the state of that is now.

Thoughts?

---

<div class="post-metadata">

**Author:** ![kingstonlee](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/kingstonlee/32/38352_2.png) [@kingstonlee](https://forums.kodeco.com/u/kingstonlee)\
**Post date:** [August 5, 2016, 4:13pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/8 "2016-08-05T16:13:16Z")

</div>

Hey Brian,

Thanks for the awesome and thorough tutorial! I was following along and got stuck at the Tracking Damage section. I think there’s a typo with this:

`Then, add the following to the init(texture:color:size:) method, before the call to super.init(texture:color:size:)`

I believe **init(texture:color:size:) method** should actually be **init(cardType: CardType) method**.

Thanks again!

Kingston

---

<div class="post-metadata">

**Author:** ![bcbroom](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/bcbroom/32/110291_2.png) [@bcbroom](https://forums.kodeco.com/u/bcbroom)\
**Post date:** [August 8, 2016, 8:37pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/9 "2016-08-08T20:37:38Z")

</div>

I’m pretty sure the code is correct in the article - there are several `init` methods, though.

You add those lines inside `init(cardType:)`, but before `super.init(texture:color:size:)`. Does that help? You can also check the completed project files, if it would help to see it.

---

<div class="post-metadata">

**Author:** ![jont](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jont/32/50315_2.png) [@jont](https://forums.kodeco.com/u/jont)\
**Post date:** [December 3, 2016, 5:15pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/10 "2016-12-03T17:15:51Z")

</div>

One thing I needed to do was set a zPosition on the SKLabelNode. Otherwise, it appeared to sometimes put it behind the card texture. I’m not sure why.

---

<div class="post-metadata">

**Author:** ![dkliman](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/dkliman/32/69829_2.png) [@dkliman](https://forums.kodeco.com/u/dkliman)\
**Post date:** [January 1, 2017, 2:36pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/11 "2017-01-01T14:36:09Z")

</div>

I noticed that when the user drags the cards around too quickly, this app drops them.

I went to a few published apps, such as 1010, which involve dragging things, and I noticed that a good, polished app does not drop anything.

how would you correct your code so that no matter how fast the user drags, if they don’t lift up their finger, the card will stick to that finger forever?

your app supports multi-touch gestures, maybe by accident… how would you make the cards stick to each of the user’s fingers, in the case that a multitouch drag gesture was underway?

---

<div class="post-metadata">

**Author:** ![dkliman](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/dkliman/32/69829_2.png) [@dkliman](https://forums.kodeco.com/u/dkliman)\
**Post date:** [January 7, 2017, 8:36am UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/12 "2017-01-07T08:36:49Z")

</div>

OK, it’s been a week with no reply, but I went further and discovered another bug which is if the user is dragging a card and their finger gets away from the card, it will just sit there, jiggling without moving… if the still dragging finger touches one of the other cards, it will be picked up and moved…

that doesn’t seem like desirable behavior…

hoping to hear about bug fixes for these problems…

---

<div class="post-metadata">

**Author:** ![bcbroom](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/bcbroom/32/110291_2.png) [@bcbroom](https://forums.kodeco.com/u/bcbroom)\
**Post date:** [January 7, 2017, 3:34pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/13 "2017-01-07T15:34:12Z")

</div>

There are several ways to do touch handling. I picked the one I did for the article for simplicity. It fails when moving quickly because by the time the touch event comes in, your finger has moved outside the bounds of the card.

Another way would be to do the selection part only in touchesBegin, and save that card as a property in the scene, like movingCard. Then in touches moved, you change the card position. One downside to this is that you need to remember to clear the saved card in touchesEnd.

---

<div class="post-metadata">

**Author:** ![dkliman](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/dkliman/32/69829_2.png) [@dkliman](https://forums.kodeco.com/u/dkliman)\
**Post date:** [January 8, 2017, 2:03am UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/14 "2017-01-08T02:03:32Z")

</div>

I see. So how would that go with multitouch? I can imagine an array holding all the moving objects but am unsure how I would keep each one with their original finger…

One gripe I have with a lot of these tutorials is they teach some basic version of code that actually would never be practical in a real world sense.

It’s like recipes for cooking… I’d rather know how to make the very best food and be the one to worry if it’s simple. Without showing the most robust, real world, optimized way to go about everything, how else is anybody going to learn how to be a world class programmer?

---

<div class="post-metadata">

**Author:** ![mahoney](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mahoney/32/53908_2.png) [@mahoney](https://forums.kodeco.com/u/mahoney)\
**Post date:** [January 9, 2017, 3:23am UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/15 "2017-01-09T03:23:29Z")

</div>

🍔 Thank you for the tutorial 🍔

i think theres a little error in the first approach to the **card.swift** file in the line:

> super.init(texture: frontTexture, color: .clearColor(), size: frontTexture.size())

**.clearColor()** doesnt exist. In the final project you changed it for **.clear** and that works.

---

<div class="post-metadata">

**Author:** ![weera](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/weera/32/60338_2.png) [@weera](https://forums.kodeco.com/u/weera)\
**Post date:** [March 16, 2017, 7:53am UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/16 "2017-03-16T07:53:43Z")

</div>

Thank you very much for the Card Implementation, I have a little question, as in normal card game , if I want to select my card and place it on the table (limit to a area) , how can I do that ? currently I can move my card to anywhere , what I want is , move my card to specific area , if the card is not in that area , my card should move back to my original location. else my card should stay within that area. Can anyone please suggest ? thanks

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [November 15, 2017, 9:50pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/17 "2017-11-15T21:50:23Z")

</div>

This tutorial is more than six months old so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [November 15, 2017, 9:50pm UTC](https://forums.kodeco.com/t/card-game-mechanics-in-sprite-kit-with-swift/16793/18 "2017-11-15T21:50:25Z")

</div>