【cocos 2d微信小游戏开发教程】基础使用笔记分享（一）

开发文档地址
https://docs.cocos.com/creator/2.4/manual/zh/
挂载脚步
右键新建脚本
脚本解释
把类名和脚本名改为一致
允许其他脚本调用
```
export default 
```
text优先使用面板的值，property去掉则不在面板上显示
```
@property//去掉则不在面板上显示
text: string = 'hello';
```
打印输出
```
console.debug('调用');
```

生命周期函数解释

//初始化调用，第一个被调用
onLoad () {
      
      
    console.debug('调用');
}
//启用脚本调用，在onLoad和start之间执行，会多次调用
onEnable() {
      
      
    
}
//初始化调用，第二个被调用
start () {
      
      

}

//每帧开始调用，dt执行时间
update (dt) {
      
      }

//每帧结束调用
lateUpdate(dt) {
      
      
    
}
//禁用脚本调用
onDisable() {
      
      
    
}

//销毁时调用
onDestroy() {
      
      
    
}

节点的使用

start () {
      
      
    //获取子字节点
    let a = this.node.children[0];
    //根据子节点名称获取节点
    this.node.getChildByName('abc');
    //通过路径查找节点
    cc.find('Canvas/Main Camera')
    //获取父节点
    this.node.getParent();
    //设置一个父节点
    this.node.setParent(a);
    //移除所有子节点
    this.node.removeAllChildren();
    //移除某个节点
    this.node.removeChild(a);
    //从父节点移除掉,我删我自己
    this.node.removeFromParent();

    //获取位置
    this.node.x;
    this.node.y
    //设置位置
    this.node.setPosition(3,4);
    this.node.setPosition(cc.v2(3,4));
    //旋转
    this.node.rotation;
    //缩放
    this.node.scale;
    //锚点
    this.node.anchorX;
    //设置颜色
    this.node.color = cc.Color.RED;

    //节点开关
    this.node.active = false;
    //组件开关
    this.enabled = false;

    //按类型获取组件（填写组件类型）
    let sprite = this.getComponent(cc.Sprite);
    //从子集按类型获取组件
    this.getComponentInChildren(cc.Sprite);

	//创建节点
    let node = new cc.Node("New");
    //添加组件(创建一个精灵组件)
    node.addComponent(cc.Sprite);
}

预设体

拖拽新增预设体

用代码渲染预设体
在这里插入图片描述
脚本内容

@ccclass
export default class Test extends cc.Component {
      
      

    @property(cc.Label)
    label: cc.Label = null;

    @property//去掉则不在面板上显示
    text: string = 'hello';

	//定义预设体
    @property(cc.Prefab)
    pre:cc.Prefab = null;

    // LIFE-CYCLE CALLBACKS:

    //初始化调用，第一个被调用
    onLoad () {
      
      
        console.debug('调用');

        //实例化预设体
        let node = cc.instantiate(this.pre)
        //设置父节点，不设置父节点不会显示
        node.setParent(this.node);
    }
}

资源动态加载（属于异步加载，不影响主体程序代码的运行）

新建assets/resource资源文件，名称一定不能错
将要加载的图片资源文件放在resources里，记得改为精灵类型

编写脚本实现动态加载

start () {
        
        
    var that = this;
    //旧的方式，2.4以上已经不推荐使用，可能之后会废除，不建议使用
    cc.loader.loadRes("test/land", cc.SpriteFrame, function(err, sp:cc.SpriteFrame){
        
        
        that.getComponent(cc.Sprite).spriteFrame = sp;
    });		
     //新版本使用
   	cc.resources.load("test/land", cc.SpriteFrame, function(err, sp:cc.SpriteFrame) {
        
        
        that.getComponent(cc.Sprite).spriteFrame = sp;
    });
	
	//加载远程图片
    cc.loader.load({
        
        url:item.avatarUrl,type:'jpg'},function(err,tex){
        
        
         that.getComponent(cc.Sprite).spriteFrame  = new cc.SpriteFrame(tex);
     });
}

动态加载某个图集

//动态加载某个图集
cc.resources.load("test/land1", cc.SpriteAtlas, function(err, atlas:cc.SpriteAtlas){
        
        
    that.getComponent(cc.Sprite).spriteFrame = atlas.getSpriteFrame("hero1");
});

在这里插入图片描述

场景

新建场景
ctrl+s保存场景为game1，game2，放在assets/scene目录下，双击可打开切换

加载场景，切换场景

//直接切换场景
cc.director.loadScene("game2", function(){
      
      
   //当前已经加载到新的场景了
});

//预加载，用在一些比较大的场景时
cc.director.preloadScene("game2",function(){
      
      
   //这个场景已经加载到内存了，但是还没有用
   cc.director.loadScene("game2");
})

常驻节点，比如游戏游玩时长的统计

//添加常驻的节点，所有场景都有，换场景也不会销毁，this.node 表示当前节点
cc.game.addPersistRootNode(this.node);

//移除常驻节点
cc.game.removePersistRootNode(this.node)

鼠标事件和触摸事件

//绑定事件
this.node.on(cc.Node.EventType.MOUSE_DOWN, function(event){
      
      
   console.debug('鼠标按下啦！！');
   
   //获取当前点击的位置
   event.getLocation()
   event.getLocationX()
   event.getLocationY()
   
   if(event.getButton() == cc.Event.EventMouse.BUTTON_RIGHT){
      
      
       console.debug('点击了鼠标右键！！');
   }
})

