スターウォーズのオープニングクロールを作る

「2015年は映画の年」と言われるくらい、注目作品が上映予定となっております。
その中でも、スターウォーズの存在は大きいと思います。

ここでは、スターウォーズのオープニングクロールを作ってみようと思います。
スターウォーズを見たことがなくても、知ってる人が多いあれです。

動きのイメージを固める

スターウォーズのオープニングクロールは、誰でも知っているくらい有名ですが、ホーム画面とどのように繋げばいいのでしょうか？
画面の外から入ってきて、奥へと消えていくのですが、もともと画面にあるアイコンで表現するには、工夫や妥協が必要になります。

そんな訳で、以下のような動作にしようと思います。
・現在のページを奥へ傾ける。
・現在のページを縮小しながら遠ざける。
・次のページを画面外から入り込ませる。
・傾いた次のページを起こす。
こんな感じですが、スターウォーズのオープニングクロールをイメージすると、現在のページと次のページは、同時に表示させるべきですね。

では、１つ１つイメージに近づけていきましょう。

現在のページを傾ける

スターウォーズのオープニングクロールは、ご存知の通り、手前から奥へと消えて行きます。
そのイメージを実現させるには、もともと平面であるページを傾けて、奥行き感を演出する必要があります。
とりあえず、次のページは後回しにして、現在のページを傾けるところまで作ってみましょう。

ここでは、以下のサンプルを流用します。
・動きを止める（effect1_1）
・ページ回転のいろいろ（effect4_3）
この２つで十分かと思います。

最初に、エフェクト的にページ移動を無効にしなければなりませんので、以下の１行を入れておきます。

page:translate( offset )

２ページ目は、とりあえず消えていてもらうので、以下を入れておきます。

if( percent < 0 ) then page:scale(0)

ページを傾けるのですが、どれくらい傾けるのが妥当なのでしょうか？？？
しばらく決まりそうにないので、変数に登場してもらいましょう。
それでも初期値は必要ですので、0.9とします。
これは、90°に対してどれくらい傾けるのかというものですが、ほとんど寝てるくらい傾けるイメージが強いので、0.9としました。

では、この初期値でどれくらい傾くのか確認してみましょう。
プログラムは以下の通りです。

変数rrが、ページの傾き具合を表し、90°に対する割合を格納します。
実際に動かしてみると、こんな感じです。

いきなり問題発生ですね。
画面を傾けるだけのはずが、妙なひねりも入ってしまいました。

これが、「3Dエフェクトにおける予想外の動作」と言われるもので、予想外だからこそ面白いということで使われています。
しかし、プログラミング的には「バグ」扱いになりますので、対応しなければなりません。

これまでと同様のやりかたで横移動を止めたはずなのですが、どうしてこんな動きになってしまったのでしょうか？
ページの移動を止めるために、translateを使ったのですが、translateは行列変換ですので、この「行列」がイタズラしているものと考えられます。
では、行列(translate)を使わずに、横方向の移動を止めてみましょう。
やり方は単純で、横方向への移動を打ち消すだけです。
横方向は、page.layer.xで取得＆指定できますので、以下のように書き換えます。

このやり方が、本来のやり方なのでしょうね。
このやり方で動かしてみると、こんな感じです。

イメージ通りの動きになりました。
これで、スタートできますね。

動きを２段階にする

ページを傾けることができましたので、傾いたページを奥へ移動させるのですが、その前に、動きを２段階にしておきます。

ここでは、以下のサンプルを追加流用します。
・エフェクトを段階的にする（effect26_1）

動作をどのタイミングで変更するかを表す変数をerとし、その初期値を0.5とします。
動きに関しては、動作全体の真ん中で動作を止めることにします。

では、実際にプログラムを記述してみましょう。

erの前後で動作を変えています。
erまではpercentに応じて動作し、その後はerで固定するという内容です。
変数angleの宣言が残っていますが、angleの式の中にpercentがあるため、angle自体使っていません。

実際に動かしてみると、こんな感じです。

ページ移動の５割の段階で、90°の９割傾くというのが、ここで目的としている動作なのですが、見た感じ45°くらいで止まってしまっていますね。
少し眺めていたら分かったのですが、５割と９割を掛け算しているので、45°も傾いていないんですね。

ページ移動の５割の段階で、90°の９割傾かせるには、「エフェクトを段階的にする」の「修正２」のように、工夫しなければなりません。

簡単ですが、以下のように対策しました。

erで割っただけです。
プログラム的には無駄が残ったままですが、以下のような動きになります。

きとんと、ページ移動の５割の段階で、90°の９割傾きました。
９割傾いたからこそ分かったのですが、傾き過ぎていますね。
ここで、傾きを８割にして、様子を見てみましょう。
ついでに、プログラムの無駄を削いで仕上げます。

変数epを導入し、if文内のページ回転を１つにまとめることにします。

プログラムも、少しはシンプルになりましたね。
このタイミングで、angleの行も削除しました。

きとんと、ページ移動の５割の段階で、90°の８割傾きました。
良い感じの傾きかと思います。

画面奥へ消えるようにする

画面を傾けることができましたが、これはまだまだ「お膳立て」の段階です。
スターウォーズのオープニングクロールは、ここから奥へと消えていくので、奥へ消えてもらいましょう。

では、どうすれば奥へ消えていく感じを演出できるのでしょうか？
ここが今回のメインなので、じっくり時間をかけて考えたほうが良さそうなのですが、問題発生を待っている自分もいるので、単純に縮小するところから始めていきましょう。

