スキップしてメイン コンテンツに移動

Samsung Watch Face Studioでウォッチフェイスを作ってみた

 Samsung DeveloperにWatch Face Studioと言うツールがあって、WearOSのウォッチフェイスが作れるらしいので、ちょっと試しに作ってみました。



↓ココからダウンロードできます。ユーザガイドもあります。

 英語ですが自動翻訳の時代なので困らないでしょう。

Samsung Developer Watch face Studio

https://developer.samsung.com/watch-face-studio/overview.html


起動すると、作成済みのフェイスや、サンプルのフェイスが表示されます。

左側のNew Projectで新しいフェイスを作り始められます。


一通り作り終わった画面がコチラです。

左側に配置したコンポーネントがレイヤー表示されます。

コンポーネントは、画面の上部にある「+」マークの付いたAdd Componentからできます。


今回は追加しているコンポーネントを、レイヤーの下層から見ていきましょう。

最下層とその一つ上には、ショートカットを配置
12時と6時の場所に置きました。
このショートカットは、ウオッチやウオッチマネージャーのアプリから、割り当てる機能を設定できます。


ショートカットの上にフェイスを配置
なぜショートカットの上に配置しているかと言うと、ショートカットに割り当てたアイコンが表示されると邪魔なので、文字盤で隠すためです。


フェイスの上にたけちゃんの画像です。
ここにコントラストが高い画像を配置すると、針が見辛くなるんですが、それは下の方で解消する仕組みを入れました。
安いスマッチだと、アナログタイプのカスタムフェイスを作れないことが多いんですが、流石はSamsungです。アナログタイプにも対応できます。


たけちゃん画像の上にインデックスを配置
これで、画像の下にインデックスが隠れることなく、時刻が確認しやすくなりますね。


インデックスの上に針を配置します。
針は他のものに邪魔されたくないので、なるべく上位層に配置するのが良いかと思います。


針は、
・時針
・時針の影
・分針
・分針の影
・秒針
・秒針の影
があります。
私はカッコいい針を作るセンスもないし、たけちゃん画像が隠れるのも嫌なので、極細の針を作りました。
フェイスのサイズが、450px X 450px なので、針は、70px X 450pxのキャンバスで225pxを縦の中心(針の根本)にして作りました。

私は、本当はGarminのvivomove TRENDのような物理的は針があるのが好きなんです。何故かと言うと、針の影が出るからなんですよ。どんなに綺麗なデザインでも、針の影が無いと平面的で好きになれないんです。
で、今回のお試しでは、どうやって針の影を出すのかも試してみました。

各コンポーネントには、Inner Pivotというパラメータがあります。
これは、コンポーネントを回転させる場合の軸になるので、針と針の影の位置関係を考えて、ピボットをずらせばできそうでした。


分かりにくいと思いますが、上の画像は秒針、下の画像は秒針の影です。
で、右の中央当たりのInner Pivotの値を見てもらうと分かりますが、針と針の影で少しずらしています。フェイスの中心にも小さな○がありますが、針は中心、針の影は衷心より少しだけ右下になってます。これで、針の影は回転の際に少しだけ中心よりズレることで、影が文字盤に落ちているように見えますね。
ただ、私の針は細すぎるので、影のピボットをずらし過ぎると違和感が出てしまったので、ほんの少しだけ影の効果が出る程度のズレにしました。


そのほかに、バッテリーと歩数、未読件数を配置しました。
コレは、スモールテキストのコンポーネントを配置し、デフォルトの機能を割り当てています。機能を割り当てるんですが、バッテリーや未読数はアイコンの下に数値、歩数は数字だけなどあって、表示エリアの調整に手間取りました。
この割り当て機能は、スマッチやウオッチマネージャーアプリで後からカスタマイズも出来ました。




その上に、日付と曜日を配置しました。
丸い文字盤に合わせてカーブした配置にしました。右の下の方に「CARVED TEXT」というのがあって、コレを有効にするとカーブした配置が出来ました。
右の下の方に「Language」設定があって、Japaneseを選択すると、曜日は日本語表示されます。



