Cocos Creator 레코드 5 - 이벤트, 타이머

이벤트 모니터링

이벤트 처리는 노드(cc.Node)에서 이루어집니다.구성 요소에 대해서는 노드this에 접근할 수 있습니다.node에서 이벤트를 등록하고 감청합니다.감청 이벤트는this를 통해 가능합니다.node.on() 함수는 다음과 같이 등록됩니다.

cc.Class({
  extends: cc.Component,

  properties: {
  },

  onLoad: function () {
    this.node.on('mousedown', function ( event ) {
      console.log('Hello!');
    });
  },  
});

특히 이벤트 감청 함수 on은 세 번째 매개 변수 target을 전송하여 응답 함수를 연결하는 호출자로 사용할 수 있다.다음과 같은 두 가지 호출 방식은 효과가 동일합니다.

//  
this.node.on('mousedown', function ( event ) {
  this.enabled = false;
}.bind(this));

//  
this.node.on('mousedown', function (event) {
  this.enabled = false;
}, this);

온 감청을 사용하는 것 외에 우리는once 방법을 사용할 수 있다.once 감청은 감청 함수 응답 후 감청 이벤트를 닫습니다.

감청 해제

우리가 더 이상 어떤 사건에 관심을 가지지 않을 때, 우리는 오프 방법으로 대응하는 감청 사건을 닫을 수 있다.주의해야 할 것은off방법의 매개 변수는 반드시 on 방법의 매개 변수와 일일이 대응해야만 닫기를 완성할 수 있다는 것이다.
우리가 추천하는 쓰기 방법은 다음과 같다.

cc.Class({
  extends: cc.Component,

  _sayHello: function () {
    console.log('Hello World');
  },

  onEnable: function () {
    this.node.on('foobar', this._sayHello, this);
  },

  onDisable: function () {
    this.node.off('foobar', this._sayHello, this);
  },
});

발사 사건

우리는 두 가지 방식으로 이벤트를 발사할 수 있다:emit와dispatchEvent.양자의 차이는 후자가 사건 전달을 할 수 있다는 데 있다.우리는 먼저 간단한 예를 통해emit 사건을 이해한다.

cc.Class({
  extends: cc.Component,

  onLoad: function () {
    this.node.on('say-hello', function (event) {
      console.log(event.detail.msg);
    });
  },

  start: function () {
    this.node.emit('say-hello', {
      msg: 'Hello, this is Cocos Creator',
    });
  },
});

배달 사건

dispatchEvent 방법, 이 방법으로 발사된 이벤트는 이벤트 전송 단계에 들어갑니다.Cocos Creator의 이벤트 전송 시스템에서 우리는 거품 전송 방식을 채택한다.거품 전송은 이벤트를 이벤트 시작 노드에서 끊임없이 그의 부급 노드에게 전달하고 루트 노드에 도착하거나 어떤 노드의 응답 함수에서 중단 처리 이벤트를 할 때까지 합니다.stopPropagation().
우리가 노드 c에서 이벤트'foobar'를 보내면 노드 a, b가 모두'foobar'사건을 감청하면 이벤트는 c를 통해 b, a 노드에 차례로 전달된다.예:

//   c  
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );

만약 우리가 b 노드에서 이벤트를 캡처한 후에 더 이상 이벤트를 전달하지 않기를 원한다면, 우리는 이벤트를 호출할 수 있습니다.stopPropagation() 함수로 완료합니다.구체적인 방법은 다음과 같다.

//   b  
this.node.on('foobar', function (event) {
  event.stopPropagation();
});

사용자 정의 이벤트를 보낼 때 cc를 직접 만들지 마십시오.이벤트 대상, 추상적인 클래스이기 때문에cc를 만드십시오.Event.EventCustom 객체를 배포합니다.

이벤트 객체

이벤트 감청 리셋에서 개발자는 cc를 받을 것입니다.이벤트 유형의 이벤트 대상 이벤트,stopPropagation은 cc입니다.Event의 표준 API, 기타 중요 API는 다음과 같습니다.
API 이름
유형
의미
type
String
이벤트 유형 (이벤트 이름)
target
cc.Node
이벤트에 수신된 원본 객체
currentTarget
cc.Node
이벤트가 수신된 현재 대상, 이벤트가 거품 단계에서 현재 대상은 원시 대상과 다를 수 있습니다
getType
Funciton
이벤트 유형 가져오기
stopPropagation
Function
거품 단계를 멈추면 이벤트는 부모 노드에 계속 전달되지 않고 현재 노드의 나머지 감청기는 이벤트를 수신합니다
stopPropagationImmediate
Function
이벤트의 전달을 즉시 중지합니다. 이벤트는 부모 노드와 현재 노드의 나머지 감청기에 전달되지 않습니다.
getCurrentTarget
Function
현재 이벤트에 수신된 대상 노드 가져오기
detail
Function
사용자 정의 이벤트 정보(cc.Event.EventCustom에 속함)
setUserData
Function
사용자 정의 이벤트에 대한 정보 설정(cc.Event.EventCustom에 속함)
getUserData
Function
사용자 정의 이벤트에 대한 정보 얻기(cc.Event.EventCustom에 속함)

시스템 내장 이벤트

다음은 일반적인 이벤트 감청 및 발사 규칙입니다. Cocos Creator에서 일부 시스템 내장 이벤트를 기본적으로 지원합니다. 다음 문서를 참고하여 어떻게 사용하는지 확인하십시오.
마우스, 터치: 노드 시스템 이벤트 문서 참조 키보드, 중력 감지: 글로벌 시스템 이벤트 문서 참조

타이머 사용

1. 타이머 시작

 component.schedule(function() {
     //   this   component
     this.doSomething();
 }, 5);

위의 이 타이머는 5s마다 실행될 것이다.

2. 보다 유연한 타이머

//  
 var interval = 5;
 //  
 var repeat = 3;
 //  
 var delay = 10;
 component.schedule(function() {
     //   this   component
     this.doSomething();
 }, interval, repeat, delay);
 10 ， 5 ， 3 。

3. 한 번만 실행하는 타이머(바로가기)

 component.scheduleOnce(function() {
     //   this   component
     this.doSomething();
 }, 2);
 ， 。

4. 타이머 해제

개발자는 리셋 함수 자체를 사용하여 타이머를 취소할 수 있습니다.

this.count = 0;
 this.callback = function () {
     if (this.count === 5) {
         //  
         this.unschedule(this.callback);
     }
     this.doSomething();
     this.count++;
 }
 component.schedule(this.callback, 1);

다음은 Component에서 타이머에 대한 모든 함수입니다.
schedule: 타이머 시작 schedule Once: 한 번만 실행하는 타이머 시작 unschedule: 타이머 취소 unschedule AllCallbacks: 이 구성 요소의 모든 타이머 취소