なんでもキラカードにできるエフェクトを作ってみた

こんにちは、最近ドッカンバトル熱が再燃したdohdonです。今回はドッカンバトルにインスパイアされて、キラカードエフェクトを作ってみることにしました。
強いキャラクターの背景でキラキラしてるアレですね。
画像なのでアニメーションしてないですがCreate.jsを使い、Web上で画像加工ができます。

Kira-Card Effect
https://codepen.io/dohdon/pen/JxEKbp

考え方

実際のキラカードを元に考えてます。
キラカードの表面はレンズフィルムというもので覆われています。
凹凸のあるフィルムで光が反射し、キラキラとしたエフェクトになるわけです。

つまり、凹凸を作り、明暗をアニメーションさせてやればキラカードのキラキラは実現出来るはず。
四角錐をズラッとならべる印象です。

そして、四角錐を真上から見ると4つの三角形からできています。
明暗をつけるためにグラデーションは必須なので
グラデーションがついた三角形パーツを用意すれば良いわけです。

それさえできればあとは
配置・アニメーションのタイミングなど設定すれば概ね完成です。

実装

今回はcreate.jsを使っています。
本当はPixi.jsを使ってみたかったのですが
画像を使わず、気軽にグラデーションを使いたかったためcreate.jsを採用しました。

一番キモとなる部品の記述を載せてきます。

// 三角形
const triangle = new createjs.Shape();
triangle.graphics.beginLinearGradientFill(['#000', '#FFF'], [0, 0.75], 0, 0, 0, 40)
 .moveTo(o[0], o[1])
 .lineTo(o[0] + 20, o[1])
 .lineTo(o[0], o[1] + 40)
 .lineTo(o[0], o[1])
 .endFill()

// 作成した三角形にアニメーションを追加
createjs.Tween.get(triangle, {
   loop: true
 })
 .to({
   alpha: 0.2
 }, 1000, createjs.Ease.getPowInOut(2))
 .to({
   alpha: 0.6
 }, 1000, createjs.Ease.getPowInOut(2))

こんな風に三角形の白黒グラデがアニメーションしているShapeができました。
これが基本のシェイプとなります。4つ合わせればひし形が出来ます。
これができればあとは三角形を配置し、アニメーションや色味を調整するだけです。

前述してますができたものがこちら

Kira-Card Effect
https://codepen.io/dohdon/pen/JxEKbp

今回Create.jsで作ったのはエフェクトのみです。
エフェクトが半透過しているため、canvasよりz-indexが低いものは漏れなくキラキラ化します。
canvasの上に画像を置けば上に置いた画像はキラキラしません。
上のサラリーマンの人はz-index高くしてあるのでキラキラ化してないですね。
キラカードメーカーとか作れそうな匂いがしてきます。
ただ、画像出力するとキラキラアニメーション無くなるのがツラミ。
ページ生成して見せたほうが良さそうな感じがする。

所感

簡単な画像処理系のサービスであれば思っていた以上に楽にできそうな印象でした。基本となるパーツを作れればサクサク進みます。
あと変更がすぐ見た目に現れるのでめっちゃ面白いですね

次はWebGL使って何か作ってみます。