CollieはDOM/Canvasを使ったPC/スマートフォン双方に対応したアニメーションライブラリです。

HTML5の登場以後、にぎわっているのがアニメーションです。様々なライブラリが登場していますが、今回はCollieを紹介します。アニメーションおよびゲームの開発に利用できます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.14_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.14.png)
デモです。犬をドラッグできます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.30_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.30.png)
折り紙。複数のボックスが奇麗なグラフィックスを描きます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.34_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.34.png)
回転します。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.37_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.37.png)
並びます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.48_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.27.48.png)
ボールが選択した形状に並ぶデモです。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.28.01_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.28.01.png)
ハート型。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.28.13_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.28.13.png)
ウサギ(?)みたいなキャラクターを動かすデモです。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.28.25_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.28.25.png)
クリックするとウサギが追加されます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.29.32_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.29.32.png)
こちらはゲーム。緑色のボールが自機です。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.30.28_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.30.28.png)
青いボールを吸い込んで成長します。推進力も自分自身の大きさを削るので注意が必要です。

CollieはCanvasとDOMを使い、PCとモバイルに最適化されたアニメーションを実現します。多数のオブジェクトを安定的に処理でき、スプライトアニメーションにも対応しています。もちろんイベント処理も可能です。スマートフォンではiPhone/Android双方に対応しています。

CollieはJavaScript製、LGPLのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

アニメーションを実現するフレームワークは多数出てきていますが、それでも個人的に敷居が高いと感じられてしまうのは最初の絵が必要だという思いがあるからかも知れません。ここで求められているのはMiiに代表辞されるよなキャラクターを手軽に作成できるツールでしょう。

ボーカロイドの登場によって音楽は作れても自分の声を世に出したいと思わない人たちが一気に花開きました。同様の現象をアニメーションで起こすならば、簡単にオリジナルキャラクターを作り、動かせる仕組みが必要です。そんなサービスを考えてみるのはいかがでしょう。

Collie - High Performance Animation Library for Javascript