Kengo's blog

Technical articles about original projects, JVM, Static Analysis and TypeScript.

狭い画面を広く使うためのenchant.ScrollableSceneクラスを作った

年末年始は予想以上に休めそうなので、きちんとしたゲームを1本仕上げたい*1と思いつきました。集中力が続けばシミュレーションあたりを作りたいなーなどと考えていたら、軍事担当任命などのような「ユーザーに複数の選択肢から選ばせる処理」というのがなかなか実現しにくいのではという気がしてきました。リストボックスやコンボボックスは味気ないですし、顔グラやステータスを並べたりしたら2〜3人しか表示できません。

これは結構汎用的な要求なのでは?という気がしたので実現方法をいくつか調べたのですが、単にoverflowプロパティで解決できる問題ではなかった*2ようで、最終的には結局ドラッグ&ドロップの応用でスクロールを提供するプラグインを書きました。SpriteやGroupなどが画面下にはみ出すように配置された場合、それらが全部表示できる位置まで縦スクロールできるようになります。

enchant.ScrollableScene サンプル - jsdo.it - share JavaScript, HTML5 and CSS

コードはenchant.jsとjsdo.itにならってMITライセンスで公開しています。ドキュメントがかなり手抜きですが、基本的にはSceneとして使えるはずです。Chrome 16、Safari 5、Opera 11.60、iPod touch第4世代のSafariで動作確認しています。Firefoxではスクロールバーが表示されません。

メモ書き

どのようにSceneの高さを計算するか?

「SpriteやGroupなどが画面下にはみ出すように配置された場合、それらが全部表示できる位置まで縦スクロールできる」ようにするためには、すべての子要素について下辺のY座標を調べる必要がありました。img要素のようにheight属性を持つ要素なら(Y座標+height)で簡単に算出できるのですが、divなどはそうも行きません。
今回はIE独自要素だったoffsetHeightに頼りましたが、きちんと書くならjQuery.height()に相当する処理を組み込む必要がありそうです。

ホイールイベントの拾い方

Firefoxとそれ以外で方法が異なるようです。「モダンブラウザ」にもまだまだ細かい違いは残っているのだなぁという感じです。