Edited at
phina.jsDay 18

【phina.js】グラデーションやblendModeで表現

More than 1 year has passed since last update.


phina.jsでグラデーションを使う

まずはじめに、phina.jsでグラデーションを使う方法についてです。

グラデーションを使うにはcanvasのCanvasGradientを使用します。


線形グラデーション

線形グラデーションの場合、CanvasのcreateLinearGradient(x0, y0, x1, y1)メソッドでグラデーションを作成します。引数は、(x0, y0)がグラデーションの開始点、(x1, y1)がグラデーションの終了点になります。

そして、addColorStop(offset, color)でグラデーションの点を追加します。

詳しくはこちらのサイトで紹介されています。

var grad = Canvas.createLinearGradient(-160, -160, -160, 160);

grad.addColorStop(0, 'red');
grad.addColorStop(0.5, 'blue');
grad.addColorStop(1, 'green');

そして、Shapeのfillにこのグラデーションを指定します。もちろん、CircleShapeに限らず、RectangleShapeなどでも構いません。

var circle = CircleShape({

radius: 160,
fill: grad
}).addChildTo(this);

Screenshot from 2017-12-17 21-21-31.png

strokeにもグラデーションを指定できます。

var circle = CircleShape({

radius: 160,
fill: 'white',
stroke: grad,
strokeWidth: 16
}).addChildTo(this);

Screenshot from 2017-12-17 21-26-51.png

グラデーションの向きも簡単に変えられます。

var grad = Canvas.createLinearGradient(-160, 0, 160, 0);

grad.addColorStop(0, 'red');
grad.addColorStop(0.5, 'blue');
grad.addColorStop(1, 'green');

var rect = RectangleShape({
width: 320,
height: 320,
radius: 160,
fill: grad
}).addChildTo(this);

Screenshot from 2017-12-17 21-47-54.png

var grad = Canvas.createLinearGradient(-160, 160, 160, -160);

grad.addColorStop(0, 'red');
grad.addColorStop(0.5, 'blue');
grad.addColorStop(1, 'green');

var rect = RectangleShape({
width: 320,
height: 320,
radius: 160,
fill: grad
}).addChildTo(this);

Screenshot from 2017-12-17 21-49-32.png


円形グラデーション

線形グラデーションの場合、CanvasのcreateRadialGradient(x0, y0, r0, x1, y1, r1)メソッドでグラデーションを作成します。(x0, y0)が中心でr0の半径の円と、(x1, y1)が中心でr1の半径の円でグラデーションは構成されます。

線形グラデーションと同様に、addColorStop(offset, color)でグラデーションの点を追加します。

詳しくはこちらのサイトで紹介されています。

var grad = Canvas.createRadialGradient(0, 0, 0, 0, 0, 160);

grad.addColorStop(0, 'red');
grad.addColorStop(0.5, 'blue');
grad.addColorStop(1, 'green');

var circle = CircleShape({

radius: 160,
fill: grad
}).addChildTo(this);

Screenshot from 2017-12-17 21-40-56.png

2つの円の座標と半径をいろいろ変えて遊んでみましょう。

var grad = Canvas.createRadialGradient(-20, 0, 80, 20, 0, 160);

grad.addColorStop(0, 'red');
grad.addColorStop(0.5, 'blue');
grad.addColorStop(1, 'green');

var rect = RectangleShape({
width: 640,
height: 480,
radius: 160,
fill: grad
}).addChildTo(this);

Screenshot from 2017-12-17 21-55-30.png


blendModeの使い方

blendModeは要素同士が重なったときにどのように描画するかを指定できるcanvasの機能です。phina.jsでは要素のblendModeプロパティを変更することで簡単に指定できます。

var BLEND_MODE = 'lighter';

var redcircle = CircleShape({
x: 200,
y: 580,
radius: 160,
strokeWidth: 0,
fill: 'rgb(255,0,0)'
}).addChildTo(this);
var greencircle = CircleShape({
x: 440,
y: 580,
radius: 160,
strokeWidth: 0,
fill: 'rgb(0,255,0)'
}).addChildTo(this);
var bluecircle = CircleShape({
x: 320,
y: 380,
radius: 160,
strokeWidth: 0,
fill: 'rgb(0,0,255)'
}).addChildTo(this);
redcircle.blendMode = BLEND_MODE;
bluecircle.blendMode = BLEND_MODE;
greencircle.blendMode = BLEND_MODE;

Screenshot from 2017-12-17 22-19-01.png

blendModeの種類はMDNで詳しく解説されています。

CanvasRenderingContext2D.globalCompositeOperation - Web API インターフェイス | MDN

代表的なものをいくつか紹介します。


  • source-over デフォルト設定 すでにある図形の上に上書きする

    Screenshot from 2017-12-17 22-29-51.png


  • source-in すでにある図形と重なった部分だけ表示

    Screenshot from 2017-12-17 22-28-46.png


  • lighter 加法混色

    Screenshot from 2017-12-17 22-19-01.png



最後に

グラデーションやblendModeは使い方次第でいろいろな表現ができると思います。

とくに、@daishi_hmrさんの作られたTM-ShooterというSTGはグラデーションやblendModeを駆使してハイクオリティなエフェクトを実現しており、すごいです。(語彙力)