cocos creator学习笔记

本文详细介绍CocosCreator编辑器的使用技巧,包括场景节点管理、事件响应、坐标空间操作等核心内容,适合初学者快速掌握游戏开发流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


学习 博主章鱼仔的相关笔记,以此备忘录。

欢迎使用 cocos creator 编辑器

cocos creator编辑器 是触控公司全资子公司雅基软件的最新H5引擎编辑器,有3D和2D版本,该引擎借鉴了U3D引擎重新编写了,使用java语言,目前还有很多地方不成熟和不完善,但是相对游戏包小,中文比较达意,支持微信等国内的快节奏平台,目前使用者正在上涨。

一、场景节点:树杈结构的Node

认识节点

cc.Node属性

属性名功能
name获取节点的名字
active即该节点是否可见
position节点相对坐标(相对于父节点)
rotation旋转度,cocos以顺时针为正数
scale缩放
anchor锚点位置
Size节点大小
Color填涂颜色
Opacity节点透明度
Skew节点偏斜
Group分组,节点的分组将关系到节点的碰撞组件可以与哪些碰撞组件相碰撞。
parent父节点
children父节点的所有子节点
childrenCount子节点的数目
tag节点标签

场景节点属性

cc.Component

cc.class{}是继承至cc.Component
因此每个组件的实例会相应地调用入口函数

入口函数调用周期
onLoad在组件加载的时候调用
start组件第一次激活前调用
update每次场景刷新时就会调用
lateUpdate在update之后调用
enable组件是否被启用
onEnable组件在允许的时候调用
onDisable组件在不被允许的时候调用

创建cc.class的实例对象

创建实例对象非常简单,只要将相应的组件脚本挂载到节点之中即可。cocos creator会自动new一个实例化对象,此时代码之中的this就是指当前组件实例,并且我们可以通过this.node 访问当前节点对象。

cc.Node的一些方法

方法功能
addChild添加子节点,并且可以修改该节点的 局部 Z 顺序和标签。
removeFromParent从父节点上删除该节点
removeAllChild移除节点所有的子节点
setLocalZorder类似photo的图层覆盖关系,这个方法可以调整图层关系
setPosition设置节点坐标(相对父节点)
getPosition获取节点坐标(相对父节点)
getChildByName通过名称获取节点的子节点。
getChildByTag通过标签获取节点的子节点。
cc.find()通过路径查找节点(当项目比较大型时比较吃资源)

二、cc.Nodesh事件响应

触摸事件

基本事件类型相应事件
TOUCH_START触摸开始事件
TOUCH_MOVE在屏幕上目标节点区域内移动时
TOUCH_END在目标节点区域内离开屏幕时
TOUCH_CANCEL在目标节点区域外离开屏幕时

cocos中所有事件都能够使用监听函数监听这类事件
使用Node.on(EventType,callback,target,useCapture)注册函数进行监听事件触发
1.callback函数中传入一个触摸对象
2.callback函数中的this对象指向target

cc.Touch

callback内传入的是一个cc.Touch对象,以下为常见的cc.Touch方法

getLocation()

可以返回触摸位置信息对象

this.node.on(cc.Node.EventType.TOUCH_START,function(e){
      var pos = e.getLocation();
      cc.log(pos);
},this);
Delta()

可以返回距离上次触摸偏移量,因此可以利用下列代码实现节点随触摸移动而移动

start(){
    this.node.on(cc.Node.EventType.TOUCH_MOVE,function(e){
          var delta = e.getDelta();
          this.node.x += delta.x;
          this.node.y += delta.y;
    },this);
},

事件传递

cocos内,节点是往父节点上传递的
stopPropagationImmediate()stopPropagation()

按键事件

基本事件类型相应事件
KEY_DOWN按键按下
KEY_UP按键弹起

与触摸事件同理,需要一个函数监听,即事件注册函数
cc.systemEvent.on(EventType,callback,target,useCapture)

keyCode

KEY是cc模块的枚举类型,结合switch()使用

cc.systemEvent.on(cc.SystemEventType.KEY_DOWN,function(e){
    switch(e.keyCode){
        case cc.KEY.space:
             cc.log("space key down");
             break;
    }
},this);

自定义事件

自定义事件需要监听与发送事件

自定义事件的接收者on

this.node.on(string,callback.target,useCapture);
其中第一个参数为自定义的字符串
可以接收发送过来的事件(字符串)

自定义事件的发送者emit

this.node.emit(string,[detail]);
第二个参数是一个表,可以从callback传入的对象中访问

向上派送事件EventCustom

dispatchEvent(new cc.Event.EventCustom(“name”, bool));
第二个参数告诉编译器是否向上传递派送事件

注销事件监听

off(type,callback,target,useCapture)
删除之前与同类型,回调,目标或 useCapture 注册的回调,例如:

test:function(e){
    cc.log("test");
},
this.node.on(cc.Node.EventType.TOUCH_MOVE,this.test,this);
this.node.off(cc.Node.EventType.TOUCH_MOVE,this.test,this);

还可以使用targetoff(target)移除这个目标所有事件监听

this.node.on(cc.Node.EventType.TOUCH_MOVE,this.test,this);
this.node.targetoff(this.node);

