ひっきぃのメモ帳

趣味で作るプラモデル製作の過程と作品、日々の資格取得へ向けての活動、Apple中心のIT関連ネタを書いています。

enchant.js のスプライトはSafari上では拡大と移動を同時にできないらしい

最近はまり中の enchant.js を使ったプログラミング。


ちょっと困った問題点はスプライトはSafari上では拡大と移動を同時にできないこと。
それは困る。そもそも iPhoneiPad で動かしたいのだから。



いろいろと調べていたら、
Safariのバグ
らしい。


これがそのサンプル。

スプライトを拡大しながら移動する(Safari非対応) - jsdo.it - share JavaScript, HTML5 and CSS

Firefoxでは動きますがSafariでは動きません。

拡大と移動を同時に行えないという不具合なので、フレーム毎に処理を分けるととりあえず動き出します。
これがそのサンプル。

スプライトを拡大しながら移動する(Safari対応) - jsdo.it - share JavaScript, HTML5 and CSS

Safariでもちゃんと移動しますが、ガタガタしますね。
パラメータを調整すれば、少し目立たなくもできますが根本的な解決になってない。


そこで、強引に解決した実装。
これがそのサンプル。

画像を拡大しながら移動する - jsdo.it - share JavaScript, HTML5 and CSS

もはやスプライトを使っていないに等しいサンプル。
画面と同じ大きさのスプライトを作成し、サーフェスも同じ大きさで作成。
サーフェスに描画する画像の座標とサイズをパラメータにしてdrawを呼び出します。

sur.context.clearRect(0,0,320,320);//スプライトクリア
sur.draw(image,0,0,60,60,this.drawx-30*this.wakusize,this.drawy-30*this.wakusize,60*this.wakusize,60*this.wakusize);


スプライトで使っている機能は、ルートシーンに表示する順番ぐらいでしょうか。
一番奥にスプライトを入れています。

game.rootScene.insertBefore(this,game.rootScene.firstChild);

もし、これに当たり判定を実装する場合も自前で書かないといけないですね。