HELVETICA STANDARD製作メモ

デザインは某１７億円の会社と瓜二つですけど完全にオリジナルデザインですよ！　ロゴはPebbleTimeだし、秒針の先は三角形ですから＼(^o^)／

f:id:Red-Comet:20150726193526p:plain

（さすがにstop2go機能は搭載しませんでした(^_^;)　ご希望ならこちらをお買い求めください）

[モンディーン]MONDAINE [モンディーン]MONDAINE stop2go (ストップ・トゥー・ゴー) A512.30358.16SBB メンズ【正規輸入品】 A512.30358.16SBB 【正規輸入品】

出版社/メーカー: MONDAINE(モンディーン)
発売日: 2013/11/09
メディア: 時計
この商品を含むブログを見る

というわけで今回の製作メモになります。

一番苦労したのはなんといってもコンフィグ画面の作成ですが、これは分量が多くなるので別項で改めて書く予定。

アナログ時計の作り方

アナログ時計は表示板がかなりの面積を占めるので、逆に作るのが楽というか文字盤さえ作ってしまうと「あとは何をしろと？」という感じになります。

針の動かし方は普通だと三角関数を駆使して難しい計算をしなければならないのですが、Pebbleの場合は簡単な関数が用意されているので実装が非常に楽。

gpath_rotate_to(s_hour_arrow, (TRIG_MAX_ANGLE * (((t->tm_hour % 12) * 6) + (t->tm_min / 10))) / (12 * 6));
gpath_rotate_to(s_minute_arrow, TRIG_MAX_ANGLE * t->tm_min / 60);
gpath_rotate_to(s_second_arrow, TRIG_MAX_ANGLE * t->tm_sec / 60);

ただその分小回りがきかないというか、微妙な角度の調整ができないのは歯がゆいところ。

Pebble timeは解像度のせいで、垂直または水平以外の線が細く見えてしまう、逆に言うと0秒15秒30秒45秒の時だけ、やたらと秒針が太く見えてしまうという問題があるのです。

これが
f:id:Red-Comet:20150726214632j:plain

こうなる
f:id:Red-Comet:20150726214645j:plain

これはひどい。

これを解決するため、レイヤーごと微妙に傾けてしまうという方法があるらしいんですが、画像を回転させるとバッテリーの損耗が激しいのでここは妥協。三角関数で求めるなら微妙にずらしてやってもいいんですけどね。

文字盤の目盛りも、初期型ではビットマップを使いましたが最終的には描画することにしました。画像だと針の先と微妙にずれてしまってイマイチ。針と同様に計算させたほうがカチッと決まっています。

残念なのが５分おきの太い線で、線幅を太くするときれいな四角形にならないのです。GPathで４つずつ点を打つのは大変そうだったので妥協してしまいましたが、ここは時計の顔だからしっかり作っても良かったかな。
　

追加機能

アナログ時計部分はサクッと完成してしまったので、いろいろと機能を追加してみました

Bluetoothとバッテリー残量計は基本中の基本なので、これでようやく基礎が固まった感じでしょうか。天気についてはTellYourWeatherを作った時から思っていたんですが、ただ天気と気温を表示させるだけじゃなく、好きな時間を選べるようにしてみました。向こうもバージョンアップしないと。

アイコンフォントを導入

試作版ではBluetoothもバッテリーも天気も普通にビットマップを使っていたんですが、背景色を変える機能を追加したら色によって見えなくなってしまう（コンポジットモードでもダメ）という問題が発生したため、すべてフォントで置き換えてしまうことにしました。こうすることで表示色と背景色を周りに合わせてリニアに変化させることができる、というわけです。オマケの機能のつもりで余計な手間が(^_^;)

最初はWebHostingHub Glyphsを使わせてもらおうと思ったのですが、Pebbleの仕様なのかunicodeは\uF100までしか使えない模様で、私用領域のほんのちょっとしかつかうことができず、断念。

そこでこちらのサイトを使って、必要な物だけピックアップすることにしました。

icomoon.io

svgファイルを読み込ませて使いたい文字だけ選ぶと、英数字部分をその文字に置き換えてくれます。

f:id:Red-Comet:20150726222107p:plain

これを使うと例えば「｛」を入力すると雪のマーク、「｜」だと雨のマークが表示されるようになります。ビットマップを使うより簡単に扱えるうえ、綺麗に表示されるし拡大縮小も思いのままなので、今後Pebble Time用のWatchfaceを作る上で必須テクニックかもしれませんねー。

Aplite/Basalt両対応を目指すも…

旧Pebbleの白黒画面に対応させるため、白黒以外の色を使う時に#ifdefを使って分岐させます。config画面からのkeyを受けて、文字盤が白い時は秒針は赤いんですが、Apliteの場合は黒にする、と。

case 0x0:
background_color = GColorWhite;
 hand_color = GColorBlack;
 #ifdef PBL_COLOR
  sec_color = GColorRed;
 #else
  sec_color = GColorBlack;
 #endif
break;

こんな感じでカラーを使うものをひたすら白か黒にします。

それと、透過PNGへの対応がダメダメなので、コンポジットモードも切ったほうが無難ですね。やはり高度な画像処理は旧型機だと難しい。

Pebble Timeが出た後も引き続いて旧Pebbleを使っている人も多いので、なるべく両方に対応させたほうがたくさんの人に使ってもらえるのでAplite版も頑張ってみましたが、ビルドはできるもののエミュレータで動かないのでちょっと無理かもしれませんねー。

検索してみると、Pebble Timeが出てからPebbleの方を買っている人って結構いるんですね。個人的には3DSが出てからDS LLを買うようなことだと思うんですが、それと同じ文脈で分からなくはないとはいえ、スペック的に段違いだからなあ。しかも下位互換。Pebble Steelのゴツいボディも悪く無いとは思いますが。

ただ今回カラフル路線を離れてモノクロームにしてみたら、確かに視認性は高いと思いました。Pebbleの方がTimeよりも白黒の階調が多くて羨ましかったりもします。でもIJN Fleetの時もそうですが、赤でインパクトがあるのとないのでは大違いかな～とも思います。個人的には。

本当はAB両対応にした方がダウンロード数は伸びるんですが、カラーで作りこむと白黒にするにはどこかに無理が出てしまうのが難しいところ。