SpriteKit: Exchanging image on tap?

App Development
1

Hey, coders. I am a beginner/intermediate coder, just learning SpriteKit. I am making an addition/subtraction game for my Kindergarten students that involves a playing card that needs to be changed on tap. I can do this in UIKit, but I want to do this with sprites since the rest of the game is developed in SpriteKit. I can’t find an action that does what I want: an animation with texture is the closest, but that doesn’t cut it exactly because on tap down the card returns to its normal state, and the cards are not selected randomly.

A card says ‘5-3’, students answer and move game piece. Next student must tap the card to change. I will need this action to select a random card. Can anyone point me in the right direction?

Sincerely,
Karrin Burns

2

Hi Karrin,

Welcome to the Code Crew community.

I’ve had a little experience with SpriteKit so I’ll try and help.

Are the cards that you are displaying on screen an image with the math question as part of the image or are you overlaying text onto a background which provides the math question?

3

Thank you, and sorry for the delay. Here is a photo of my game scene. What I would like to do is make the card (sprite) change to a random card on tap. What I learned from the UIKit war game app was to assign each card a number, then the onTap action would assign a random card.
@IBAction func dealButton(_ sender: Any) {

    let leftNumber = Int.random(in: 2...14)
    let rightNumber = Int.random(in: 2...14)
    
    leftCard.image = UIImage(named: "card\(leftNumber)")
    rightCard.image = UIImage(named: "card\(rightNumber)")

I can’t figure out how to do this with a sprite, though; and I am not clever enough yet to figure out how to integrate UIKit into my game.

Any ideas?

IMG_9645
IMG_96451611×888 148 KB

5

Sorry, forgot to answer your question: it is an image, not text overlay. However, I am not averse to doing a text overlay if it can select random expressions on tap (5 - 3, 10 - 5, 6 + 2, etc).

6

If you have gone to the trouble of creating a series of cards with a math challenge on each then it’s straightforward to use them via an SKSpriteNode.

The other alternative is to have a blank card in position and overlay that with an SKLabelNode which you change randomly. You could have an array of math challenges like:

let mathArray = ["5 - 3", "10 - 5", "6 + 2".....]

and then select an item like this:

let currentItem = mathArray.randomElement()

That would be displayed over the top of the blank card which is the item that is tappable.

1 Like
7

This may also be helpful if you want to create the numbers randomly

                leftCard = Int.random(in: 0...10)
                rightCard = Int.random(in: 0...10)
                opCard = ["+","-"].randomElement()!

Though if your question is how do you add text to a SKSpriteNode. it is something like this

I did this last year in UIKit. Not sure how it differs if you decide to do it in swiftUI.

// create a label node
let myLabel1 = SKLabelNode(fontNamed:"Helvetica")
 myLabel1.text = String(10)
 yLabel1.name = "intLabel"
myLabel1.fontSize = 40;
 yLabel1.zPosition = 1;
 myLabel1.fontColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)

let card = SKSpriteNode(imageNamed: "NameOfBlankCardImage")
card.position = CGPoint(x: 1024/2, y: 768/2)  // you will need to figure out the correct position here
card.addChild(myLabel1)

I plan on remaking the game I made in swiftUI as practice here in the near future. It works to attach it directly to the SKSpriteNode.

1 Like
8

That is great! Thank you! I am going to try your idea with an SKLabelNode.

9

Thank you, too! I like this idea, as well.

10

@Chris_Parker this works great! Thank you so much. I didn’t even think of using SKLabelNode. I appreciate your input and expertise!