enchant.js を使って変形した画像をスプライトに描画する

enchant.js を使ったプログラミングを引き続き研究中です。

画像の変形ができるかどうか調査しました。
enchant.jsのスプライト機能では、回転ぐらいはできますが、変形は出来るようになっていないようです。
自由に作図が出来るサーフェス機能を使ってアフィン変換を用いた画像の変形を実装してみました。

完成したサンプルはこちら。

アフィン変換した画像をスプライトにのせるテスト(４分割） - jsdo.it - share JavaScript, HTML5 and CSS

プログラムの構造
詳しくはソースコードを見てもらうとして、以下のような感じのプログラムです。

画面サイズと同サイズのスプライト生成して、同サイズのサーフェスをイメージにセット
ゲームのルートシーンにスプライトを配置
表示する画像を三角形4つに分割して、サーフェスにアフィン変換した画像を描画
5カ所のハンドル毎にイベント処理で画像を更新
フレームイベント毎に画像を更新

アフィン変換の理論
メモしておかないと、あとで忘れそうなので。
プログラムのコメント代わりに、自分用のメモ。

高校数学が分かる人向け。

a,b を　アフィン変換して A,B に移動すると考える。
アフィン変換の行列次のように決める。
$\begin{pmatrix}m_{11} && m_{12} \\ m_{21} && m_{22} \end{pmatrix}$

それぞれの座標はアフィン変換で以下のように移動することになる。
$\begin{pmatrix} m_{11} && m_{12} \\ m_{21} && m_{22} \end{pmatrix}\begin{pmatrix} a_x\\ a_y \end{pmatrix} = \begin{pmatrix} A_x\\ A_y \end{pmatrix}$
$\begin{pmatrix}m_{11} && m_{12} \\ m_{21} && m_{22} \end{pmatrix}\begin{pmatrix} b_x\\ b_y \end{pmatrix} = \begin{pmatrix} B_x\\ B_y \end{pmatrix}$

これを、合わせて2×2行列の積の形にすると、

$\begin{pmatrix}m_{11} && m_{12} \\ m_{21} && m_{22} \end{pmatrix}\begin{pmatrix} a_x && b_x\\ a_y && b_y \end{pmatrix} = \begin{pmatrix} A_x && B_x \\ A_y && B_y \end{pmatrix}$

アフィン行列のパラメータを求めるために、両辺に右からa,bを合わせた行列の逆行列を掛ける。
$\begin{pmatrix}m_{11} && m_{12} \\ m_{21} && m_{22} \end{pmatrix} = \begin{pmatrix} A_x && B_x \\ A_y && B_y \end{pmatrix} \begin{pmatrix} a_x && b_x\\ a_y && b_y \end{pmatrix}^{-1}$
これが、求めるアフィン変換行列のパラメータになる。
ただし、平行移動の事を考えていない。

実際には、p1を軸にして変形した形なので、p1'の位置へ平行移動すると求めたい位置に表示することができる。