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を駆使してハイクオリティなエフェクトを実現しており、すごいです。(語彙力)

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.