Cocos learning diary 2 - scripts and attributes

Catalog

One 、 Add scripts to nodes

Two 、VScode Edit script

2.1 To configure vscode Environmental Science

2.2 Write a script

3、 ... and 、 Knowledge of scripts

3.1 How scripts work

3.2 Lifetime callback

3.3 Check the script execution

Four 、 Event response processing

5、 ... and 、 debugging JS Code

6、 ... and 、TypeScript

6.1 TypeScript, Strongly typed JavaScript

6.2 JavaScript It's a weak type of language

6.3 Contrastive writing

7、 ... and 、 attribute

7.1 Show properties in the engine

7.2 Definition of attribute

7.3  Application of attributes

7.4 Reference type properties

---

One 、 Add scripts to nodes

 

Two 、VScode Edit script

2.1 To configure vscode Environmental Science

2.2 Write a script

3、 ... and 、 Knowledge of scripts

3.1 How scripts work

1、 The game engine loads all nodes

2、 Load all the components of the node

var comp = new PigScript();

node["PigScript"]= comp;

comp.onLoad(); 

comp.start();

3.2 Lifetime callback

Lifetime callback Life-Cycle Callback

onLoad() Execute when the component is initialized

start() Execute before the first activation

update() Execute every frame

onEnable() Called when the component is enabled

onDisable() Called when the component is disabled

onDestroy() Call... When the component is destroyed

3.3 Check the script execution

1、 Simulator

 

2、 Console  

 

Four 、 Event response processing

Event handling , and HTML Inside JavaScript Similar events

Click event mousedown / mouseup / mousemove ...

Keyboard events keyup / keydown

Touch event touchstart / touchend / touchcancel ...

The above effect has realized ： Click on it. , The picture will move to the left  

5、 ... and 、 debugging JS Code

Not yet , This one is used to occupy space

6、 ... and 、TypeScript

6.1 TypeScript, Strongly typed JavaScript

https://www.typescriptlang.org

6.2 JavaScript It's a weak type of language

var str = "shaofa"; 
var a = 10;
var node = this.node;

Because there is no type identifier , So the editor can't accurately prompt

6.3 Contrastive writing

1、 Variable

JavaScript：

var str = "shaofa";

var a = 10;

var node = this.node;

TypeScript:

let str : string = "shaofa";

let a : number = 10;

let node : cc.Node = this.node;

2、 Method parameters

JavaScript:

moveLeft(evt) {

}

TypeScript:

moveLeft(evt : cc.Event.EventMouse) {
}

3、 Return value of method

JavaScript:

sum(x, y) {

        return x + y;

}

TypeScript: 

sum(x:number, y:number):number {

        returnx + y;

}

7、 ... and 、 attribute

7.1 Show properties in the engine

 

7.2 Definition of attribute

1、 stay TypeScript Add a class , You can add attributes to the class

Form the following ：

@property("string")

time : string="";

among ,@property It's called a decorator （ Same as Java Annotation syntax in ）

2、 Rules for defining attributes

(1) If there is no @property annotation , Will not appear in Cocos Creator Property panel

(2) @property in , The type should be indicated

@property("string")

@property(cc.Node)

(3) Basic types , Can not specify type

string,number,boolean,bigint

3、TypeScript Are there in number and Number Two types of

number It's a basic type

Number It is a reference type （ object ）

7.3  Application of attributes

Genus is generally divided into two types ：

1、 Basic types

string,number,boolean,bigint

2、 Reference type

cc.Node node

cc.SpriteFrame Picture frame resources

cc.AudioClip Audio resources

3、 application

 

 

7.4 Reference type properties