【Egret Engine】図形の描画方法「drawCircle」「drawRect」「lineTo」

投稿者: | 2018年12月24日

フィア
今回は図形の描画方法だよ!
カレン
今回紹介したもの以外にもたくさんあるから、

ぜひ、公式のAPIも見てみてね

 

↓ 最終的にこうなります ↓

 

スポンサーリンク

 

 

目次

 

準備

1、新規Projectの作成

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

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

 

2、不要ファイルの削除

【Egret Engine】TypeScript の基礎を参考にして、asset等の不要ファイルやコードを削除してください。

 

GameStageの生成

Main.tsに以下のコードを記入してください。

 

Mainのstageに直接描画すると、ゲーム画面全体を動かしたいときに困ることがあるので、GameStageレイヤーに描画していきます。

テキストを表示する方法でも説明したように、GameStageとUIのレイヤーは分けておいた方がいいと思います。

 

図形を描画する際はGameObjectクラスを継承してください。自動的にGameStageレイヤーへ挿入されます。

図形をインスタンス化する場合はGameクラスのinit()内にnewしてください。

 

図形の描画

円の描画

 

円を追加するには

を使用します。

x, yは円の中心の座標です。

しかし、これだけでは無色透明なので、色を付けていきます。

 

まず、円に枠線を加えたい場合は

を使用します。

注意点ですが、これは「beginFill」より先に書いてください。beginFillは図形を塗りつぶします。

しかし、endFillの後にlineStyleを適用しても塗りつぶされてしまったので、beginFillより上に書くのが無難です。

 

次に、円を塗りつぶしたい場合は

を使用します。beginFillからendFillの間にある図形を色で塗りつぶします。

ちなみに、塗りつぶしをしなかった場合は透明となり、後ろのオブジェクトが透けて見えます。

 

(余談)Circleのwidthについて

上記の円の描画コードから、lineStyleを削除して、console.log(shape.width);を追加しました。

shape.widthで図形の横幅の長さが取得できます。

今回の場合、半径100pxの円なので、width = 200px(直径)となるはずですが、実際には203と表示されます。

 

これはEgretEngine側の仕様で、”WebGLのパッキングの問題でdrawCircleメソッドが下記のような実装になっている”からだそうです。

EgretEngineで半径5・直径10の円のSpriteを作成後にwidthが13になる問題

 

円のwidthを使用する際は、長さに注意してください。

 

長方形の描画

長方形を書くには、

を使用します。

x, yは長方形の左上の点の座標になります。

 

直線の描画

 

直線を引くには、

を使用します。

 

直線は枠の色と同様、lineStyleで着色します。

 

drowArc等を使えば、曲線もかけるので、是非公式のAPIもご覧ください。

公式API  public class Graphics

 

 

おわりに

フィア
いろんな描画方法があるから、

公式APIも参考にしてみてね!

 

参考URL

Egret Engine 公式API

公式API  public class Graphics

 

Qiita

EgretEngineで半径5・直径10の円のSpriteを作成後にwidthが13になる問題

 

HTML5 Egret Engine 入門へ戻る

 

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