[Cocos Creator] cc.Class 파헤치기
cc.Class로 class 정의하기
Cocos Creator에서는 Class를 만들 수 있는 cc.Class라는 유용한 API를 제공하고 있습니다.
CCClass 정의하기
cc.Class를 생성할 때 인자로 prototype 객체 (key-value로 필요한 파라미터들이 지정된)를 넘김으로서 class를 만들어냅니다.
var Sprite = cc.Class({
name: "sprite"
});위 코드는 class를 만들어서 Sprite 변수에 넣고 있습니다. 게다가 클래스 이름을 "sprite"로 지정까지 했죠. Class Name은 일반적으로 생략될 수 있습니다. (직렬화 (serialization)에 사용됩니다.)
초기화 (Instantiation)
위에서 정의한 Sprite 변수는 Javascript construcor로 배정됩니다. 새로운 object를 만드는데 사용할 수 있죠.
var obj = new Sprite();클래스 판단 (Judge class)
object의 클래스를 판단하고 싶을 때 JavaScript built-in 문법인 instanceof를 사용하면 됩니다.
cc.log(obj instanceof Sprite); // true
Constructor
생성자를 정의하기 위해선 다음의 문법을 사용 ctor:
var Sprite = cc.Class({
ctor: function () {
cc.log(this instanceof Sprite); // true
}
});
Instance method
var Sprite = cc.Class({
// instance method "print"를 정의하는 방법
print: function () { }
});
상속 (Inheritance)
이미 정의된 클래스를 extend하기 위해 다음의 문법을 사용 extends:
// base class
var Shape = cc.Class();
// sub class
var Rect = cc.Class({
extends: Shape
});
Superclass constructor
Super class의 생성자는 따로 호출해줄 필요 없이 child class가 생성되기 직전에 호출됩니다.
var Shape = cc.Class({
ctor: function () {
cc.log("Shape"); // superclass constructor는 자동적으로 호출될 것임
}
});
var Rect = cc.Class({
extends: Shape
});
var Square = cc.Class({
extends: Rect,
ctor: function () {
cc.log("Square"); // 이후에 childlcass의 constructor가 호출됨
}
});
var square = new Square();
위 코드의 output은 "Shape" 그리고 "Square"가 나올 입니다.
Property 정의
component에 attribute(property)를 정의함으로서 우리는 visible하게 에디터의 component에서 property들을 볼 수 있습니다. 에디터에서 쉽게 값을 정의하거나 할당할 수 있는 것 입니다.
attribute를 정의하기 위해서 해야되는 것은 cc.Class에 정의되어 있는 properties에 key-value로 넣기만 하면 됩니다.
cc.Class({
extends: cc.Component,
properties: {
userID: 20,
userName: "Foobar"
}
});
A저장하면 즉시 에디터의 Component에서 프로퍼티들을 볼 수 있게되죠.
Cocos Creator에서, 두 가지의 정의 방법을 제공하고 있습니다.
간단한 declaration
대부분 우리는 간단한 정의만 필요할 것 입니다.
Javascript 원시(Primitive)타입 프로퍼티가 필요할 때:
properties: { height: 20, // number type: "actor", // string loaded: false, // boolean target: null, // object }property가 타입을 가지고 있을 때(cc.Node, cc.Vec etc.)는 선언 시 그 객체의 생성자를 적어줘야합니다.
properties: { target: cc.Node, pos: cc.Vec2, }선언할 property의 타입이 cc.ValueType(cc.Vec2, cc.Color, cc.Size etc.)을 상속했다면 생성자를 넣는 것 뿐만 아니라 instance 자체를 다음과 같이 할당할 수 있습니다.
properties: { pos: new cc.Vec2(10, 20), color: new cc.Color(255, 255, 255, 128), }property가 배열로 선언된다면 내부에 어떤 타입이 들어올 수 있는지도 지정할 수 있습니다.
properties: { any: [], // array of arbitrary type bools: [cc.Boolean], strings: [cc.String], floats: [cc.Float], ints: [cc.Integer], values: [cc.Vec2], nodes: [cc.Node], frames: [cc.SpriteFrame], }
Note: 위의 상황들에 속하지 않는다면 다음의 복잡한 선언을 사용하세요.
복잡한 declaration
properties: {
score: {
default: 0,
displayName: "Score (player)",
tooltip: "The score of player",
}
}
위 코드엔 세개의 attribute가 명시되어 있습니다. 차근히 하나씩 분석해보자면 score의 defualt 값은 0이고, Properties 패널에 나타낼 property의 이름은 "Score (player)"이며, 커서를 property에 올렸을 때 보여줄 팁을 적은 것 입니다.
아래에 일반적으로 사용하는 attribute들이 있습니다.
- default: 프로퍼티의 default 값을 지정하고, 이 값은 node에 컴포넌트를 붙이는 첫 순간에만 사용됩니다.
- type: 프로퍼티의 타입을 제한합니다. CCClass Advanced Reference: type attribute에서 자세한 정보 확인
- visible: 패널에서 보일지 안 보일지를 지정할 수 있습니다.
- serializable: false로 지정하면 serialize하지 않음.
- displayName: 패널에 보일 property명 지정.
- tooltip: 팁 추가.
더 자세한 정보는 다음에서 확인 Property attribute.
Array declaration
default는 무조건 [ ]로 지정해야합니다.
properties: {
names: {
default: [],
type: [cc.String]
},
enemies: {
default: [],
type: [cc.Node]
},
}
get/set declaration
get/set 을 지정해 놓으면 propert에 접근할 때 미리 정의된 메소드가 트리거되게 할 수 있습니다.properties: {
width: {
get: function () {
return this._width;
},
set: function (value) {
this._width = value;
}
}
}