Cocos CreatorでHello TypeScript

今回は、Cocos Creatorのプロジェクトを作成する際の雛形プロジェクトHello TypeScriptの紹介です。
Hello TypeScriptは、所謂、Hello WorldのCocos Creatorプロジェクト版です。

Hello TypeScriptプロジェクト作成

まずは、Hello TypeScriptのプロジェクト作成からはじめます。
Cocos Dashboardを起動すると、下のようなウィンドウが表示されます。
「New」ボタンをクリックします。

次に、下のようなウィンドウが表示されます。
フォルダーアイコンのようなものが、３つ並んでいるうちの中から、「Hello TypeScript」を選択します。
選択したら、Name欄のプロジェクト名にHello_TypeScriptと入力します。（プロジェクト名なので任意です）
Location欄は、プロジェクトを作成するフォルダパスを指定します。（任意です）
「Create」ボタンをクリックします。

Cocos Creatorでプロジェクトを開く

Cocos Creatorが起動されると下のようなメイン画面が表示されます。
Sceneパネル上には、Cocosのロゴが表示され、ロゴの下にHello World!が表示されています。
これを再生するとどうなるでしょうか？

実行

Hello World!だった文字がhelloに変わってしまいました。
どういうことでしょうか。
これから、プログラムを解説したいと思います。

プログラム解説

C言語や他のスクリプトでよく出てくるHello Worldよりは長いですが、それでもこれだけです。

const {ccclass, property} = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {

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

    @property
    text: string = 'hello';

    start () {
        // init logic
        this.label.string = this.text;
    }
}

@property識別子

まずプログラム中の
@property(cc.Label)
label: cc.Label = null;
に注目します。

@propertyは、Cocos Creatorの特異的な識別子です。
@propertyを付けると、この変数がPropertyパネルにパラメーターとして表示されるようになります。下の画像のようにPropertyパネルにLabelというプロパティが表示されています。
スクリプトは、Node TreeパネルのCanvasに紐付けされていますので、Canvasをクリックしてみて下さい。
下の画像のPropertyパネルをみるとHellowolrdというコンポーネントに、Labelというプロパティがあります。これがスクリプトで@propertyを付与した変数になります。

このように、Cocos Creatorでは、スクリプトが適用されているノードに対して、外部のノードを入力（紐付け）することが可能です。定義する時に型を正しく指定（labelの場合、cc.Label型）しておけば、色々なノードがスクリプトへ渡すことができます。使用用途としては、cc.Nodeやcc.Prefabなどの型を指定することが多いです。

start()関数内の処理

最後に、プログラム中のstart()関数内の処理について書いてプログラム解説を終えたいと思います。

this.label.string = this.text;

で、text変数に設定された'hello'を、外部から入力されたLabelノードのstring変数に設定しています。実行すると、まずスクリプトのstart()関数が呼び出されるので、この処理で、Hello World!がhelloに置き換わって表示されたということになります。

まとめ

１.　Cocos Creatorのスクリプト中に@propertyを付与した変数を定義すると、そのスクリプトをコンポーネントとして紐付けしているノードのPropertyパネルにプロパティとして変数が表示される。

２.　@Propertyを付与した変数に外部から他のノードを入力することができ、入力されたノードに対してプログラミングで影響を与えることができる