フラットデザインなウォッチフェイスを作ってみました

前回の反省を活かし（笑）、ポップかつ未来感あふれるようなデザインに挑戦してみました。

Tell Your Timeというキャッチは、未来っぽいデザインをと思った時に浮かんできたこちらが元ネタ。意味はちょっと分かんないですｗ 

Tell Your World EP【通常盤】

色合いは当初思っていたものよりもだいぶ違ってしまいましたが、日本を代表するカルチャーといえば初音ミク。これならアメリカ人相手に戦えるか！？

Instagram

ダウンロードはこちらからどうぞ↓

http://apps.getpebble.com/en_US/application/55a64c5b76c94b0061000016

製作メモ

ほとんどサンプルのプログラムの流用なので、技術的には難しいところは特に無いです。そのわりには時間がかかってしまったのはいつものこと。

悩んだポイントのひとつは、描画とレイヤを組み合わせる方法が分からなかったところでした。ビットマップならbitmap_layer_set_layerで一発なんですが。とりあえず単にレイヤを作って、それをlayer_set_update_procで色をつければいいというのはわかったんですが、それだと同じ色の描画しか作れないので困惑。

でもこれは単純に、赤い箱と青い箱のプロセスを分けることで解決しました。色をつけるにはlayer_set_update_procを使わなければならないけど、その処理を行うのはupdate_procでなければならないことはなく、任意の名前で問題ない、と。アニメーションで悩んだのも同じような部分でした。

プログラム初心者なので、こーゆーのを理解するまで時間がかかります。

ほかには、フラットデザインな色味を出すのにも苦労しました。最初は普通にシアンマゼンダイエローで作ってみたんですが、マゼンダがキツかったりイエローが薄かったり文字がブラックだとキツすぎるしで、微調整を重ねてなんとか納得できるところまで調整しました。白と黒の文字を邪魔しないような配色にするのは試行錯誤の連続です。もうちょっと灰色の色が多ければいいのに。

最後までうまくいかなかったのはフォントでした。本当はカスタムフォントを使いたかったんですが、どうもジャギってしまってよくない。

デフォルトのフォントと違ってアンチエイリアスが効かないのが問題っぽいんですが、イラレで加工したロゴはそこそこ綺麗になっているので、CloudPebble側のプロセスに問題があるような気がしています。究極を目指すなら、フォントも画像化して１文字ずつ表示させるしかないんだろうなあ。それはまあ次の機会にでも。

ちなみにこのアニメーションは、当初作っていたプロトタイプでは毎秒１回ずつフルに動いていました。見た目的にはそれでいいんですが、丸一日動かしてたら１２時間でバッテリー残量が２０％になるという大惨事になってしまい、思わず「お前はアップルウォッチか！」とツッコミました。

そんなわけでアニメーションは１分おきに数秒と、あとせっかくなので加速度センサーに反応して動かすようにしました。普段は寝ていて、手首をひねって時間を見るときだけ（バックライトが点いて）アニメーションが動き出すという仕様。これは結構実用的に使えそうな予感がします。

前回は透過PNGの使い方と、１分ごとにアニメーションを呼び出す方法を覚え、今回は複数のレイヤーを一度に動かしたり、加速度センサを使う方法をを身につけました。ウォッチフェイスを作り続けるのは、自分で練習問題を作って解き続けるのにちょっと似てるような気がします。

次回はどういうものにしようかな。これに味をしめてフラットデザイン方面に進むか、また全然違う毛色のものに挑戦してみようか。時間がいくらあっても足りないなあ。

Pebble Time スマートウォッチ 腕時計 (ブラック) [並行輸入品]