いまさらパララックスを極めるコード
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時代の慰霊碑はこちらなので、お墓参りしてあげてほしい。
いただいたサポートは、コロナでオフィスいけてないので、コロナあけにnoteチームにピザおごったり、サービス設計の参考書籍代にします。