Wednesday, August 12, 2015

SKSpriteKit: How to fill SKScene background with a Texture? (Code Snippet)

Yo guys.

Just submitted my latest iOS game. Check out the demo video here: FreakOut - Tribute to Breakout (iOS Game)

Anyways, I am updating one of my apps - Particle X to include the SpriteKit support. One thing that I need is to put a background texture to the SKScene background. In a normal UIView, we can simply specify self.view.backgroundColor = [UIColor colorWithPatternImage:yourUIImageHere]; and iOS will repeat that texture throughout the UIView. Which is cool.

But unfortunately there is no such method in SKScene. 


The simplest method, is to add a single big SKSpriteNode in the SKScene, behind everything else (you can do this by specifiying its .zPosition to something really negative like -1000). Big sprite, however eats memory.

A better way (I think), is to auto repeat smaller sprites instead. This way you will not have any problem across different iOS screen sizes and the pattern appears similar without being stretched when screen sizes are different.

BEHOLD!!!! CODESS!!!!!


  
    float totW = 0;
    float totH = 0;
    int i = 0;
    int j = 0;
   SKTexture *tile = [SKTexture textureWithImage:img]

    while (totH<[[UIScreen mainScreen] bounds].size.height) {
        
        if (totW>=[[UIScreen mainScreen] bounds].size.width) { totW = 0; i =0; }
        
        while (totW<[[UIScreen mainScreen] bounds].size.width) {
            SKSpriteNode *bg = [SKSpriteNode spriteNodeWithTexture:tile];
            bg.zPosition = -100;
            bg.position = CGPointMake(i*tile.size.width, j*tile.size.height);
            
            [myScene addChild:bg];
            i ++;
            totW += tile.size.width;
        }
        
        
        j ++;
        totH += tile.size.height;
    }

Note: img is your seamless texture image in UIImage format. You can load it by using UIImage *img = [UIImage imageNamed:@"tile.png"];. And myScene in the SKScene name.

Check out the result:
(iPhone 6 size)

(iPad 2 Size)

FYI: there is tile~ipad.png and there is tile@2x.png in the project - normal image assets arrangements.

There is no downloadable sample project in this post since it is just a simple code snippet. Have fun and use as you like.

2 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete