すくまりのメモ帳すくまりのメモ帳
← 記事一覧に戻る

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

2018-12-22
Egret Engine
【Egret Engine】TypeScript の基礎（変数・メソッド・クラス・継承の使い方）

はじめに

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

準備

１、新規Projectの作成

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

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

２、不要ファイルの削除

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

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

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

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

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

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

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

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

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

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

class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
 
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
        
    }
 
 
}

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

this.height = egret.MainContext.instance.stage.stageHeight;
this.width  = egret.MainContext.instance.stage.stageWidth;

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

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

    tickLoop(timeStamp:number):boolean{
        return false;
    }

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

TypeScriptの変数の宣言方法

１、number 型（整数 / 小数）

class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
 
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
        //number型（整数/小数どちらも可）
        const a : number = 10;
        let b : number = 1.1;
        let c = a + b;
 
        console.log(c);
        
    }
 
 
}
 
 
//実行結果
 
11.1

定数を扱う場合は

const 変数 : 型名 = 値;

変数を扱う場合は

let 変数 : 型名 = 値;

のように宣言します。

console.log();

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

２、string、boolean、anyの型

class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
 
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
        //string型
        let human : string = "Fia";
        console.log(human);
 
        //boolean型
        let flag : boolean = true;
        console.log(flag);
 
        //any 型
        let anyNumber : any = 10;
        let anyString : any = "Karen";
        console.log(anyNumber);
        console.log(anyString);
 
        
    }
 
 
}
 
 
//実行結果
 
//string型
Fia
 
//boolean型
true
 
//any 型
10
Karen

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

TypeScriptのメソッド（関数）の作成方法

１、メソッドの利用方法

class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
 
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
 
        //引数無しメソッドの作成
        function Method(){
            console.log("引数なし");
        }
        //メソッドの実行
        Method();
 
        //引数ありメソッドの作成
        function Method2(s : string){
            console.log(s);
        }
        //メソッドの実行
        Method2("引数あり");
        
    }
 
 
}
//実行結果
 
Method

２、即時関数の利用方法

class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
 
        (function(){
            console.log("無名関数");
        })();
 
 
        (function(s:string){
            console.log(s);
        })("引数はここにいれる");
    }
 
 
}
 
 
//実行結果
無名関数
引数はここにいれる

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

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

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

即時関数の使い方は、

//即時関数の使用
(function(引数) :void {
    console.log(引数);
    
})(引数に入れる値);

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

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

クラスのインスタンス化

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

class Main extends eui.UILayer {
    public a :Number = 10;
    private b :Number = 100;
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
        new Example();
    }
 
 
}
 
class Example{
 
    public a :Number = 10;
    private b :Number = 100;
 
    constructor(){
        console.log(this.a);
        console.log(this.b);
        
    }
 
}
 
//実行結果
10
100

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

constructor(){
 
}

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

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

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

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

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

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

class Main extends eui.UILayer {
    public a :Number = 10;
    private b :Number = 100;
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
        new Example();
    }
 
 
}
 
class Example{
 
    public a :Number = 10;
 
    constructor(){
        this.method();
    }
 
    method(){
        console.log(this.a);
    }
 
}
 
//実行結果
10

継承

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

class Main extends eui.UILayer {
 
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
    }
 
    private addToStage() {
        Game.init();
        egret.startTick(this.tickLoop, this);
    }
 
    tickLoop(timeStamp:number):boolean{
        return false;
    }
 
}
 
class Game{
 
    public static height: number;
    public static width: number;
 
    static init() {
        this.height = egret.MainContext.instance.stage.stageHeight;
        this.width  = egret.MainContext.instance.stage.stageWidth;
        
        /* メソッドなどを記入*/
        new ChildClass();
    }
 
 
}
 
class ParentClass {
 
    constructor(s : string){
        console.log(s);
    }
 
}
 
class ChildClass extends ParentClass{
 
    constructor(){
        super("親です");
        console.log("子です");
    }
 
}
//実行結果
 
//super()で呼び出した親のコンストラクタ
親です
 
//子のコンストラクタ
子です

継承するときは、

class 子クラス extends 親クラス{
 
}

のように宣言します。

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

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

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

HTML5 Egret Engine入門講座へ戻る

自作HTML5ゲーム

ゲーム一覧を見る →
ジグザグダッシュ

ジグザグダッシュ

壁に当たらないようにジグザグの道を走り抜けるゲームです。タップだけで方向転換できるようにしました。

壁けりジャンプ

壁けりジャンプ

忍者のように壁けりで登っていくゲームです。空中でタップすると反転ジャンプ（三角飛び）します。壁けりゲームは障害物があると避けるのが難しい問題がありましたが、この三角飛びによって操作性が向上しました。

くぐれゲート

くぐれゲート

開閉するゲートをタイミングよくすり抜けるゲームです。

スペースクリッカー

スペースクリッカー

スペースインベーダーをイメージしたクリッカーゲームです。クリックしたときの気持ちよさをもう少しだせたらよかったかなと考え中です。

Magic Flick

Magic Flick

指から魔法を出しているような感覚が味わえるシューティングゲームです。

高速ジャンプボール

高速ジャンプボール

足場を乗り継いで上を目指すゲームです。操作をスワイプにしたところ簡単になりすぎたので、動きを早くしてリズムゲームテイストにしてみました。

老眼チェッカー

老眼チェッカー

色がわずかに違うパネルを制限時間内に見つけてタップするゲームです。ラウンドを重ねるごとに色の差が小さくなっていき、どこまで見分けられたかで老眼度を診断できるようにしました。

カテゴリーで絞る

Unity
Unity
Egret Engine
Egret Engine
JavaScript
JavaScript
Vue.js
Vue.js
Laravel
Laravel
雑記
雑記
AndroidStudio
AndroidStudio
C
ClaudeCode
Markdown
Markdown
PHP
PHP
WordPress
WordPress

タグで絞る

Unity (47)Unity入門講座 (31)Egret Engine (18)プログラミング (8)JavaScript (7)Vue.js (5)p2.js (4)Laravel (3)雑記 (3)AndroidStudio (1)ClaudeCode (1)Markdown (1)PHP (1)WordPress (1)