のぞみCreateJS227488217JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子(パーティクル)の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。Developでパーティクルのデザインを行い、ParticleJSを使ってHTMLに組み込むまでをステップ形式で解説します。以下のデモが今回作成するもののサンプルとなります。Developでパーティクルをデザインしましょう。画面の右側の[テンプレート選択]パネルからベースとなるテンプレートを選択します。次に[テンプレート選択]パネルの上部にある[設定パネル]タブを切り替え、詳細なパラメーターを変更して、好みのパーティクルを作成します。[テンプレート選択]パネルからテンプレートを選択しましょう。パラメーターを変更して見た目を変えてみましょう。好みのパーティクルが完成したら、ParticleJSへ設定するためのパラメーターを保存します。(.json)]ボタンをクリックしてJSON形式のファイルをダウンロードしておきます。Develop上の作業は終了です。HTMLにライブラリーを組み込もうHTMLファイルにコードを記述します。Canvasの描画ライブラリーに依存しているので、まずはCreateJSとParticleJSの両方のJavaScriptファイルを読み込みます。パーティクルシステムの準備body要素内にcanvas要素を配置します。canvas要素には3つの属性としてidとwidth(幅)とheight(高さ)を設定しておきます。id="myCanvas"></canvas>ここからはJavaScriptのコードを記述します。createjs.Stageインスタンスを作成します。createjs.Stageとは舞台のようなもので、ここに役者を登録します。コンストラクターの第一引数には、先ほど作成したcanvas要素のidと同じものを指定して、CreateJSの描画システムとcanvas要素の関連付けを行います。続けて、パーティクル制御するparticlejs.ParticleSystemインスタンスを作成します。作成したParticleSystemのcontainerプロパティをstage.addChild()メソッドで舞台へ登録します。Stageオブジェクトを作成します。表示リストのルートになります。パーティクルシステム作成します。パーティクルシステムの描画コンテナーを表示リストに登録します。stage.addChild(particleSystem.container);※CreateJSの描画についてはCreateJSのチュートリアル「簡単なCreateJSのサンプルを試そう」を参照ください。次にパーティクルの設定を反映させます。「ステップ1」で作成したJSON形式のファイルをテキストエディターで開き、中のテキストをコピーします。particleSystem.importFromJson()メソッドを記述し、コピーしたJSON形式のテキストを引数として渡します。Developから保存したパラメーターを反映します。パーティクルを動かそうパーティクルを動かすために、createjs.TickerクラスのaddEventListener()メソッドで、定期的に呼ばれるhandleTick()関数を登録します。stage.update()メソッドを呼び出します。使い方」を参照ください。Developでデザインしたパーティクルがそのままブラウザーで表示することができました。DevelopとParticleJSを使うことで、自分でデザインしたパーティクルがあっという間に作成できます。応用としてJavaScript側でパラメーターを制御することで、動的に見た目が変化するパーティクルなども作成できます。ライブラリのAPIを使えばマウスに追随させたり、時間経過で色を変化させるといったインタラクションを自由に実装できます。次の学習用サンプルもあわせて参照ください。時間経過で色が変化するパーティクルのサンプル(サンプルを開く)ぜひデザインやコンテンツ制作にご活用ください。DevelopのソースコードもGitHubにてオープンソースとして公開しています。SPA(シングルページアプリケーション)の作例として参考くださいませ。Experiments」に選出されてもいます。Develop」」という記事で紹介されました。平成30年4月18日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。