Cc. Sprite

 Cc. Sprite

1: A picture is displayed in the game. We usually call this "sprite;
2: Cocos Creator if you need to display an image, you need to mount a genie component on the node to specify the image to be displayed (spriteframe) for this component );
3: to display an image, follow these steps:
(1) create a node;
(2) Add a component;
(3) drag the image to be displayed (spriteframe) to spriteframe;
(4) configure the size_mode of the image:
A: The size of custom is the same as that of ccnode;
B: raw original image size;
C: The trimmed size is the size of the original image. The displayed content is the image after the transparent pixels are cropped;
(5) TRIM: whether to crop the transparent area of the image. If this option is selected, the completely transparent rows and columns will be cut. When Frame Animation is performed, we usually use the original size without transparency, and the animation will not shake;
4: Change spritefame;
5. quickly create nodes with genie components;

 

Properties: {// Editor, code, resource dynamic loading spriteframe object, sprite_frame: {default: NULL, type: CC. spriteframe,}, // The editor binds the component you want. Sprite: {default: NULL, type: CC. sprite ,},}, // use this for initialization onload: function () {This. SP = This. getcomponent (CC. sprite); this. SP. spriteframe = This. sprite_frame ;}

 

Image Mode
1: simple: The most common sprite mode. After this mode is selected, the image is scaled to the specified size;
2: tiled: Tile mode. The image is tiled, And the tile mode is applied to the target size;
3: Slice: Nine cells mode, specifying the stretch area;
4: filled: Fill mode (circle, rectangle), you can use the proportion to crop the display image (only display ratio );

 

Use of jiugongge
1. Specify the stretch area so that some areas of the image do not change during the stretch, such as rounded corners and chat bubbles;
2: jiugongge saves image resources (dialog box );
3: edit the jiugongge to specify the scaling area;
4: experience the jiugong stretching on the background of the dialog box;

 

Filled Mode
1: Configure filled Mode
2: configure the filled mode and set it to the radius parameter;
3: configure the radius parameter mode,
Center: coordinates (0, 1 decimal places), (0, 0) lower left foot, (1, 1) center point in the upper right corner (0.5, 0.5;
Start position of fill start: 0 ~ 1. Start from the center on the right side and go counterclockwise;
Fill range: total filling (0, 1];
If fillrange is positive, it is counter-clockwise. If it is negative, it is clockwise;
4: Case Study of personalized time progress bar;
5: You can display the time and progress of all the items in the game;

 

Properties: {sprite: {default: NULL, type: CC. sprite,}, action_time: 15,}, // use this for initialization onload: function () {// get the component instance, get the code, and bind var node = this to the editor. node. getchildbyname ("time_bar"); this. SP = node. getcomponent (CC. sprite); // end // This. now_time = 0; this. now_time = This. action_time ;}, // called every frame, uncomment this function to activate update callback update: function (DT) {This. now_time + = DT; var percent = This. now_time/This. action_time; // --> Percentage if (percent> = 1) {percent = 1; this. now_time = 0; // start again} This. SP. fillrange = percent ;},

 

Cc. Sprite