こんにちは、アンドレです。
世の中のオシャレなサイトを見ていると、フロントエンドの表現技術というのも奥深く、学ぶべきことがたくさんあるなぁと思う今日このごろ。
とりあえずはメジャーなライブラリをいろいろ試すことから、表現の幅を少しずつ広げていこうと思っています。
今回は、pixi.jsを使ってみました。
pixi.jsとは
公式で”A 2D JavaScript Renderer”となっているように、2D描画のライブラリです。
Goodboy Digital Ltd.という団体に著作権があり、一見有料っぽい雰囲気ですが、無料で使用することができます。
v2とv3の両方のページが残っていたりしますが、最新は当然v3。
特長としては、レンダラーがユーザー環境のWebGL対応／非対応を判別し、非対応なら自動的にフォールバックとしてcanvasで描画してくれます。
また、こちらの記事にもあるように、パフォーマンスの高さにも定評があります。
サンプルもたくさんあるのですが、特に目を引くのはこちらのようなSPINEアニメではないでしょうか。
しかしながらSPINEは有料のアニメーションソフトなので、Webでちょっとした表現に使うのには少々コストが高すぎます…
そこで、次点で目を引いたRopeクラスのサンプルから、ちょっとしたアニメーションが作れないかと試行した結果が以下となります。
試行した結果
わかったこと
- Ropeの基点は使用する画像の上下中央ラインから動かすことができない（x軸にポイントを追加して動かす基点を増やすことはできる）
- 基点は左から順においていく（そこまでのx軸より-方向に置くとそこで画像が折れ曲がってしまう）
- つまりデモのような動き以外に使うには無理がある
まとめ
やはり、ライブラリを用いたところで最終的にモノをいうのはアイデアですね…
いろいろな技術を学びつつ、それを用いてどのような表現ができるかということを同時に考えなければいけません。
頑張ります！！
