2018年3月3日

Fitbit Ionic用STAR WARSなClockfaceのそ2

前回に引き続き、今回はEPISODE6の冒頭、C-3POとR2-D2がジャバ・ザ・ハットを訪れるシーンでクロックフェイスを作ってみました。起動すると扉が上に開いていき、時刻表示が見える様になり、R2が中にすいーっと入っていきます。下の画像は扉が開ききる少し前の状態での撮影です。画面下部には日にちと歩数と心拍数が表示されています。


インスタにアップした動画です。この様に動きます。扉が途中でひっかかる様に動くのはIonicの動画再生の能力的な問題です。この程度の動画くらい引っかからないで再生して欲しいものです。比較的スムーズに動いているR2が中に入っていくアニメは静止画のR2の描画位置を徐々に小さくしながら左上に移動させつつ透明度をアップさせていき、最後は透明になる様にして中に入っていく様に見せています。最初は時刻の数字の後ろの方まで入って行き、より奥に入って行く様に見せようとしたのですが、レイヤーの順番的にそれは無理だということに気づき、数字の下端ぎりぎりで黒い闇に入って行く様にすることでごまかしてます。しかしR2は静止画を移動するだけで動いている様になっていいですね。BB-8だと体の玉を回転させねばならないので面倒そうです。

U Tさん(@utdesign)がシェアした投稿 -
3コマのGIFアニメだとこんなです。


実際の映画のシーンと。当然のことながら映画は左右幅がもっと広く、広角レンズで撮影されているので、この巨大な扉は映像ではパースとレンズによる歪みを伴いながら上に開いていきます。ので、このシーンのスクショを撮り、そこから切り出した扉の画像を上に移動するアニメにするだけではかなり不自然な絵になってしまいます。


ので、複数のスクショから歪みを補正した1枚の扉の画像を作った訳ですが、その作業が意外と時間がかかりました。大きさ的にはたかが315x300 Pixelの画像なんですが。下はフォトショでの作成風景です。


また、最初に作った時は何故かアニメ再生中は時刻表示の数字がチカチカ不規則に点滅してしまい、原因も解らなかったのですが、クロックフェイスのプログラミングでお世話になっている帯広の人さんに教えて頂き、無事チカチカするのも無くすことが出来、完成した次第です。
以上、STAR WARSなクロックフェイスの2つ目のご紹介でした。