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

投稿者: | 2018年12月24日

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

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

 

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

 

スポンサーリンク

 

 

目次

 

準備

本記事ではeui.UILayerを使用します。

egret.DisplayObjectContainerを使用したい方はこちらの記事もどうぞ。

【Egret Engine】eui.UILayer と egret.DisplayObjectContainer の使い分け

 

下記のコードがUIを描画していく際のテンプレートになります。

 

 

円の描画

 

円を追加するには

を使用します。

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は長方形の左上の点の座標になります。

 

背景の描画

drowRectを使えば、背景に色を付けることができます。

 

 

直線の描画

 

直線を引くには、

を使用します。

 

直線は枠の色と同様、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 入門へ戻る

【Egret Engine】図形の描画方法「drawCircle」「drawRect」「lineTo」」への1件のフィードバック

  1. ピンバック: 【EgretEngine】p2.js 物理エンジンを使用した自然落下 | すくまりゲームズ

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください