cocos creator 基础

最新推荐文章于 2023-09-16 16:49:11 发布

灯火暗

最新推荐文章于 2023-09-16 16:49:11 发布

阅读量247

点赞数 1

分类专栏： COCOS

本文链接：https://blog.csdn.net/denghuocc/article/details/103513414

版权

COCOS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

COCOS 脚本篇

1. 编辑环境配置

安装API 适配插件

开发者 -> VS Code 工作流 -> 安装 VS Code 扩展插件
- 该操作会将 Cocos Creator API 适配插件安装到 VS Code 全局的插件文件夹中
- 这个操作只需要执行一次，如果 API 适配插件更新了，则需要再次运行来更新插件
- 安装成功后在控制台会显示绿色的提示：VS Code extension installed to ...。
- 这个插件的主要功能是为 VS Code 编辑状态下注入符合 Cocos Creator 组件脚本使用习惯的语法提示。

生成智能提示数据

开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据
- 该操作会将根据引擎 API 生成的 creator.d.ts 数据文件复制到项目根目录下
- 操作成功时会在控制台显示绿色提示：API data generated and copied to ...
- 对于每个不同的项目都需要运行一次这个命令

2. 场景

预加载场景: cc.director.preloadScene('GameScene')
切换场景: cc.director.loadScene('GameScene')

3. 节点

获取

当前节点 this
组件所依附的节点 this.node
节点的父节点this.node.parent
节点的子节点数组 this.node.children
通过节点名获取子节点 this.node.getChildByName('Node3')
获取其他节点
- 声明
```
properties: {
  node5: cc.Node
}
```
- 拖拽节点到声明的节点中

删除

removeFromParent() 解除父子关系
destroy() 删除该节点

添加

new --> addChild

onLoad () {
    let node8 = new cc.Node()
    node8.name = 'node-8'
    // 将当前node8添加到当前节点
    this.node.addChild(node8)
    console.log(node8.name) // node-8
}

4. 组件

添加 addComponent
移出 removeComponent

获取 getComponent

onLoad () {
    let sprite = this.node.addComponent(cc.Sprite)
    this.node.removeComponent(cc.Sprite)
    this.node.getComponent(cc.Sprite)
}

5. 动作Action

1: Action类是动作命令，我们创建Action,然后节点运行action就能够执行Action的动作;
2: Action分为两类: (1) 瞬时就完成的ActionInstant, (2) 要一段时间后才能完成ActionIntervial;
3: cc.Node runAction: 节点运行action;
4: cc.moveTo, cc.moveBy To: 目标 By: 变化
5: cc.roateBy, cc.rotateTo,
6: cc.scaleBy, cc.scaleTo,
7: cc.fadeOut(淡出), cc.fadeIn(淡入): cc.fadeTo();
8: cc.callFunc, cc.delayTime
9: cc.sequnce, cc.repeat, cc.repeatForever
10: Action easing(缓动的方式): 加上缓动特效, cc.easeXXXXX查看文档设置自己想要的缓动对象
11: stopAction: 停止运行action
12: stopAllActions: 停止所有的action;

- 时间间隔动作

移动 moveTo
旋转 rotateTo
缩放 scaleTo
渐隐 fadeOut

this.node.runAction(
    cc.moveTo(1, cc.v2(500, 500)) // 一秒钟移动到（500, 500）坐标处
    cc.rotateTo(1, 180) // 一秒钟旋转180度（+-180 顺+ 逆-）
    cc.scaleTo(1, 2, 2) // 一秒钟x轴y轴放大两倍
    cc.fadeOut(1) // 1s 渐隐
)

- 容器动作

顺序执行动作 sequence
同步执行动作 spawn
重复执行动作 repeat
永远重复动作 repeatForever
修改动作速率 speed

- 即时动作

执行回调函数 callFunc

- 缓动动作

action.easing(cc.easeBackIn());

easeBackIn 是在相反的方向缓慢移动，然后加速到正确的方向
easeBackOut 快速移动超出目标，然后慢慢回到目标点。

onLoad () {
    this.node.runAction(
        cc.sequence(
            cc.moveTo(1, cc.v2(500, 500)).easing(cc.easeBackIn()),
            cc.fadeOut(2),
            cc.callFunc(this.callback, this, {hello: 'world'})
        )
    )
},
callback: function(tagetNode, arg) {
    console.log(tagetNode) // 节点
    console.log(arg)  //{hello: "world"}
},

6. 事件

####　- 发射和监听

监听 on

除了使用 on 监听，我们还可以使用 once 方法
once 监听在监听函数响应后就会关闭监听事件
监听对应的触摸事件: 向引擎底层注册一个回调函数,当有触摸事件发生的时候调用

回调函数

/* 
	回掉函数的格式  function(t)  --> cc.Touch对象触摸事件对象 {触摸信息，事件信息}
    call --> this, this指向谁就是这个target;你要绑那个对象作为你回掉函数的this, 可以为空
    function () {}.bind(this); 
*/

关闭 off
- off 方法的参数必须和 on 方法的参数一一对应，才能完成关闭
- 移除target上所有的注册事件: this.node.targetOff(this);
发射 emit
- 在 emit 函数的第二个参数开始传递事件参数(最多只支持传递 5 个事件参数)
派送 dispatchEvent

cc.Class({
    extends: cc.Component,

    properties: {
        node4: cc.Node,
        node5: cc.Node
    },
    onLoad () {
        this.node.on('枪声', this.rush, this.node4)
        this.node.on('枪声', this.escape, this.node5)
        this.node.emit('枪声', {hello: 'world'})
    },
    rush: function (obj) {
        console.log(this.name, 'rush')  // node4 rush
        console.log(obj, 'rush')  // {hello: "world"} "rush"
        this.runAction(
            cc.moveTo(1, 500, 0)
        )
    },
    escape: function (obj) {
        console.log(this.name, 'escape') // node5 rush
        console.log(obj, 'escape')    // {hello: "world"} "escape"
        this.runAction(
            cc.moveTo(1, 0, 500)
        )
    },
    start () {}
});

- 触摸事件

touchstart touchmove touchend touchcancel

停止事件传递: t.stopPropagationImmediate()

cc.Class({
    extends: cc.Component,
    properties: {
    },
    // t: --> cc.Touch触摸的位置: 屏幕坐标，左下角(0, 0); getLocation();
    onTouchMove: function(t) {
        // 停止事件传递
        t.stopPropagationImmediate(); 
        // 位置
        var w_pos = t.getLocation(); // cc.Vec2 {x, y}
        // 距离上一次触摸变化了多少;
        var delta = t.getDelta(); // x, y各变化了多少cc.Vec2(x, y)
        this.node.x += delta.x;
        this.node.y += delta.y;
    },
    // use this for initialization
    onLoad: function () {
        this.node.on('touchmove', this.onTouchMove, this)
        // 移除
        // this.node.off('touchmove', this.onTouchMove, this);
    }
});

- 鼠标事件

mousedown mouseenter mousemove mouseleave mouseup mousewheel

- 键盘事件

keydown keyup
- cc.KEY : 获取所有keyword以及对应的keycod
向引擎注册一个事件类型的回调函数
cc.systemEvent 小写开头，不是大写, 大写SystemEvent类, systemEvent 全局一个实例

onLoad () {
    cc.systemEvent.on('keydown', this.onKeyDown, this)  // 键盘
},
onKeyDown (e) {
    console.log(cc.KEY)
}

7. 坐标转换

全局坐标系位置
- location = e.getLocation()
全局 --转换成–> 相对于this.node
- this.node.convertToNodeSpaceAR(location)
全局 --转换成–> 相对于this.node的父节点
- this.node.parent.convertToNodeSpaceAR(location)

onLoad () {
    // this.node.on('touchstart', this.onTouchStart, this)
    cc.find('node1').on('touchstart', this.onTouchStart, this)
},
onTouchStart: function (e) {
    // console.log(e.getLocation())  // Vec2 {x: , y:  }  全局坐标系位置
    let location = e.getLocation()
    // 全局 --转换成--> 相对于this.node
    let locationOfThisNode = this.node.convertToNodeSpaceAR(location)
    // 全局 --转换成--> 相对于this.node的父节点
    let locationOfThisNodeParent = this.node.parent.convertToNodeSpaceAR(location)
    // 赋值
    this.node.position = locationOfThisNodeParent
}

8. 预制体`Prefab`

步骤

将要复制的节点拖到资源管理器
声明预制体node5Prefab
实例化该预制体instantiate
将预制体添加到节点

// 浅拷贝
properties: {
    node5Prefab: cc.Prefab	// 声明
},
onLoad () {
    let node5Copy = cc.instantiate(this.node5Prefab) // 实例化(复制)
    this.node.addChild(node5Copy)	// 添加
}

9. 全局变量

- `window.xxx`

onLoad () {
    window.globalVar = {
        hello: 'word'
    }
},
start () {
    console.log(globalVar)  //{hello: "word"}
}

- `require`

// global_module
let obj = {
    name: 'cc',
    age: 16
}
let str = 'string'
module.exports = {
    obj,
    str
}

// components
cc.Class({
    extends: cc.Component,

    properties: {
    },
    onLoad () {
        let global = require('global_module')
        console.log(global.str)	// string
    },
    start () {
    }
})

- `statics`

let Component3 = cc.Class({
    extends: cc.Component,

    properties: {
    },
    statics: {
        statics3Num: 0
    },
    onLoad () {
        Component3.statics3Num ++
    },
    start () {
        console.log(Component3.statics3Num)
    }
});

