2018年2月18日

AKIRAやSTAR WARSなFitbit Ionic用新Clockface

前回、Pebble用に作ったwatchfaceで1番人気だったものをionicに移植する作業を終えたらfitbit用のclockface作りは一仕事終わった感があり、そうなるとまたこんなギャラリーにアップできないclockfaceを作ったりしています。
前にPebble用に金田のデコ助野郎時計を作ったのですが(こちらです。もう5年も前ですね)、ionicでは鉄雄時計を作ってみました。


鉄雄が薬を舌にのせ、「危険はない」と言ってるカットに「が、」と「今XX時XX分」のセリフを追加したものです。実際この状態で喋ると「いあ、うーいい、いうん」(今、12時2分)となりそうですが。

次は先日スターウォーズのローグワンとエピソード4を続けて見たら無性に作りたくなったクロックフェイスです。起動するとR2がすーっと左に移動していき、画面外へ出て、ちょっとするとC-3POの後ろから戻ってくるというアニメーションをします。


インスタにアップした動画です。こんな感じで動きます。

U Tさん(@utdesign)がシェアした投稿 -
最初はC-3POとR2はもっとセンターにいてR2が左端まで移動しておしまい、だったのですが、面白くないのでこの様になりました。最後にC-3POが「え?」と振り向く1コマがあったりするとより良さそうですが、面倒なのでおそらくこれで完成にすると思われます。しかしionicはこの位のアニメ再生でも挙動がひっかかってしまいますね。Apple Watchのヌルヌルさが懐かしいです。また、このクロックフェイスは意外とレイヤー数が多く、日にちと歩数、心拍数表示が一番手前で、次が手前の地面、ドロイド、時刻表示、奥の背景の地面、背景の空、に別れています。最初は時刻表示は背景の地面のレイヤーの後ろに置き、時表示の下一部が地面に隠れている様にしたのですが、どうもfitbitのクロックフェイスのCinemagraphっぽくなるのでやめました。下の画像は制作中のフォトショ画面ですが、こんな感じで最初は時刻は風景の後ろにいました。(赤いのは画像のxy位置出しの為のものです。時刻もシステムフォントでなく画像を起こしてます。)


以上、2次創作なclockfaceのご紹介でした。

2018.02.20. 追記・・・STAR WARSなClockfaceにバッテリー残量表示を追加しました。画面最下段の丸ドットの数で表示しています。画像で残り50%台です。


時刻表示も大きいし、常用としてもかなり使えるClockfaceです。C-3POにもアニメを追加しようといろいろ試みたのですが、どうにも上手くできないので断念しました。。しかしテンプレートとなるClockfaceができると画像差し替えと表示座標位置の変更だけでいろいろ作れる様になってよいですね。
以上、電池残量表示追加のアップでした。

 2018.3.3. 追記・・・R2のアニメの別バージョンを作りました。こちらです。


U Tさん(@utdesign)がシェアした投稿 -
C-3POのアニメは下への移動でなく、つぶす様なアニメにしたかったのですが、Y方向だけ縮小するプログラミングが判らなかったので、これでよしとしました。
以上、別バージョンのご紹介でした。