EgretEngine 2Dでのグラデーションの描画方法 #EgretEngine

サンプル

こんな感じの地面を書きたい場合

サンプルコード

このように書きます

        const matrix = new egret.Matrix();
        matrix.createGradientBox(width,height,Math.PI/2,0,0,0); 
        p.graphics.beginGradientFill(egret.GradientType.LINEAR,[fromColor,0x000000],[100,0],[0,0],matrix);
        p.graphics.drawRect(0, 0, width,height);
        p.graphics.endFill();

API解説

beginGradientFill

グラデーションで塗りつぶしたい場合、beginGradientFillをbeginFillの代わりに使います。

beginGradientFill () Method

public beginGradientFill( type:string,colors:number[] ,alphas:number[] ,ratios:number[] ,matrix:egret.Matrix ):void

language version: Egret 2.4

Runtime version: Web,Native

Specifies a gradient fill that is used to subsequently call other Graphics methods of the object (such as lineTo() or drawCircle()). Calling the clear() method will clear the padding.

parameter

type: string — The value of the GradientType class that specifies which gradient type to use: GradientType.LINEAR or GradientType.RADIAL.

colors: number [] — An array of RGB hexadecimal color values used in the gradient (for example, red is 0xFF0000, blue is 0x0000FF, and so on). For each color, specify the corresponding value in the alphas and rampios parameters.

alphas: number [] — An array of alpha values for the corresponding colors in the colors array.

ratios : number [] — An array of color distribution ratios. Valid values are 0 to 255.

matrix: egret.Matrix — A transformation matrix defined by the egret.Matrix class. The egret.Matrix class includes the createGradientBox() method, which makes it easy to set the matrix for use with the beginGradientFill() method.

type引数でグラデーションパターンを指定します。次のGradientTypeAPIを見てください。
colorsとalphasで、グラデーションの開始色・透明度から終了色・透明度を指定します。
ratiosは各グラデーション色・透明度の位置を指定します。位置は0から255で指定します。
matrixでグラデーションの塗り方を詳しく指定しますが、簡単に作成するメソッドがMatrixクラスに用意されています。

egret.GradientType : グラデーション形式

線形LINEARと放射状RADIALが用意されています。

egret.GradientType

LINEAR : string

[static] Used to specify the value of a linear gradient fill

RADIAL : string

[static] Used to specify the value of the radial gradient fill

egret.Matrix.createGradientBox

グラデーションを描画するエリアを指定します。

widthとheightで大きさを指定します。rotationはグラデーションの向き(ratiosの0から255の方向)を指定します。こちらは反時計回りなのと単位はラジアンです。

tx,tyはオフセットを指定します。

createGradientBox () method

public createGradientBox ( width: number , height: number , rotation: number , tx: number , ty: number ): void

language version: Egret 2.4

Runtime version: Web, Native

Creates a specific style of the matrix required by the beginGradientFill() and lineGradientStyle() methods of the Graphics class. The width and height are scaled to scaleX/scaleY pairs, while the tx/ty values are offset by half the width and height.

parameter

width: number — the width of the gradient box

height: number — the height of the gradient box

rotation: number — the amount of rotation in radians

tx: number — The distance, in pixels, to translate right along the x-axis. This value will be offset by half of the width parameter

ty: number — The distance, in pixels, to translate down the y axis. This value will be offset by half of the height parameter ```