【Egret Engine】TypeScript の基礎(変数・メソッド・クラス・継承の使い方)

Egret Engine

はじめに

Egret では TypeScript を使用しますので、基本的な文法を紹介します。

 

準備

1、新規Projectの作成

【Egret Wing】新規Projectの作成とエディタの使い方を参考にして、新規Projectを作成してください。

私は「TestProject」という名前で作成しました。

 

2、不要ファイルの削除

・src フォルダ内にあるMain.ts以外のコードを全て削除

src フォルダ内にあるMain.ts以外のコードは不要なので全て削除してください。

 

・resource/assets内のUI画像を全て削除

resource/assets内のUI画像を全て削除してください。

HTML5ゲーム1MB以下でゲームが作れるくらい容量が小さいです。

アプリと違ってゲーム起動時に通信が必要なので、容量を小さくすることが必要になります。

asset内の画像はおよそ200kB近くあるので、使わない場合は削除してしまいましょう。

 

 

3、Main.ts内のコードを初期化

Egret Wing エディタに表示されているTestProject/src/Main.ts をクリック。(表示されてない場合はツールのエクスプローラーをクリック)。

 

Main.ts内のコードを全て削除して、以下のクラスを加えてください。これが基本形になります。

 

以下のコードでゲーム画面のサイズを取得。

 

ゲームを起動したときに実行したいメソッドをinit()へ記入してください。

 

また、メソッドを繰り返したい場合はtickLoop内に記載してください。

 

デバッグボタンを押して実行すると、何も表示されていないウィンドウが表示されます。

 

 

 

TypeScriptの変数の宣言方法

1、number 型(整数 / 小数)

 

定数を扱う場合は

変数を扱う場合は

のように宣言します。

 

でデバッグコンソールに実行結果が表示されます。

 

2、string、boolean、anyの型

 

any型にはどんな型でも入れることができますが、不具合の元になるので、できるだけ使わない方がいいと思います。

 

スポンサーリンク

 

TypeScriptのメソッド(関数)の作成方法

1、メソッドの利用方法

 

2、即時関数の利用方法

functionは 「Method2();」のように、呼び出さないと使用できません。

しかし、定義したものをすぐに使用したいときは、毎回呼び出すのが面倒です。

そういったときに「即時関数」を使用します。

 

即時関数の使い方は、

です。これは関数名に名前を付けなくてもよい、「無名関数」も使用使用しています。

functionを()で囲み、すぐにもう一度(); をつけることで実行できます。

クラスのインスタンス化

1、public と private 変数の利用方法

 

クラスをインスタンス化(利用可能)にしたときに、初めに実行したい処理がある場合は、

の中に記載してください。

 

Gameクラスのinit()内でpublic や private等の変数を利用する場合、thisではエラーになります。

init は static なので、Game.heightのようなstatic変数しか利用できないので注意が必要です。

 

public や private 、thisについては 、UnityのC#ですがこちらの記事もご覧ください。

グローバル変数とローカル変数の違い

 

 

2、クラス内メソッドの利用方法

 

スポンサーリンク

 

継承

1、親クラスの継承方法とメソッドの使い方

 

継承するときは、

のように宣言します。

「constructor(){}」はインスタンス化したときに呼び出されるメソッドです。

「super();」は親クラスのconstructor()を呼び出すメソッドになります。

親クラスに引数が必要な場合はsuper(引数)のように使用してください。

 

HTML5 Egret Engine入門へ戻る

 

すくまりゲームズの人気記事

 

 

 

タイトルとURLをコピーしました