//取消绑定事件
this.node.off(cc.Node.EventType.MOUSE_DOWN,function(event){
      
      
	//用法同上
});

//触摸事件
this.node.on(cc.Node.EventType.MOUSE_DOWN, function(event){
      
      
    //按触摸id判断有几个手指
    console.debug('触摸' + event.getID());
})

鼠标事件在桌面平台才会触发，系统提供的事件类型如下：

枚举对象定义	对应的事件名	事件触发的时机
cc.Node.EventType.MOUSE_DOWN	‘mousedown’	当鼠标在目标节点区域按下时触发一次
cc.Node.EventType.MOUSE_ENTER	‘mouseenter’	当鼠标移入目标节点区域时，不论是否按下
cc.Node.EventType.MOUSE_MOVE	‘mousemove’	当鼠标在目标节点在目标节点区域中移动时，不论是否按下
cc.Node.EventType.MOUSE_LEAVE	‘mouseleave’	当鼠标移出目标节点区域时，不论是否按下
cc.Node.EventType.MOUSE_UP	‘mouseup’	当鼠标从按下状态松开时触发一次
cc.Node.EventType.MOUSE_WHEEL	‘mousewheel’	当鼠标滚轮滚动时

鼠标事件（cc.Event.EventMouse）的重要 API 如下（cc.Event 标准事件 API 之外）：

函数名	返回值类型	意义
getScrollY	Number	获取滚轮滚动的 Y 轴距离，只有滚动时才有效
getLocation	Object	获取鼠标位置对象，对象包含 x 和 y 属性
getLocationX	Number	获取鼠标的 X 轴位置
getLocationY	Number	获取鼠标的 Y 轴位置
getPreviousLocation	Object	获取鼠标事件上次触发时的位置对象，对象包含 x 和 y 属性
getDelta	Object	获取鼠标距离上一次事件移动的距离对象，对象包含 x 和 y 属性
getButton	Number	cc.Event.EventMouse.BUTTON_LEFT 或 cc.Event.EventMouse.BUTTON_RIGHT 或 cc.Event.EventMouse.BUTTON_MIDDLE

触摸事件类型和事件对象
触摸事件在移动平台和桌面平台都会触发，这样做的目的是为了更好得服务开发者在桌面平台调试，只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下：

枚举对象定义	对应的事件名	事件触发的时机
cc.Node.EventType.TOUCH_START	‘touchstart’	当手指触点落在目标节点区域内时
cc.Node.EventType.TOUCH_MOVE	‘touchmove’	当手指在屏幕上目标节点区域内移动时
cc.Node.EventType.TOUCH_END	‘touchend’	当手指在目标节点区域内离开屏幕时
cc.Node.EventType.TOUCH_CANCEL	‘touchcancel’	当手指在目标节点区域外离开屏幕时

触摸事件（cc.Event.EventTouch）的重要 API 如下（cc.Event 标准事件 API 之外）：

API名	类型	意义
touch	cc.Touch	与当前事件关联的触点对象
getID	Number	获取触点的 ID，用于多点触摸的逻辑判断
getLocation	Object	获取触点位置对象，对象包含 x 和 y 属性
getLocationX	Number	获取触点的 X 轴位置
getLocationY	Number	获取触点的 Y 轴位置
getPreviousLocation	Object	获取触点上一次触发事件时的位置对象，对象包含 x 和 y 属性
getStartLocation	Object	获取触点初始时的位置对象，对象包含 x 和 y 属性
getDelta	Object	获取触点距离上一次事件移动的距离对象，对象包含 x 和 y 属性

键盘事件

/*
 * KEY_DOWN：按下
 * KEY_UP：松开
 */
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(event){
      
      
    if(event.keyCode == cc.macro.KEY.q){
      
      
        console.debug('你按下了q键！！');
    }
})

自定义事件

let that = this;
//触摸事件
this.node.on(cc.Node.EventType.MOUSE_DOWN, function(event){
      
      
    //触发自定义事件,第一种
    that.node.emit('myEvent');
    //触发自定义事件,第二种,true控制开启事件冒泡
    that.node.dispatchEvent(new cc.Event.EventCustom("myEvent", true));
})

//监听自定义事件
this.node.on('myEvent', function(event){
      
      
    console.debug('自定义事件');
})

碰撞检测
添加碰撞组件，支持三种类型，分别是方形，圆形，多边形，勾选editing可进行拖动编辑
在这里插入图片描述
开启碰撞检测

//初始化调用
start () {
      
      
   //开启碰撞检测
   cc.director.getCollisionManager().enabled = true;
}

/**
 * 当碰撞产生的时候调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionEnter(other, self){
      
      
    //获取碰撞组件的tag，来判断碰到的是那个物体
    console.log('碰撞发生' + other.tag);
}

/**
 * 当碰撞产生后，碰撞结束前的情况下，每次计算碰撞结果后调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionStay(other, self) {
      
      
    console.log('碰撞持续');
}

/**
 * 当碰撞结束后调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionExit(other, self) {
      
      
    console.log('碰撞结束');
}

【cocos 2d微信小游戏开发教程】基础使用笔记分享（一）

猜你喜欢