Popup Run : 棒人間とポップアップのなんか

棒人間がポップアップウィンドウをまたいでうろうろする的な何か。2011年度工大祭にて展示。

目次

これは何?

棒人間がポップアップウィンドウをまたいで走ったりジャンプしたりする代物です。棒人間を自分で操作することも出来ます。

棒人間を操作してポップアップウィンドウの中をうろうろするもよし、勝手に動く棒人間を誘導して閉じ込めるもよしな無目的アプリです。

遊んでみる

GoogleChrome 16,Firefox 7,Opera 11,Safari 4(いずれもWindows 7上)で動作確認。IEでは動かない気がします。

ポップアップを開きまくるのでポップアップブロックを解除して下さい。

遊び方

「押して」を押してみると・・・

ポップアップウィンドウが出てきます。棒人間もいるよ!

hキーを押すとヘルプが出てくる。他にもnキーで新しいポップアップが出てきたり、aキー押すと棒人間が勝手に動き出したり。

適当にポップアップを増やしたり動かしたりしてみましょう。棒人間がポップアップを行き来したりします。

小噺などなど

製作経緯

これを作り始めたそもそもの動機は修羅場分の補給のためでした。

夏休みの時点では工大祭に展示を出せるほどの余裕はないだろうと考えて特に工大祭に向けた製作物は考えていなかったのですが、 夏休みが終わっていざ後期となっても暇で、それでもって毎年のような工大祭に向けた製作の修羅場もなくて物足りない感じでした。

つまり修羅場を欲していた訳ですよ。頭おかしいですね。

という訳で工大祭一週間前、基本情報技術者試験も終えたのでここらで修羅場分を補給しようということで作り始めたのがこの作品です。 修羅場を実現すること、一週間以内にゲームを作ることそれ自体が目的になっているあたりあれですね、えぇ。

という訳で何を作ろうかという話ですが、ポップアップウィンドウでなんかやろうというのが第一にありました。

で、ポップアップウィンドウの中で何をやろうかと考えていた時に、フリーランニングというスポーツを思い出しました。

どんなスポーツかと言うとこんなのとか、

こんなのとか。

こういうのをポップアップウィンドウの中で棒人間でやってみたいと思って作ったのが今回のアレです。

とにかく疾走感のある感じに仕上げよう、ということで棒人間のAIから立ち止まるという動作をなくしました。安直ですね。

技術的な話

とりあえず動作原理について。棒人間やマップの当たり判定は親ウィンドウが管理していて、ポップアップウィンドウのやっていることはウィンドウに対する操作(移動、リサイズ、閉じる)を検知して親ウィンドウに知らせることと親ウィンドウからの描画指示を実行することだけです。

描画にはcanvas要素を使っています。親ウィンドウで描画結果を生成してgetImageDataやらputImageDataやらを使って各ポップアップウィンドウに描いてます。

Operaにおけるunloadイベントの問題

ポップアップウィンドウが閉じられるのを検知するためにポップアップウィンドウ内でunloadイベントをハンドルしているのですが、Operaの場合ウィンドウを閉じる際にunloadイベントを投げないという問題がありました。どうもOpera的にはウィンドウ閉じてもすぐ復帰させられるからunloadじゃねーよという理屈らしいのですが・・・。

愚痴ってもしょうがないので対策を取りました。Operaの場合のみ親ウィンドウから各ポップアップウィンドウのwindow.closedをポーリングして対処しています。

GoogleChromeのリサイズの挙動

GoogleChromeにおいてウィンドウをリサイズするときの挙動で怪しいところがあったのでメモ

ウィンドウの右辺や下辺を掴んでリサイズするときは正常な挙動なのですが、上辺や左辺を掴んでリサイズを行うとリサイズしている間反対側の辺(下辺とか右辺)がブレるという現象が起きます。おそらくウィンドウの移動とリサイズを同時に処理できてないということなんでしょうかねぇ・・・。

そこまで致命的な問題ではないのですが、上辺を掴んでリサイズしてるのに下辺がブレるので棒人間視点からすると地面が縦揺れしてるような感じになってしまいます。一応対策としてウィンドウのサイズ変更にヒステリシスを持たせて縦揺れを軽減していますが、まぁそれでも揺れます。こういうのは諦めが肝心ですね。

バグ報告等

バグ報告については送信フォームに投げるなり僕のtwitter垢を調べて投げるなりして下さい。

Bitbucketのバグトラッカを公開しましたのでそっちに投げてもらうと捗ります。

更新履歴

2011/11/14
再描画まわりのバグを修正
2011/11/12
公開