Help us understand the problem. What is going on with this article?

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

shioleap
JS好き!phina.jsとかが好きです!!
https://shioleap.github.io/blog/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした