Getting ready

You can add the image that you made in the previous chapter into your project, by performing the following steps:

You have to clean and build when you add new images into the resource folder. If you did not clean after adding new images, then Xcode will not recognize them. Finally, after you add the run_01.png to your project, your project will be seen looking like the following screenshot:

How to do it...

We begin with modifying the HelloWorld::init method in the following code:

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    Size size = Director::getInstance()->getWinSize();
    auto sprite = Sprite::create("res/run_01.png");
   sprite->setPosition(Vec2(size.width/2, size.height/2));
    this->addChild(sprite);
    return true;
}

And then, after we build & run the project, we can see the following:

How it works...

You can get the screen size from the Director::getWinSize method. The Director class is a singleton class. You can get the instance using the getInstance method. So you can get the screen size by Director::getInstance->getWinSize().

Sprites are made from images. You can create a sprite by specifying the image. In this case, you create the sprite by run_01.png in the res folder.

Next, you need to specify the coordinates of the sprite. In this case, you set the sprite in the center of the screen. The Size class has the width and height property. You can specify the location of the sprite using the setPosition method. The argument of the setPosition method is Vec2. Vec2 has two properties as floating point vector, x axis coordinate and y axis coordinate.

The last step is to add the sprite on the layer. A layer is like a transparent sheet on the screen. You will learn about layers in Chapter 4, Building Scenes and Layers.

All objects that are displayed on the screen are node. Sprite and Layer are types of node. If you haven't added it in the other nodes, the node does not appear on the screen. You can add a node in the other nodes by the addChild method.

There's more...

You can set the sprite using the static coordinate. In the following case we see that the Sprite position is (100, 200).

sprite->setPosition(Vec2(100, 200));

Also, you can set the sprite in the center of the screen using C++ operator overloading.

sprite->setPosition(size/2);

If you want to remove the sprite from the layer, you can remove it by the following code:

sprite->removeFromParent();

See also

The Sprite class has a lot of properties. You can manipulate them and change the sprite's appearance. You will also learn more about layer and the scene, which will be explained in Chapter 4, Building Scenes and Layers.