三、cc.Node坐标空间

cc.Vec2

实质为JavaScript上的字典,结构{x:num,y:num};它表示 2D 向量和坐标
cc.p()cc.v2都是cc.Vec2的对象

向量常用API
方法功能
cc.pSub()返回两个向量的差
cc.pAdd()返回两个向量的和
cc.pLength()返回指定向量的长度
cc.pLengthSQ()返回指定向量长度的平方
cc.pAngle()获取当前向量与指定向量之间的弧度角
创建一个Vec2对象
var pos = new cc.Vec2(100,100);//第一种方法
pos = cc.v2(100,100);//第二种方法
pos = cc.p(100,100);//第三种方法
创建一个向量
var a = cc.p(100,100);
var b = cc.p(50,50);
var ba = cc.pSub(b,a); //终点减去起点坐标即为向量
var len = cc.pLength(ba); //计算向量长度
cc.Size与cc.Rect

cc.Size本质上也是一个表结构{width:num,height:num}包含高度与宽度的表
不过从官方文档上看到其即将被cc.Vec2所取代
cc.Rect同理,结构为{x:num,y:num,width:num,height:num}的表对象
cc.Rect通常用于表示一个矩形,从xy坐标为原点向右对角创建矩形

cc.Rect方法功能
Rect.contains(point)当前矩形是否包含指定坐标点,在内返回true,否则返回false
Rect.intersects()判断当前矩形与指定矩形是否相交,相交返回true,否则返回false
创建cc.Size对象
//通过new创建对象
var s = new cc.Size(100,100);
var r = new cc.Rect(0,0,100,100);

s = cc.size(100,100);
r = cc.rect(0,0,100,100);

creator坐标系

世界坐标与相对坐标

坐标:简单来说就是屏幕坐标x和y
世界坐标:原点与安卓的坐标原点不一样,creator的坐标原点是从左下角开始的,坐标系与数学标准坐标系相同。
相对坐标:节点其实都是以锚点作为原点,并且position记录的就是相对父节点的坐标

相关API功能
Node.convertToWorldSpace()将一个点转换到世界空间坐标系,结果以 Vec2 为单位。
Node.convertToWorldSpaceAR()将一个点转换到世界空间坐标系,结果以 Vec2 为单位, 返回值将基于世界坐标。
Node.convertToNodeSpace()将一个点转换到节点 (局部) 坐标系,结果以 Vec2 为单位。
Node.convertToNodeSpaceAR()将一个点转换到节点 (局部) 空间坐标系,结果以 Vec2 为单位, 返回值将基于节点坐标。
将节点坐标转换为屏幕坐标

把这个组件代码挂载到节点b中

 start:function(){
      cc.log(this.node.position);
       cc.log("相对于a的坐标:("+"x:"+this.node.position.x+"y:"+this.node.position.y+")");
       //以节点左下角为原点
       var Wpos = this.node.convertToWorldSpace(cc.p(0,0));  
       cc.log(Wpos);
         //加上AR后为以锚点为原点
         var WposAR = this.node.convertToWorldSpaceAR(cc.p(0,0));  
       cc.log(WposAR);
	},
将世界坐标转换为相对节点坐标

继续将组件挂载到节点b上

start:function(){
     //节点b锚点的世界坐标
     var WposAR = this.node.convertToWorldSpaceAR(cc.p(0,0));
      cc.log(WposAR);
      //以b节点左下角为原点,将该坐标(Wpos)转换为相对于b节点左下角的相对节点坐标
      var Npos = this.node.convertToNodeSpace(WposAR);
     cc.log(Npos);
     //以b节点锚点为原点,将该坐标(Wpos)转换为相对于b节点锚点的相对节点坐标
     var NposAR = this.node.convertToNodeSpaceAR(WposAR);
     cc.log(NposAR);
  },

获取包围盒

相关API功能
Node.getBoundingBox()获取父节点为坐标系下的包围盒
Node.getBoundingBoxToWorld()获取世界坐标系下的包围盒

触摸事件所返回的坐标对象

触摸事件会返回用户触摸事件的世界坐标,因此每一次点击,都会返回一个坐标对象。可以利用convertToNodeSpaceAR()将其转换为以锚点为原点的节点坐标,以此获取用户点击位置

  start () {
       var pos = this.node.on(cc.Node.EventType.TOUCH_START,function(e){
           //方法1
           var Wpos = e.getLocation();
           var pos = this.node.convertToNodeSpaceAR(Wpos);
           cc.log(Wpos+"<----->"+pos);
           //方法2
           pos = this.node.convertTouchToNodeSpaceAR(e);
          cc.log("**********"+pos);
       },this);
   },

移动子节点到指定世界坐标

有时候往往需要移动某子节点到某点世界坐标系中
假如我们需要把节点b移动到世界坐标(200,200)的位置当中,因此,需要把世界坐标转为相对父节点的坐标

start () {
       var N_pos = this.node.parent.convertToNodeSpaceAR(cc.p(200,200));
       this.node.setPosition(N_pos);
    },

只要获得了相对父节点的坐标,就是我们需要设置的世界坐标.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值