cocos creator模块化的几种方式:
方式一
Rotate.js
var Rotate = cc.Class({
extends: cc.Component,
properties: {
speed: 1
},
update: function () {
this.transform.rotation += this.speed;
}
});
在helloworld.js中进行引用,这里使用require引入脚本后，因为Rotate.js中没有使用module.exports暴露出一个对象出来，所以我们在helloworld.js中进行引用的时候，需要生成对象：
let Rotate = require('Rotate');
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
// defaults, set visually when attaching this script to the Canvas
text: 'Hello, World!',
guagua: {
default: null,
type: cc.Node,
}
},
// use this for initialization
onLoad: function () {
this.label.string = this.text
//方法一:模块化require只是引入了这个类，如果调用类内部的成员变量和方法，那么需要实例化一个对象才行
let rotate = new Rotate()
cc.info('speed:' + rotate.speed)
},
start() {
},
// called every frame
update: function (dt) {
},
});
方式二：
Person.js:
var Person = {
name: 'eric',
properties: {
age: 20,
},
sayHello: function () {
cc.info('say hello...')
}
}
Person.sayHello()
module.exports = Person
在 helloworld.js中可以直接引用persion.js中使用module.exports = Person,进行暴露出来的对象
let p = require('Person')
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
// defaults, set visually when attaching this script to the Canvas
text: 'Hello, World!',
guagua: {
default: null,
type: cc.Node,
}
},
// use this for initialization
onLoad: function () {
//方法二：在'组件'person中通过moudle.exports的方式暴露对象出来
p.sayHello()
},
start() {
},
// called every frame
update: function (dt) {
},
});
方法三：
可以直接将“用户自定义组件”添加到相应的“Node”上面，然后就可以在这个node上面通过node.getComponent()的方式来进行引用
guagua.js
cc.Class({
extends: cc.Component,
move: function () {
// create a action by cocos action system
var action = cc.moveTo(2, 100, 100)
this.node.runAction(action)
},
start() {
},
onLoad: function () {
},
});
将guagua.js挂载到node节点上面：
node.jpg
helloworld.js中进行引用：
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
// defaults, set visually when attaching this script to the Canvas
text: 'Hello, World!',
guagua: {
default: null,
type: cc.Node,
}
},
// use this for initialization
onLoad: function () {
this.label.string = this.text
//如果需要操作'脚本组件'，需要先获取'node'，然后获取到挂载到这个node上面的'脚本组件'，然后才能进行运行
this.guagua.getComponent('guagua').move()
},
start() {
},
// called every frame
update: function (dt) {
},
});
