いまさらパララックスを極めるコード

Flash時代の秘伝のコードや、ノウハウが、時代とともに失伝しつつある問題。メモ書き程度に書き残す。

---

消えゆくパララックス表現

「ここパララックス（視差効果）とか、ちょろっと入る？」と聞くと、エンジニアさんから難色を示されることも多い。

パララックスは実装がメンドウだし、読み返しにくいif文や難解な式がイベントハンドラに入り、デバッグやチューニングが難しくなってしまうことが多いからだ。

でも実は、パララックスは、数行で再利用性のある実装ができるのだ。そんなメモ。

Flash全盛期に熟成されたパララックスの実装が、時代とともに消えて行ってしまうのも切ない。残しておけば、Unityとかで誰かの役に立つかもしれない。

---

マッピング関数をつくる

スマートにパララックスを実装するには、まずマッピング関数を実装する。任意のレンジA～Bの数字を、任意の別のレンジC～Dに変換する関数だ。

// マッピング関数
function map (value, fromMin, fromMax, toMin, toMax){
  return (value - fromMin) / (fromMax - fromMin) * (toMax - toMin) + toMin;
}

パララックス実装で苦戦する人は、「オブジェクトAの移動とオブジェクトBの移動を連動させる」と考えてしまう。

だが、このイメージだと、if文でオブジェAの特定のプロパティを見張り、変換式をオーダーメイドで書いて、オブジェBに適用する…というハードコードになりがちっだ。

どちらかというとパララックス実装のコアは、「任意の単位系Aを任意の単位系Bに変換する」なのだ。パララックスのコアコードは、ビューやDOMに依存しない。

---

抽象化されたパララックスの書きかた

たとえば、スクロールとともにオブジェクトの大きさが変わるとき。

「スクロールYが300の時、オブジェクトの大きさが100で、スクロールYが500になったとき、オブジェクトの大きさが250になってほしい」

なら、さっきのmap関数を以下のようにコールするだけで、オブジェクトのとるべきサイズが計算できる。

var objectSize = map(scrollY, 300, 500, 100, 250);

「スクロールYが100の時、オブジェクトのアルファが0で、スクロールYが200になったとき、オブジェクトのアルファが100になってほしい」

も、まったく同じように書ける。

var objectAlpha = map(scrollY, 100, 200, 0, 100);

マウスのX座標にあわせて色がかわるも！残り時間にあわせてタイマーバーが短くなるも！ボスキャラの残りHPにあわせて、点滅が速くなるのも！

全部、全部、同じ処理、たった1行で記述できるようになる。

「任意のレンジA～Bの数字を、任意の別のレンジC～Dに変換する」という抽象度で実装されているので、度数をラジアンにするのも、メートルをヤードにするのも、摂氏を華氏に変えるのも、全部同じように書ける。

パララックスとは単位系変換の実装を、ビューにバインドする行為にすぎないのだ。

---

修正マッピング関数

なお上記のピュアなマッピング関数では、とりうる値がレンジから突き抜けた場合、新しい単位系で突き抜けた値を返す。

これは、色(0-255）やアルファ(0-100)など、レンジのある数字を扱うときにはバグの温床になりやすい。

なので、ちょびっと改造して変数trimmingを追加すると便利だ。変数trimmingがtrueのときは、返される値がtoMin, toMaxのレンジでカットされるようになる。

// マッピング関数（修正版）
function map (value, fromMin, fromMax, toMin, toMax, trimming){
  var val = (value - fromMin) / (fromMax - fromMin) * (toMax - toMin) + toMin;
  return trimming ? Math.Max(Math.min(val,toMax),toMin) : val;
}

こんな感じで、一度マッピング関数を作り、その使い方を覚えれば、99%のパララックス実装（スクロールでも拡大でも色やアルファの変化でも）は、たった1行のマップ関数コールで解決するようになる。

往年のFlashテクノロジーが失伝していくのは、もったいないので、お酒とノスタルジーの勢いで書いてみた。

みなさん、よいパララックスライフ！（あんま使わんかもだけど）。

あとflash時代の慰霊碑はこちらなので、お墓参りしてあげてほしい。

fladdict