SpriteKit partial texture mapping

Question

Is it possible to create a SKSpriteNode that displays only a part of a texture?

For example, can I create a square with size 100x100 displaying the specific region of a texture of size 720x720 like from x1=300 to x2=400 and y1=600 to y2=700?
Thanks for your help.

You can do this with SKCropNode : https://developer.apple.com/reference/spritekit/skcropnode — Whirlwind, Jan 19 '17 at 08:21
do you want the entire sprites body to display the full texture, or do you want a sprite with a full texture only display a part of the sprite body? — Knight0fDragon, Jan 19 '17 at 14:38
What I am trying to do is a puzzle game; get a texture and create squares from this texture each displaying different parts of the texture. — Aykut Ucar, Jan 19 '17 at 14:49

score 4 · Answer 1 · answered Jan 19 '17 at 10:52

Try something like this:

import SpriteKit
import GameplayKit

class GameScene: SKScene {

   let visibleArea = SKSpriteNode(color: .black, size: CGSize(width:100,height:100))

   let parentNode = SKSpriteNode(color: .white, size: CGSize(width:200, height:200))

    override func didMove(to view: SKView) {

        let cropNode = SKCropNode()

        let texture = SKSpriteNode(imageNamed: "Spaceship")

        visibleArea.position = CGPoint(x: 0, y: 100)
        cropNode.maskNode = visibleArea

        cropNode.addChild(texture)

        addChild(cropNode)


    }


    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {

            let location = touch.location(in: self)

            let previousPosition = touch.previousLocation(in: self)

                let translation = CGPoint(x: location.x - previousPosition.x , y: location.y - previousPosition.y )

                visibleArea.position = CGPoint(x: visibleArea.position.x + translation.x , y: visibleArea.position.y + translation.y)
        }
    }
}

Overriden touchesMoved method is there just because of better example. What I did here, is:

created SKCropNode
added a texture to it which will be masked
defined visible area which is SKSpriteNode and assigned it to crop node's mask property, which actually does the magic

Here is the result:

I know I have to avoid commands like this but I have to say it; thanks so much! — Aykut Ucar, Jan 19 '17 at 14:39
I tried it but couldn't make it work. Still thanks though since I learned to use cropping while testing this. — Aykut Ucar, Jan 19 '17 at 19:57
Thanks a lot. It can also be implemented as a common ScrollView. — sakiM, Oct 07 '18 at 12:37

score 4 · Accepted Answer · answered Jan 19 '17 at 16:24

4

If you want to break up a texture into smaller chunks of textures to be used as puzzle pieces, then you want to use SKTexture(rect: in texture:)

Here is an example of how to use it:

let texture = SKTexture(...)  //How ever you plan on getting main texture
let subTextureRect = CGRect(x:0,y:0.width:10,height:10) // The actual location and size of where you want to grab the sub texture from main texture
let subTexture = SKTexture(rect:subTextureRect, in:texture);

You now have a chunk of the sub texture to use in other nodes.

answered Jan 19 '17 at 16:24

Knight0fDragon

16,609
2
23
44

1

Thank you! It worked nicely after modifying the rect values. These posts helped too. http://stackoverflow.com/questions/30228104/what-is-happening-to-my-sprite-when-using-initrectintexture. http://stackoverflow.com/questions/21874822/trying-to-use-only-a-portion-of-a-sktexture-using-texturewithrect-intexture. – Aykut Ucar Jan 19 '17 at 19:54

SpriteKit partial texture mapping

2 Answers2