- `addPersistRootNode`

cc.Class({
    extends: cc.Component,

    properties: {
    },
    onLoad () {
        // 将this.node独立 (当前this.node的name为node3)
        cc.game.addPersistRootNode(this.node)
        // 获取该独立于场景的节点
        let node3 = cc.director.getScene().getChildByName('node3')
		// 移除
        // cc.game.removePersistRootNode(this.node)
        // 切换场景
        cc.director.loadScene('scene3')
    },
    start () {
    }
});

- `localStorage`

cc.sys.localStorage.setItem('key', 'value')
cc.sys.localStorage.getItem('key')

10. 计时器

schedule
unschedule
scheduleOnce

onLoad () {
    this.schedule(this.timerCount, 1)   // 每一秒执行一次timerCount
    this.unschedule(this.timerCount)	// 停止
    this.scheduleOnce(this.timerCount)	// 回调延迟一帧

},
timerCount () {
    console.log(1)
},

11. 动画

步骤

添加Animation组件
添加Animation Clips
编辑动画
- 选中Clip --> Add Property --> 拖拽图片 —> 选择WrapMode
添加js组件
- 创建 --> 声明动画 --> 拖拽节点( 赋值 )
保存

动画数据

获取

var anim = this.getComponent(cc.Animation);
// play 会返回关联的 AnimationState
var animState = anim.play('run');

// 或是直接获取
var animState = anim.getAnimationState('run');

动画信息

clip name speed duration time repeatCount wrapMode isPlaying isPaused frameRate

var anim = this.getComponent(cc.Animation);
var animState = anim.play('run')
// 获取动画的循环模式
var wrapMode = animState.wrapMode

循环

var animState = anim.play('run');
// 设置循环模式为 Normal
animState.wrapMode = cc.WrapMode.Normal;
// 设置循环模式为 Loop
animState.wrapMode = cc.WrapMode.Loop;
// 设置动画循环次数为2次
animState.repeatCount = 2;
// 设置动画循环次数为无限次
animState.repeatCount = Infinity;

动画事件

play stop pause resume(恢复播放) lastframe finished

实例

// 注册
animation.on('play', this.onPlay, this);
// 取消注册
animation.off('play', this.onPlay, this);
// 对单个 cc.AnimationState 注册回调
var anim1 = animation.getAnimationState('anim1');
anim1.on('lastframe', this.onLastFrame, this);

12. 碰撞

步骤

添加碰撞组件
编辑Group

编辑js组件

获取碰撞管理器 cc.director.getCollisionManager
注册回调, 如果有碰撞则回调 manager.enabled = true
碰撞函数 onCollisionEnter onCollisionStay onCollisionExit

cc.Class({
    extends: cc.Component,
    properties: {
    },
    onLoad () {
        // 获取碰撞管理器
        let manager = cc.director.getCollisionManager()
        // 注册回调, 如果有碰撞则回调
        manager.enabled = true
        // debug
        manager.enabledDebugDraw = true
        this.node.on('touchmove', this.onTouchMove, this)
    },
    onTouchMove (e) {
        console.log('move')
        this.node.position = 
            this.node.parent.convertToNodeSpaceAR(e.getLocation())
    },
    // 三个碰撞函数
    onCollisionEnter (other, self) {
        console.log('enter')
    },
    onCollisionStay (other, self) {
        console.log('stay')
    },
    onCollisionExit (other, self) {
        console.log('exit')
    }
})

13. 音乐音效

背景音乐
- 添加AudioSource组件

音效

声明

audio: {
    type: cc.AudioClip,
    default: null
}

播放

cc.audioEngine.play(audio)
// cc.audioEngine.play(audio, false, 0.2) // (audio, loop, volume)

14. 打包到微信小游戏

代码包问题

代码包超过4MB不能发布问题

将打包生成的res文件放线上

修改根目录下main.js里的资源导入路径

libraryPath: 'res/import' --> libraryPath: 'http://192.168.../res/import'

cc.AssetLibrary.init({
    libraryPath: 'http://192.168.../res/import',
    rawAssetsBase: 'http://192.168.../res/raw-',
    rawAssets: settings.rawAssets,
    packedAssets: settings.packedAssets,
    md5AssetsMap: settings.md5AssetsMap,
    subpackages: settings.subpackages
});

灯火暗

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
cocos creator 基础

COCOS 脚本1. 安装API 适配插件开发者 -> VS Code 工作流 -> 安装 VS Code 扩展插件该操作会将 Cocos Creator API 适配插件安装到 VS Code 全局的插件文件夹中这个操作只需要执行一次，如果 API 适配插件更新了，则需要再次运行来更新插件安装成功后在控制台会显示绿色的提示：VS Code extension ins...
复制链接

扫一扫