EaselJSの使い方Tweetこんにちわ。最近、梅干しを1日1個食べることを日課にしているkudoxです。EaselJSの使い方を簡単なサンプルと共に紹介したいと思います。EaselJSは、基本的にActionScript3.0に合わせて作っているので、Flashをやられている方は違和感なく使うことができると思います。リリースのお知らせ」で解説していますので、こちらをご覧下さい。setPixels()hitTest()merge()noise()paletteMap()pixelDissolve()threshold()BitmapDataインスタンスを作成するBitmapDataインスタンスは、コンストラクタにより作成することができます。第1引数に読み込みの終わったHTMLImageElementを渡すと、その画像のBitmapDataインスタンスが作成されます。HTMLVideoElementを指定することもできます。fillColorを指定します。fillColorの指定は、CSS文字列と0xAARRGGBB形式の16進数値が使えます。BitmapDataインスタンスをStage上に表示するにはBitmapクラスを使いますが、BitmapクラスのコンストラクタにはBitmapDataインスタンスではなく、BitmapDataインスタンスのcanvasプロパティを渡す点にはご注意下さい。createjs.Bitmap(_bmd02.canvas);_stage.addChild(_bitmap02);SampleDisplayObjectからBitmapDataを取得するBitmapDataクラスのstaticメソッドgetBitmapData()を使うことにより、cache()されたDisplayObject及びそのサブクラスのインスタンスをBitmapDataとして取得することができます。getBitmapData()で得られるBitmapDataは、DisplayObjectのcacheの参照です。DisplayObject側でupdateCache()を実行した場合は、取得したBitmapDataも更新される点にはご注意下さい。colorTransform);_stage.addChild(_shape);SamplecolorTransform()colorTransform()を使うとBitmapDataのカラー値を調整することができます。第1引数でカラーを調整する領域をRectangleで指定し、第2引数でColorTransformインスタンスを指定します。alphaOffsetとなります。下記のサンプルでは、画像の右側半分のカラー値を調整しています。colorTransform);Samplecompare()compare()は、現在のBitmapDataと引数で渡されたオブジェクトを比較します。cache()されたcreatejs.DisplayObjectのサブクラスです。リファレンスをご覧頂くと良いかも知れません。下記のサンプルでは、左右に配置した画像の差分として取得したBitmapDataを中央に表示しています。80;SamplecopyChannel()copyChannel()は、第1引数で渡されたソースオブジェクトのチャンネルを現在のBitmapDataのチャンネルに転送します。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数はソースオブジェクトの範囲を示すRectangle、第3引数はデータが配置される左上の座標を示すPoint、第4引数でソースのチャンネル、第5引数で転送先のチャンネルを指定します。チャンネルの指定には、BitmapDataChannelクラスの定数が使えます。下記のサンプルでは、ソース画像のアルファチャンネルをターゲットBitmapDataの青チャンネルに転送しています。destChannel);SamplecopyPixels()copyPixels()は、第1引数で渡されたソースオブジェクトを現在のBitmapDataに貼り付けます。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数はソースオブジェクトの範囲を示すRectangle、第3引数は貼り付け先の左上座標を示すPointです。第4引数以降はオプションで、ソースオブジェクトのアルファチャンネルとして使用するオブジェクトを指定することができます。第4引数でアルファチャンネルのソースとなるオブジェクト、第5引数でそのオブジェクトの左上座標を示すPoint、第6引数でアルファチャンネルを使用するかどうかをBool値で指定します。言葉の説明だとわかりにくいので、実際にサンプルを見た方がわかりやすいでしょう。下記のサンプルでは3つのcopyPixels()の実行結果を並べていますが、左からalphaSource無し、alphaSource有り、alphaSource有りでアルファチャンネル使用になります。mergeAlpha);Sampledraw()draw()は、第1引数で渡されたソースオブジェクトを現在のBitmapDataに描画します。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数でソースオブジェクトの変換行列、第3引数でColorTransformオブジェクトを指定できます。EaselJSではCanvasのglobalCompositeOperationの値となります。globalCompositeOperationの値に関しては、HTML5.JPのCanvasリファレンスが参考になるかと思います。第5引数はクリッピング領域を示すRectangle、第6引数はスムージングを行うかBool値で指定します。下記のサンプルでは、星形のShapeインスタンスからBitmapDataを取得し、matrixやcolorTransformを変えながら1枚のBitmapDataに連続的に描画しています。smoothing);SamplefillRect()fillRect()は、第1引数で指定されたRectangleの領域を第2引数のカラー値で塗りつぶします。カラー値の指定は、CSS文字列と0xAARRGGBB形式の16進数値が使えます。EaselJSではclearRect()も定義しています。heightで、指定した領域が透明な黒になります。y座標を指定し、第3引数でカラー値を指定することにより、上下左右に連続した色をバケツツールのように塗りつぶすことができます。カラー値の指定は、0xAARRGGBB形式の16進数値のみでCSS文字列は使えません。下記のサンプルでは、stage上をクリックすることにより、ランダムに描画された矩形をfloodFill()で塗りつぶしています。y座標のRGB値を数値で返します。2引数で指定した座標のカラーを第3引数のカラー値に設定します。カラー値の指定は、0xRRGGBB形式の16進数値のみでCSS文字列は使えません。EaselJSでは少し仕様が異なります。EaselJSでは常にlock()された状態で、unlock()の代わりになるのがupdateContext()です。updateContext()を実行することにより、setPixel()やsetPixel32()で行った処理がBitmapDataに反映されます。setPixels()getPixels()を使うと引数のRectangleで指定した領域のピクセルデータを配列に似た形式で取得することができます。Aの並びになっていますので、ご注意下さい。setPixels()は、第1引数のRectangleで指定された領域のピクセルデータを第2引数で指定された配列のデータで差し替えます。下記のサンプルでは、getPixels()でピクセルデータを取得し、X座標が奇数のピクセルのみ別の画像のデータに変更して、setPixels()で差し替えています。data01);SamplehitTest()hitTest()は、アルファチャンネルを含めたピクセルレベルの衝突判定を行います。第1引数で任意の座標空間における現在のBitmapDataの座標、第2引数で現在のBitmapDataで不透明とするアルファチャンネルのしきい値を指定します。第3引数では衝突判定の対象となるオブジェクトを指定します。cache()されたcreatejs.DisplayObjectのサブクラスです。Rectangleの場合には必要ありません。第4引数で対象オブジェクトの座標、第5引数で対象オブジェクトで不透明とするアルファチャンネルのしきい値を指定します。}}Samplemerge()merge()は、現在のBitmapDataと第1引数で指定されたオブジェクトをチャンネルごとにブレンドします。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数はソースオブジェクトの範囲を示すRectangle、第3引数はマージ先の座標を示すPointを指定します。Aの順にそれぞれのチャンネルに対して使用する乗数を指定することができます。下記のサンプルでは、左右に配置した画像のマージ結果を中央に表示しています。alphaMultiplier);Samplenoise()noise()を使うとランダムノイズを生成することができます。EaselJSでは常にランダムなノイズとなります。第1引数は各チャンネルの最小値、第2引数は各チャンネルの最大値となります。第3引数で対象のチャンネルを指定することができます。チャンネルの指定には、BitmapDataChannelクラスの定数が使え、OR論理演算子で複数のチャンネルを組み合わせることもできます。第4引数では、ノイズをグレースケールにするかをBool値で指定します。trueにした場合、アルファチャンネルを除いたすべてのチャンネルが同じ値となります。grayScale);SamplepaletteMap()paletteMap()は、引数で渡されたカラーパレットデータ配列を使用して、BitmapDataのカラー値をマッピングします。第1引数でソースオブジェクトを指定します。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数はソースオブジェクトの範囲を示すRectangle、第3引数はマッピング先の左上座標を示すPointです。Aの順番で指定します。パレットデータ配列でnullを指定したチャンネルでは、ソースオブジェクトのチャンネルが使用されます。下記のサンプルでは、画像の中央部分の色を反転させています。alphaArray);SamplepixelDissolve()pixelDissolve()を使うと現在のBitmapDataからソースオブジェクトへのピクセルディゾルブを実行することができます。第1引数でソースオブジェクトを指定します。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数はソースオブジェクトの範囲を示すRectangle、第3引数はディゾルブ先の左上座標を示すPointです。EaselJSではbuffer配列となります。pixelDissolve()の戻り値を指定することで連続したピクセルディゾルブを実行できる点は同じです。第5引数は、1回の処理で置き換えるピクセル数、第6引数では現在のBitmapDataとソースオブジェクトが等しい場合に使用されるカラー値を0xAARRGGBB形式の16進数値で指定します。_stage.update();}Samplethreshold()threshold()は、引数のしきい値でBitmapDataのピクセル値をテストし、その合否によってピクセルに新たなカラー値をセットします。第1引数でソースオブジェクトを指定します。cache()されたcreatejs.DisplayObjectのサブクラスです。第2引数はソースオブジェクトの範囲を示すRectangle、第3引数はピクセルの置き換え先の左上座標を示すPointです。第4引数ではピクセルのテストに使う比較演算子を文字列で指定します。第5引数はしきい値となるカラー値、第6引数はテストに合格した際にセットされる新しいカラー値、第7引数は比較の範囲を設定するマスク値を指定します。カラー値の指定は、0xAARRGGBB形式の16進数値のみでCSS文字列は使えません。第8引数では、比較結果がfalseの場合にソースオブジェクトのピクセルを現在のBitmapDataにコピーするかをBool値で指定します。