[Skill 名] cocos24-ui

Cocos Creator 2.4.x ベストプラクティス

ディレクトリ構造

cocos/
├── SKILL.md          # スキル説明ドキュメント
├── LoadAsset.ts      # [再利用可能] リソース参照マネージャーコンポーネント
├── LoadSprite.ts     # [再利用可能] 動的画像読み込みコンポーネント
├── ModelValue.ts     # [再利用可能] 監視可能な数値型
├── UIManager.ts      # [再利用可能] UI ポップアップマネージャー
├── UIState.ts        # [再利用可能] UI 状態管理
├── UIExample.ts      # [サンプル] UI コントロールクラス
└── UIModelExample.ts # [サンプル] UI モデルクラス

説明：

• [再利用可能] - ベストプラクティスコードで、プロジェクトに直接コピーして使用できます。
• [サンプル] - 参考規範で、新しい UI を作成する際にこの構造に従って記述します。

適用シナリオ

ユーザーが提供した UI スクリーンショットから、対応する TypeScript コード（UI コントロールクラス + Model クラス）を生成します。

実行フロー：

1. プロジェクト内に再利用可能なコンポーネントが存在するか確認し、なければまずプロジェクトにコピーします。
2. UI スクリーンショットの構造を分析し、要素タイプ（Label、Button、Sprite など）を識別します。
3. UI コントロールクラスの規範に従ってコードを生成します。

再利用可能コンポーネント

UI コードを生成する前に、以下のコンポーネントがプロジェクト内に存在するか確認し、存在しない場合はコピーしてください。

UI 開発規範

各 UI には、その UI に必要なすべてのデータを定義する Model クラスが付属している必要があります。UI コントロールクラスは setData(model) を介してデータを受け取ります。

UI Model クラス規範

TypeScript の class を使用してデータモデルを定義し、UI が表示する必要があるすべてのフィールドを含めます。

/** UI データモデルの例 */
export class UIModel {
    /** 一意の識別子 */
    id: number;
    /** タイトルテキスト */
    title: string = '';
    /** ロック解除されているか */
    isUnlock: boolean = false;
    /** 監視可能な数値型 */
    value: ModelValue;
    /** 最大値 */
    maxValue: number = 100;
    /** ネストされたサブモデル */
    items: SubModel[] = [];
}

要点：

• クラス名は Model で終わります。
• プロパティには型アノテーションとデフォルト値を付けます。
• 他の Model クラスや配列をネストできます。
• 変化を監視する必要がある数値には ModelValue 型を使用します。

例: UIModelExample.ts

UI コントロールクラス規範

新しい UI コントロールクラスを作成する際は、以下の構造に従ってください。

1. 参照するコンポーネントの宣言

@property デコレータを使用して、エディタでバインドする必要があるすべてのコンポーネント参照を宣言します。

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

@property(cc.Node)
node_name: cc.Node = null;

@property(I18nLabel)  // カスタムコンポーネント
custom_component: CustomComponent = null;

2. setData メソッド

UI 初期化のエントリポイントとして setData(data) を統一して使用します。

data: DataModel = null;

setData(data: DataModel) {
    this.data = data;
    this.initListen();        // イベントリスナーの初期化
    this.updateUI();          // UI 表示の更新
}

3. click によるクリックイベントの一元処理

ノードに click イベントをバインドし、currentTarget.name を介して処理を振り分けます。

click(target: cc.Event.EventTouch) {
    switch (target.currentTarget.name) {
        case 'btn_name_1':
            // ボタン1のクリックを処理
            break;
        case 'btn_name_2':
            // ボタン2のクリックを処理
            break;
        default:
            break;
    }
}

4. イベントリスニング管理

initListen() と onDestroy() をペアで使用してイベント購読を管理し、メモリリークを防ぎます。

isListening: boolean = false;

initListen() {
    if (this.isListening) return;
    this.isListening = true;
    this.data.property.on('valueChanged', this.onValueChanged, this);
}

onDestroy() {
    if (!this.isListening) return;
    this.isListening = false;
    this.data.property.off('valueChanged', this.onValueChanged, this);
}

例: UIExample.ts