EaselJSには、Matrix2Dクラスが用意されており、移動・回転・拡大／縮小・傾斜といったオブジェクトの変形を変換行列を使って行うことができます。ActionScript3.0のMatrixクラスと同様に3×3の正方行列なので、基本的な操作方法はFlashと似ていますが、オブジェクトへの適用方法など若干の違いはあります。今回は、いくつかのサンプルを通してEaselJSのMatrix2Dクラスを解説していきたいと思います。

続きを読む

現在のEaselJSのPointクラスは、まだバーションが0.50であることもあり、必要最小限の機能しか定義されていません。JavaScriptは、定義済みのオブジェクトでもprototypeを通して拡張することができるので、勉強も兼ねてEaselJSのPointクラスをActionScript3.0と同様に扱えるように拡張してみました。ファイルをダウンロードできるようにしていますので、よろしければご自由にお使い下さい。

続きを読む

CreateJS用のリキッドレイアウトライブラリを作ってみました。LiquidLayouter for CreateJSは、CreateJSを使ったフルcanvasのコンテンツをより簡単に実装するためのJavaScriptライブラリです。HTML5 canvasをサポートしたWindows, Macの各ブラウザだけでなく、iPhone, iPad, Androidでも動作確認しています。MITライセンスで公開していますので、商用でも無料でお使い頂けます。

続きを読む

先日、CreateJSの新しいバージョンが公開されました。CreateJSのサイトからダウンロードできます。新しいCreateJSでは、バグフィックスと共に様々な新機能が追加されており、ますます便利になっています。今回は、バージョンアップにより変更された点や追加された新機能をレポートしたいと思います。

続きを読む

ジェスチャーイベントは、スマートフォンやタブレットのタッチパネルで複数の指によるタッチ操作を行った際に発生するイベントです。ジェスチャーイベントを利用することで、ユーザーがタッチパネル上で行った拡大／縮小や回転といった操作を簡単に取得することができ、より直感的なユーザーインターフェイスの構築に役立ちます。

続きを読む

EaselJSには、MouseEventを処理するonClick, onDoubleClick, onMouseOver, onMouseOut, onPress, onMouseMove, onMouseUpといったイベントハンドラが用意されています。記述に関してはActionScript2.0に似ていますが、デフォルトでonMouseOver, onMouseOutが使用できない点やonMouseMove, onMouseUpの扱いなど、若干注意すべき点があります。

続きを読む

CreateJSを使って、HTML5のcanvasでキラキラと輝くTwinkle表現に挑戦してみました。EaselJSのGraphicsクラスに用意されたdrawPolyStar()メソッドを使って星形のShapeインスタンスを作り、なんちゃってGlowFilterでcanvas上のテキストをキラキラと輝かせてみます。

続きを読む

前回の投稿「トゥイーンで簡単canvasアニメーション！TweenJSの使い方」では、TweenJSの基本的な使い方を紹介しましたが、TweenJSにはTimelineクラスが用意されており、Flashのタイムラインに似た概念で複数のトゥイーンをまとめて操作することができます。今回は、TweenJSのTimelineクラスを使って、EaselJSのTextクラスをアニメーションさせてみます。

続きを読む

TweenJSは、Grant Skinner氏が開発しているCreateJSに含まれるJavaScriptトゥイーンライブラリです。CreateJSのサイトからダウンロードできます。本来、JavaScriptでのアニメーションには比較的面倒な記述が必要になりますが、TweenJSを使うと驚くほど簡単な記述でオブジェクトをアニメーションさせることができます。

続きを読む

EaselJSは、著名なFlasherであるGrant Skinner氏が開発したCreateJSに含まれるHTML5 canvas用のJavaScriptライブラリです。CreateJSのサイトからダウンロードできます。EaselJSを使うことで、HTML5のcanvasをFlashに似た操作で扱うことができるようになります。

続きを読む