독자적인 구성 요소의 실행 순서를 제어 (SDK for Cocos Creator)

업데이트： 2023/03/14

여기에서는 사용자 독자의 구성 요소에 대해 다른 Cubism 구성 요소 간의 실행 순서를 제어하는 절차를 설명합니다.
다음은 「SDK 가져오기」를 수행한 프로젝트에 추가하는 것을 전제로 한 설명입니다.

개요

Cubism SDK for Cocos Creator의 Original Workflow 구성 요소 중 일부는 실행되는 순서에 제한이 있습니다.

Cubism SDK for Cocos Creator에서는 CubismUpdateController를 사용하여 제어할 수 있으며 위의 구성 요소는 이를 통해 실행 순서가 제어됩니다.
CubismUpdateController가 제어하는 구성 요소는 Cubism 모델의 Prefab 루트에 연결된 구성 요소입니다.

CubismUpdateController를 사용하면, 유저의 독자적인 컴퍼넌트도 마찬가지로 실행 순서를 제어하는 것이 가능합니다.

여기에서는 예로서 다음 구성 요소에 대해 실행 순서 제어를 설정하는 절차를 설명합니다.

@ccclass('CubismExampleController')
export class CubismExampleController extends Component {
    start() {
        // CubismExampleController 초기화 처리
    }

    lateUpdate(deltaTime: number) {
        // CubismExampleController 업데이트 처리
    }
}

1. Prefab에 구성 요소를 연결

Hierarchy에 배치된 Prefab 루트의 Node에 CubismExampleController를 연결합니다.
또한 Prefab을 OW 형식으로 가져오지 않은 경우 CubismUpdateController도 연결합니다.

2. 컴포넌트에 ICubismUpdatable 구현

실행 순서를 제어하는 구성 요소에 ICubismUpdatable 인터페이스를 구현합니다.

CubismUpdateController는 실행 시에 ICubismUpdatable을 구현한 구성 요소를 취득하고 그 실행 순서를 제어합니다.

@ccclass('CubismExampleController')
export class CubismExampleController extends Component implements ICubismUpdatable {

  bindedOnLateUpdate: ICubismUpdatable.CallbackFunction;
  get executionOrder(): number {
    throw new Error('Method not implemented.');
  }
  get needsUpdateOnEditing(): boolean {
    throw new Error('Method not implemented.');
  }
  get hasUpdateController(): boolean {
    throw new Error('Method not implemented.');
  }
  set hasUpdateController(value: boolean) {
    throw new Error('Method not implemented.');
  }

  readonly [ICubismUpdatable.SYMBOL]: typeof ICubismUpdatable.SYMBOL;

  protected start() {
    // CubismExampleController 초기화 처리
  }

  protected lateUpdate(deltaTime: number) {
    // CubismExampleController 업데이트 처리
  }
}

여기서 구현한 ICubismUpdatable 인터페이스는 다음과 같이 되어 있습니다.

interface ICubismUpdatable {
  readonly [ICubismUpdatable.SYMBOL]: typeof ICubismUpdatable.SYMBOL;
  readonly bindedOnLateUpdate: ICubismUpdatable.CallbackFunction;

  get executionOrder(): number;
  get needsUpdateOnEditing(): boolean;
  get hasUpdateController(): boolean;
  set hasUpdateController(value: boolean);
}

executionOrder는 이 구성 요소의 실행 순서를 결정하는 값입니다.
이 값이 작을수록 다른 구성 요소보다 먼저 호출됩니다.
SDK와 함께 제공되는 구성 요소에 설정되는 값은 CubismUpdateExecutionOrder에 기술되어 있습니다.

hasUpdateController는 ICubismUpdatable을 구현한 구성 요소가 CubismUpdateController에 연결되지 않은 경우 Cocos Creator의 이벤트 함수로 호출하도록 하기 위한 플래그입니다.

namespace CubismUpdateExecutionOrder {
  export const CUBISM_FADE_CONTROLLER = 100;
  export const CUBISM_PARAMETER_STORE_SAVE_PARAMETERS = 150;
  export const CUBISM_POSE_CONTROLLER = 200;
  export const CUBISM_EXPRESSION_CONTROLLER = 300;
  export const CUBISM_EYE_BLINK_CONTROLLER = 400;
  export const CUBISM_MOUTH_CONTROLLER = 500;
  export const CUBISM_HARMONIC_MOTION_CONTROLLER = 600;
  export const CUBISM_LOOK_CONTROLLER = 700;
  export const CUBISM_PHYSICS_CONTROLLER = 800;
  export const CUBISM_RENDER_CONTROLLER = 10000;
  export const CUBISM_MASK_CONTROLLER = 10100;

3. 컴포넌트를 CubismUpdateController에 대응시킨다

CubismExampleController를 다음과 같이 수정합니다.
import { _decorator, Component, Node } from 'cc';
import CubismUpdateController from '../../extensions/Live2DCubismSdkForCocosExtension/static/assets/Framework/CubismUpdateController';
import ICubismUpdatable from '../../extensions/Live2DCubismSdkForCocosExtension/static/assets/Framework/ICubismUpdatable';
const { ccclass, property } = _decorator;

@ccclass('CubismExampleController')
export class CubismExampleController extends Component implements ICubismUpdatable {
  bindedOnLateUpdate: ICubismUpdatable.CallbackFunction;

  // 이 컴포넌트의 실행 순서
  get executionOrder(): number {
      return 150;
  }

  // Scene이 실행되지 않는 동안 실행 순서를 제어할지 여부
  get needsUpdateOnEditing(): boolean {
      return false;
  }

  // 실행 순서가 제어되고 있는지 여부
  @property({ serializable: false, visible: false })
  private _hasUpdateController: boolean = false;
  get hasUpdateController(): boolean {
      return this._hasUpdateController;
  }
  set hasUpdateController(value: boolean) {
      this._hasUpdateController = value;
  }

  readonly [ICubismUpdatable.SYMBOL]: typeof ICubismUpdatable.SYMBOL;

  protected start() {
    // CubismExampleController 초기화 처리

    // 모델의 Prefab에 CubismUpdateController가 연결되어 있는지 확인
    this.hasUpdateController = this.getComponent(CubismUpdateController) ! = null;
  }

  protected lateUpdate(deltaTime: number) {
    // CubismUpdateController가 연결되지 않은 경우 CubismExampleController 자체의 이벤트 함수로 업데이트 처리
    if (!this.hasUpdateController) {
        this.onLateUpdate(deltaTime);
    }
  }

  // 실행 순서가 제어되는 업데이트 함수
  public onLateUpdate(deltaTime: number) {
    // CubismExampleController 업데이트 처리
  }
}

lateUpdate()에서 수행한 업데이트 프로세스를 CubismUpdateController가 호출하는 onLateUpdate()로 이동합니다.

이상으로 실행 순서를 제어하는 설정은 완료됩니다.
이 스크립트를 Cubism 모델의 Prefab에 연결하여 장면을 실행하면 이 스크립트의 업데이트 프로세스가 CubismUpdateController에 의해 호출됩니다.