Gear Watch Designerでウォッチフェイスを作ってみる。

SAMSUNG Gear向けのフリーソフトに
Gear Watch Designerというものがあります。

オリジナルのウォッチフェイスを作れるものなのですが
このソフトが中々に優秀で、GUIで非常に簡単ですし、凝ったことにもチャレンジ出来るので非常に楽しいです。

ただ、日本語のローカライズはされておらず、最初は若干の操作方法等が分かりづらかったので、若干解説してみようかなと思った次第です。

ちなみにインストールまでは下記サイトを参考にしました。
Javaとかをインストールしないといけないですね。

http://newgadget3mai.com/archives/1064268945-2.html

とりあえず自分は、ウォッチフェイスを新規作成する当たりからを
書いてみようかと思います。

■新規作成

とりあえず、ソフトを開くと下記のような新規作成ウィンドウが立ち上がります。

1.今回はゼロから作るので「NEW」を選択します。
 ちなみここでサンプルを選択すると、出来上がったものも見れるので
 一度サンプルを見てみるとより参考になるかもしれません。

2.対象となる端末(画面サイズ)の選択します。今回はGearS3向けに作るので
 それを選択します。サイズは縦横360pxです。

3.最後にプロジェクト名をきめます。

■■作成画面■■

プロジェクト作成が終わると、実際の作成画面になります。
下記のように、まったく日本語化されてないですが、シンプルなUIなので
そこまで難しい感じはありません。
(Adobe系のソフトウェアに近い印象)

ざっくりとよく使う機能の構成は下記のような感じです。

ステージ 実際に要素を配置していくステージです。
背景や針等をここに設置していきます。
メニュー 設置する「要素」を選択出来ます。
Background 背景といった静的要素
Index メモリ等の要素
WatchHand 分針といった針の要素
基本的な時・分・秒の他に
Batteryの針や曜日系の針、もっと進んでムーンフェーズ
といった要素の動きを設定する際は基本的にこれを選択します。
DesitalClock WatchHandはアナログな要素でしたが、こちらはデジタル表示です。
Image 背景とかぶるのですが、針等に関係の無いイメージ要素を設置する際に選択します。また、ジャイロセンサに対応したイメージのアニメーション(回転とか)っていうものもこちらに属します。
Text DesitalClockに近いですが、こちらはその他の要素の情報を返してくれるものです。例えばバッテリー残量や歩数計の数値等
Animation こちらも後述しますが、アニメーションPNGを取り込んで表示する事も出来ます。APNGを作成出来るのは限られていますがAdobeAnimate(旧Flash)とかなら書き出し出来ます。
Complication 出来合いの機能?という感じでしょうか。バッテリーサークルだったりステップ計とかでしょうか。自分でゼロから設定しようとすると結構時間がかかる要素が最初からサンプルで入っています。
プロパティ メニューから選択した「要素」の詳細な設定は
コチラの「プロパティ」から行います。
例えば、WatchHandで選択した要素が「時」なのか「分」なのか
といったような設定です。
タイムライン ここはモロFlashな感じですが、例えば時間(お昼とか)によって
表示するものを切り替えたりといった事を設定出来ます。
コンパイルメニュー 実際に作成したモノをプレビューさせたり
実際の時計に転送したりといった事を行うメニューです。

とりあえずデザインを起こしてみる

画面の大まかな説明が済んだ所で、デザインを起こしてみましょう。デザイン自体は書き出せればなんでも良いのですが、おおよそPhotoshopでの作業になると思います。
デザインの作成は特に説明する事はありませんが、気をつけなければいけないのは

サイズと中心に気を付ける事でしょうか。
円を書く動作が基本になるので、例えば、回転する中心点がずれたりしていると
間抜けな動きになってしまいます。

また、数値や要素の配置等も、デザインの段階できっちり計算して置かないと
上手くいかないと思います。

例えば、曜日を針で表す場合は360÷7で出た数字で確度をつけて行く
とかでしょうか。

デザインを起こし終えたら、動かす要素毎に書き出しましょう。
Photoshopにはアセット書き出しという機能があり、レイヤー毎に拡張子をつければ
レイヤー毎に書き出してくれる便利な機能があります。

文字盤・時針・分針・秒針という感じでレイヤーをフォルダ分けを行い
書き出しましょう。

※レイヤーで拡張子をつけ、ファイル>生成>画像アセットにチェック
で保存時に特定のフォルダに画像が自動で書き出されます。

実際に配置していく

まずは「Background」から文字盤を選択し、配置しましょう。
デザイン上できっちり図って起こしたならば、後はもう置くだけみたいな所はあります。

針の動きについて

時・分・秒こういった基本的なもの(WatchHand属性)は、上記画面の「Sync With」からMinutes、second等設定すればその周期で回転してくれます。

Sync with 何に同期して動く針か。
基本的な時・分・秒の他、曜日やバッテリー等、特殊な情報も
設定可
Time Zone タイムゾーンの設定。基本的に「Sync With Device」で問題無いと思いますが
例えば、2国間の表示とかをやりたい時に使うのかもしれません。
Outer Pivot どこを中心に回転するか。
対象となる要素をクリックした際に中心点をずらすことでも調整可
Pivot Angle 開始位置の確度
例えば1時の位置から始まる針にしたいなら30°等
Rotate たぶん一番ややこしい調整部分。
どの範囲でどんだけ動くかといった事をココで指定するのだけれど
算数苦手マンの自分なんで、結構ここで苦戦する。実際にプレビューしながら調整するのが良いか。
Direction 右回りか左回りか
start Value 始まりとなる値は何か?例えばバッテリーレベルならばここは0がスタート。
End Value 終わりとなる値は何か?バッテリーレベルならばここは100。
基本的に容易された値をそのまま使えば良いと思われますが
何か独自な事をしたい時はここも変更の必要があるかも。

とりあえずここまで。

とりあえずオーソドックスなデザインなら、background、Watchhand(時・分・秒)の透過PNGを準備すれば後はGUIで設定していけばいいだけです。
難しいのはムーンフェーズだったりバッテリー情報だったりを絡めた針の動きでしょうか。
また、最近のアップデートでついに天気情報も取り扱えるようになったみたいですがまだ試せていません。

難しい部分のTips等はまた時間を見つけて作りたい。