Creating Sprites With Image Files

• Adding images to Xcode project
• Creating Sprites
• Compile And Run

The easiest way to create sprites is using some image file(s)!

I will create a new project called “sprite” and add some image files to the Resources folder in Xcode and create sprites from them. These are the original images that I used in my Breakanator game (A break out game which is not in the App Store anymore!). Although, in that game I used an image atlas (Sprite sheet) for performance reasons. We will see how that works in the next post.

 

Adding images to Xcode project

• Create a new cocos project.

cocos new sprite -p com.games.sprite -l cpp -d ~/Projects/

• Make a folder inside the resources folder of the cocos project and call it sprites. Then we copy 5 images that we want to use for this test into that folder:

ball.png, pad.png, block.png, brick_red.png, brick_blue.png

• Then add the “sprites” folder into your Xcode project under resources by right clicking on Resources group and selecting “Add Files to” from the menu.

• Then select the “sprites” folder on your disk and press Add. Remember to turn on both of the target check boxes at the bottom of the page.

Now you should have the whole folder with those images in your project, under Resources.

We have our images in our project, so lets get to business and make some sprites.

 

Creating Sprites

The Sprite class has a “create” method that gets an image as an input and returns a Sprite pointer.

• In your HelloWorldScene.cpp , replace this code with the original init method to create 5 sprites and parent them to the scene. I set their positions to move them to the place that I want them to be in the screen.

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Scene::init() )
    {
        return false;
    }

    auto visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    auto ball = Sprite::create("sprites/ball.png");
    ball->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2 - 100);
    this->addChild(ball);
    
    auto pad = Sprite::create("sprites/pad.png");
    pad->setPosition(origin.x + visibleSize.width / 2, 10);
    this->addChild(pad);
    
    auto block = Sprite::create("sprites/block.png");
    block->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2);
    this->addChild(block);

    auto brick_red = Sprite::create("sprites/brick_red.png");
    brick_red->setPosition(origin.x + visibleSize.width / 2 - 72, origin.y + visibleSize.height / 2);
    this->addChild(brick_red);

    auto brick_blue = Sprite::create("sprites/brick_blue.png");
    brick_blue->setPosition(origin.x + visibleSize.width / 2 + 72, origin.y + visibleSize.height / 2);
    this->addChild(brick_blue);

    return true;
}

As simple as that!

Basically, we created a sprite using the create() method and then set the position of the sprite and then parented it to the current scene.

Keep in mind that the Sprite class is inherited from the Node class. This means we can do everything that we could do with the Nodes that we created in the previous blog about Nodes. That is including parenting, position, rotation, scale changes and more…

 

Compile and Run

The result of running you code should be something like this on a 1024×768 design resolution on Mac desktop (not the simulator).

Notice that there are 5 GL calls in this scene, because of the 5 sprites that we created.

Download Source

There are other create functions in the Sprite class. One of them uses a Texture that is created using an Image instance.

    Image *image = new Image();
    image->initWithImageFile("ball.png");
    
    Texture2D *texture = new Texture2D();
    texture->initWithImage(image);
    
    Sprite *sprite = Sprite::createWithTexture(texture);
    this->addChild(sprite);

In the next post, we will create sprites from sprite frames in a sprite sheet! I’ll explain…

Next