"Developer's Guide" Chapter III: Elves--Learning notes

What is a genie?

The sprite is a 2D image that can be shifted or transformed by changing its rotation angle, position, size, color, and other properties.

Creating sprites

A

Create a sprite with the specified picture:

1	auto mySprite = Sprite::create("mysprite.png");

The code above uses the "mysprite.png" image file to create one Sprite . The results show that the method creates an Sprite entire image using the whole picture. The sprite is the same size as the "mysprite.png" picture. That is, if the size of the "mysprite.png" image is200, the sprite created is also200.

Two

Create a sprite with a rectangle

If you want to create a specific part of a picture that only displays Sprite , then you can use Rect .

Rect has four values:, origin x , origin y width and height , both Origin X, Origin y, width, and height.

1	auto mySprite = Sprite::create("mysprite.png", Rect(0,0,40,40));

RectCreate from the upper left corner, which is the opposite of the screen coordinates that begin the layout from the bottom left corner. So, this Sprite is just part of the image. In this example, Sprite the size is the 40*40 part of the upper-left corner.

Create a sprite using sprite sheet

Sprite sheet is a method of merging multiple sprites into a single file.

This reduces the size of the entire file relative to placing each sprite in a separate folder. This means that you will greatly reduce memory usage, file size, and load time.

In addition, to achieve better performance through batching, we must use the sprite Sheet.

When using sprite sheet, first load it into SpriteFrameCache . SpriteFrameCacheis a cache class that is saved SpriteFrame so that we can access it quickly SpriteFrame . SpriteFrameis an object that contains the image name and a specific sprite size ( Rect ). (in doubt)

SpriteFrameCacheYou can avoid multiple loads SpriteFrame . SPriteFrameload only once and be saved SpriteFrameCache in.

Here is an example of a sprite sheet:

Let's take a closer look:

As we can see in the sprite sheet, it reduces unnecessary space and integrates all sprites into the same file.

Let's connect these together!

Load a sprite Sheet

The sprite sheet is loaded into the Spriteframecache, perhaps in appdelegate:

// load the Sprite Sheet auto spritecache = SpriteFrameCache::getInstance(); // the .plist file can be generated with any of the tools mentioned below spritecache->addSpriteFramesWithFile( "sprites.plist" );We have loaded a spritesheet into the spriteframecache, and now we can create a sprite object with it. Create a sprite from the Spriteframecache auto mysprite = Sprite::createWithSpriteFrameName( "mysprite.png" );Create a sprite from the Spriteframe

Another way to create sprites is to SpriteFrameCache get from the SpriteFrame , and then use the SpriteFrame Create Wizard, for example:

1234	// this is equivalent to the previous example,// but it is created by retrieving the spriteframe from the cache.auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("mysprite.png");auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);

How to create a sprite sheet

To create by using a tool:

• Cocos Studio
• Texture Packer

Zwoptex

Controlling the sprite anchor Point and position anchor Point

The anchor point is a fixed point where you can specify which part of the sprite to use by the anchor point when setting the sprite position.
Anchor points affect only the properties that can be modified, including scale, rotation, and skew, and do not contain color and opacity. The anchor point uses the lower-left coordinate system. This means that when you set the x and Y coordinate values, you need to make sure that you are calculating from the lower left corner. By default, the anchor point for All node objects is (0.5,0.5).
Setting the anchor point is simple:

1234567891011121314

// DEFAULT anchor point for all SpritesmySprite->setAnchorPoint(0.5, 0.5);// bottom leftmySprite->setAnchorPoint(0, 0); // top leftmySprite->setAnchorPoint(0, 1); // bottom rightmySprite->setAnchorPoint(1, 0);// top rightmySprite->setAnchorPoint(1, 1);

As shown in the following:

Note: The diagram corresponds to the above code starting from the right.

The sprite attribute affected by the anchor point

Anchor points affect only the properties that can be changed, including scale,rotation and skew.

Location (Position)

The position of the sprite is affected when the anchor point is the starting point. As in the Red Line, the guide for the sprite position. The position of the sprite changes when the anchor value is changed. It is important to note that these changes are due to the change in the anchor point value. Do not use the SetPosition () function here:

There are many other ways to set the location. You can also set a Sprite object using a specific setposition () statement.

12	// position a sprite to a specific position of x = 100, y = 200.mySprite->setPosition(Vec2(100, 200);

Angle (Rotation)

Causes the sprite to rotate by increasing or decreasing the angle. Increasing the angle value causes the sprite to rotate clockwise, reducing the angle value to rotate the sprite counterclockwise. The default value is 0.

// rotates sprite by +20 mySprite->setRotation(20.0f); // rotates sprite by -20 mySprite->setRotation(-20.0f); // rotates sprite by +60 mySprite->setRotation(60.0f); // rotates sprite by -60 mySprite->setRotation(-60.0f);Scaling (Scale)

The sprite can be scaled by changing the X-value, y-value, or both x and Y values. The default value for X, Y is 1.0.

12345678

// increases X and Y size by 2.0 uniformlymySprite->setScale(2.0);// increases just X scale by 2.0mySprite->setScaleX(2.0);// increases just Y scale by 2.0mySprite->setScaleY(2.0);

Tilt (Skew)

Changing the X-value, y-value, or both x and Y values can tilt the sprite. The default value for X, Y is 1.0.

12345

// adjusts the X skew by 20.0mySprite->setSkewX(20.0f);// adjusts the Y skew by 20.0mySprite->setSkewY(20.0f);

Wizard properties that are not affected by the anchor point

Some of the properties of a Sprite object are not affected by the anchor point. Why is it? Because these properties only change surface features, such as color and transparency.

Color

You can change the color of the sprite by passing the corresponding value to the Color3b object. The Color3b object represents the RGB color value. We haven't used color3b yet, but it's simple, color3b is an object that defines the RGB color. The RGB color value is a value between 0-255. Cocos2d-x also offers predefined colors for developers to choose from. Since these colors are predefined, they can be used faster, as shown in examples of Color3b::white and color3b::red:

12345

// set the color by passing in a Color3B object.mySprite->setColor(Color3B(255, 255, 255));// set the color by passing in a pre-defined Color3B object.mySprite->setColor(Color3B::White);

Transparency

Changes the sprite's transparency by a specific value. The value range is (2~255) and the default value is 255 (opaque)

12	// set the opacity by passing in a valuemySprite->serOpacity(30);

"Developer's Guide" Chapter III: Elves--Learning notes