WebGLを3Dではなく2Dに使う
PIXI.jsで2Dグラフィック表現もぐっと滑らかに

以前、iPhoneやWindowsで、3Dサイトやゲーム、商品を360度見られるカタログなどを作るで WebGL のお話をしました。

WebGL の使用はなにも 3D に限定されません。
WebGL では CPU だけでなく専用のハードウェアも使うため、複雑な 3Dグラフィックをスムーズに扱えます。これを2Dに使えば、これまで以上にすばらしい 2Dグラフィック表現が可能になります。

WebGLで2Dグラフィックプログラムを作るのは面倒ですので、そんな時は PIXI.js を使うと楽ができます。

以下は PIXI.js のサイトで公開されているデモの1つです。
以下の画像をクリックするとデモに飛びます。
ここまで作るのはちょっと面倒がありますが、このくらいのことできるんだという目安になります。
iOS8 の iPhone でご覧になってみてください。
pixi_example_12c

ウェブサイトにアニメーションを組み込みたい方の参考になれば幸いです。

PIXI.js は 2Dグラフィックが念頭に置かれているためレイヤが扱えません。
PIXI.js を使い始めて最初に出てくる不満はレイヤだと思います。
次回は、PIXI.js でレイヤを扱うための改造方法をご紹介しますね。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*