自主トレ:svg でミニゲームを作ってみた

前回までの実験の結果を組み合わせてミニゲームを作ってみた。

ゲームはこちら。

手元に iPhone がないので、勤め先の検証用 iPhone4S で試してみた。svg 領域の縦横比を iPhone ディスプレイの縦横比と同じにしていたので、表示自体は問題ない。ただし、動きが異様に遅い。実用に耐えない速度。

iPad でも試してみた。縦横比を iPhone ディスプレイにあわせたので、iPad のブラウザ表示領域とは一致しないのだが、こちらも表示は問題なし。ただし遅い。

これは工夫がいるあなぁ。

メモ:Android ブラウザの SVG 対応

デフォルトブラウザの対応は 3.0 から

Firefox はバージョンに関わらず対応

自主トレ: html の SVG タグは、あんまり性質がよろしくない

ガラケーの Flash で作成されたミニゲーム、Android は Flash のバージョン変更でなんとかいけるのだが、iPhone はその手が使えない。
enchan.js は、ゲーム自体はいけそうだが、解像度に対してスケーラブルとは行かない。なので Flash とおなじ、ベクターグラフィックスを使う SVG を試してみたのだが、これが曲者。

メモ:enchant.js ScoreLabel をディレイなしで表示させる方法

util.enchant.js で定義されているスコアを表示するためのクラスが ScoreLabel。標準では、新しいスコアを ScoreLabel.score に定義すると一発で更新されず、１フレームごとに少しずつ表示が新しい値に近づいていく。

　普段は特に問題はないのだが、スコア更新と同時に Game.stop を実行すると、最後のスコア更新が少ししか表示に反映されないという奇妙なバグになる。

　表示のディレイが必要ないときは util.enchatn.js で定義されている enchant.util.ScoreLabel の

this.easing = 2.5;

を

this.easing = 1;

にすれば OK。

メモ:enchant.js ゲームを任意の場所に表示。

enchant.js のサンプルプログラムを雛形にしてゲームを作ると、ゲームはブラウザの左上に表示される。

　これをブラウザ上の任意の場所に表示するにはどうするか？

　enchant-stage という id の div タグを作り、それをゲームが表示される場所に配置すればよい。

　game.js の中に書かれたゲームはこの中に展開される。

　例

<div id="enchant-stage" style="position:fixed; top:100px; left:100px;">

</div>

メモ:enchant.js 最初のプログレスバーを出さない方法

enchant.js でゲームを作ると、開始直後、Game.preload() を使って画像などを読み込んでいる間、Game で確保した表示領域いっぱいにプログレスバーが表示される。

　読み込みに時間がかかるときはにはありがたいのだが、先読みするデータが少ないときは一瞬だけ黒くなってすぐゲームが始まるので、ない方がよい。

　ということで表示させない方法を調べてみたが、ドキュメントには特にない。

自主トレ：enchant.js を使ってみる 1

今の仕事はソーシャルゲームのサーバーサイドプログラミングなのだが(＝ガラケーゲームのサーバー側プログラムを PHP で作っている)、基本的には MySQL の DB からデータを拾ってページ遷移を切り替えるという単純なプログラムなので、エンジニアとしての将来性に不安を持っている。
　会社がスマホにも対応機種を広げようとしているので、「そっちのアプリケーションレイヤー側の仕事をやらせてください」と頼んだら「プライベートな時間で勉強して実績を作ってこい！」といわれてしまった。

　まぁ、社員の成長とかには興味のなさそうな会社だからそれも仕方あるまい。愚痴っていても仕方ないし、身につけたスキルは自分のものになるわけだから、コツコツやっていこう。

　ということで、まずは enchant.js を試してみる。