最後に、AOD用の日付と曜日 & 針を配置
AOD用なので、普段は非表示です。各コンポーネントの右側の目玉(マウスを合わせると表示されます)をクリックすると表示と非表示が切替できます。



で、普段とAODの切り替えは、画面の左上にある「NORMAL」と「ALWAYS ON」の選択で出来ます。
AODにするとこんな感じです。普段用のコンポーネントは殆ど非表示にして、AOD用のコンポーネントを表示にしています。
普段用の針が明るいものなら、わざわざAOD用の針を配置する必要はないと思います。


因みに、画面の真ん中にあるデカい文字盤のエリアはあくまで編集用です。プレビューは右側の小さい文字盤の方です。


で、たけちゃん画像が主役過ぎて針が見辛い件ですが、ジャイロ機能を使って対処してみました。画面の右側にある「GYRO」ですね。
これは、時計の向きに応じてコンポーネントの表示(明るさやサイズ、方向など)を変化させられる機能です。
今回のジャイロの設定はたけちゃん画像のみに適用しています。設定の内容は下の画像を大きくして見てください。

大きな文字盤の右にあるプレビュータブにも「GYRO」があって、ジョイスティックを操作してプレビューできます。

ジョイスティックを上に倒すと、
・時計を12時を上にして文字盤を縦にした場合
・GYROの設定ではY-AXISのRangeが「0-」の方(下の方)

ジョイスティックを下に倒すと、
・時計を6時を上にして文字盤を縦にした場合
・GYROの設定ではY-AXISのRangeが「-0」の方(上の方)

ジョイスティックを右に倒すと、
・時計を3時を上にして文字盤を縦にした場合
・GYROの設定ではX-AXISのRangeが「-0」の方(上の方)

ジョイスティックを下に倒すと、
・時計を9時を上にして文字盤を縦にした場合
・GYROの設定ではX-AXISのRangeが「0-」の方(下の方)

コンポーネントの位置やサイズを変えるのは「Changing to」のパラメータを変更します。

私は、時計を少しだけ(30度)自分の方に向けた場合(6時を上にして文字盤を立てる)に、たけちゃんを薄くするようにしました。

ついでに、左右の傾きで、たけちゃん画像を拡大させてみました。


左右に傾いてたけちゃん画像が拡大された状態でも、自分の方に文字盤を向ければたけちゃんは薄くなるので時刻などは良く見えます。


出来たフェイスは、画面の右上にある「Run on Device」でスマッチに転送できます。

スマッチ側では、開発者向けオプションを有効にした状態で、


「ワイヤレスのデバッグ」メニューから


「ワイヤレスのデバッグ」を有効にします。
フェイスを編集しているPCと同じWiFiに接続されているのが前提です。


接続されると、「Run on Device」を押した後の画面にスマッチが表示されます。


送りたいスマッチを選択すると、勝手に転送処理をしてくれます。
完了すると、コンプリート!のメッセージが出ます。


転送が終わればスマッチで表示されます。カスタマイズも出来ます。


ジャイロで設定した効果で画面の文字も見やすいです。



また、ウォッチマネージャのアプリにも表示されます。


カスタマイズも出来ます。
因みに追加した針はカスタマイズの画面から選択できます。


お試しと言うことで、針の影も納得できるものではないし、配置したコンポーネントもテキトー感がありますが、私が欲しいスマッチに一歩近づきました。

因みに私が欲しいスマッチは、

・最下層の文字盤が液晶でフェイスデザインが変更できる
・文字盤の上に物理的な針が配置されている
・表面のガラスがタッチパネル対応の透明液晶で情報が表示される

と言うもので、電子ペーパーのフェイスを使っているフォッシルのようなスマッチの表面のガラスをスマートグラスのような液晶表示できるものにしたようなものです。
今のところ、そういったスマッチは売られていませんけどね。

今回はお試し的ではありますが、
・家用
・外出時用
・就業中用
・睡眠時用
の4種類を作りました。
Galaxyだとモードとルーチンでスマッチのフェイスを変更できるので、用途に合わせたショートカットの機能を割り当てしておいたり、寝てる間は秒針がないフェイスにしたりしてます。

コメント