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.


    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.

Sunday, June 7, 2015

How To: SKLabelNode Border Outline Quick Hack

Hey guys.

Today I would like to share you a simple hack on SKLabelNode. Since it is a simple snippet, there will be no project to download.

I am making my latest game (FreakOut) and was in need of SKLabelNode with outline. There are some 3rd party codes but I just want a simple and quick hack for it. So I made up this method:


-(void)popMessage:(NSString *)str {

    CGFloat fSize = 30*_xMult;
    SKLabelNode *msgLabel = [SKLabelNode labelNodeWithFontNamed:kFontName];
    msgLabel.text = str;
    msgLabel.zPosition = 100;
    msgLabel.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
    msgLabel.fontSize = fSize;
    msgLabel.fontColor = [SKColor colorWithRed:1.0 green:0.3 blue:0.3 alpha:1.0];
    msgLabel.position = CGPointMake(_mySize.width/2.0, _mySize.height/2.0);
    [self addChild:msgLabel];
    SKAction *enlarge = [SKAction scaleTo:1.5 duration:0.8];
    SKAction *fadeOut = [SKAction fadeAlphaTo:0.5 duration:0.3];
    SKAction *remov = [SKAction removeFromParent];
    SKAction *doIt = [SKAction sequence:@[enlarge,fadeOut,remov]];
    [msgLabel runAction:doIt];

    // ourlines
    for (int i=1; i<=4; i++) {
        SKLabelNode *outline = [SKLabelNode labelNodeWithFontNamed:kFontName];
        outline.text = str;
        outline.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
        outline.fontSize = fSize;
        outline.fontColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
        if (i==1)  outline.position = CGPointMake(_mySize.width/2.0-2, _mySize.height/2.0+2);
        if (i==2)  outline.position = CGPointMake(_mySize.width/2.0+2, _mySize.height/2.0+2);
        if (i==3)  outline.position = CGPointMake(_mySize.width/2.0-2, _mySize.height/2.0-2);
        if (i==4)  outline.position = CGPointMake(_mySize.width/2.0+2, _mySize.height/2.0-2);
        [self addChild:outline];
        [outline runAction:doIt];

Ok. What I did was add another 4 SKLabelNode BEHIND the main label. Pretty crude but it works.
Positioning is important for each one.

The result:

Not bad eh? Feel free to use the code and improve upon it.
Related Posts Plugin for WordPress, Blogger...