cocos2d-x 4.0 learning path (eight) several ways to create sprites

Elves are the most common and most commonly used class in cocos2dx. Let's talk about it today.

The sprite is first a 2-dimensional picture, but we can change its properties (including rotation, position, scale, color, etc.) and we can also animate it.

You can think of elves as monsters in the game, the protagonist, or everything that can move.

Several ways to create sprites

Method 1: Create directly with create plus pictures.

We have been in touch many times before.

auto sprite = Sprite::create("HelloWorld.png");

However, create has more functions, for example, I just want to display the eyes of this sprite (intercept part of the image), then add Rect () parameter to the create function:

auto sprite = Sprite::create("HelloWorld.png", Rect(30, 120, 130, 50));

The 4 parameters of Rect (x, y, width, height):

x, y: coordinates relative to the upper left corner of the picture, specifying (0, 0) is the upper left corner of the picture.

width, height: is the width and height. So what is this unit? The window size used in my example above is 480, 320. If you change it to 1024, 768, then try with the 4 parameters above. This is the result: the picture is messed up.

why? The reason is that the size of the picture is different under different resolutions.

Let's do an experiment: we do not specify Rect, print the size of the picture at 480, 320 and 1024, 768 resolution respectively.

auto sprite = Sprite::create("HelloWorld.png");
auto size = sprite->getContentSize();
log("sprite size: width = %f, height = %f", size.width, size.height);

The results are:

480,320：sprite size: width = 195.000000, height = 270.000000
1024,768：sprite size: width = 91.406242, height = 126.562492

It can be concluded that the larger the resolution, the smaller the size of the picture in the program. The values ​​of the four parameters of Rect () will be affected by this.

Then, for the solution, either calculate the ratio of the bidding rate, or simply use Rect () and directly capture the picture.

It seems that creating a sprite is very simple, but the logic inside is actually quite complicated.

Method 2: Create with texture (Texture2D)

The effect is the same as when using create.

Function definition:

Sprite* Sprite::createWithTexture(Texture2D *texture);
Sprite* Sprite::createWithTexture(Texture2D *texture, const Rect& rect, bool rotated);

When called, you can directly define an instance of Texture2D:

    Image* img = new Image();
    img->initWithImageFile("HelloWorld.png");
    Texture2D* texture = new Texture2D();
    texture->initWithImage(img);
    auto sprite = Sprite::createWithTexture(texture);
    // or 
    // auto sprite = Sprite::createWithTexture(texture, Rect(30, 120, 130, 50));

Also, through the addImage method of getTextureCache ():

auto sprite = Sprite::createWithTexture(Director::getInstance()->getTextureCache()->addImage("HelloWorld.png"));

So, what is the difference between create and createWithTexture? In fact, if you look at the source code, you will find that the inside of create is implemented with Texture2D. For the user's ease of use and understanding, create wraps Texture2D again.

When are they used? If the picture is too large and not commonly used, create it directly; if it is frequently used in the game scene, the texture is created.

Method 3: Frame Cache (SpriteFrameCache)

This applies to, frame animation, atlas management, etc. The general number of sprites in the game will be many, we add one by one is a little bit different, this time will use the frame buffer.

Since there is more content, I will explain it in the next blog.