【Egret Engine】ことはじめ

　久しぶりにゲームを作ろうと思い、中華製のゲームエンジン Egret Engine に手を出してみました。

　中国市場では大きいシェアを持っているようですが、いかんせん日本語の資料が少ない。なので、公式のドキュメントをもとにメモ書きでも残していこうかと思います。

　しかし不思議ですよね。日本は漢字文化なのに同じ感じ文化の中国語より英語の方が読めるんですから！

　まずは Egret Engine の中核であろう Display Object から紐解いてみたいと思います。

　Egrea Engine では、ステージ上に存在するオブジェクトはすべて display object か display object container から構成されています。代表的な display object の shape クラスで説明します。

　ステージ座標は画面左上を原点とし、水平軸は X で表され右に向かって伸びます。垂直軸は Y で表され、下に向かって伸びてゆきます。
　原点を起点とし、幅 200 、縦 80 の矩形を描いてみます。

class Main extends egret.DisplayObjectContainer {
  public constructor() {
       super();
       // 矩形描画
       let shp:egret.Shape = new egret.Shape()
       shp.graphics.beginFill(0x111111, 1)
       shp.graphics.drawRect(0, 0, 200, 80)
       shp.graphics.endFill()
       this.addChild(shp)
   }
}

　上部や左部に間が生じる場合がありますが、それはEgret Engineで設定された画面サイズとブラウザのサイズに乖離があるためなので気にしないで下さい。

　上で描画した矩形を、座標 (50, 50) の位置に変更してみます。 　　this.addChild(shp) の次に以下の行を足して下さい。

shp.x = 50
shp.y = 50

　今度は矩形の拡大縮小についてです。
　拡大縮小は scaleX と scaleY の値を変更することで実現できます。その際、矩形の左上を原点として拡大縮小が実行されます。
　では、縦横の幅を50%縮小した図を描いてみます。

class Main extends egret.DisplayObjectContainer {
  public constructor() {
       super();
       // グランド矩形描画
       let grd:egret.Shape = new egret.Shape()
       grd.graphics.beginFill(0x0000ff, 1)
       grd.graphics.drawRect(0, 0, 200, 80)
       grd.graphics.endFill()
       grd.x = 50
       grd.y = 50
       this.addChild(grd)
       // 矩形描画
       let shp:egret.Shape = new egret.Shape()
       shp.graphics.beginFill(0x111111, 1)
       shp.graphics.drawRect(0, 0, 200, 80)
       shp.graphics.endFill()
       shp.x = 50
       shp.y = 50
       shp.scaleX = 0.5
       shp.scaleY = 0.5
       this.addChild(shp)
       // アンカー描画
       let anc:egret.Shape = new egret.Shape()
       anc.graphics.beginFill(0xff0000, 1)
       anc.graphics.drawCircle(0, 0, 5)
       anc.graphics.endFill()
       anc.x = 50
       anc.y = 50
       this.addChild(anc)
   }
}

　このコードでは縮小の様子がわかりやすいよう、矩形の裏に縮小前と同サイズの矩形を描き、描画の原点となる座標にアンカーを打ちました。

　三つ目は透過度です。
　最初のコードに、以下の行を足して下さい。矩形の色が薄くなるのが確認できます。

shp.alpha = 0.4

　4つ目は回転になります。
　以下のコードを足すと、 Shape の左上を中心とし水平軸から30度、右回りに回転します。

shp.rotation = 30

　拡大縮小のようにアンカーや比較の画像が裏にあるとわかりやすいと思います。

　Display Object には他に、以下のようなプロパティがあります。

width
height
skewX
skewY
visible
anchorOffsetX
anchorOffsetY

　width 、 height 、 visible はいいとして、 skew とか anchorOffset ってなんでしょう？　いぢってはみましたが、いまいちわかりませんでした。

　とりあえず今日はここまで。
　これからちまちま記事を追加していければと思います。