読者です 読者をやめる 読者になる 読者になる

世界に通用するウォッチフェイスを!

Pebble

前回は日本語専用だったので、今回は世界に通用するものを作ってみました!

f:id:Red-Comet:20150823190555g:plain

おもしろ国旗でおなじみのシチリア島の旗をモチーフに、三脚巴を時計の針にしてみるというチャレンジ。
https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Sicilian_Flag.svg/800px-Sicilian_Flag.svg.png
シチリア - Wikipedia

24時間いつでもどこでもシチリア島の時間と気温を知ることができ、今いる場所の地名と気温とを比べることができるスグレモノ! 果たしてこのセンスは受け入れられるんだろうか。非常にドキドキしています(^_^;)

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

"I love Sicily"

製作メモ

見た目はネタですが制作にあたっては新しい知見も多く、意外と有意義でした。

Wikipediaの画像は.svgで提供されていることが多くて捗ります。Illustratorで縮小する際はそのままだとぼんやりしてしまうので、線の太さを太くしてメリハリをつけました。パーツの分割も簡単なので、パブリックドメインな画像を使って妙ちくりんなフェイスをワシワシと作っていけそうな予感がしますね。

CloudpebbleのC言語は時計専用の関数が入っているんですが、それを利用すれば画像を時計の針代わりにして回転させることなど造作も無いこと。

int32_t second_angle = TRIG_MAX_ANGLE * t->tm_sec / 60;
GPoint reg_center = GPoint(62,70);
graphics_draw_rotated_bitmap(ctx, reg_bitmap, reg_center, second_angle, center);

描画ではなく画像を回転させるために重要なのがreg_centerです。graphics_draw_rotated_bitmapでは、ここで指定した座標を中心に回転するからです。

f:id:Red-Comet:20150823191543p:plain:w360

画像を開いて足の付根の部分をクリックしたところですが、ステータスバーに「XY:(63,57)」と書かれています。回転の中心はもうちょっと下にあるので、何度か調整して(62,70)になりました。画像の回転はかなり汎用性が高い機能なので、もっと普通のウォッチフェイスを作るときにも役立ちそうです(^^)

あとはカスタム画面を追加しておまけ機能をつけて、2日ぐらいで作りました。ノリで作ったのでかなり楽しかったです。こういうのは勢いですね。どんどん作るよ!