CocosCreatorコンポーネントライブラリの構築

最近、CocosCreator(以下CC)を使ってHTML 5ゲームを開発しているところ、カウントダウンバーや決済ページなど、会社の多くのゲームには同じ要素があることがわかりました.初期の開発では,多重化の方法を模索しておらず,異なるゲーム項目で最初から書くしかなかった.需要がますます多くなるにつれて、繰り返しホイールを作るのは良い方法ではないに違いないが、CCプロジェクトにとって、これらの多重化可能なゲーム要素をコンポーネントパッケージとして抽出することができるだろうか.探索の末,やっと解決策を見つけた.
CCコンポーネントとは
私たちが手Qに持っている「太鼓の達人」という小さなゲームを例にとると、そのカウントダウンバーと決済ページは、他の小さなゲームにも存在し、外観だけが異なるが、その論理処理は一致している.ここのカウントダウンバーと決済ページは、コンポーネントとして理解できます.
2つのコンポーネントの論理は次のとおりです.

カウントダウンバーはゲーム時間を設定することができ、ゲーム時間内にその充填長さが絶えず減少する.カウントダウンバーの右側に残りの時間が表示されます.カウントダウンが終了するとコールバック動作が実行されます.

決済ページは等級スコアを設定することができ、具体的な等級スコアを達成または超えて星を得ることができる.星はアニメーションの論理に従って展示されます.以下は0から点数を決済します.決済が完了するとコールバック動作が実行されます.

この例では,いわゆるCCコンポーネントとは,論理,ピクチャ,アニメーション,オーディオなどの異なるリソースを含むゲームノードであることが理解できる.CCでは、ノードがこのように成長しています.
エディタの左側には、その構造が定義されており、中央にはその具体的な表現があり、右側には関連する属性があります.
この定義済みノードを他のプロジェクトで多重化したい場合は、どうすればいいですか?
プレハブリソースに変換
CCでは,プレハブリソースが非常に重要な部分であり,ノードのテンプレートとして理解できる.すでに作成されたノードをコンポーネントに抽象化するには、それをプレハブリソースにするのが最適です.
CCエディタでノードを定義し、論理スクリプト、静的リソースを関連付けた後、エディタの から に直接ドラッグすると、プリフォームリソースに変換できます.しかし、CC内のリソースの関連はリソースパスに基づいているため、抽象的なCCコンポーネントが出る前に、このコンポーネントが使用するすべてのリソースを一緒に置いて、後で多重化を容易にする必要があります.そうしないと、他のエンジニアリング多重化時にリソースのエラーが見つからない可能性があります.
新しいCCプロジェクトを作成し、assets/ディレクトリをクリアし、そこにComponents/ディレクトリを作成し、CCコンポーネントを保存するディレクトリとして使用します.ゲーム結果ページResultを例に、以下のディレクトリ構造に従って初期化を行い、必要なリソースを入れる.

.
├── Resources           #       
│   ├── score.png
│   └── star.png
└── Result.ts           #     

次にCCエディタで、サブノードにドラッグアンドドロップで画像を追加し、論理スクリプトResult.tsをバインドします.
完了したら、リソースマネージャのassets/Components/Resultディレクトリの下にドラッグしてプレハブリソースにします.
他のユーザがこのコンポーネントを容易に使用できるように、このコンポーネントのみのシーンやシーンに必要なスクリプトが配置されたdemoを追加することができます.ユーザーがこのコンポーネントを理解する必要がある場合は、Demoシーンをプレビューするだけでよく、コンポーネントのいくつかの方法はDemoスクリプトでも見ることができます.最終ディレクトリ構造は次のとおりです.

.
├── Demo                #     Demo
│   ├── Result.fire
│   └── ResultDemo.ts
├── Resources           #       
│   ├── score.png
│   └── star.png
├── Result.prefab       #     
└── Result.ts           #     

使用方法
簡単に言えば、コンポーネントライブラリエンジニアリングのComponents/ディレクトリ全体をターゲットエンジニアリングのassets/ディレクトリの下にコピーし、プレハブリソースノードを階層マネージャにドラッグすればよい.もちろん、このような手動操作は優雅ではありませんので、shellスクリプトを使用してこの手順を簡略化することができます.
ターゲットエンジニアリングのルートディレクトリの下にdownload.shスクリプトを新規作成し、次のように書き込みます.

#!/bin/bash

#      
echo "Clearing workbench..."
rm -rf ./cocos-components
rm -rf ./assets/Components

#   clone     ，  Components  ，         
echo "Cloning project..."
git clone http://git.xxx.com/cocos-components.git
cp -r ./cocos-components/assets/Components ./assets 
rm -rf ./cocos-components

echo "Done!"

今後は./download.shを実行するだけで最新のコンポーネントライブラリにダウンロードできるので便利です.
コンポーネント設計仕様
コンポーネントの設計は、他のコンポーネントに依存せず、他のコンポーネントにも影響を与えない「ブラックボックス」の原則に従う必要があります.コンポーネントのステータスは、コンポーネント自体によって保存されます.コンポーネントのステータスまたは動作を変更する必要がある場合は、コンポーネントのスクリプトインスタンスを修正または導入するCocos Creatorのプロパティインスペクタを使用して、構成可能なアイテムまたはインタフェースを外部に露出する必要があります.Progressコンポーネントを例に挙げます.gameDurationの構成項目が外部に提供され、カウントダウンの時間を定義します.さらに、カウントダウンが終了したときの動作を定義するためのsetTimeoutCallback()の方法も提供される.前者はCocos Creatorのプロパティインスペクタで直接変更でき、後者はゲームスクリプトでコードで使用する必要があります.

import Progress from '../Components/Progress/Progress'

@ccclass
export default class Game extends cc.Component {
  start () {
    Progress.instance.setTimeoutCallback(() => {
      console.log('Test progress timeout callback!')
    })
  }
}

コンポーネントのスクリプトを定義するときは、スクリプト間の呼び出しのためにinstanceという静的プロパティをスクリプトに追加することに注意してください.

export default class Progress extends cc.Component {
  static instance = null

  constructor () {
    super()
    Progress.instance = this
  }
}

また、コンポーネントライブラリを構築するには、開発者も呼び出し者も多くの悩みを省くために、ネーミング仕様に注意する必要があります.
後続の最適化
CCコンポーネントライブラリエンジニアリングも完全なCCゲームで、このゲームにコンポーネントメニューを追加し、メニューをクリックすると対応するコンポーネントのシーンをロードし、コンポーネントの効果をリアルタイムでプレビューすることができます.この考えも後で実践に移し、一日も早く源を開くように努力します.