[Tutorial de desarrollo de minijuegos de WeChat de cocos 2d] Uso compartido básico de notas (1)

1. Dirección del documento de desarrollo
   https://docs.cocos.com/creator/2.4/manual/zh/

2. Monte el script
   Haga clic derecho para crear un nuevo script
   
   

3. Interpretación de guiones
   Cambie el nombre de la clase y el nombre del guion para que sean consistentes,
   permitiendo otras llamadas de guiones

   export default 
   

   El valor del panel se usa primero para el texto y no se mostrará en el panel si se elimina la propiedad.

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

   imprimir

   console.debug('调用');
   

4. Explicación de las funciones del ciclo de vida

   //初始化调用，第一个被调用
   onLoad () {
         
         
       console.debug('调用');
   }
   //启用脚本调用，在onLoad和start之间执行，会多次调用
   onEnable() {
         
         
       
   }
   //初始化调用，第二个被调用
   start () {
         
         
   
   }
   
   //每帧开始调用，dt执行时间
   update (dt) {
         
         }
   
   //每帧结束调用
   lateUpdate(dt) {
         
         
       
   }
   //禁用脚本调用
   onDisable() {
         
         
       
   }
   
   //销毁时调用
   onDestroy() {
         
         
       
   }
   

5. uso de nodos

   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);
   }
   
   

6. Preestablecido

• Arrastra y suelta para agregar ajustes preestablecidos
  

• Representar ajustes preestablecidos con
  
  contenido de secuencia de comandos de código

  @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);
      }
  }
  

  5. Carga dinámica de recursos (pertenece a la carga asíncrona y no afecta el funcionamiento del código del programa principal)

  • Cree un nuevo archivo de recursos de activos/recursos,名称一定不能错
    

  • Coloque el archivo de recursos de imagen para cargar en recursos,记得改为精灵类型
    

  • Escritura de scripts para carga dinámica

    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);
         });
    }
    
    

  • Cargar dinámicamente un atlas

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

    

6. Escenas

• nueva escena
  

• ctrl+s guarda la escena como juego1, juego2, colócala en el directorio assets/scene, haz doble clic para abrir el interruptor
  

• cargar escena, cambiar escena

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

• Nodos residentes, como las estadísticas de tiempo de juego

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

7. eventos del mouse y eventos táctiles

   //绑定事件
   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());
   })
   

   Los eventos del mouse solo se activan en plataformas de escritorio. Los tipos de eventos proporcionados por el sistema son los siguientes:

   definición de objeto de enumeración	nombre del evento correspondiente	Cuando se activa el evento
   cc.Node.EventType.MOUSE_DOWN	'ratón hacia abajo'	Se activa una vez cuando se presiona el mouse en el área del nodo de destino
   cc.Node.EventType.MOUSE_ENTER	'mouseenter'	Cuando el mouse se mueve hacia el área del nodo de destino, independientemente de si se presiona
   cc.Node.EventType.MOUSE_MOVE	'movimiento del ratón'	Cuando el mouse se mueve en el área del nodo de destino, ya sea que esté presionado o no
   cc.Node.EventType.MOUSE_LEAVE	'hoja de ratón'	Cuando el mouse se mueve fuera del área del nodo de destino, independientemente de si se presiona
   cc.Node.EventType.MOUSE_UP	'mouseup'	Disparado una vez cuando el mouse se suelta del estado presionado
   cc.Node.EventType.MOUSE_WHEEL	'rueda de ratón'	cuando la rueda del mouse se desplaza

   Las API importantes del evento del mouse (cc.Event.EventMouse) son las siguientes (más allá de la API de eventos estándar de cc.Event):

   Nombre de la función	tipo de retorno	significado
   getScrollY	Número	Obtenga la distancia del eje Y de la rueda de desplazamiento, solo es válida cuando se desplaza
   obtenerUbicación	Objeto	Obtenga el objeto de posición del mouse, el objeto contiene propiedades x e y
   obtenerUbicaciónX	Número	Obtener la posición del eje X del mouse
   getUbicaciónY	Número	Obtenga la posición del eje Y del mouse
   obtenerUbicaciónAnterior	Objeto	Obtenga el objeto de posición cuando se activó el evento del mouse la última vez, el objeto contiene propiedades x e y
   obtenerParticipar	Objeto	Obtenga el objeto de distancia que el mouse movió desde el último evento, el objeto contiene atributos x e y
   obtenerBoton	Número	cc.Event.EventMouse.BUTTON_LEFT o cc.Event.EventMouse.BUTTON_RIGHT o cc.Event.EventMouse.BUTTON_MIDDLE

   Tipo de evento táctil y objeto de evento
   Los eventos táctiles se activan tanto en plataformas móviles como en plataformas de escritorio. El propósito de esto es servir mejor a los desarrolladores para la depuración en plataformas de escritorio. Solo es necesario monitorear los eventos táctiles para responder a los eventos táctiles en plataformas móviles y escritorios en al mismo tiempo Finalice los eventos del mouse. Los tipos de eventos táctiles proporcionados por el sistema son los siguientes:

   definición de objeto de enumeración	nombre del evento correspondiente	Cuando se activa el evento
   cc.Nodo.TipoEvento.TOUCH_START	'inicio táctil'	Cuando el toque del dedo cae dentro del área del nodo de destino
   cc.Node.EventType.TOUCH_MOVE	'tocar mover'	Cuando el dedo se mueve dentro del área del nodo de destino en la pantalla
   cc.Nodo.TipoEvento.TOUCH_END	'tocar'	Cuando el dedo sale de la pantalla dentro del área del nodo de destino
   cc.Node.EventType.TOUCH_CANCEL	'tocar cancelar'	Cuando el dedo sale de la pantalla fuera del área del nodo de destino

   Las API importantes del evento táctil (cc.Event.EventTouch) son las siguientes (más allá de la API de evento estándar de cc.Event):

   Nombre de la API	tipo	significado
   tocar	cc.toque	El objeto de contacto asociado con el evento actual.
   obtenerID	Número	Obtenga la identificación del punto de contacto para el juicio lógico de multi-touch
   obtenerUbicación	Objeto	Obtenga el objeto de posición de contacto, el objeto contiene atributos x e y
   obtenerUbicaciónX	Número	Obtener la posición del eje X del punto de contacto
   getUbicaciónY	Número	Obtener la posición del eje Y del punto de contacto
   obtenerUbicaciónAnterior	Objeto	Obtenga el objeto de posición cuando el último evento desencadenante del contacto, el objeto contiene atributos x e y
   getStartLocation	Objeto	Obtenga el objeto de posición inicial del contacto, el objeto contiene atributos x e y
   obtenerParticipar	Objeto	Obtenga el objeto de la distancia movida por el punto de contacto desde el último evento, el objeto contiene atributos x e y

8. eventos de teclado

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

9. evento personalizado

   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('自定义事件');
   })
   

10. Detección de colisiones
    Agregue componentes de colisión, admita tres tipos, a saber, cuadrado, círculo, polígono, verifique la edición para arrastrar y editar y habilite la
    
    detección de colisiones

    //初始化调用
    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('碰撞结束');
    }