The preface

In the development of Cocos Creator game, the component is used very frequently. It must be very familiar with the entry function, common attributes and operations of the component.

Component entry functions

1: onLoad: called when the component is loaded, which ensures that you can get the data of other nodes in the scene and the resources associated with the nodes. 2: start: triggered before the first update. 3: Update(DT): called every time the component is refreshed, before the last refresh (executed before all screens are updated) 4. LateUpdate (dt) called after the refresh (executed after all screens are updated) 5: onEnable: called when this component is enabled; 6: onDisable: called when this component is disabled; 7: onDestroy: called when the component instance is destroyed;

1. ` onLoad () {` 2. ` console.log("onLoad is called!" ); } '5.' start () {' 6. '// this represents the current Component instance, this.node the node to which the current Component instance is mounted, property of the parent Component.' 7. " , this, this.node, this.node.name); ` ` 8. `}Copy the code
1. ` / / dt: every time the update interval ` 2. ` / / dt is not a fixed value | -- - | -- - | -- - | ` 3. ` / / dt and relevant equipment frame frequency FPS: Frame per second 60FPS, 1/60=0.0167s' 4. 60FPS 0.0167s, 30FPS 0.033s' 5. // [1] 60×50, 30×50, ensure consistent operation effect on different equipment 6. // [2] Ensure uniform motion on the same equipment 7. Update (dt) {' 9. 'console.log("update,dt=", dt); ` 10. ` this.player.x += this.speed * dt; ` ` 11. `}Copy the code

Second, cc.componentattribute

1: component class: the base class of all components; 2: node: points to the node (cc.node) on which this component instance is mounted; 3: name: the name of the node on which this component instance is mounted < component name >; 4: properties: {} property list; (1) Name: value, number,bool, string; (2) position, color, size: cc. V2 (0, 0), cc. Color (0, 0), cc. null or []

(4) Others: Open the source code of CoCOS Creator, find the reference, and then move it to the code;

1. `import CustomComponent from "./CustomComponent"; ` 2. `const {ccclass, property} = cc._decorator; ` 4. `@ccclass` 5. `export default class GameMgr extends cc.Component {` 7. ` @property({type:cc.Integer, Tooltip: "square velocity", displayName: "speed", slide: true, step: 5, min: 50, Max: 200,}) ` 8. ` speed: number = 50; @property({type:cc.Node, tooltip:" Node to move ",}) '11. '@Property ({type:[cc.spriteFrame], Tooltip :" image Array ")' 14. 'SpriteFrame: Array< cc.spriteFrame > = []; ` 16. `//label : cc.Label = null; @Property ({type:CustomComponent, tooltip:" CustomComponent ") '19.' customComp :CustomComponent = null; `Copy the code

Check the source code of Label through the API on the official website and compare and learn it through the editor of Cocos Creator.

Component add search delete

1: addComponent(type of component): Adds a component instance to the node, returns the added component instance; 2: getComponent(component type): finds a component instance of the specified type (if there are multiple, the first one matches); 3: getComponents(component type): find all component instances of this type on this node; [inst1, inst2, inst3, …] GetComponentInChildren (ComponentInChildren): Find the componentInChildren node. 5: getComponentsInChildren (component type): find in the self and child node; 6: destroy(): removes the component instance from the node;

Shedule timer operations

1: sheduleOnce(function, time): starts a timer after time seconds. 2: schedule(function, time, times, how long after the start); REPEAT_FOREVER 3: unschedule(function); // Cancel the timer operation; 4: unscheduleAllCallbacks Cancels all timer operations. Note that the node or component is not called if it is not active;

1. ` console.log("=======fenggexian========"); '2.' this.schedule(function(){' 3. 'console.log(' every one second, three times, two seconds later'); '4.'}, 1, 20, 2); // This. ScheduleOnce (function(){' 7. '// console.log(" The schedule is executed once and the delay is 1 second! ") ); '//}, 1); '10.' let callback = function(){' 11. 'console.log(" callback "); ` 12. `}; ` 13. ` this.schedule(callback, 1, cc.macro.REPEAT_FOREVER, 2); ` 14. ` //this.unschedule(callback); ` 15. ` //this.unscheduleAllCallbacks(); 'this. ScheduleOnce (function(){' 19.' //console.log(" callback cancels only after 5 seconds "); ` 20. ` //this.unschedule(callback); '21.' console.log(" Cancel all scheduled tasks after 5 seconds "); ` 22. ` this.unscheduleAllCallbacks(); ` 23. ` }.bind(this), 5); `Copy the code