ガラケーの Flash で作成されたミニゲーム、Android は Flash のバージョン変更でなんとかいけるのだが、iPhone はその手が使えない。
enchan.js は、ゲーム自体はいけそうだが、解像度に対してスケーラブルとは行かない。なので Flash とおなじ、ベクターグラフィックスを使う SVG を試してみたのだが、これが曲者。
ネットで拾ってきたソースを試しているあいだは特に問題はなかったのだが、<body onresize="resize()">とかやって、SVG の描画エリアをリサイズすると途端に動きが変。描画エリアが意図した場所に配置されない、というか、描画エリアをブラウザのサイズに合わせて変更したとたんに style の position がおかしな具合になる。
どうやらおかしいのは Webkit を使っている Chrome と Safari で、Firefox と Opera は問題がないように見える。
さらに困ったのは、モノを動かすとき。Chrome と Safari は SVG の仮想領域とブラウザの表示領域の縦横比を同じにしないと、きちんとモノが動いて表示されない。
できたものはこちらにアップしたのだが、興味のある方は試してほしい。Firefox(9.01)、Opera(11.6) はブラウザの大きさや縦横比を変化させても、正方形の領域の中で玉が跳ね回っているのだが、Chrome(16.0.912.63)、Safari(5.1.2) の場合はブラウザの表示領域が正方形のときしか玉が跳ね回らない。
一番の目的は iPhone でミニゲームを実行することなので、Webkit のこのバグは困る...、と思ったが、よく考えると iPhone はどの機種でもディスプレイの縦横比は同じ。仮想領域をその縦横比にすればなんとかなるかなぁ....。
----
と思ったら、Android の default ブラウザは SVG 未対応。もう何がなんだか。
0 件のコメント:
コメントを投稿