ホントに縮小しただけのサンプルは以下の通りです。

実際に動かしてみると、こんな感じです。

想定内ではありますが、考えれば考えるほど、大きな問題に感じます。
傾きの方向に消えて行くって・・・

まぁ、解決策を見出してからだと面白くないので、とりあえず、縮小しながら上に移動させてみましょう。
これで、それっぽく見えたら良いのですが・・・

縮小しながら上に移動ということは、縮小率と移動量に何らかの関係性を持たせた方が良さそうですね。
とりあえず、縮小率と移動量を変数にし、その関係性に重点を置くことにします。
まずは変数ですが、縮小率をsp、移動量をdyとしましょう。
移動量は、画面のどこを目指すかが問題になってきますが、デバイスによって違うので、page.heightを使って、画面高さと縮小率で決定すべきかと思います。
とりあえず、縮小率に画面高さを掛け合わせて、様子を見てみようと思います。

以下が、そのサンプルです。

画面高さ分だけ移動すると、さすがに移動し過ぎですので、画面高さの1/4にしてみました。

実際に動かしてみると、こんな感じです。

おっと・・・
良い感じに移動したかと思いきや、下がってしまいました。
失速して落ちていく感じが出て面白いのですが、望んだものと違うので、これは「バグ」と判断します。
単なる平行移動のはずなのに、どうしてこんな動きになってしまうのでしょうか？
これも行列の影響なのでしょうか？
行列！？！？
ということは・・・
page:translateによる移動をやめれば良いのかもしれませんね。
そうとなれば、早速試してみましょう。。

書き換えたサンプルが、以下になります。

実際に動かしてみると、こんな感じです。

良い感じぢゃないですか〜！？
微調整も要らないほどに感じます。

やはり、行列が原因だったようですね。
予期しない動作があるので、少し変更したら即確認という流れは必要な作業ですね。

次のページを出現させる

ここからが、今回の醍醐味の部分となります。
現在のページが消えていく様ができましたので、次のページも同じようにやれば良さそうです。
もちろん、かなり大きい状態で出現し、小さくなりながら進んで行くという流れになるかと思います。

手始めとして、お膳立てとなる画面の傾きにかかる時間を短くしましょう。
時間という言い方も変なのですが、ページ移動の５割も使って画面を傾けていたので、これを１割にします。

手始めのサンプルが、以下になります。

ホントに１割にしただけです。

こんな感じの動作になります。

５割で見慣れていたので、１割になると急に速く感じます。
まぁ、ざっと５倍のスピードですので、速いのでしょうね。
速すぎかとも思うのですが、画面を傾けることがメインではないので、このまま進みます。

では、次のページに出てきてもらいましょう。
その登場方法は、もちろん言うまでもありませんが、同じような処理で代用するところから始めます。
代用したサンプルが、以下になります。

縮小率spの内容が違う程度で、あとは全く同じ内容の処理で代用しました。

こんな感じの動作になります。

いきなり出現したので、これには私もビックリしました。
縮小率が、１より大きい数字から始まっているはずなので、大きい状態で始まることは想定していたのですが、大きくなった分だけ画面の外にはみ出すと思っていたため、「想定外」となってしまいました。

はみ出させるならdyを大きくすれば良いと思ったのですが、dyはspに依存しているため、spを変更して様子を見ようと思います。
dyでは4で割っているため、spでは4を掛けて見ようと思います。

４倍お試しのサンプルは、以下の通りです。

全体を４倍すると都合が悪いので、部分的に４倍しています。

こんな感じの動作になります。

いい感じではないでしょうか？
イメージに近づいているのが実感できると思います。
しかし、実際には「もうちょい」といった感じですので、６倍で試してみます。

６倍お試しのサンプルは、以下の通りです。

全体を６倍すると都合が悪いので、部分的に６倍しています。

こんな感じの動作になります。

これこれ！！
これぞ！！って感じの動きになったではありませんか！？

良い感じの動きになったところで、区切りとします。

次のページも２段階にする

次のページが良い感じで登場したので、次のページも２段階にして、傾きを元に戻しましょう。

では、どのタイミングで動きを変えれば良いのでしょうか？
これは、１ページ目と同様に、erの値を流用することにします。

２ページ目も２段階にしたサンプルが、以下になります。

２ページ目の部分にif文を追加し、動作終了側のerに傾きを戻すためのep=percentを入れています。

２ページ目も２段階にしたサンプルは、こんな感じです。

２ページ目も２段階になりましたが、傾きを戻す段階で、傾きが逆になっていますね。

傾きを逆にするには、page:rotate内の該当する回転方向を-1にすれば良いのですが、最終的に仕上げる段階で、page:rotateも１つにまとめたいので、ここではep=-percentとして対応しておきます。

対応後のサンプルは、以下の通りです。

２ページ目の部分にif文を追加し、動作終了側のerに傾きを戻すためのep=percentを入れています。

２ページ目も２段階にしたサンプルは、こんな感じです。

できてる？
できてますよね？

思いっきり完成ですね！？

仕上げる

動きは出来上がりましたので、プログラムを仕上げましょう。
ここで言う「仕上げ」は、無駄を省くという作業を指します。
具体的には、if文の中にあるpageの動作をif文の外にひとまとめにし、if文には、ep, sp, dyを求める式だけにすることにします。
そうすることで、とてもスッキリするはずです。

無駄を省いたサンプルが、以下になります。

ep, sp, dyは３つで１セットとしますので、抜けている部分に追加しています。

動作は、こんな感じです。

書き換えただけなので、同じ動きかどうかの確認ですね。