Adding a sprite without using textures

Mostly in a game, we add texture to our sprite, but we can also make a sprite without using textures. A texture property is an optional property in the SKSpriteNode class. If texture is nil, that means we have no texture to stretch, so the contract parameter is ignored. Let's open our GameScene.swift file and make a variable of SKSpriteNode, just below the backgroundNode declaration:

Now, with the preceding declaration, we have declared spriteWithoutTexture as optional. Since we have declared it optional, texture need not require a value. Now under didMoveToView, add following function:

After that, call this function inside didMoveToView(), below the addBackGround() function:

Now tap on play and see what happens. In our GameScene there is no change. Well that's not what we desire. Actually, we missed the z position of our texture. That's why it is rendering behind the background and not showing to us. Add this line in our addSpriteWithoutTexture() function, before addChild(spriteWithoutTexture!):

Run it. You will see a red square in the middle of the screen.

The code is self-explanatory. We made an instance of SKSpriteNode by instantiating it. We are passing nil as parameter for texture, meaning we don't want texture for this sprite. As we have made this sprite reference optional, we will have to unwrap it before using any SKSpriteNode properties, and we do so by using the ! mark after spriteWithoutTexture.

We can also initialize in another way. Delete the texture parameter from the initialization part:

Change the preceding initialization part as shown in the following:

Run the code and it will produce the same result as the previous one. It automatically assigns nil to texture, and initializes a sprite with a color and the specified bounds. Let's do something interesting with it.

Changing the color property

We are going to use color property to change color when a user taps on this sprite. For this, first give a name to spriteWithoutTexture, so that we can recognize a tap on it:

Add the following function in the GameScene.swift file to change color, as shown in the following code:

Now, we use the touchesBegan function to detect touch by a user (as it was used previously in the MenuScene class):

Now, after running Xcode, click on the colorful area in GameScene. You will see that area changing its color.

In this code, when a user taps on the sprite, it will add a value to the current one and call the changeColor() function. In the changeColor() function, we have taken a switch case to determine the color property of spriteWithoutTexture. In Swift, switch case is used as in many other languages. We don't have to use the break statement. Every switch statement must be exhaustive. That means, we have to make every single case check for switch case. Hence, we have to write a default value for every switch case.

If our texture is not nil, we can use the colorBlendFactor property to colorize the texture. We can use it for a tinting effect, such as damage taken in the game; colorBlendFactor is ignored if texture is nil. Its default value is 0.0, which means that the texture should remain unmodified. When we increase the value, texture color is replaced with the blended color.

Changing colorBlendFactor in MenuScene

Let's add a tint to our play button. Open MenuScene and define a variable named tintChanger inside the MenuScene class as optional Float, so that we won't need to assign a value to it in the initializer:

Add the following function in the MenuScene class:

Call it from the update function:

Now run Xcode. You will see the Play button appearing and disappearing respectively.

In this code, we just make a Float type variable. In our tintPlayButton function, we check if the value of its colorBlendFactor property is between 1 to 0.

Now let's give it a color, inside the addChildToScene function:

Run it and you will see the Play button changing its color from the original one to reddish. Now, it's time to see the position property in action.

Changing the position of a sprite

Now, have a look at the position property of SKSpriteNode. Let's open GameScene again, as we are going to see the spriteWithoutTexture.position property and the ways we can set it. Add this function below changeColor:

And call it just below the changeColor() call.

Now if you will run it and tap inside your game scene, you will see spriteWithoutTexture changing its position and toggling between them.

The most part of the code is the same as in changecolor(), except the position. In case 0, we set its position to CGPointZero. Position is measured in the CGPoint unit. CGPointZero is equivalent to CGPointMake(0, 0). The position of a sprite depends on its anchorPoint as well as its parent anchorPoint.

As we define GameScene anchorPoint to (0.5 , 0.5), it means any other node which will be added to GameScene will have the starting position(0,0), from the middle of the screen. That's why the background and spriteWithoutTexture (0,0) co-ordinate will be in middle of the screen.

Now, as we specified the anchorPoint of spriteWithoutTexture, it will take its default value of (0.5,0.5). This means that its anchorPoint will be in the center of it. Hence, in case 0, it is rendering in the middle of the screen symmetrically. In case 1 and case 2, we just moved it to the right middle corner and left middle corner of the screen.

Let's try to change anchorPoint and see what happens. Add this line inside addSpriteWithoutTexture:

Now run it.

Before tap

After tap

You will see that all the positions are not as they were before. Can you guess the reason for this?

In the preceding code line, we assigned the new value (0,0) to spriteWithoutTexture, which will remove its default value (0.5,0.5). This means that its anchorPoint will not start from its middle. It will start from the bottom left of this. To visualize it, consider your sprite's top right corner as 1,1, and bottom left corner as 0,0. Now if you will set...