ART No.2

2017/10/12

web制作

ART No.2の作り方を紹介します。
依存する外部JSは以下の三つです。

※ PixiJSは ver4.5.6 を使っています。


目次

  1. 完成形
  2. 背景のグラデーションを作る
  3. パーティクルを追加する
  4. 地球と月を追加する

完成形

まずは完成形を先にお見せします。


背景のグラデーションを作る

先にcssのグラデーションで背景を作ります。
jsでbody(グラデーション)を正方形にリサイズしています。




パーティクルを追加する

一気にコードが増えます。
PixiJSのドキュメントはこちらです。

PixiJSの Sprite と ParticleContainer を使ってパーティクルを追加します。


乱数を多用するので getRand を追加しました。
ART No.1でも似たような関数をつかっています。
int/float型 どちらも取得出来るようにしています。

Particleのメンバ変数。

  • id – ユニークID(ぶっちゃけ要らない)
  • type – 中央/全体のパーティクル判定用 aroundが中央
  • texture – Spriteを作成する時の画像
  • sprite – Sprite本体
  • scale – パーティクルの大きさ
  • alpha – パーティクルの透明度
  • radius – 回転の半径
  • tint – 色合い
  • speed – 回転する速さ
  • tick – requestAnimationFrameで変動させる数値 アニメーション用
  • timer – requestAnimationFrameを格納

scale、alpha、tint等で星の見た目を、ランダムに変更させています。
白い星の画像を1枚用意するだけで、
サイズや色合いはPixiJSで変更できます。

回転する動きは、よくある sin/cos を使った計算で実装しています。
半径の数値を徐々に減らす事で、回転しながら中央に寄っていきます。
中央に近づくほど、回転の速さが上がります。
ブラックホールが半径200pxなので、その付近で消えるようにしました。

パーティクルの位置を変更しただけでは、見た目に変化がないので
renderer.render(stage);mainLoop の中でループさせます。


地球と月を追加する

地球と月を追加して完成です。


距離を求める getDist を追加しました。
こちらもART No.1で使っています。

Planetのメンバ変数。

  • id – ユニークID(ぶっちゃけ要らない)
  • texture – メッシュに貼り付けるテクスチャ(PIXI.Texture)
  • points – メッシュの頂点を格納する配列
  • center_dists – 中心に近い頂点の順番を格納する配列
  • ratio – 画像のサイズ(スケール)

new PIXI.mesh.Plane(texture, 10, 10); で頂点数 10×10 のメッシュを作成しています。
そこに地球や月のテクスチャを貼り付けています。

mesh.vertices で頂点を取得出来ますが、若干ややこしいです。
中身は配列で、インデックスが偶数の場合 x 値、奇数の場合 y 値になっています。
最初の頂点位置は x: mesh.vertices[0]、y:mesh.vertices[1] のセット的な感じです。

後は中央に向かって頂点を動かせば、テクスチャが変形して吸い込まれていく形に見えます。
ディレイを掛けないと、元の形を保ったまま小さくなります。


SNSでシェアする

コメントを残す